组件库的使用注意

目录

element-ui

表单自定义规则

简单的验证写法

表单里嵌套表格时的prop验证

设置可以为空，但是输入必须符合规则

表格的内容插槽

分页的注意事项

下拉菜单

图标

tree树形控件

级联选择器

动态编辑的Tag标签

导入与下载模块布局

弹框内的时间选择器遇到的问题

文件导出

vant-ui

rem适配

tab标签页

checkbox的使用

Eacharts图表

引入

基本概念

堆叠面积图

---

element-ui

表单自定义规则

1 在表单上定义ref表单验证与每项的一个验证规则

  
    

  
 
    提交
    重置
 

2 在vue的data数据中，自定义验证的正则，可以写在return之外

data(){
   // 自定义邮箱规则,可以写在return之外
    var checkEmail = (rule, value, callback) => {
      const regEmail = /^\w+@\w+(\.\w+)+$/
      if (regEmail.test(value)) {
        // 合法邮箱
        return callback()
      }
      callback(new Error('请输入合法邮箱'))
    }

 return{}
}

3 在data的return中，定义验证

data(){
  return{
    email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
       ],
 }
}

4 提交时确认是否通过

methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          //valid为false,表示验证没有通过
          if (!valid) return
        });
   }

简单的验证写法

// 此时el-form 可省略 rules 值

表单里嵌套表格时的prop验证

html

函数指向当前行的值

// 推荐写在计算属性中
computed: {
  organizationProps() {
     return (index, prop) => {
     // 下面的数据，为对应的那个数组
       return `organization_structure.${index}.${prop}`;
     };
  },
}

设置可以为空，但是输入必须符合规则

rules规则定义

rules: {
     applicantTels: [
    //   false为非必传值       自定义验证规则         触发方式
        { required: false, validator: checkPhone, trigger: "blur" },
     ],
}

自定义验证规则

// 推荐写在export default之上
const checkPhone = (rule, value, callback) => {
  if (value) {
    // 判断当输入的有值时，才校验
    if (!/^1[3456789]\d{9}$/.test(value)) {
      callback(new Error("手机号格式不正确"));
    } else {
      callback(); // 注意这里要回调一下，不然提交不了
    }
  } else {
    callback();
  }
};

注意：如果是一开始就有的验证规则，可以简单一点，直接设置type值就可以了

 email: [
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
       ],

prop的type类型有

string：必须是类型string。
number：必须是类型number。
boolean：必须是类型boolean。
method：必须是类型function。
regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
integer：必须是类型number和整数。
float：必须是类型number和浮点数。
array：必须是由…确定的数组Array.isArray。
object：必须是类型object而不是Array.isArray。
enum：价值必须存在于enum。
date：值必须有效，由确定 Date
url：必须是类型url。
hex：必须是类型hex。
email：必须是类型email。

表格的内容插槽

 V2   

              scope.row是当前行的数据   scope.$index是当前的下标

  V3    

              scope.row是当前行的数据   scope.$index是当前的下标

想要使用索引，只需要将prop更改为type="index"即可

分页的注意事项

@current-change传递当前页码，默认为1

事件里自带一个value参数，是当前的页码

下拉菜单

el-select  需注意使用一个value变量接收才能显示

图标

v3的图标要单独引入，不然不会显示

import { Edit } from "@element-plus/icons";

tree树形控件

请求获取了数据，想做到以下的效果

布局代码如下

所需变量

      //   渲染的数据
      powerData: [],
      //   权限弹框的显示隐藏
      show: false,
      //   树形选择的参数  具体数据按照数据属性
      treeProps: {
        label: "authName",    // 即全选部分为数据的对应属性
        children: "children"  // 全选组为数据的对应属性
      }

想要拿到选中与半选中的数据  根据id

    setPower() {
// 获取选中的权限id  上面设置的node-key必须为id 获取到的是一个数组
      let arr = this.$refs.tree.getCheckedKeys();
// 获取半选中的权限id  上面设置的node-key必须为id 获取到的是一个数组
      let arr1 = this.$refs.tree.getHalfCheckedKeys
       
    }

默认选中  tree控件要求，默认选中的id,只需要最后一层的id

利用递归遍历，拿到最后一层的id

 // 封装递归遍历
    forUser(data, arr) {
      if (!data.children) {
        return arr.push(data.id);
      }
      data.children.forEach(item => this.forUser(item, arr));
    },

级联选择器

与上文的tree树形控件类似，都是通过props来配置所需要的参数，但是，他有一个value可以直接设置所需要的id, 在组件上，有一个v-model可以选择完成后直接获取对应的值

动态编辑的Tag标签

实现的效果

 html代码如下

 // 循环渲染数据

  {{item}}  //循环渲染的数据


// 在点击添加后才会出现的input，默认为隐藏的



// 添加的按钮，里面的事件是在点击之后隐藏，让上面的input显示

    + New Tag

所需要的data数据

dynamicTags:[],       //循环渲染的数据
inputVisible: false,  //控制按钮与input的显示隐藏
inputValue: ""        //新数据添加后的双项绑定

vue中的事件

      // 删除时触发，要将删除的数据传过来，在全部数据的数组中进行切割，先需要用indexOf
      //找到对应的下标，如果是动态数据，需要先用一个变量保存后，在进行切割
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      //点击添加按钮后触发，在这一步，进行显示隐藏的切换
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      //input失焦或者点击回车后触发，在这里将新的数据，push进数组中，然后在将状态切换
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }

样式需要在 elementUi 中自己复制即可

导入与下载模块布局

实现样式

 html代码

本质上是使用框架的下拉菜单，内包裹上传按钮实现

 
   // 下拉菜单内插入上传文件框架，实现布局
    
        导入Excel
     
    // 下拉菜单的菜单项
     
        下载模板
     

注意：下拉菜单的事件名称与事件项需写在上方  上传文件注意文件类型

css样式

 .count-group {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px 15px 0;
    .count-group_text {
      color: #333;
      margin-right: 35px;
      span {
        font-weight: 600;
        font-size: 18px;
      }
    }
    .count-group_btn {
      flex: 1;
      display: flex;
      justify-content: right;
      .btn {
        margin: 0 10px;
        height: 34px;
        /deep/.q-button {
          background-color: #1f5aff;
          height: 34px;
          color: #fff;
        }
      // 用于去除上传组件文字的hover背景效果
        /deep/.q-upload--text:hover {
          background-color: #1f5aff;
        }
      }
    }
  }

下载文件

调用js中对应的浏览器 api ，将网址中的内容下载至浏览器  

methods:{
  ImportData() {
      window.location.href = `${'/situation/intelligence/monitor/vulnerability/template' +
        '?_csrfToken=' +
        this.$ajax.csrfToken
       }`;
  },
}

弹框内的时间选择器遇到的问题

我们经常会遇见一种情况，新增或编辑弹框里含有时间选择器，如下图

 代码如下

  
      
        
          
          
        
      
      

        取 消
        确 定
      
    

以上布局的css代码

.form_wrapper {
  margin: 0 auto;
  overflow: hidden;
  .el-form-item {
    width: 50%;
    float: left;
  }
  .form_item_title {  // 独占一行的form项
    width: 100%;
  }
}

可能会遇到的两种问题 

1 时间控件点击后。弹出的时间选择控件再 dialog 弹框的遮罩之下

原因 ：时间选择控件的 z-index 值低于 dialog 弹框的遮罩，但是修改时间选择控件的 z-index 值是无用的，因为他会自动修复回来

解决方案：给 dialog 弹框重新设置一个 z-index 值

 2 再页面进行放大时，点击时间选择控件，对应时间选择弹框会闪退

原因未知

解决方法：给时间选择器增加一个 :append-to-body="false" 属性，使其定位脱离 body 

文件导出

可使用 elementUi 中的 el-download 组件来完成文件的导出下载，样式可以使用自带的也可以自己写

触发导出事件

this.$refs.download.download();

vant-ui

rem适配

点击查看vant-ui的rem适配

tab标签页

标签页在切换时候，想知道当前项，有一个 @click-tab 事件

不用传实参，自带一个形参，是当前项的下标以及文本

要想获取对应数据。可以设置name值

checkbox的使用

因为它是封装好的组件，v-model 是不起作用的，设置其是否被勾选的值为 value ，可以通过 @click 来设置其点击事件，在事件中修改 value 值 , 如果是循环的数据 ，在事件中传递 下标 来更改对应数据

Eacharts图表

引入

npm install echarts --save

基本概念

坐标轴

坐标轴有两个，X轴与Y轴，X轴与Y轴可以有多个

option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
};

X Y 轴相关配置

 axisLine 用来配置轴线，例如箭头，样式等

 axisTick 配置刻度，例如刻度线的长度，样式等

 axisLabel 配置刻度标签，例如文字对齐，自定义刻度样式等

点击查看具体使用

堆叠面积图

引用注意：

1 更改路径 

2  装它的盒子必须有宽高

3  需要写在能够获取dom节点的钩子函数里 推荐mounted

 mounted() {
// 这句代码的意思为，给这个图表中添加渲染的内容，内容写在setOption中
    echarts.init(this.$refs.chart).setOption(this.data);
  }

4 option的数据，写在vue的data数据中，也可以是请求获取到的数据