ElementPlus常见使用

组件水印指令

接下来我们使用框架中的水印指令

<script setup lang="ts">
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
</script>
<template>
  <el-watermark :font="font">
    <div style="height: 100px" />
  </el-watermark>
</template>

使用中文语言包

import zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入中文语言包

app.use(ElementPlus, { locale: zhCn }) // 全局设置语言为中文

使用 ElementPlus Icon 图标

官网地址：

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

安装

yarn add @element-plus/icons-vue

安装成功以后这个时候在我们的文件夹下面就有了这部分的内容

package.json

"devDependencies": {
  "@element-plus/icons-vue": "^2.3.2",
}

注册所有图标

从 element-plus/icons-vue 中导入所有图标并进行全局注册

• main.ts 配置：

// main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

直接使用 SVG 图标

 <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>

动态使用 SVG 图标

普通使用:

<el-icon><Menu/> </el-icon>

动态使用:
<el-icon>
     <component class="icons" :is="val.iconclass"></component>
</el-icon>

图片预览功能（preview-src-list）

错误：踩坑

• url和srcList[0]不同导致预览为空
  官网示例 url和srcList[0]不同也可以正常显示预览第一张图片，但是项目中实际测试如果url和srcList[0]不同则导致预览的为空，向右切换时才正常显示第一张图片
• 使用按钮展示图片预览

// 1
<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="srcList"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>


2
<el-table-column label="员工照片" align="center">
   <template slot-scope="scope">
     <el-image
       style="width: 100px; height: 100px"
       :src="scope.row.staffIcon" 
       :preview-src-list="[scope.row.staffIcon]"
       @click="vbs(scope.row.staffIcon)"
     >
     </el-image>
   </template>
</el-table-column>
vbs(val) {
      this.srcList = []
      this.srcList.push(val)
}

加载效果<font style="color:rgb(48, 49, 51);background-color:rgb(245, 247, 250);">v-loading</font>

 v-loading="loading"
    :element-loading-svg="svg"
    class="custom-loading-svg"
    element-loading-svg-view-box="-10, -10, 50, 50"

表单使用

<el-table
    v-loading="loading"
    :element-loading-svg="svg"
    class="custom-loading-svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column prop="date" label="Date" width="180" />
  </el-table>


<script lang="ts" setup>
import { ref } from 'vue'

const loading = ref(true);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
`;

</script>