目前有一个功能需求是在uniapp中 有一个input输入框默认为disabled,通过点击旁边的编辑icon移除disabled并且聚焦。
实现方法:

input:
 <input type="text" :class="['inputAmount', { 'actualDisabled': actualDisabled }]" v-model="inputAmount" @blur="actualAmountBlur" :focus="isFocus" :disabled="actualDisabled">
data中声明的响应式数据:
data() {
    return {
        inputAmount: 0,
        actualDisabled: true,
        isFocus: false,
    }
},
图片:
<image src="../../../static/as_edit_amount.png" class="editAmount"@click="actualAmountFocus"/>

方法:
actualAmountFocus() {
    this.actualDisabled = false;
    this.isFocus = false;
    this.$nextTick(() => {
        setTimeout(() => {
            this.isFocus = true;
        }, 100);
    });
},
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐