Use el componente element-plus para modificar el estilo predeterminado del selector de fecha

Use el selector de profundidad para modificar el estilo del subcomponente. Hoy, me encontré con un requisito. El selector de fecha-el incrustado en el cajón, una vez más resume el uso del selector de profundidad. Los requisitos son los siguientes:

contenido de la plantilla:

<el-drawer size="70%" v-model="drawer" title="选择年份" :show-close="false" direction="rtl">
   <el-date-picker v-model="selectedDate"  :disabledDate="disabledDate" type="year" placeholder="选择年"></el-date-picker>
</el-drawer>

El CSS que usa menos y con alcance es el siguiente:

.el-input__inner{
    font-size: 26px;
}

El objetivo es modificar el tamaño del año seleccionado para que se muestre a un tamaño de 26px. Como resultado, se ejecuta el código y el efecto es el siguiente:

Descubrimos que el tamaño de fuente del año mostrado no ha aumentado. También agregamos color de fuente y alineación para ver el efecto más claramente, controlado con el selector de profundidad. Modificar de la siguiente manera:

 

:deep(.el-input__inner){
    font-size: 26px;
    text-align: center;
    color:rgb(8, 101, 172) ;
}

El efecto de ejecución es el siguiente:

---

Para resumir, el uso del selector de profundidad es el siguiente:

Dado que el propósito de la encapsulación de los componentes de vue es evitar que los componentes interfieran entre sí, resuelve el problema de la interferencia mutua entre los componentes. Pero al mismo tiempo, también trae algunos problemas: A veces es necesario modificar el estilo del componente secundario. En este momento, en Vue, podemos usar el selector de profundidad para afectar el componente secundario en el componente principal, de modo que para resolver este problema.

• CSS usa de forma nativa la notación ">>>" para la profundidad.
• Al usar un precompilador CSS,
  1. En VUE2, puede usar /deep/ o ::v-deep para la selección de profundidad
  2. En VUE3, se recomienda usar: deep(selector) para una selección profunda

---

Un par de otras opciones relacionadas con CSS:

• :ranurado()

:slotted(): Defina el estilo de contenido de la ranura de estilo en el componente secundario

De forma predeterminada, los estilos con ámbito no afectan  <slot/> al contenido representado, ya que se supone que el componente principal los retiene y los pasa.

<template>
  <div>
    <slot>插槽内容，如果外部给出，则替换掉</slot>
  </div>
</template>
 
<style lang="less" scoped>
:slotted(.blue) {
  color: blue;
}
</style>

• :global()

:global() : selector global, define el estilo global, no es necesario crear un estilo sin ámbito por separado.

<style scoped>
:global(.el-input__inner) {
    color: red;
}
</style>
<!-- 等效于 -->
<style>
 .el-input__inner{
     color:red
 }
</style>

• css dinámico (v-bind)

Las etiquetas de los componentes de un solo archivo de vue3  <style> admiten el uso de  v-bind CSS 函数la vinculación de valores CSS a valores dinámicos 组件状态, es decir, podemos introducir variables de respuesta en etiquetas de script en etiquetas de estilo.

<template>
    <span class='sc'>
        span 内容
    </span>
</template>
 
<script setup>
import { ref } from 'vue';
const redColor = ref('red')
 
</script>
 
<style scoped>
.sc{
    color: v-bind(redColor);
}
</style>