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

最新推荐文章于 2025-03-19 10:09:17 发布

原创最新推荐文章于 2025-03-19 10:09:17 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #webpack #ui #elementui #vscode

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用Element-UI组件，包括基础组件的引入和自定义样式，重点讲解了表单验证的实现方式，提供了详细的验证规则示例。此外，还涵盖了图标引入的方法，推荐了几个图标库，并分享了Webpack的目录配置和模块别名设置。最后，展示了如何在工具文件中导出和使用验证方法。

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();
        }
      };