使用＜style scoped＞导致的样式问题

CottonRoseKing

于 2023-03-19 20:29:13 发布

阅读量638

点赞数

分类专栏： Bug记录文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_46034741/article/details/129655802

版权

问题描述：

今天使用开源组件库TDesign的自动补全组件时，遇到了一个样式失效问题，一开始怎么也找不到问题出在哪，后面一个偶然去掉了scoped，竟然发现样式竟然正常了，具体原因不知道在哪，有大佬知道请留言，不甚感激！！

代码是这样的

<template>
  <t-space direction="vertical" class="t-demo-autocomplete-option">
    <!-- 使用 options 自定义下拉选项 -->
    <t-auto-complete
      v-model="value1"
      :options="options1"
      :popupProps="{ overlayClassName: 't-demo-autocomplete-option-list' }"
      placeholder="使用属性自定义联想词选项内容"
    />

    <!-- 使用插槽自定义下拉选项 -->
    <t-auto-complete
      v-model="value2"
      :options="options2"
      :popupProps="{ overlayClassName: 't-demo-autocomplete-option-list' }"
      placeholder="使用插槽自定义联想词选项内容"
    >
      <template #option