1、element-ui组件用法

这里先补充一下安装依赖 npm i element-ui -S
main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

如果是按需安装 vue add element
y→Import on demand(按需)→zh-CN（语言）
生成的plugins/element.js文件下引入要用到的属性名比如

import Vue from 'vue';
import {Pagination,Dialog,
} from 'element-ui';Vue.use(Pagination);
Vue.use(Dialog);

组件用法

< label for=“password” >密码< /label > 增加或删除
css:
label { font-size: 20px; color: #fff; }
size调整大小 el-form :model=“ruleForm” status-icon :rules=“rules” ref=“loginForm” class=“login-form” size=“medium”
设置class定义元素样式 block块元素铺满整行

整行铺满元素分栏比如 “登录”和“注册” 各占一半
el-row :gutter=“20” 两个元素之间的间距为20px
el-col :span=“6” 单个元素宽度为6px
block铺满

2、表单验证（复制的默认样式）

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><!--prop="pass" 验证规则--><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input><!--v-model="ruleForm.pass" 绑定数据--></el-form-item><el-form-item label="确认密码" prop="checkPass"><!--prop="checkPass" 验证规则对应v-model="ruleForm.checkPass"--><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><!--prop="age" 验证规则对应v-model.number="ruleForm.age"--><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}}, 1000);};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}// 这里else是备用条件 如果设置的是邮箱密码用户验证格式可编译
/*** 过滤特殊字符export function stripscript(str) {var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{ }【】‘；：”“'。，、？]")var rs = "";for (var i = 0; i < str.length; i++) {rs = rs + str.substr(i, 1).replace(pattern, '');}return rs;
}
/*** 验证邮箱export function validateEmail(value){let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; return !reg.test(value) ? true : false;
}
/*** 验证密码 6至20位的字母+数字 export function validatePass(value){let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/;return !reg.test(value) ? true : false;
}
/*** 验证验证码export function validateVCode(value){let reg = /^[a-z0-9]{6}$/;return !reg.test(value) ? true : false;
}/*** 没有使用default时，可以同时声明多个export。* 文件 import 需要花括号。*/callback();// 给出反应 callback(new Error('用户名格式有误''密码有误''格式错误'等));}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {// 表单的数据 对应上面prop=”pass“ ”checkPass“ ”age“ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }// 这里是blur蓝色按钮 validatePass是在点击密码栏窗口外时触发// 也就是失去焦点后执行上面的var validatePass = (rule, value, callback) => {}“请输入密码”函数],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},// 下面是写函数的地方methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

v-model：

在表单控件或者组件上创建双向绑定
Input、select、textarea、component

3、图标引入

阿里图标举例https://www.iconfont.cn/
这里我们登陆后随便收藏
①利用网址
css中引入@import url(‘https://at.alicdn.com/t/font…css’);

②把网址内的源码粘贴到本地新建css文件夹
③用iconfont的下载至本地（不推荐更新后可能失效）
在 < template >< /template >中引入< i class=“iconfont icon-cold” >即可使用
其他：
http://www.wapadd.cn/icons/awesome/index.htm
http://www.fontawesome.com.cn/
使用方法同上不是vue项目也能使用单个html页面引入也可以
< link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” >
而且最强大的一个点就是矢量图标可以当作字体来设置样式大小颜色无论@import还是link引入不推荐外网图标网不好会出现不显示或乱码的情况

4、webpack目录配置指向

configureWebpack: (config) => {config.resolve = { // 配置解析别名extensions: ['.js', '.json', '.vue'],  // 自动添加文件名后缀alias: {'vue': 'vue/dist/vue.js','@': path.resolve(__dirname, './src'),'@c': path.resolve(__dirname, './src/components')}}},

5、export暴露方法

创建一个工具文件夹 tools.js

/*** 验证密码 6至20位的字母+数字 */
export function validatePass(value){let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/;return !reg.test(value) ? true : false;// 三元运算 相当与// if(!reg.test(value)){//       return true// }else{//      return false// }
}

import引用

import { validatePass } from '@/utils/tools';

data数据 data(){…}

     // 验证密码let validatePassword = (rule, value, callback) => {// 过滤后的数据ruleForm.password = stripscript(value);value = ruleForm.password;if (value === '') {callback(new Error("请输入密码"));} else if (validatePass(value)) {callback(new Error("密码为6至20位数字+字母"));} else {callback();}};

Vue（四）：element-ui组件用法、表单验证、图标引入、webpack目录配置指向、export暴露方法相关推荐

Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
关于微信小程序中uView中通过packer选择器修改表单无法触发form组件的表单验证的问题
uView中使用form表单组件,如果form-item为正常的input组件,在输入和修改form-item绑定的变量的时候,都会触发form表单的表单验证事件但是如果form-item中不是in ...
tornado 自定义WEB框架、与Tyrion组件做表单验证
一:目录结构: app.py文件中写程序逻辑,路由.表单验证(使用Tyrion 开源组件完成 ) import Tyrion import tornado.web import tornado.iol ...
uview组件库表单验证，验证对象中的对象
一.Form组件绑定model参数 model参数为一个对象,对象属性为需要验证的变量名. 由于表单验证和绑定表单规则时,需要通过ref操作,故这里需要给form组件声明ref="uForm ...
element UI 组件封装--搜索表单（含插槽和内嵌组件）
组件封装–搜索表单 searchForm.vue 可根据需要,参考姓名和工作自行增加更多常用的默认搜索项 <template><div style="padding: 30 ...
前端学习（3013）：vue+element今日头条管理--表单验证基本使用
前端学习（3014）：vue+element今日头条管理--表单验证基本使用2
element-ui组件自定义表单验证(验证手机号码和邮箱为例)
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" la ...

Vue（四）：element-ui组件用法、表单验证、图标引入、webpack目录配置指向、export暴露方法

目录