前端-朝花夕拾-vue-Element小技巧

348 阅读3分钟

在使用Element过程的一些记录

  • 主题修改

A:官网有配置主题的页面可以配置后下载使用element.eleme.cn/#/zh-CN/the…

B:自定义样式修改 使用/deep/加Element元素样式即可自定义修改

 /deep/.el-input__inner {
    border: 1px solid #b4b4b4;
    box-shadow: 1px 1px 3px #ddd inset;
  }
  • Element组件功能修改,例如在输入框中加入输入行为的限制只允许输入数字,或者其他应用场景搜索加载等等,建议使用方式自定义指令
// 金额字段只能输入两位小数
// 使用方式name为绑定的表单节点名称
// v-Number="{set:this,name:'form.table.xx'}"
// 代码关键点dom值改变之后手动递归给之前的表单model再赋值
Vue.directive('Number2', {
  inserted: function (el, binding, vnode) {
    el.querySelectorAll('.el-input__inner')[0].addEventListener(
      'keyup',
      function (event) {
        var dom = event.currentTarget
        dom.value = dom.value
          .replace(/[^\d^\.]+/g, '')
          .replace('.', '$#$')
          .replace(/\./g, '')
          .replace('$#$', '.')
        if (dom.value.indexOf('.') > -1) {
          var arry = dom.value.split('.')
          if (arry[1].length > 2) {
            arry[1] = arry[1].substr(0, 2)
          }
        }
        var str = arry.join('.')
        dom.value = str
        let keyArry = binding.value.name.split('.')
        let len = 0
        let lenArry = keyArry.length - 1
        function match (obj) {
          if (len < lenArry) {
            len = len + 1
            match(obj[keyArry[len - 1]])
          } else if (len === lenArry) {
            obj[keyArry[len]] = dom.value
          }
        }
        match(binding.value.set)
      }
    )
  }
})
  • Element表单校验中嵌套自定义组件的数据绑定与校验
// 父组件中使用场景中的数据绑定与数据校验
<el-form-item label="对象姓名">
  <Associate v-model="form.table.xx" prop="table.xx"></Associate>
</el-form-item>
rules:{
   table:{
    xx: [
            {
              required: true,
              message: '请输入xxx',
              trigger: 'change'
            }
   } 
}
//子组件内部封装(联想输入查询的封装)
<template>
  <div class="binding">
    <div class="bindingbtn el-input--mini">
      <input v-model="value"
             @input="changeQuery"
             class="form-width el-input__inner" />
    </div>
    <div v-show="isshow"
         class="donwnContent">
      <ul class="list">
        <li v-for="(item,index) in list"
            :key=index
            class="item downList"
            @click.stop="change(item)">{{item.label}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { debounce } from 'lodash'
import { SOLIDER_42 } from '@/api/xx.js'
export default {
  name: 'Associate',
  props: ['Object', 'isCheck', 'value'],
  model: {
    prop: 'Object',
    event: 'changeValue'//通过当前这个事件完成数据子组件到父组件的双向绑定
  },
  data () {
    return {
      isInit: false,
      isshow: false,
      falgDown: true,
      list: []
    }
  },
  methods: {
    /**
     * @name: change
     * @description: 点击联想下拉选项改变父组件中的model
     * @param: 
     * @return: 
     */
    change (Object) {
      this.value = Object.name
      this.$emit('changeValue', Object.detail)
      //配置父组件中的校验信息使用基于elment中已经封装好的事件机制
      this.$parent.$emit('el.form.change')
      this.isshow = false
    },
    /**
     * @name: changeQuery
     * @description: 输入时触发查询
     * @param: 
     * @return: 
     */ 
    changeQuery: debounce(
      function () {
        this.isshow = true
        let reqInfo = {
          msg: {
            fuzzySearch: this.value
          }
        }
        var self = this
        if (this.falgDown) {
          SOLIDER_42(reqInfo).then(response => {
            if (response.length > 0) {
              self.list = response
            } else {
              self.list = [{ name: '', label: '暂无数据', 'detatl': {} }]
            }
          })
        } else {
          this.falgDown = true
        }
      }, 500
    )
  },
  created () {
   //事件委托机制,点击非当前区域收起下拉框
    var self = this
    window.addEventListener('click', function (event) {
      console.log(event.target)
      if (event.target.className.indexOf('downList') === -1) {
        self.isshow = false
      }
    })
  }
}
</script>

<style lang="scss" scoped>
</style>
  • Element中数据循环校验循环校验
// 核心代码 prop 进行循环的索引匹配并且:rules 单独写在每一个item中
<el-row  type="flex"
           align="middle"
           :gutter="10"
            v-for="(item, index) in form.list"
            :key="index">
     <el-col>
         <el-form-item label="申请人"
               :prop="'list.'+index+'.xx'"
               :rules="rules.flowApproves.xx">
               <el-input v-model="item.x"></el-input>
          </el-form-item>
    </el-col>
</el-row>
  • Element骚操作,修改Elemnet源码匹配自定义业务,例如Element穿梭框,改成符合自己业务的搜索查询并且执行下拉加载。实现方式,把Element源码从git上面下载下来,拷贝进入自己的工程,编译打包,我好坏啊哈哈