Vue3-ElementPlus

小沐°

已于 2024-03-27 10:12:40 修改

阅读量1.2k

点赞数 8

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2023-11-28 16:58:15 首次发布

本文链接：https://blog.csdn.net/weixin_46479909/article/details/134671088

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

ElementPlus按需导入

1.安装

pnpm add element-plus

2.配置按需导入：

官方文档：快速开始 | Element Plus

按照官网按需导入中的自动导入步骤来进行

pnpm add -D unplugin-vue-components unplugin-auto-import

观察Vite代码与原vite文件的差别，将原vite文件中没有的，复制粘贴到合适的位置

3.直接使用组件，样式就是element-Plus的

4.默认components下的文件也会被自动注册

不需要再导入也能使用

Icon图标导入

1.安装

pnpm i @element-plus/icons-vue

官网参考： Icon 图标 | Element Plus

2.使用

先导入

import { 图标名 } from '@element-plus/icons-vue'

在el-input输入框里使用

<el-input :prefix-icon="Lock"></el-input>

组件中英文切换

全局配置中文

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>

<template>
  <div>
    <!--App.vue只需要留一个路由出口router-view即可-->
    <el-config-provider :locale="zhCn">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

ElementPlus常见组件

官方文档：Button 按钮 | Element Plus

Layout布局

类似栅格网格系统，el-row表示一行，一行分成24份；el-col在el-row中使用，el-col表示列，其中:span="x"代表在一行中占x份，:offset="x"代表左侧margin的份数

Form表单

el-form为整个表单组件；el-form-item为表单的一行，其中label="xx"设置行标签

el-input加上show-password可以实现切换密码可见

<el-input type="password" show-password></el-input>

表单校验

校验规则：

(1)在el-form上配置:model="ruleFormRef"绑定的是整个form的数据对象

(2)在el-form上配置:rules="rules"绑定的是整个rules规则对象

(3)在el-form-item上配置props="name"配置生效的是哪个校验规则（和rules中的字段对应）

(4)表单元素上配置v-model="ruleForm.name"给表单元素绑定form的子属性

const formModel = ref({
  username: '',
  password: '',
  repassword: '',
  telphone: ''
})
//整个表单的校验规则
const rules = {
  username: [
    {
      required: true, //非空校验
      message: '请输入用户名', //消息提示
      trigger: 'blur' //触发时机，两个值：blue表示失去焦点，一般在input组件中使；change为值改变，一般在选择框中使用
    },
    {
      min: 5, //长度限制
      max: 10,
      message: '用户名必须是5-10位的字符',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      pattern: /^\S{6,15}$/, //正则表达式  \S非空字符
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  telphone: [
    {
      pattern: /^[0-9]*$/,
      message: '请输入纯数字手机号码',
      trigger: 'blur'
    }
  ]
}

切换页面（例如语言切换）会自动触发校验规则，用户体验感差

优化方法：给el-form组件添加

:validate-on-rule-change="false"

<el-form :model="ruleForm" :rules="rules" :validate-on-rule-change="false">
</el-form>

自定义校验规则

validator: (rule, value, callback)

(1)rule 当前校验规则相关的信息

(2)value 所校验的表单元素目前的表单值

(3)callback 无论成功还是失败，都需要 callback 回调

--callback()校验成功

--callback(new Error(错误信息)) 校验失败

默认是实时触发，要修改成失焦触发

const rules = {
  repassword: [
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback() //校验成功，也需要callback
        }
      },
      trigger: 'blur'
    }
  ]
}

表单提交预校验（Form Exposes）

首先需要获取form组件

<script setup>
    import { ref } from 'vue'
    //获取dom元素
    const form = ref()
</script>

<template>
    <el-form ref="form"></el-form>
</template>

为提交按钮添加点击事件register

const register = async () => {
  //注册成功之前，先进行校验，校验成功->请求，校验失败->自动提示
  await form.value.validate()
  console.log('开始注册请求')
}

重置表单

this.$refs.表单ref名.clearValidate()//移除整个表单的校验结果
this.$refs.表单ref名.clearValidate('prop属性')//移除某个prop属性的校验结果

this.$refs.表单ref名.resetFields()//将表单的所有字段重置为初始值同时移除表单的校验结果

行内表单

<el-form inline></el-form>

消息提示

  ElMessage({
    message: '成功',
    type: 'success',
  })
  或
  ElMessage.success('成功')

错误：‘ElMessage’ is not defined.

解决：如果使用的是按需导入，import ElMessage就会导致失效，应该在.eslintrc.cjs文件中添加语句声明全局变量名

  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }

Container 布局容器

Menu菜单

el-menu为整个菜单组件，其中active-text-color代表选中时的颜色，:default-active="$route.path"配置默认高亮的菜单项，router开启就可以点击跳转写在el-menu-item的index中的路径

el-menu-item为菜单项

      <el-menu
        active-text-color="#ffd04b"
        background-color="#232323"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-menu-item index="/article/channel">
          <el-icon><Management /></el-icon>
          <span>文章分类</span>
        </el-menu-item>
        <el-menu-item index="/article/manage">
          <el-icon><Promotion /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-sub-menu index="/user">
          <!--多级菜单的标题 - 具名插槽title-->
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </template>
          <!--展开的内容 - 默认插槽-->
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/user/avatar">
            <el-icon><Crop /></el-icon>
            <span>更换头像</span>
          </el-menu-item>
          <el-menu-item index="/user/password">
            <el-icon><EditPen /></el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

下拉菜单

指令事件

消息弹出框

    ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })

注意：如果使用的是按需导入，import ElMessage就会导致失效，应该在.eslintrc.cjs文件中添加语句声明全局变量名

  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }

卡片

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>文件传送</span>
        <div class="extra">
          <el-button type="primary">选择文件</el-button>
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>

表格

el-table-column是一列，其中label是标题，prop是去对象中找对应的属性做渲染，width是宽度

表格中数据不显示：1）绑定的数据是不是响应式的 2）有没有加setup语法糖

序号

<el-table-column lable="序号" type="index"></el-table-column>

自定义列

scope.row可以拿到行信息，scope.row.属性名可以拿到某行信息里的，scope.$index是下标

或者函数传递参数

     <el-table-column label="操作" width="150">
        <template #default="{ row, $index }">
          <el-button
            @click="onEditChannel(row, $index)"
            :icon="Edit"
            circle
            type="primary"
            plain
          >
          </el-button>
          <el-button
            @click="onDelChannel(row, $index)"
            :icon="Delete"
            circle
            type="danger"
            plain
          >
          </el-button>
        </template>
      </el-table-column>

Table插槽

<template #empty>暂无数据</template>

按钮

type控制颜色；plain控制镂空效果；round 和 circle控制形状

加载

v-loading="true"

空状态

<el-empty description="没有数据"></el-empty>

对话框

Link链接

<el-link>...</el-link>

分页

v-model:current-page代表当前页码，v-model:page-size代表每页条数，:page-sizes可供用户选择的每页条数（注意要包含当前设置的每页条数）,layout代表菜单栏（顺序和个数都是一一对应的），@size-change每页条数变化时触发的事件，@current-change当前页变化时触发的事件

抽屉

v-model控制显示与隐藏，:direction控制方向（默认从右往左），size控制大小

上传

action配置了后台接口地址，请求方式为post，请求参数name="file"

可以通过下面的API修改默认配置

:on-change控制上传事件，

const onSelectFile = (uploadFile) => {
  console.log('图片链接：',uploadFile.raw)
}

js控制显示上传

上传组件ref.$el.querySelector('input').click()

单选框

v-model双向绑定数据

value单向获取选项数据（不能修改）

修改选项使用@input

弹框

出现弹窗闪现一下，立刻消失的问题，解决方法：

增加一个setTimeout延时

     setTimeout(() => {
        this.$confirm('此操作将会清空原有数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //确定后执行
        }).catch(() => {
          //取消后执行    
        });
      }, 200)

小沐°

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue3-ElementPlus

(1)rule 当前校验规则相关的信息(2)value 所校验的表单元素目前的表单值(3)callback 无论成功还是失败，都需要 callback 回调--callback()校验成功--callback(new Error(错误信息)) 校验失败默认是实时触发，要修改成失焦触发if (value!callback(new Error('两次输入的密码不一致'))} else {callback() //校验成功，也需要callback},
复制链接

扫一扫