必备UI组件
图标选择器将用到以下几个组件：
Icon 图标
Button 按钮
Message 消息提示
Dialog 对话框
组件设计
修改路由src\router\index.ts
/*
* @Author: bobokaka
* @Date: 2021-12-19 11:26:38
* @LastEditTime: 2021-12-20 21:17:12
* @LastEditors: bobokaka
* @Description: 路由
* @FilePath: \vue3-element-ui-baseline\src\router\index.ts
*/
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: Container,
children: [
{
path: '/',
component: Home,
},
{
path: '/chooseIcon',
component: () => import('../views/chooseIcon/index.vue'),
},
],
},
]
const router = createRouter({
routes,
history: createWebHistory(),
})
export default router
新建src\views\chooseIcon\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 20:29:00
* @LastEditTime: 2021-12-20 21:03:47
* @LastEditors: bobokaka
* @Description: 图标选择器
* @FilePath: \vue3-element-ui-baseline\src\views\chooseIcon\index.vue
-->
<template>
<div>
<choose-icon title="选择图标" v-model:visiable="visiable">
选择图标
</choose-icon>
</div>
</template>
<script lang="ts" setup>
import ChooseIcon from '../../components/baseline/chooseIcon/src/index.vue'
import { ref } from 'vue'
const visiable = ref(false)
</script>
<style lang="scss" scoped></style>
新增src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 21:15:36
* @LastEditors: Please set LastEditors
* @Description: 选择图标
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
<el-dialog :title="title" v-model="currentVisiable">111</el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
const props = defineProps<{
//弹出框标题
title: string
//控制弹出框的显示与隐藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父组件的数据
emits('update:visiable', !props.visiable)
}
//拷贝一份父组件传递过来的visiable
//监听visiable的变化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//监听组件内部currentVisiable的变化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped></style>
输入地址http://localhost:8080/chooseIcon
image.png
进一步调整：
利用vue的特性component：动态组件的特性，is参数传什么就会生成一个对应得标签，比如
:is="hhh",就会生成<hhh></hhh>修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 21:26:57
* @LastEditors: Please set LastEditors
* @Description: 选择图标
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div v-for="(item, index) in Object.keys(ElIcons)" :key="index">
<div>
<component :is="`el-icon-${toLine(item)}`"></component>
</div>
<div>{{ item }}</div>
</div>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
const props = defineProps<{
//弹出框标题
title: string
//控制弹出框的显示与隐藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父组件的数据
emits('update:visiable', !props.visiable)
}
//拷贝一份父组件传递过来的visiable
//监听visiable的变化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//监听组件内部currentVisiable的变化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
......
效果如下：
image.png
样式优化
优化css属性：
修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 21:44:19
* @LastEditors: Please set LastEditors
* @Description: 选择图标
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div
v-for="(item, index) in Object.keys(ElIcons)"
:key="index"
class="bs-wrapper__container__item"
>
<div>
<component :is="`el-icon-${toLine(item)}`"></component>
</div>
<div class="bs-wrapper__container__item__title">{{ item }}</div>
</div>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
const props = defineProps<{
//弹出框标题
title: string
//控制弹出框的显示与隐藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父组件的数据
emits('update:visiable', !props.visiable)
}
//拷贝一份父组件传递过来的visiable
//监听visiable的变化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//监听组件内部currentVisiable的变化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped>
.bs-wrapper {
&__container {
display: flex;
align-items: center; //垂直方向居中
flex-wrap: wrap;
&__item {
width: 25%; //5个一行
display: flex;
flex-direction: column; //灵活的项目将垂直显示，正如一个列一样。
align-items: center; //垂直方向居中
justify-content: center; //水平方向居中
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 16px;
height: 0.7rem;
&__title {
flex: 1; //独占一份
}
}
}
}
svg {
width: 0.4rem;
height: 0.4rem;
}
</style>
image.png
现在的效果是可以不停向下滚动，优化成页内滚动，方式如下：
新建src\style\ui.scss
//修改组件库内部的样式
//1.需要自定义一个类名空间
//2.浏览器中调试样式
//3.调试好的类名放在这个类名中
//4.在App.vue里面引入这个文件
//5.在组件内需要改样式的元素的父元素加上这个类名
.bk--choose-icon-dialog-body-height {
.el-dialog__body {
height: 5rem;
overflow: scroll;
}
}
修改src\style\index.scss
@import './base.scss';
@import './ui.scss';
修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-20 22:58:14
* @LastEditors: Please set LastEditors
* @Description: 选择图标
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<div>
<div>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
</div>
<div class="bk--choose-icon-dialog-body-height">
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div
v-for="(item, index) in Object.keys(ElIcons)"
:key="index"
class="bs-wrapper__container__item"
>
<div>
<component
:is="`el-icon-${toLine(item)}`"
></component>
</div>
<div class="bs-wrapper__container__item__title">
{{ item }}
</div>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
const props = defineProps<{
//弹出框标题
title: string
//控制弹出框的显示与隐藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
//需要修改父组件的数据
emits('update:visiable', !props.visiable)
}
//拷贝一份父组件传递过来的visiable
//监听visiable的变化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//监听组件内部currentVisiable的变化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped>
.bs-wrapper {
&__container {
display: flex;
align-items: center; //垂直方向居中
flex-wrap: wrap;
&__item {
width: 25%; //5个一行
display: flex;
flex-direction: column; //灵活的项目将垂直显示，正如一个列一样。
align-items: center; //垂直方向居中
justify-content: center; //水平方向居中
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 16px;
height: 0.7rem;
&__title {
flex: 1; //独占一份
}
}
}
}
svg {
width: 0.4rem;
height: 0.4rem;
}
</style>
效果如下：
image.png
这里/style/index.scss在src\main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'
import { toLine } from './utils'
import './style/index.scss'
const app = createApp(App)
//全局组件注册，牺牲一些性能，但方便使用
//封装成el-icon-xxx
for (let i in Icons) {
// console.log(`i:`, i)
// console.log('Icons[i]', (Icons as any)[i])
app.component(`el-icon-${toLine(i)}`, (Icons as any)[i])
}
app.use(router)
app.use(ElementPlus)
app.mount('#app')
滚动条还可以再优化一下：
修改src\style\ui.scss
//修改组件库内部的样式
//1.需要自定义一个类名空间
//2.浏览器中调试样式
//3.调试好的类名放在这个类名中
//4.在App.vue里面引入这个文件
//5.在组件内需要改样式的元素的父元素加上这个类名
.bk--choose-icon-dialog-body-height {
.el-dialog__body {
height: 5rem;
overflow-y: scroll;
overflow-x: auto;
}
}
image.png
利用hooks函数实现复制
hooks函数都是以use开头。
src\hooks\useCopy\index.ts
import { ElMessage } from 'element-plus'
export const useCopy = (text: string) => {
//创建一个input输入框
let input = document.createElement('input')
//给输入框value赋值
input.value = text
//追加到body中
document.body.appendChild(input)
//选择输入框的操作
input.select()
//执行复制操作
document.execCommand('Copy')
//删除input输入框的dom节点
document.body.removeChild(input)
//提示用户
ElMessage.success('复制成功')
}
修改src\components\baseline\chooseIcon\src\index.vue
<!--
* @Author: bobokaka
* @Date: 2021-12-20 01:41:21
* @LastEditTime: 2021-12-21 19:33:02
* @LastEditors: Please set LastEditors
* @Description: 选择图标
* @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
<div>
<div>
<el-button @click="handleClick" type="primary">
<slot></slot>
</el-button>
</div>
<div class="bk--choose-icon-dialog-body-height">
<el-dialog :title="title" v-model="currentVisiable">
<div class="bs-wrapper__container">
<div
v-for="(item, index) in Object.keys(ElIcons)"
:key="index"
class="bs-wrapper__container__item"
@click="handleClickItem(item)"
>
<div>
<component
:is="`el-icon-${toLine(item)}`"
></component>
</div>
<div class="bs-wrapper__container__item__title">
{{ item }}
</div>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import { toLine } from '../../../../utils'
import { ref, watch } from 'vue'
import { useCopy } from '../../../../hooks/useCopy'
const props = defineProps<{
//弹出框标题
title: string
//控制弹出框的显示与隐藏
visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])
const currentVisiable = ref<boolean>(props.visiable)
//点击按钮显示弹出框
const handleClick = () => {
//需要修改父组件的数据
emits('update:visiable', !props.visiable)
}
//点击图标
const handleClickItem = (item: string) => {
let text = `<el-icon-${toLine(item)} />`
console.log(`text:`, text)
useCopy(text)
//关闭弹框
currentVisiable.value = false
}
//拷贝一份父组件传递过来的visiable
//监听visiable的变化
watch(
() => props.visiable,
val => {
currentVisiable.value = val
}
)
//监听组件内部currentVisiable的变化
watch(
() => currentVisiable.value,
val => {
emits('update:visiable', val)
}
)
</script>
<style lang="scss" scoped>
.bs-wrapper {
&__container {
display: flex;
align-items: center; //垂直方向居中
flex-wrap: wrap;
&__item {
width: 25%; //5个一行
display: flex;
flex-direction: column; //灵活的项目将垂直显示，正如一个列一样。
align-items: center; //垂直方向居中
justify-content: center; //水平方向居中
margin-bottom: 0.15rem;
cursor: pointer;
font-size: 16px;
height: 0.7rem;
&__title {
flex: 1; //独占一份
}
}
}
}
svg {
width: 0.4rem;
height: 0.4rem;
}
</style>
功能开发完毕。
