安装
- npm 安装命令
npm i element-ui -S
- main.js
- 引入
import ElementUi from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'
- 注册
Vue.use(ElementUI);
- 引入
高频组件
<el-row>行组件- 单独占一行的
:gutter="像素大小(不加单位)"设置间距type="flex"开启flex布局justify="值"控制排版方式- start 左对齐
- center 居中
- end 右对齐
- space-between 左右没有间距，中间等分间距
- space-around 每个栅格的左右等分间距
<el-col>是一列- 行下面的列 ( 用来配置栅格大小 )
通过
:span="占用栅格数"设置宽度 ```vue
{{ scope.$index }}
{{ scope.row }}
<a name="sClXF"></a>
### 表单校验
- `<el-from>`组件
- `:rules="data变量"`属性传入校验规则
- 校验规则变量名 : {校验字段名: [{校验规则}]}
- `required: true` 表示必填项
- `message: '提示文案'` 不满足要求，显示的提示文案
- `trigger: '触发方式'` 指定格式检查的触发方式
- blur 失去焦点检查
- change 表单值变化就检查
- `pattern: 正则规则` 正则校验
- `min：数字` 最小长度
- `max：数字` 最大长度
- `<el-from-item>` 组件
- `prop="字段名"`属性设置为需要校验的字段名
<a name="MLZFn"></a>
#### validate方法
- `<el-from>`提供的方法 `validate`对整个表单进行校验
- 通过`$refs`获取组件实例
- `el-from` 绑定`ref="值"`
- `this.$refs.ref值`获取到组件实例
- `this.$refs.ref值.validate( (isOk) => {} )`
- 会传递一个布尔值给回调函数
- 校验通过传回true
- 校验失败传回false
- async await 写法
`async 函数名 () {`<br />`try { `<br />`await this.$refs.ref值.validate()`<br />`// 校验通过代码会执行到这里，校验失败会抛出错误`<br />`} catch (error) {`<br />`// 捕获错误`<br />`}`<br />`}`
<a name="IHwls"></a>
#### resetFields方法
- `c`
- 调用后会重置表单回默认值，（清空表单）
```vue
<template>
<div>
<el-form
:model="fromData"
:rules="rules"
label-width="80px"
hide-required-asterisk
ref="form"
>
<el-form-item label="手机号" prop="telephone">
<el-input
v-model="fromData.telephone"
placeholder="请输入手机号"
></el-input>
</el-form-item>
<el-form-item label="验证码" prop="cvv">
<el-input v-model="fromData.cvv" placeholder="请输入验证码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
fromData: {
telephone: null,
cvv: null
},
rules: {
telephone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
message: '请输入正确的手机号',
trigger: 'change'
}
],
cvv: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ min: 6, max: 6, message: '长度为6个字符', trigger: 'change' }
]
},
}
},
methods: {
async login () {
// 写法1
// this.$refs.form.validate(isOk => {
// if (isOk) {
// console.log('校验成功', this.fromData)
// } else {
// console.log('校验失败')
// }
// })
// 写法2
try {
await this.$refs.form.validate()
console.log('校验成功', this.fromData)
} catch (error) {
console.log('校验失败', error)
}
},
reset () {
this.$refs.form.resetFields()
}
}
}
</script>
<style lang="less" scoped>
</style>
自定义函数校验
- 在校验规则中使用validator属性绑定一个函数进行自定义逻辑校验
{validator:函数名,trigger:'blur'}
- 在data中定义一个函数
const 函数名 = (rule, value, callback) => {校验逻辑}- 三个参数
- rule 校验规则
- value 当前使用校验函数字段的值
- callback(函数)
- 校验成功调用: callback (new Error(‘错误提示信息’))
- 校验成功调用: callback ()
data () { // 自定义函数校验 const validatorSame = (rule, value, callback) => { if (value !== this.form.password) { callback(new Error('请输入相同的密码')) } else { callback() } } return { form: { username: '', password: '', repassword: '' }, rules: { // 用户名校验 username: [ // 非空校验 { required: true, message: '请输入用户名', trigger: 'blur' }, // 长度校验 1-10位 { pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名必须是1-10的字母数字', trigger: 'blur' } ], // 密码校验 password: [ // 非空校验 { required: true, message: '请输入密码', trigger: 'blur' }, // 长度校验 6-15位 { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' } ], // 确认密码校验 repassword: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { pattern: /^\S{6,15}$/, message: '密码必须是6-15的非空字符', trigger: 'blur' }, { validator: validatorSame, trigger: 'blur' } ] } } },
- 三个参数
Dialog对话框
<el-dialog>:visble.sync=""布尔值控制弹层是否显示，一般绑定变量- .sync修饰符，可以同步修改父组件的数据 (vue3不支持)
@close="函数"点击 X 关闭弹层就会执行绑定的函数 ```vue打开弹窗 取消 确认
---
<a name="hf2ow"></a>
## Menu菜单
- `<el-menu router>`
- router属性，表示开启跳转路由
- router是简写，全写`:router="true"`
- `:unique-opened="true"`
- true 同一时刻只能打开一个子菜单
- false 就可以全部打开
- `<el-menu-item index="/路由地址">`
- index属性，指定跳转的地址
---
<a name="JbgDF"></a>
# Api
<a name="H75pF"></a>
## $message 消息提示框
- 通过`this.$message.状态单词(提示信息)`调用不同的提示框
- 状态单词
- success 成功提示框 绿色
- warning 警告提示框 橙色
- error 错误提示框 红色
- info 消息提示框 灰色（默认值）
```javascript
async onSubmit () {
try {
await this.$refs.form.validate()
// console.log(this.form)
const { data } = await regApi(this.form)
// console.log(data)
if (data.code === 0) {
this.$message.success(data.message)
this.$router.push('/login')
} else {
this.$message.error(data.message)
}
} catch (error) {
console.log('校验失败')
}
}
$confirm 弹窗提示
this.$confirm('提示内容','标题',{confirmButtonText:'确定',
cancelButtonText:'取消' }).then(()=>{// 点击确定执行的代码}).catch(()=>{// 点击取消执行的代码})
$alert
this.$alert('提示内容', '标题',{配置}).then(()=>{点击确定会执行这里})
showClose: false不显示右上角x号
若有收获，就点个赞吧
0 人点赞
