Vue 中动态与静态处理 Element UI/Element Plus 组件禁用状态样式

<template>
  <el-button :disabled="isDisabled" @click="handleClick">按钮</el-button>
</template>
 
<script>
export default {
  name: 'DynamicDisabledButton',
  props: {
    isStaticDisabled: {
      type: Boolean,
      default: false
    },
    isDynamicDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isDisabled() {
      // 根据传入的静态和动态禁用状态，以及其他条件来决定按钮是否禁用
      return this.isStaticDisabled || this.isDynamicDisabled || /* 其他条件 */;
    }
  },
  methods: {
    handleClick() {
      if (!this.isDisabled) {
        // 处理点击事件
      }
    }
  }
};
</script>
 
<style scoped>
/* 这里可以添加自定义的禁用状态样式 */
.el-button.is-disabled {
  background-color: #d3dce6; /* 禁用状态的背景色 */
  border-color: #d3dce6;
  color: #909399; /* 禁用状态的文本颜色 */
  cursor: not-allowed; /* 禁用状态下的鼠标样式 */
}
</style>

这个代码示例展示了如何在Vue组件中结合计算属性来动态处理Element UI/Element Plus组件的禁用状态。我们可以通过传入isStaticDisabled和isDynamicDisabled两个属性来控制按钮的禁用状态，并且通过CSS样式覆盖来自定义禁用状态的样式。