vue3使用和汉化element-plus组件库+图标

一在vue3项目里如何使用element-plus组件库
1 下载element-plus插件

npm i element-plus

2 main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'

const app = createApp(App)

//使用element-plus插件
app.use(router).use(elementPlus).mount('#app')

3 尝试使用element-plus组件
home.vue

<template>
  <div class="c">
  <p>尝试使用element-plus组件</p>

  <div class="c">
    <p>按钮</p>
    <el-button type="success">成功按钮</el-button>
  </div>

  <div class="c">
    <p>日期选择器</p>
    <el-date-picker placeholder="请点击选择日期"></el-date-picker>
  </div>

  </div>
</template>

<script lang="ts" setup>

</script>

<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
.c>p>span{
    color: coral;
}
</style>

有个问题：
这样使用的组件里显示的文字都是英文的（如图）

what?（用张表情包来表达当时我的心情）

那么如何汉化element-plus组件库让文字变成中文呢
main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
//引入汉化语言包
import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)

//使用element-plus插件 汉化{locale}
app.use(router).use(elementPlus,{locale}).mount('#app')

效果：

也有人习惯于这样引入使用中文语言包

main.ts

扫描二维码关注公众号，回复： 14861046 查看本文章

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
//引入汉化语言包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)

//使用element-plus插件 汉化{locale:zhCn}
app.use(router).use(elementPlus,{locale:zhCn}).mount('#app')

拓展一下 element-plus图标的使用

与vue2使用element-ui时可直接使用图标不同

二在vue3里，要想使用element-plus图标

1 须先下载插件@element-plus/icons-vue

npm i @element-plus/icons-vue

2 引入并使用图标插件

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'
//引入element-plus插件
import elementPlus from 'element-plus'
//引入element-plus组件样式
import 'element-plus/dist/index.css'
//引入汉化语言包
import locale from 'element-plus/lib/locale/lang/zh-cn'

//引入图标插件
import * as elementPlusIcons from '@element-plus/icons-vue'

const app = createApp(App)

// 循环注册图标
Object.keys(elementPlusIcons).forEach(key=>{
    //elementPlusIcons as any 这里ts学的不咋地 只能先any大法了
    app.component(key,(elementPlusIcons as any)[key])
    // 也可这样写
    //app.component(key,elementPlusIcons[key as keyof typeof elementPlusIcons])
})

//使用element-plus插件 汉化{locale}
app.use(router).use(elementPlus,{locale}).mount('#app')

尝试使用图标

home.vue

<template>
<div class='c'>
    <p>尝试使用element-plus组件</p>

    <div class="c">
        <p>按钮</p>
        <el-button type="success">成功按钮</el-button>
    </div>

    <div class="c">
       <p>日期选择器</p>
       <el-date-picker placeholder="请点击选择日期"></el-date-picker>  
    </div>

   <div class="c">
    <p>尝试使用element-plus组件图标</p>

    <!-- 搜索图标 -->
    <el-icon>
        <Search></Search>
    </el-icon>

    <!-- 编辑图标 -->
    <el-icon>
        <Edit></Edit>
    </el-icon>

   </div>
</div>
</template>

<script lang='ts' setup>

</script>


<style scoped>
.c{
    width: 80%;
    padding: 20px;
    margin: 0 auto;
    border:1px solid red;
}
</style>

效果：

以上是全局注册使用的，但在实际项目里大多数图标我们是用不到的

所以按需引入是很有必要的

按需使用（此时main.ts里的引入和循环注册就可以注释掉了）

home.vue

<template>
  <div class="c">
    <p>按需展示指定@element-plus/icons-vue图标</p>
    <!-- 引入图标后直接在template模板里使用 -->
    <div class="c">
      Watch图标:
      <p>
        <el-icon>
          <Watch></Watch>
        </el-icon>
      </p>
    </div>

    <div class="c">
      VideoPlay图标:
      <p>
        <el-icon>
          <VideoPlay></VideoPlay>
        </el-icon>
      </p>
    </div>

    <div class="c">
      Van图标:
      <p>
        <el-icon>
          <Van></Van>
        </el-icon>
      </p>
    </div>

    <div class="c">
      UploadFilled图标:
      <p>
        <el-icon>
          <UploadFilled></UploadFilled>
        </el-icon>
      </p>
    </div>
    
  </div>

</template>

<script lang="ts" setup>

import { ref } from "vue";
//引入 Watch VideoPlay Van UploadFilled 图标
import { Watch, VideoPlay, Van, UploadFilled } from "@element-plus/icons-vue";

</script>

<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
</style>

效果：

最后写个好玩的

把所有element-plus组件图标全部展示出来

当然做到这一步前下载插件和main.ts里的引入插件和全局循环注册步骤是必不可少的

展示所有图标

home.vue

<template>
  <div class="c">
    <p>展示@element-plus/icons-vue所有图标</p>
    <template v-for="(item, index) in iconsList" :key="index">
      <div class="c">
        <p>图标名称：{
   
   { item }}</p>
        <p>
          图标：
          <el-icon>
            <component :is="item"></component>
          </el-icon>
        </p>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import * as icons from "@element-plus/icons-vue";
const getIcons = () => {
  let list = [];
  for (const name in icons) {
    list.push(name);
  }
  return list;
};
const iconsList = ref(getIcons());
</script>
<style scoped>
.c {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  border: 1px solid red;
}
</style>

效果:

动态展示所有图标：

vue3使用和汉化element-plus组件库+图标

猜你喜欢