该教程仅供参考,因为是笔者瞎jb乱搞的
一、 起步
1. 安装
npm i element-ui -S
2. 导包
在Vue
脚手架里使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3. 使用
常用功能
3.1 input 输入框
<el-input placeholder="请输入用户名" v-model="username"></el-input>
<script>
export default {
data() {
return {
username: ''
}
}
}
</script>
3.2 layout布局
- 一行分为24份,
- 行是
el-row
, - 列是
el-col
, - 设置比例用:
:span='数值'
<el-row>
<el-col :span="16">
<div class="content"></div>
</el-col>
<el-col :span="8">
<div class="content"></div>
</el-col>
</el-row>
3.3 Link 文字链接
el-link
文字链接,href
设置地址,type
设置颜色,- 内容直接写在标签中即可。
<!-- 蓝色 -->
<el-link href="https://www.lzznb.cn" type="primary">杂念屋</el-link>
3.4 Checkbox 多选框
el-checkbox
,v-model
绑定布尔值,选择是true,否则是false,- 内容直接写在标签中基本。
<el-checkbox v-model="checked">是否同意用户协议</el-checkbox>
<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
3.5 Button 按钮
el-button
,@click
绑定点击事件,type
设置颜色,- 内容直接卸载标签内部
<el-button type="primary" @click="doClick">按钮</el-button>
3.6 Form 表单
-
el-form
容器 -
el-form-item
每一行 -
:model
表单绑定的数据 -
label-width
左侧的间隙 -
内部设置表单元素即可
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<!-- 每一行的容器 -->
<el-form-item label="用户名">
<!-- 内容 -->
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data:{
form: {
name:''
}
}
})
/script>
3.7 icon 图标
<i class="el-icon-edit"></i>
<el-button icon="el-icon-edit">编辑</el-button>
<el-input prefix-icon="el-icon-edit">编辑</el-input>
- 直接在标签里面添加
class
prefix-icon
:在开头添加字体图标icon
添加字体图标
3.8 Message 消息提示
<el-button :plain="true" @click="open">成功</el-button>
<script>
new Vue({
methods: {
open(){
this.$message({
message: '恭喜你,这是一条成功消息',
type: 'success'
});
}
}
})
/script>
二、实战
既然已经了解ElementUI
框架的使用,接下来要写页面了。
案例:用户登录页面
示例图:
功能分析:
- 手机账号输入框,开头有字体图标
- 密码输入框,开头有字体图标
- 验证码输入框,开头有字体图标,右侧有验证码(图片)
- 用户协议
- 多选按钮
- 链接标签
- 开头有字体图标
- 登录按钮和注册按钮
0.基本架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用户登录</title>
<style>
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form class="form">
</el-form>
</div>
<script>
new Vue({
el: '#app',
data: {
},
})
</script>
</body>
</html>
1. 手机账号输入框
<!-- 手机号 -->
<el-form-item prop="phone">
<el-input prefix-icon="el-icon-user" placeholder="请输入手机号" v-model="form.phone"></el-input>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:''
}
},
})
</script>
注意点:
1. 字体图标根据官方文档适配
2. 密码输入框
<!-- 密码框 -->
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="form.password" show-password></el-input>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
}
},
})
</script>
注意点:
1. show-password
属性:可切换显示
或隐藏
密码框
3. 验证码输入框
<!-- 验证码框 -->
<el-form-item prop="code">
<el-row>
<!-- 左侧 -->
<el-col :span="17">
<el-input prefix-icon="el-icon-key" placeholder="请输入验证码" v-model="form.code"></el-input></el-col>
<!-- 右侧 -->
<el-col :span="7">
<!-- 验证码图片 -->
<img src="验证码图片" alt=""/>
</el-col>
</el-row>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
code:'',
}
},
})
</script>
4.用户协议
<!-- 用户协议 -->
<el-form-item prop="checked">
<el-checkbox v-model="form.checked">
我已阅读并同意
<el-link type="primary">用户协议</el-link>
和
<el-link type="primary">隐私条款</el-link>
</el-checkbox>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
code:'',
checked:[]
}
},
})
</script>
注意点:
1. 文字链接设置`type`为`primary`才是蓝色
5.登录按钮和注册按钮
<!-- 底部按钮区域 -->
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button type="primary">注册</el-button>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
code:'',
checked:[]
}
},
methods:{
onSubmit (){
}
}
})
</script>
6. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用户登录</title>
<style>
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form class="form">
<!-- 手机号 -->
<el-form-item prop="phone">
<el-input prefix-icon="el-icon-user" placeholder="请输入手机号" v-model="form.phone"></el-input>
</el-form-item>
<!-- 密码框 -->
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="form.password" show-password>
</el-input>
</el-form-item>
<!-- 验证码框 -->
<el-form-item prop="code">
<el-row>
<!-- 左侧 -->
<el-col :span="17">
<el-input prefix-icon="el-icon-key" placeholder="请输入验证码" v-model="form.code"></el-input>
</el-col>
<!-- 右侧 -->
<el-col :span="7">
<!-- 验证码图片 -->
<img src="" alt="" />
</el-col>
</el-row>
</el-form-item>
<!-- 用户协议 -->
<el-form-item prop="checked">
<el-checkbox v-model="form.checked">
我已阅读并同意
<el-link type="primary">用户协议</el-link>
和
<el-link type="primary">隐私条款</el-link>
</el-checkbox>
</el-form-item>
<!-- 底部按钮区域 -->
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button type="primary">注册</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data: {
form: {
phone: '',
password: '',
code: '',
checked: []
}
},
})
</script>
</body>
</html>
做完发现是不是超级简单?
接下来搞点有难度的!
三、实战:表单校验
正常的用户登录页面里面的表单,都是需要进行数据格式
校验的。
- 好处:
- 防止用户误操作
- 提示用户体验
- 减少服务器的压力
- 增加服务器的安全性(防止暴力破解)
- 坏处:
- 你猜??猜不出来就是没有。
案例:用户登录验证
接着上一个案例来改动的。
需求:
- 手机:规定中国大陆的号码,长度是11
- 密码:最小长度6,最大长度12
- 验证码:长度为4,不能为空
- 用户协议:是否勾选
0. 基本架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用户登录</title>
<style>
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" :rules="formRule">
</el-form>
</div>
<script>
new Vue({
el: '#app',
data: {
},
})
</script>
</body>
</html>
注意点:
el-form:
:model
绑定数据:rules:
绑定校验规则
1. 手机号验证
<!-- 手机号 -->
<el-form-item prop="phone">
<el-input prefix-icon="el-icon-user" placeholder="请输入手机号" v-model="form.phone"></el-input>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
// 表单绑定的数据
form:{
phone:''
},
// 校验规则
formRule:{
phone: [
{
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'
}
]
}
},
})
</script>
注意点:
-
el-form-item
prop
设置校验的属性
-
校验规则:
required
是否必须要message
提示消息min
最小max
最大trigger
触发方式blur
:失去焦点change
:数据改变触发
pattern
- 正则表达式
2. 密码验证
<!-- 密码框 -->
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="form.password" show-password></el-input>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
},
formRule:{
// 密码
password: [
{
required: true,
message: '密码不能为空',
trigger: 'blur'
},
{
min: 6,
max: 12,
message: '密码的长度为 6 - 12',
trigger: 'change'
}
],
}
},
})
</script>
3. 验证码验证
<!-- 验证码框 -->
<el-form-item prop="code">
<el-row>
<!-- 左侧 -->
<el-col :span="17">
<el-input prefix-icon="el-icon-key" placeholder="请输入验证码" v-model="form.code"></el-input></el-col>
<!-- 右侧 -->
<el-col :span="7">
<!-- 验证码图片 -->
<img src="验证码图片" alt=""/>
</el-col>
</el-row>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
code: '',
},
formRule:{
// 验证码
code: [
{
required: true,
message: '验证码不能为空',
trigger: 'blur'
},
{
min: 4,
max: 4,
message: '验证码的长度为 4',
trigger: 'change'
}
],
}
},
})
</script>
4. 用户协议
<!-- 用户协议 -->
<el-form-item prop="checked">
<el-checkbox v-model="form.checked">
我已阅读并同意
<el-link type="primary">用户协议</el-link>
和
<el-link type="primary">隐私条款</el-link>
</el-checkbox>
</el-form-item>
<script>
new Vue({
el: '#app',
data: {
form:{
phone:'',
password:'',
code: '',
checked: [],
},
formRule:{
// 是否勾选
checked: [
{
required: true,
message: '你必须同意',
trigger: 'change'
}
]
}
},
})
</script>
5. 登录按钮
注册按钮暂时没写
<!-- 底部按钮区域 -->
<el-form-item>
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button type="primary">注册</el-button>
</el-form-item>
<script>
new Vue({
el: '#app',
methods:{
onSubmit (){
this.$refs.ruleForm.validate(valid => {
if (valid) {
alert('登录成功!')
}else {
alert('登录失败')
return false
}
}
}
}
})
</script>
注意点:
this.$refs.ruleForm
获取到的是el-form
el-form
需要设置ref
属性
validate
是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promise
如果跟着做,那就恭喜你!ElementUI入门成功!
Comments | NOTHING