问题复现:
<u-button type="primary" :disabled="true" @click="myClick"> 点击我 </u-button>
methods: {
myClick(){
console.log('被禁用但还是进来了') // 这行打印是可以执行的
}
}
解决:在 u-button 外套一层 div
子组件 sonBtn.vue
<view class="custom-btn">
<u-button
type="primary"
@click="handlerClick"
class="btn"
:disabled="isDisabled"
>
{{ text }}
</u-button>
</view>
props: {
text: {
type: String,
default: "点击我",
},
},
methods: {
handlerClick() {
this.$emit("click");
},
},
在父组件 fatherBtn.vue 中使用
<DBtn text="点击我" @click="myClick" :isDisabled="true"></DBtn>
<script>
import DBtn from "@/src/components/DBtn.vue";
export default {
components: { DBtn},
methods: {
myClick(){
console.log('已被禁用') // 这行打印不会执行
}
}
}
</script>