禁用div的写法（自定义disabled）Vue3

因为div 元素本身没有 disabled 属性，所以需要根据JavaScript中的变量、通过动态绑定 class （Vue的:class）来改变样式。

需要一个变量 isDivDisabled

import { ref } from 'vue';
let isDivDisabled = ref(false);

当 isDivDisabled = true ，div及其内部的所有元素不可点击

当 isDivDisabled = false ，div及其内部的所有元素可以点击

• html部分

<div class="item" :class="{ divDisabled: isDivDisabled }">
   <button>确认</button>
   <select name="fruit" id="fruit-select">
     <option value="apple">苹果</option>
     <option value="banana">香蕉</option>
     <option value="cherry">樱桃</option>
   </select>
   <input type="text" placeholder="请输入内容">
 </div>

• css

.item {
  width: 200px;
  height: 100px;
  padding: 20px;
  background-color: #eee;
  line-height: 100px;
  display: flex;
  flex-direction: column;
}
.divDisabled {
  pointer-events: none; /* 禁止鼠标事件 */
  opacity: 0.5; /* 降低透明度 */
  cursor: not-allowed; /* 改变鼠标指针样式 */
} 

• js

import { ref } from 'vue';
let isDivDisabled = ref(false);