【不如看官方文档系列】のElementUI轻度使用

当前位置: Home » 前端 » ElementUI » 【不如看官方文档系列】のElementUI轻度使用
一、 起步 - HackMD

该教程仅供参考，因为是笔者瞎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布局

  1. 一行分为24份，
  2. 行是el-row，
  3. 列是el-col，
  4. 设置比例用：: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>
  1. el-link文字链接，
  2. href设置地址，
  3. type设置颜色，
  4. 内容直接写在标签中即可。
<!-- 蓝色 -->
<el-link href="https://www.lzznb.cn" type="primary">杂念屋</el-link>

3.4 Checkbox 多选框

  1. el-checkbox，
  2. v-model绑定布尔值，选择是true，否则是false，
  3. 内容直接写在标签中基本。
<el-checkbox v-model="checked">是否同意用户协议</el-checkbox>
<script>
    new Vue({
    el: '#app',
    data: {
        checked: false
    }
})
</script>

3.5 Button 按钮

  1. el-button，
  2. @click绑定点击事件，
  3. type设置颜色，
  4. 内容直接卸载标签内部
<el-button type="primary" @click="doClick">按钮</el-button>

3.6 Form 表单

  1. el-form容器

  2. el-form-item每一行

  3. :model表单绑定的数据

  4. label-width左侧的间隙

  5. 内部设置表单元素即可

<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>
  1. 直接在标签里面添加class
  2. prefix-icon：在开头添加字体图标
  3. icon添加字体图标

3.8 Message 消息提示

<el-button :plain="true" @click="open">成功</el-button>
<script>
new Vue({
    methods: {
        open(){
          this.$message({
              message: '恭喜你，这是一条成功消息',
              type: 'success'
        });
        }
    }
})
/script>

二、实战

既然已经了解ElementUI框架的使用，接下来要写页面了。

案例：用户登录页面

示例图：

1605099800957

功能分析：

  1. 手机账号输入框，开头有字体图标
  2. 密码输入框，开头有字体图标
  3. 验证码输入框，开头有字体图标，右侧有验证码(图片)
  4. 用户协议
    1. 多选按钮
    2. 链接标签
    3. 开头有字体图标
  5. 登录按钮和注册按钮

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>

做完发现是不是超级简单？

接下来搞点有难度的！

三、实战：表单校验

正常的用户登录页面里面的表单，都是需要进行数据格式校验的。

  • 好处：
    • 防止用户误操作
    • 提示用户体验
    • 减少服务器的压力
    • 增加服务器的安全性(防止暴力破解)
  • 坏处：
    • 你猜？？猜不出来就是没有。

案例：用户登录验证

接着上一个案例来改动的。

需求：

  1. 手机：规定中国大陆的号码，长度是11
  2. 密码：最小长度6，最大长度12
  3. 验证码：长度为4，不能为空
  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>

注意点：

  1. el-form:
    1. :model绑定数据
    2. :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>

注意点：

  1. el-form-item

    1. prop设置校验的属性

  2. 校验规则:

    • 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>

注意点：

  1. this.$refs.ruleForm获取到的是el-form
    1. el-form需要设置ref属性
  2. validate是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

如果跟着做，那就恭喜你！ElementUI入门成功！

声明：杂念屋|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - 【不如看官方文档系列】のElementUI轻度使用

自觉渺小而读书