长臂挖机出租东莞网站建设,做淘宝网站需要多大空间,网站打不开如何解决,聊城网站建设科技公司前端开发模块VUE-Element UI学习笔记 文章目录 前端开发模块VUE-Element UI学习笔记 1、Element UI 简介2、Element UI 安装3、Icon 图标4、Button 按钮5、Link 超链接6、Radio 单选框7、Checkbox 多选框8、Input 输入框9、Select 下拉框10、Switch 开关 1、Element UI 简介
基…前端开发模块VUE-Element UI学习笔记 文章目录 前端开发模块VUE-Element UI学习笔记 1、Element UI 简介2、Element UI 安装3、Icon 图标4、Button 按钮5、Link 超链接6、Radio 单选框7、Checkbox 多选框8、Input 输入框9、Select 下拉框10、Switch 开关 1、Element UI 简介
基于 Vue 的一套桌面端组件库提前封装好的 UI 模板方便开发者快速搭建一个网站前端界面。
官网https://element.eleme.cn/
2、Element UI 安装
首先创建 Vue 项目给项目安装 Element UI 插件
1、电脑上已经安装了 Vue 环境。
2、执行命令 vue ui
3、进入项目管理器
4、点击创建按钮 5、设置项目存放路径点击回车 6、点击按钮 7、输入工程名称点击下一步 8、选择手动配置项目点击下一步 9、进行功能配置点击下一步 10、开启 history mode点击创建项目 11、创建项目 12、等待项目创建成功 13、点击插件 14、点击添加插件 15、搜索框输入 element选中第一项点击安装 16、安装成功界面如下所示 17、启动项目如果安装成功会看到如下界面 3、Icon 图标
提供了一套常用的图标集合直接使用 i 标签结合 class 来使用
i classel-icon-iconName/iel-icon-iconName 为官网定义的图标名称直接去官网查找对应的图标修改 class 属性即可 4、Button 按钮
是 Element UI 提供的一组常用的操作按钮组件直接使用封装好的 el-button比如
el-button按钮/el-button基于 el-button 按钮可以使用 type、plain、round、circle 属性对按钮进行修饰。
type 设置按钮的样式
el-button默认按钮/el-button
el-button typeprimary主要按钮/el-button
el-button typesuccess成功按钮/el-button
el-button typeinfo信息按钮/el-button
el-button typewarning警告按钮/el-button
el-button typedanger危险按钮/el-buttonplain 可以减弱按钮的背景颜色效果
el-button plain默认按钮/el-button
el-button typeprimary plain主要按钮/el-button
el-button typesuccess plain成功按钮/el-button
el-button typeinfo plain信息按钮/el-button
el-button typewarning plain警告按钮/el-button
el-button typedanger plain危险按钮/el-buttonround 用来给按钮设置圆角
el-button round圆角按钮/el-button
el-button typeprimary round plain主要按钮/el-button
el-button typesuccess round成功按钮/el-button
el-button typeinfo round信息按钮/el-button
el-button typewarning round警告按钮/el-button
el-button typedanger round危险按钮/el-buttoncircle 将按钮设置为圆形
el-button circle默认按钮/el-button
el-button typeprimary circle主要按钮/el-button
el-button typeprimary circle iconel-icon-star-on/el-button
el-button typesuccess circle成功按钮/el-button
el-button typeinfo circle信息按钮/el-button
el-button typewarning circle警告按钮/el-button
el-button typedanger circle危险按钮/el-buttondisabled 设置按钮的可用状态
el-button typeprimary circle iconel-icon-star-on/el-button
el-button typeprimary circle iconel-icon-star-on disabled/el-buttonloading 属性可以给按钮设置”加载中“的效果
templatedivel-button typeprimary circle iconel-icon-star-on clicktest() :loadingloading/el-button/div
/templatescript
export default {name: Test,methods:{test(){this.loading truesetTimeout((){this.loading false}, 3000)}},data(){return{loading:false}}
}
/scriptsize 属性可以设置按钮的大小mediumsmallmini
el-button typeprimary sizemedium主要按钮/el-button
el-button typeprimary sizesmall主要按钮/el-button
el-button typeprimary sizemini主要按钮/el-button5、Link 超链接
文字超链接使用 el-link 标签来实现
el-link hrefhttps://element.eleme.cn/#/zh-CN/component/button target_blankElement UI/el-linkdisabled 设置超链接不可用
el-link disabled hrefhttps://element.eleme.cn/#/zh-CN/component/button target_blankElement UI/el-linkunderline 设置下划线
el-link :underlinefalse hrefhttps://element.eleme.cn/#/zh-CN/component/button target_blankElement UI/el-linkicon 给文字超链接设置图标
el-link :underlinefalse iconel-icon-phone hrefhttps://element.eleme.cn/#/zh-CN/component/button target_blankElement UI/el-link6、Radio 单选框
使用 el-radio 标签即可通过 v-mode 进行对象数据的绑定label 表示该单选框的值文本直接写入到标签内部即可。
templatedivel-radio v-modelradio label1选项1/el-radioel-radio v-modelradio label2选项2/el-radio/div
/templatescript
data(){return{underline:true,loading:false,radio: 1}}
/script change 绑定切换事件
el-radio v-modelradio label1 changechange选项1/el-radiochange(){console.log(当前radio的值, this.radio)
}7、Checkbox 多选框
使用 el-checkbox 标签来完成
templatedivel-checkbox :indeterminateisIndeterminate v-modelcheckAll changehandleCheckAllChange全选/el-checkboxdiv stylemargin: 15px 0;/divel-checkbox-group v-modelcheckedCities changehandleCheckedCitiesChangeel-checkbox v-forcity in cities :labelcity :keycity{{city}}/el-checkbox/el-checkbox-group/div
/templatescript
export default {name: Test,methods:{test(){this.loading truesetTimeout((){this.loading false}, 3000)},change(){console.log(当前radio的值, this.radio)},handleCheckAllChange(val) {this.checkedCities val ? this.cities : [];this.isIndeterminate false;},handleCheckedCitiesChange(value) {// 当前选中的数量let checkedCount value.length;this.checkAll checkedCount this.cities.length;this.isIndeterminate checkedCount 0 checkedCount this.cities.length;}},data(){return{underline:true,loading:false,radio: 1,checkAll: false,checkedCities: [上海, 北京],cities: [上海, 北京, 广州, 深圳],isIndeterminate: true}}
}
/script8、Input 输入框
templatedivel-input v-modelinput placeholder请输入内容/el-inputel-button typeprimary clickclick主要按钮/el-button/div
/templateclick(){this.input abc
},通过 size 属性修改输入框的尺寸large/medium/small/minisize 修改的是输入框的高度
templatedivel-input v-modelinput placeholder请输入内容 sizelarge/el-inputdiv stylemargin: 15px 0/divel-input v-modelinput placeholder请输入内容 sizemedium/el-inputdiv stylemargin: 15px 0/divel-input v-modelinput placeholder请输入内容 sizesmall/el-inputdiv stylemargin: 15px 0/divel-input v-modelinput placeholder请输入内容 sizemini/el-inputdiv stylemargin: 15px 0/div/div
/template修改宽度可以在外层嵌套一个 div通过修改 div 的宽度来实现输入框宽度的修改
templatediv stylewidth: 300pxel-input v-modelinput placeholder请输入内容 sizelarge/el-inputdiv stylemargin: 15px 0/divel-input v-modelinput placeholder请输入内容 sizemedium/el-inputdiv stylemargin: 15px 0/divel-input v-modelinput placeholder请输入内容 sizesmall/el-inputdiv stylemargin: 15px 0/divel-input v-modelinput placeholder请输入内容 sizemini/el-inputdiv stylemargin: 15px 0/div/div
/templateshow-password 属性设置可以切换显示隐藏的密码框
el-input v-modelinput placeholder请输入内容 sizelarge show-password/el-inputprefix-icon、suffix-icon 属性设置输入框首尾的图标
el-input v-modelinput placeholder请输入内容 sizelarge show-password prefix-iconel-icon-phone suffix-iconel-icon-phone-outline/el-inputmaxlength、minlength 限制输入框的字符长度
el-input v-modelinput placeholder请输入内容 sizemedium maxlength3 show-word-limit/el-input9、Select 下拉框
el-select/el-option 标签进行操作v-model 进行数据绑定label 进行文本的展示value 是当前选项的值。
templatediv stylewidth: 300pxel-select v-modelvalue placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectel-button clickclicktest/el-button/div
/templatescript
export default {name: Test,methods:{click(){console.log(this.value)}},data(){return{options: [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: 选项5}}
}
/scriptdisabled true禁用某个选项
templatediv stylewidth: 300pxel-select v-modelvalue placeholder请选择el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value:disableditem.disabled/el-option/el-selectel-button clickclicktest/el-button/div
/templatescript
export default {name: Test,methods:{click(){console.log(this.value)}},data(){return{options: [{value: 选项1,label: 黄金糕,disabled: true}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎,disabled: true}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: 选项5}}
}
/scriptchange 下拉框进行修改之后会自动触发该事件
templatediv stylewidth: 300pxel-select v-modelvalue placeholder请选择 changechangeel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value:disableditem.disabled/el-option/el-selectel-button clickclicktest/el-button/div
/templatescript
export default {name: Test,methods:{click(){console.log(this.value)},change(){console.log(当前选择的是this.value)}},data(){return{options: [{value: 选项1,label: 黄金糕,disabled: true}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎,disabled: true}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}],value: 选项5}}
}
/script10、Switch 开关
Switch 组件表示两种相互对立状态之间的切换开关el-switch 标签完成v-model 进行数据绑定boolean表示开/关的状态active-color 属性与 inactive-color 属性来设置开关的背景色。
el-switchv-modelvalueactive-color#13ce66inactive-color#ff4949
/el-switchvalue: trueactive-text 和 inactive-text 分别设置开/关对应的文本
el-switchv-modelvalueactive-color#13ce66active-text上架inactive-color#ff4949inactive-text下架
/el-switchvalue: truechange 事件进行开/关操作时触发该方法
el-switchv-modelvalueactive-color#13ce66active-text上架inactive-color#ff4949inactive-text下架changechange
/el-switchchange(){console.log(当前开关的状态是this.value)
}value: true
