Vue-ant-design-vue 表单项a-input、a-input-number输入时卡顿解决方案:
抽离组件二次封装再使用。--简直脱裤子放屁,但是没办法,我们需要填坑~

a-input封装:RyInput/index.vue

<!-- 规格弹窗 -->
<template>
  <div>
    <a-input
      v-bind:placeholder="placeholder"
      v-bind:value="RyValue"
      v-on:blur="changeFunc($event)"
      allow-clear
      @mouseenter="handleClear($event)"
    />
  </div>
</template>

<script>
  export default  {
    name: 'RyInput',
    model:{
      prop: 'RyValue',
      event: 'blur'
    },
    props: {
      placeholder: {
        type: String
      },
      RyValue: {
        type: String,
        default () {
          return {
            visible: '',//默认不显示
          }
        }
      },
    },
    data () {
      return {

      }
    },
    created () {
    },
    mounted() {
    },
    updated() {
    },
    methods: {
      changeFunc($event){
        // console.log($event.target.value)
        this.$emit('blur',$event.target.value)
      },
      // 鼠标移入获取清空按钮
      handleClear($event) {
        let _this = this
        // console.log('handleClear',$event.path[1].children[1])
        // 获取到dom元素
        let clearDom = $event.path[1].children[1]//.children[0]
        if(clearDom){
          // 添加点击事件
          clearDom.onclick = function(e) {//推荐 on事件 方式,只会添加一次,不会叠加
            // clearDom.addEventListener( "click", () => {
            // 清空操作
            if (clearDom && clearDom.parentNode && clearDom.parentNode.removeChild) {
              _this.$emit('blur', "")
            }
            // })
          }
        }
      },
    }
  }
</script>

a-input-number封装:RyInputNumber/index.vue

<!-- 规格弹窗 -->
<template>
  <div>
    <a-input-number
      v-bind:placeholder="placeholder"
      v-bind:value="RyNumberValue"
      v-on:blur="changeFunc($event)"
      @mouseenter="handleUpDown($event)"
    />
  </div>
</template>

<script>
  export default {
    name: 'RyInputNumber',
    model:{
      prop: 'RyNumberValue',
      event: 'blur'
    },
    props: {
      placeholder: {
        type: String
      },
      RyNumberValue: {
        type: String,
        default () {
          return {
            visible: 0,//默认不显示
          }
        }
      },
    },
    data () {
      return {
        // RyNumberValue:parseFloat(this.RyNumberValue)
      }
    },
    created () {
    },
    mounted() {
    },
    updated() {
    },
    methods: {
      changeFunc($event){
        this.$emit('blur',$event.target.value)
      },
      // 鼠标移入获取清空按钮
      handleUpDown($event) {
        let _this = this
        // console.log('handleUpDown',$event)
        // 获取到dom元素
        let clearDomUp = $event.path[0].children[0].children[0]
        let clearDomDown = $event.path[0].children[0].children[1]

        if(clearDomUp){
          // 添加点击事件
          clearDomUp.onclick = function(e) {//推荐 on事件 方式,只会添加一次,不会叠加
            // clearDomUp.addEventListener( "click", (e) => {
            e.stopPropagation()
            // up
            let valueNow = $event.path[0].children[1].children[0].ariaValueNow
            let valueNowFloat = parseFloat(valueNow)
            let valueEnd = (++valueNowFloat) + ""
            // console.log("clearDomUp", valueEnd)
            _this.$emit('blur', valueEnd)
            // })
          }
        }
        if(clearDomDown){
          // 添加点击事件
          clearDomDown.onclick = function(e) {//推荐 on事件 方式,只会添加一次,不会叠加
            // clearDomDown.addEventListener( "click", (e) => {
            e.stopPropagation()
            // down
            let valueNow = $event.path[0].children[1].children[0].ariaValueNow
            let valueNowFloat = parseFloat(valueNow)
            let valueEnd = (--valueNowFloat) + ""
            // console.log("clearDomDown", valueEnd)
            _this.$emit('blur', valueEnd)
            // })
          }
        }
      },
    }
  }
</script>

目录:
在这里插入图片描述

使用:

  import RyInput from '@/components/RyInput'
  import RyInputNumber from '@/components/RyInputNumber'

   components: {
      RyInput,
      RyInputNumber
    },
 
 <ry-input-number  v-model="sort"/>
 <ry-input :placeholder="'请输入名称'"  v-model="name"/>

 //输入框抽取到公共组件,表单 【卡顿】 时候替换即可

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐