基本使用
https://element.eleme.cn/#/zh-CN/component/installation
现在的前端开发更多的是关注逻辑，很少关注样式，因为ui框架提供给我们足够多的ui组件
我们学习vue使用ui框架，更多的是element-ui和iview-ui
如何使用ui框架，我们从element-ui入手
首先我们要安装element-ui框架的依赖
npm i element-ui -S
- 第一步要在main.js中引入element-ui
- 第二步use使用
- 第三步要引入index.css文件
1 import Vue from 'vue' 2 // 相对路径引入的App.vue文件 3 import App from './App.vue' 4 // 引入ui框架 5 import elementUi from 'element-ui' 6 //引入css 7 import 'element-ui/lib/theme-chalk/index.css' 8 //使用element-ui 9 Vue.use(elementUi) 10 new Vue({ 11 // 渲染节点 12 render: h => h(App), 13 }).$mount('#app')
然后我们就可以在全局使用element-ui
App.vue文件
1 <template> 2 <div> 3 <el-input v-model="input" placeholder="请输入内容"></el-input> 4 </div> 5 </template> 6 <script> 7 export default { 8 } 9 </script> 10 <style lang="scss" scoped> 11 </style>
相关的组件css样式位置：node_modules/element-ui/lib/theme-chalk，里面有所有的css样式。
如何正确使用ui框架
以CheckBox组件为例
首先提供给我们多种样式进行选择
其次是当前的组件可用的属性
最后是当前的组件可用的事件监听
总结：
三步走，第一步先去找组件，第二步找对应的需要的样式状态，最后一步设置需要的属性和事件（组件提供的可用的事件和属性）
Form表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
如何进行校验
首先要设置对应的rules规则
1 rules: { 2 name: [{ 3 required: true, 4 message: '请输入活动名称', 5 trigger: 'blur' 6 }, 7 { 8 min: 3, 9 max: 5, 10 message: '长度在 3 到 5 个字符', 11 trigger: 'blur' 12 } 13 ], 14 region: [{ 15 required: true, 16 message: '请选择活动区域', 17 trigger: 'change' 18 }], 19 date1: [{ 20 type: 'date', 21 required: true, 22 message: '请选择日期', 23 trigger: 'change' 24 }], 25 date2: [{ 26 type: 'date', 27 required: true, 28 message: '请选择时间', 29 trigger: 'change' 30 }], 31 type: [{ 32 type: 'array', 33 required: true, 34 message: '请至少选择一个活动性质', 35 trigger: 'change' 36 }] 37 }
然后在我们的el-form组件上添加rules属性
1 <el-form ref="formName" :rules="rules" label-width="80px">
第三步要在我们的el-form组件上添加model属性
model属性接受的是一个对象，内容就是要和内部表单元素v-model绑定属性
1 form: { 2 name: '', 3 region: '', 4 date1: '', 5 date2: '', 6 delivery: false, 7 type: [], 8 resource: '', 9 desc: '' 10 }
1 <el-form ref="formName" :model="form" :rules="rules" label-width="80px">
第三步在对应的需要校验的表单元素上添加对应prop属性，注意三者统一，rules规则里面的属性和prop和v-model的属性必须都一样
1 <div class='info-box'> 2 <el-form ref="formName" :model="form" :rules="rules" label-width="80px"> 3 <el-form-item label="活动名称" prop='name'> 4 <el-input v-model="form.name"></el-input> 5 </el-form-item> 6 <el-form-item label="活动区域" prop='region'> 7 <el-select v-model="form.region" placeholder="请选择活动区域"> 8 <el-option label="区域一" value="shanghai"></el-option> 9 <el-option label="区域二" value="beijing"></el-option> 10 </el-select> 11 </el-form-item> 12 <el-form-item label="活动时间" prop='date1'> 13 <el-col :span="11"> 14 <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> 15 </el-col> 16 <el-col class="line" :span="2">-</el-col> 17 <el-col :span="11"> 18 <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> 19 </el-col> 20 </el-form-item> 21 <el-form-item label="即时配送"> 22 <el-switch v-model="form.delivery"></el-switch> 23 </el-form-item> 24 <el-form-item label="活动性质" prop='type'> 25 <el-checkbox-group v-model="form.type"> 26 <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox> 27 <el-checkbox label="地推活动" name="type"></el-checkbox> 28 <el-checkbox label="线下主题活动" name="type"></el-checkbox> 29 <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> 30 </el-checkbox-group> 31 </el-form-item> 32 <el-form-item label="特殊资源" prop='resource'> 33 <el-radio-group v-model="form.resource"> 34 <el-radio label="线上品牌商赞助"></el-radio> 35 <el-radio label="线下场地免费"></el-radio> 36 </el-radio-group> 37 </el-form-item> 38 <el-form-item label="活动形式" prop='desc'> 39 <el-input type="textarea" v-model="form.desc"></el-input> 40 </el-form-item> 41 <el-form-item> 42 <el-button type="primary" @click="submitForm">立即创建</el-button> 43 <el-button>取消</el-button> 44 </el-form-item> 45 </el-form> 46 </div>
最后的设置提交校验
1 methods: { 2 submitForm() { 3 // refs选择的是被校验的表单from内部的表单，回调函数中valid是一个布尔值，如果是true则代表所有的表单元素都通过了校验，如果有一个没有通过校验，会返回false 4 this.$refs['formName'].validate((valid) => { 5 if (valid) { 6 alert('submit!'); 7 } else { 8 console.log('error submit!!'); 9 return false; 10 } 11 }); 12 }, 13 }
如果加上校验规则的表单元素会有红色星号
提交时如果没有通过
我们的表单校验不仅仅只能进行必填校验，还有自定义校验
比如我们的name属性校验
1 name: [{ 2 required: true, 3 message: '请输入活动名称', 4 trigger: 'blur' 5 }, 6 { 7 validator: validatePass, 8 trigger: 'blur' 9 } 10 ]
validator的值validatePass是一个函数
1 const validatePass = function (rule, value, callback) { 2 if (value.length !== 11) { 3 return callback(new Error("请输入正确的手机号")) 4 } 5 }
rule返回的是一个json，内部是校验的一些信息
vlaue返回的是输入的文本内容
callback是回调函数
一个表单元素可以设置一个或者多个校验规则，第一个参数都是关于校验的，最后一个参数trigger指的是触发方式有两种，分别是blur和change，blur用于输入框指的是当光标失去焦点的时候触发，change是当内容进行改变的时候触发。
Table表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作
表格是组合el-table和el-table-column的组合
data属性是必要属性，接收的是对应的需要加载显示的table数据
table接收几个必要属性
data属性时必要属性，接收的是对应的需要加载显示的table数据
1 <template> 2 <div> 3 <el-table :data="tableData" style="width:100%"> 4 <el-table-column prop="date" label="日期" width="180"> 5 </el-table-column> 6 <el-table-column prop="name" label="姓名" width="180"> 7 </el-table-column> 8 <el-table-column prop="address" label="地址"> 9 </el-table-column> 10 </el-table> 11 </div> 12 </template>
内部是el-table-column组件，该组件上有几个必要的属性
- prop属性：需要加载的tableData中的json属性值
- label属性：显示的表头名称
- width：当前列的宽度
1 data(){ 2 return { 3 tableData:[ 4 { 5 date: '2016-05-02', 6 name: '王小虎', 7 address: '上海市普陀区金沙江路 1518 弄' 8 }, 9 { 10 date: '2016-05-02', 11 name: '王小虎', 12 address: '上海市普陀区金沙江路 1518 弄' 13 }, 14 ] 15 } 16 }
------------恢复内容结束------------
