使用setup语法糖，去掉scoped，disabled样式不生效

来源：4-9 Dropdown 组件添加 DropdownItem

Awesomeboy

2023-09-06

dropdownItem组件
老师我这个把scoped去掉了还是不起效果，检查发现is-disabled样式添加上去了，也就是disaled参数确实传入进去了，但不知道为什么不显示效果，老师帮帮我

<template>
  <!-- 封装dropdownItem组件 -->
  <!-- 动态绑定样式 取决于disabled属性值， true绑定样式-->
  <li class="dropdown-opion" :class="{ 'is-disabled': disabled }">
    <!-- 允许父组件在这个组件中插入自定义内容 -->
    <slot></slot>
  </li>
</template>

<script setup lang="ts">
//设置disabled属性
defineProps<{
  //布尔值
  disabled?: boolean
}>()
</script>

<style>
.dropdown-option.is-disabled * {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}
</style>

dropdown组件


    <div class="dropdown-menu" style="display: block" v-if="isOpen">
      <dropdown-item disabled><a href="#" class="dropdown-item">新建文章</a></dropdown-item>
      <dropdown-item disabled><a href="#" class="dropdown-item">编辑资料</a></dropdown-item>
    </div>