专栏首页吴文周的专栏前端-朝花夕拾-vue-Element小技巧

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

在使用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上面下载下来,拷贝进入自己的工程,编译打包,我好坏啊哈哈

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端-项目方案(一)骚操作之项目单点登录

    问题:旧系统使用cookie读写的单点登录模式,pc端浏览器没有问题,在移动端ios下面不能跨域写入cookie,单点登录失败

    吴文周
  • 辅助工作-内网穿透客户端(限Mac)

    吴文周
  • 前端-团队效率-gitlab小悟

    吴文周
  • vue项目中遇到的那些事。

      有好几天没更新文章了。这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成。

    Dawnzhang
  • cssjshtml vue+element-ui 表单操作

    葫芦
  • PHP的文件上传操作

    HTML5学堂:关于文件上传,主要包括“构建基本表单”-“使用AJAX发送请求,上传文件”-“使用PHP获取文件基本信息”-“执行SQL语言,返回基本图片路径”...

    HTML5学堂
  • 海康摄像头直播视频上传到流媒体服务器平台后如何降低延迟?(附TCP及UDP区别介绍)

    近期有位开发者为了用我们的国标GB28181流媒体服务器进行测试,在自己的现场环境安装了海康的有线摄像头,通过4g转wifi来连接,上传视频到平台之后,打开视频...

    EasyNVR
  • JS中将变量转为字符串

    译者按: 语言的细枝末节了解一下就可以了,不需要太较真,不过如果一点也不知道的话,那就不太妙了。

    Fundebug
  • 配置文件properties读取使用的好方法

      首先在spring配置文件applicationContext.xml中配置、

    老梁
  • jquery点击删除按钮,删除当前的div

    现在有多行div,共用一个删除事件,点击删除的时候,会把页面所有的div全都删掉了,但是我只需要点击哪一行div里面的删除按钮,就删除哪一行,其实很简单,只需要...

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券