Element plus .el-textarea__inner 样式重构

Vue样式重构与深度选择器用法

最新推荐文章于 2025-10-11 09:35:20 发布

转载最新推荐文章于 2025-10-11 09:35:20 发布 · 811 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_34417247/article/details/132976222

文章标签：

#重构 #vue.js #javascript

以下有效，使用 >>> 深度选择器

<template>  
  <el-input  
    type="textarea"  
    v-model="inputValue"  
    class="custom-textarea"      
    >  
  </el-input>  
</template>  
<script setup>

import { ref } from 'vue'

const inputValue = ref('')
</script>
  
<style scoped>
 .custom-textarea >>>.el-textarea__inner {
  background-color: #ffffdd;
  height: 300px;
  width: 400px;
  white-space: nowrap;
  } 
</style>

去掉scoped 也可以实现样式重构

<template>  
  <el-input  
    type="textarea"  
    v-model="inputValue"  
    class="custom-textarea"      
    >  
  </el-input>  
</template>  
<script setup>

import { ref } from 'vue'

const inputValue = ref('')
</script>
  
<style>
 .custom-textarea .el-textarea__inner {
  background-color: #ffffdd;
  height: 300px;
  width: 400px;
  white-space: nowrap;
  } 
</style>

分析scoped的使用用法

style上添加scoped属性，就相当于给当前子组件的结构中都添加上一个data-v-×××自定义属性。

使用深度穿透也可以处理这个问题

深度选择器可以实现样式穿透
原生CSS： >>>
less： /deep/
scss： ::v-deep