element-plus

[ API ]

• https://element-plus.org/zh-CN/component/overview.html

[ 安装 和 配置 ]

  $ npm i element-plus
  $ npm install -D unplugin-vue-components unplugin-auto-import
  
  // vite.config.ts
  import { defineConfig } from 'vite'
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

  export default defineConfig({
    // ...
    plugins: [
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  })

[ el-button ]

• 提供了按钮分组 el-button-group
• tag 属性可以以任何 html 元素为基础构建按钮，
• round 圆角 | circle 圆形
• loading 会出现加载图标，配合异步能有更好的客户体验
• color 属性允许自定义按钮主题颜色
• text 属性会去掉按钮边框，bg 属性会显示 文字按钮的背景色，没有的话不显示背景色
• 图标按钮 icon 属性动态设置图标
• 图标集合

  // 导入图标
  import { Search } from '@element-plus/icons-vue'

  // template
  <el-button type="default" :icon="Search" circle/>

[ 边框 ]

• 边框只是给了规范，没有具体元素
• border 的 color 部分，用 var(--el-border-color)
• solid 1px || dashed 2px

    .solid-border {
      border: 1px solid var(--el-border-color);
    }
    .dashed-border {
      border: 2px dashed var(--el-border-color);
    }

• 圆角 阴影

[ 颜色 ]

• 常用色色值

[ 布局容器 ]

• 布局容器
• el-container 有 direction 属性，默认为 horizontal，有 el-header / el-footer 时默认为 vertical
• el-header 和 el-footer 有 height 属性，如 height="200px"
• el-aside 有 width 属性
• el-main 会自动填充剩余空间

[ 图标 ]

• 配置自动导入

  import path from 'path'
  import { defineConfig } from 'vite'
  import Vue from '@vitejs/plugin-vue'
  import Icons from 'unplugin-icons/vite'
  import IconsResolver from 'unplugin-icons/resolver'
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  import Inspect from 'vite-plugin-inspect'

  const pathSrc = path.resolve(__dirname, 'src')

  export default defineConfig({
    resolve: {
      alias: {
        '@': pathSrc,
      },
    },
    plugins: [
      Vue(),
      AutoImport({
        // Auto import functions from Vue, e.g. ref, reactive, toRef...
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue'],

        // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        resolvers: [
          ElementPlusResolver(),

          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon',
          }),
        ],

        dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
      }),

      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep'],
          }),
          // Auto register Element Plus components
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],

        dts: path.resolve(pathSrc, 'components.d.ts'),
      }),

      Icons({
        autoInstall: true,
      }),

      Inspect(),
    ],
  })

• 用法示例

  <el-icon :size="size" color="color">
    <search /> 
  </el-icon>
  
  // OR
  <search :size="size" color="color" />

• 图标集合

[ Layout 布局 ]

• el-row 中嵌套 el-col 实现布局
• el-row 默认分为 24 列
• el-row 的 gutter 属性指定栏间距 :gutter="20"
• el-row 的 justify 和 ailgn 可以按照 flex 的方式设置对齐方式
• el-col 的 span 属性可以指定当前栏占用多少列，:span="12"
• el-col 的 offset 属性设置栏偏移做少列 :offset="2"

[ 响应式布局 ]

• 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
• 给 el-col 元素分别添加这些属性，会在各自相应的尺寸状态呈现出不同的排列

  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"

[ 基于断点的隐藏类 ]

<style lant="scss" scope>
  import 'element-plus/theme-chalk/display.css'
</style>

• hidden-xs-only - 当视口在 xs 尺寸时隐藏
• hidden-sm-only - 当视口在 sm 尺寸时隐藏
• hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
• hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
• hidden-md-only - 当视口在 md 尺寸时隐藏
• hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
• hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
• hidden-lg-only - 当视口在 lg 尺寸时隐藏
• hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
• hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
• hidden-xl-only - 当视口在 xl 尺寸时隐藏
• API

[ 超链接 ]

• el-link 标签可以代替 a 标签
• API
• 右侧图标

  <el-link>
    Check<el-icon class="el-icon--right"><icon-view /></el-icon>
  </el-link>

[ 表单数据验证 ]

• 表单元素的 model 属性动态绑定到数据对象，rules 动态绑定到 响应式验证规则对象
• 被验证元素 添加 prop 属性，值为数据对象中对应的属性名称
• 给表单元素添加 ref='formRef' 属性，在 script 标签中获得表单元素对象 const formRef = ref()
• 当 submit 时，可以执行 formRef.value.validate() 方法进行表单整体验证
• 当默认的验证规则无法满足验证需求的时候，可以自定义验证规则函数
• 自定义验证规则函数接受三个参数 rule, value, callback
• 以注册表单为例

<script setup>
  const user = reactive({
    username: 'hello',
    password: '',
    checkpwd: ''
  })
  const rules = reactive({
    username: [
      {required: true, message: '用户名不能为空', trigger: 'blur'}
    ],
    password: [
      {required: true, message: '密码长度需要在6-18之间', trigger: 'blur'},
      {min: 6, max: 18, message: '密码长度需要在6-18之间', trigger: 'blur'}
    ],
    checkpwd: [
      {required: true, message: '请确认一遍密码', trigger: 'blur'},
      {validator: checkpwdValidator, trigger: 'blur'}
    ]
  })
  function checkpwdValidator(rule, value, callback) {
    if(value !== user.password) {
      callback(new Error('两次输入的密码不一致'))
    } else {
      callback()
    }
  }
  const formRef = ref()
  async function submit() {
    await formRef.value.validate() && login()
  }
  function login() {
    console.log('login')
  }
</script>
<template>
<el-card class="main">
  <el-form :model="user"
    ref="formRef"
    :rules="rules"
    >
    <el-form-item label="用 户"
      prop="username"
    >
      <el-input type="text"
        v-model="user.username"
      />
    </el-form-item>
    <el-form-item label="密 码"
      prop="password"
    >
      <el-input type="password"
        v-model="user.password"
      />
    </el-form-item>
    <el-form-item label="检 查"
      prop="checkpwd"
    >
      <el-input type="password"
        v-model="user.checkpwd"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        @click="submit"
      >注 册</el-button>
    </el-form-item> 
  </el-form>
</el-card>
</template>