图标选择器

一、巧用两次watch监听控制弹窗的显示

1.在component文件夹下创建文件夹chooseIcon,创建对应文件
2.在views下面注册组件，然后在router下面配置路由

 {
                path:'/chooseIcon',
                component:() => import ('../views/chooseIcon/index.vue')
            }

3.代码
（1）component/chooseIcon/src/index.vue

这里采用了两次watch监听，来控制弹框的显示与隐藏
拷贝之后，使用dialogVisible所有监听的visible变化只有第一次与父组件有关，后面的变化都有只与自己内部的visible有关，与父组件无关
(2)views/chooseIcon/index.vue

二、巧用component动态组件显示所有图标

component/chooseIcon/src/index.vue

*不能循环对象，所有在取图标库的使用要用

v-for="(item,index) in Object.keys(ElIcons)"

三、利用命名空间修改dialog样式

修改组件库内部样式

1.自定义一个类名空间
2.现在浏览器里面调试样式
3.把调试好的类名放在入这个类名里面
4.在App.vue里面引入这个文件
5.在组件内需要改样式的元素的父元素加上这个类名

代码

index.vue

styles/ui.scss

.m-choose-icon-dialog-body-height{
    .el-dialog__body{
        height: 500px;
        overflow: scroll;
    }
}

App.vue

（1）这里记得，一些基本的样式我们都可以将它们封装到styles文件夹下面的一个文件下，然后进行引入
（2）我在这里把之前的App.vue中的基本样式封装到了styles下面的base.scss

*{
    margin: 0;
    padding: 0;
}

html,body,#app,.el-container,.el-menu{
    height: 100%;

}

svg{
    width: 1em;
    height: 1em;
  }

四、通过自定义hooks函数实现复制功能

1.创建hooks文件夹，在下面的文件中定义useCopy函数
hooks/useCopy/useCopy.ts

import { ElMessage } from "element-plus"

//复制文本
export const useCopy  = (text:string)=>{
    //1.创建一个input框
    let input = document.createElement('input')
    //2.给输入框value赋值
    input.value=text
    //3.追加到body里面去
    document.body.appendChild(input)
    //4.选择输入框的操作
    input.select()
    //5.执行复制操作
    document.execCommand('Copy')
    //删除加入的输入框
    document.body.removeChild(input)
    //提示用户
    ElMessage.success('复制成功')
}

component/chooseIcon/src/index.vue

四运行出来的界面

图标选择器.png

图标选择.png

图标复制.png

***点击选择图标才会弹出来选择框，点击选择框右上角的叉叉或者其他地方都可隐藏选择框,点击图标会进行复制，然后弹框会隐藏