当前位置：首页 > article >正文

vue3设置第三方组件样式::v-deep

article 2024/11/17 21:02:13

在Vue 3中，使用了Composition API的组件可以通过<style>标签内部的::v-deep选择器来深入作用于第三方组件的样式。::v-deep是一个 Scoped CSS 的“深度选择器”，可以穿透组件边界，影响子组件的样式。比如我想修改el-date-picker的颜色边框。

<template>
  <div>
    <ThirdPartyComponent>
      <!-- 第三方组件的内容 -->
    </ThirdPartyComponent>
  </div>
</template>
 
<script>
import { defineComponent } from 'vue';
import ThirdPartyComponent from 'some-third-party-component';
 
export default defineComponent({
  components: {
    ThirdPartyComponent
  }
});
</script>
 
<style scoped>
::v-deep .third-party-class {
  color: blue; /* 覆盖第三方组件中.third-party-class的颜色 */
}
</style>

在这个例子中，ThirdPartyComponent是一个假设的第三方组件。我们通过::v-deep选择器指定了一个选择器.third-party-class，并且在<style>标签中设置了样式。由于scoped属性的存在，这些样式只会应用于当前组件，但::v-deep允许我们选择子组件中的DOM元素并对其应用样式。

查看全文

http://www.kler.cn/a/397761.html