Vue将Element Plus 进行自定义封装
一、前言
Element Plus 是一套基于 Vue 3.0 的桌面端组件库，它可以很方便地实现各种样式的组件，就连图标选择器这样的小功能也不在话下。不过今天我们要做的是——封装 Element Plus 的图标选择器。
二、安装
安装 Element Plus:
npm i element-plus -S三、预览
先看一下我们要实现的效果：
https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20210823232623.gif
四、封装
首先我们需要在 `main.js` 中引入 `Element Plus`：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')然后我们要封装一个图标选择器组件，这里我们命名为 `IconPicker`，并将其注册为全局组件：
import { Upload, Dialog, RadioGroup, RadioButton, Input, Button } from 'element-plus'
import { computed, defineComponent, ref, watch } from 'vue'
export default defineComponent({
name: 'IconPicker',
components: {
ElUpload: Upload,
ElDialog: Dialog,
ElRadioGroup: RadioGroup,
ElRadioButton: RadioButton,
ElInput: Input,
ElButton: Button
},
props: {
value: {
type: String,
required: true
},
prefixIcon: {
type: String,
default: 'el-icon-more'
}
},
emits: ['update:value'],
setup(props, { emit }) {
const showIconPicker = ref(false) // 是否显示图标选择器
const searchText = ref('') // 搜索文本框的值
const searchResults = ref([]) // 搜索结果
// 所有图标名称列表
const icons = [
'el-icon-info',
'el-icon-warning',
// ...
'el-icon-close'
]
// 根据搜索文本过滤图标名称
const filteredIcons = computed(() => {
return icons.filter(icon => icon.includes(searchText.value))
})
// 根据搜索文本过滤图标分类
const iconCategories = computed(() => {
const categories = []
for (let i = 0; i < filteredIcons.value.length; i++) {
const icon = filteredIcons.value[i]
const category = icon.split('-')[0]
if (!categories.includes(category)) {
categories.push(category)
}
}
return categories
})
// 根据当前搜索结果生成分类列表
const categoryList = computed(() => {
const list = []
for (let i = 0; i < iconCategories.value.length; i++) {
const category = iconCategories.value[i]
const icons = filteredIcons.value.filter(icon => icon.split('-')[0] === category)
list.push({
name: category,
icons
})
}
return list
})
// 当搜索文本发生变化时重新过滤图标
watch(searchText, () => {
searchResults.value = filteredIcons.value
})
// 打开图标选择器
const openIconPicker = () => {
showIconPicker.value = true
}
// 关闭图标选择器
const closeIconPicker = () => {
showIconPicker.value = false
}
// 选择一个图标
const selectIcon = (icon) => {
emit('update:value', icon)
closeIconPicker()
}
return {
showIconPicker,
searchText,
searchResults,
categoryList,
openIconPicker,
closeIconPicker,
selectIcon
}
}
})五、使用
在需要使用图标选择器的地方，我们只需要通过 `v-model` 绑定一个变量即可：
<template>
<div>
<el-input v-model="icon" readonly />
<el-button type="primary" @click="openIconPicker">选择图标</el-button>
<icon-picker v-model="icon" />
</div>
</template>
<script>
import IconPicker from './components/IconPicker.vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'App',
components: {
IconPicker
},
setup() {
const icon = ref('el-icon-info')
return {
icon
}
}
})
</script>最后我们只需要在 `main.js` 中引入我们封装的 `IconPicker` 组件：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import IconPicker from './components/IconPicker.vue'
const app = createApp(App)
app.use(ElementPlus)
app.component('IconPicker', IconPicker)
app.mount('#app')六、总结
至此，我们已经完成了一个图标选择器的封装工作。封装这个小组件的意义不在于实现这个功能，更在于让我们了解如何封装一个 Vue 组件。在开发中，不管是做大型应用还是小型应用，都离不开组件的使用和封装，应该都能收到很好的效果。