vue3 :deep()的使用

---

文章目录

• 前言
• 一、:deep()是什么？
• • • • • :deep()是可以改变css解析时私有属性的样式
        • 常见使用场景: 如改变输入框的背景颜色
        • 使用:deep()修改背景颜色
• 总结

---

前言

对应前端小白来说，一看到:deep()这些模式的用法就不理解是啥意思，下面简单介绍一下:deep()是什么以及如何使用。

---

一、:deep()是什么？

:deep()是可以改变css解析时私有属性的样式

常见使用场景: 如改变输入框的背景颜色

我们找到解析时找到输入框的class

使用:deep()修改背景颜色

<route lang="yaml"> meta: title: 测试界面 </route> <script lang="ts" setup> import Draggable from 'vuedraggable' const reason = ref('') </script> <template> <div class="select_text c-red"> 选择器 </div> <div class="outer"> <el-input v-model="reason" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" show-word-limit maxlength="100" /> </div> </template> <style lang="scss" scoped> :deep() { .el-textarea__inner{ background: red; } } </style>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

---

总结

这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！