海淀网站建设公司排名_宣传册在线设计_b2b平台免费推广网站_优化

因为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);