notas de estudio elementUI (1)

notas de estudio elementUI (1)

Básico

• Uso de componentes de botón

  Cuando se utilizan los componentes relacionados de elementui, todos los componentes están el-组件名al principio
  . Todos los componentes de elementui están 属性escritos en la etiqueta del componente

  <el-button  属性名=“属性”>默认按钮</el-button>
  
  

• Uso de componentes de enlaces de texto

  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  

• diseño de diseño y contenedor de diseño de contenedor

  A través de las 24 columnas básicas, cree diseños de forma rápida y sencilla.
  A través de los componentes de fila y columna, y mediante la propiedad span de los componentes de col, podemos combinar diseños libremente

  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
   </el-row>
  

  Intervalo de columna: el componente Fila proporciona la propiedad de medianil para especificar el intervalo entre cada columna, el intervalo predeterminado es 0

  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>
  

  Diseño mixto: un diseño mixto más complejo se forma al expandir y combinar arbitrariamente las columnas básicas de 1/24. Desplazamiento de
  columna: admite el número especificado de columnas a compensar, y el número de columnas a compensar se puede especificar estableciendo el atributo de compensación del componente col

  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>     </el-row>
  

  Cómo hacerlo: Asigne la propiedad de tipo a 'flex' para habilitar el diseño flexible y use la propiedad justify para especificar los valores de inicio, centro, final, espacio entre y espacio alrededor para definir el diseño de los elementos secundarios.

  <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
       <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>
  

  Diseño receptivo: en referencia al diseño receptivo de Bootstrap, se preestablecen cinco tamaños de respuesta: xs, sm, md, lg y xl
  . Clases ocultas basadas en puntos de interrupción: Element proporciona una serie de nombres de clases adicionales para ciertos Ocultar elementos bajo condiciones. Estos nombres de clase se pueden agregar a cualquier elemento DOM o componente personalizado. Si es necesario, importe los siguientes archivos usted mismo:

  import 'element-ui/lib/theme-chalk/display.css';
  

  Contenedor de diseño de contenedores:

  • : Envase exterior
  • Cuando el elemento secundario contiene o, todos los elementos secundarios se ordenarán verticalmente hacia arriba y hacia abajo; de lo contrario, se ordenarán horizontalmente.
  • Los componentes anteriores usan un diseño flexible, asegúrese de que el navegador de destino sea compatible antes de usarlo. Además, el elemento hijo de solo puede ser los cuatro últimos, y el elemento padre de los cuatro últimos solo puede ser

Formar

• Caja de radio radio

  Uso básico: para usar el componente Radio, solo necesita establecer la variable de vinculación del modelo v. Seleccionar significa que el valor de la variable es el valor del atributo de etiqueta de radio correspondiente. La etiqueta puede ser Cadena, Número o Booleano

  <template>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </template>
  <script>
    export default {
         
         
      data () {
         
         
        return {
         
         
          radio: '1'
        };
      }
    }
   </script>
  

  Estado deshabilitado: siempre que el atributo deshabilitado esté establecido en el elemento el-radio, acepta un booleano, verdadero está deshabilitado

  <template>
    <el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
    <el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>      </template>
  
  <script>
    export default {
         
         
      data () {
         
         
        return {
         
         
          radio: '选中且禁用'
        };
      }
    }
  </script>