arco design vue禁用按钮后根据原来设置的type和danger显示
时间: 2024-02-03 11:11:58 浏览: 154
可以使用条件渲染来实现禁用按钮后根据原来设置的type和danger显示的效果。
首先,在模板中,我们需要使用 `v-bind` 指令来绑定按钮的 `type` 和 `class`:
```html
<button :type="originalType" :class="{'danger': originalDanger}" :disabled="isDisabled">按钮</button>
```
其中,`originalType` 和 `originalDanger` 分别是原来设置的按钮类型和是否为危险按钮的标志;`isDisabled` 是用来判断按钮是否被禁用的变量。
接着,在组件中,我们需要定义这些变量,并在 `mounted` 钩子中保存原来设置的按钮类型和是否为危险按钮的标志:
```javascript
export default {
data() {
return {
isDisabled: true,
originalType: '',
originalDanger: false
};
},
mounted() {
this.originalType = this.$el.getAttribute('type');
this.originalDanger = this.$el.classList.contains('danger');
}
}
```
最后,我们需要在 `isDisabled` 变量的值发生改变时,更新按钮的禁用状态:
```javascript
watch: {
isDisabled: function(val) {
if (val) {
this.$el.setAttribute('disabled', 'disabled');
} else {
this.$el.removeAttribute('disabled');
}
}
}
```
这样,当按钮被禁用时,它的 `disabled` 属性会被设置为 `disabled`,同时按钮的 `type` 和 `class` 会根据原来设置的值进行渲染。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)