【Vue3+Vite+TS】3.0 组件二：图标选择器

必备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

<!--
 * @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>

功能开发完毕。