Vue-ant-design-vue 表单项a-input、a-input-number输入时卡顿解决方案
Vue-ant-design-vue 表单项a-input、a-input-number输入时卡顿解决方案:抽离组件封装再使用。a-input封装:RyInput/index.vue<!-- 规格弹窗 --><template><div><a-inputv-bind:placeholder="placeholder"v-bind:value="RyValu
·
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"/>
//输入框抽取到公共组件,表单 【卡顿】 时候替换即可
更多推荐
已为社区贡献6条内容
所有评论(0)