【学习打卡】第4天 图标选择器的二次封装

课程名称：基于Vue3+Vite+TS，二次封装element-plus业务组件
课程章节：封装组件初级篇（上）
主讲老师：五月的夏天

课程内容：

今天学习的内容包括：
2-8 图标选择器-利用命名空间修改dialog样式——定义自己的css空间对组件样式进行修改。
2-9 图标选择器-通过自定义 hooks 函数实现复制功能——使用hooks抽离功能模块，易维护。

课程收获：

样式等调整

1、给图标选择器弹窗设置一个class；
2、使用 el-scrollbar 让滚动条更美观。

 <el-dialog
    custom-class="m-choose-icon-dialog-body-height"
    :title="title"
    v-model="dialogVisible">
    <el-scrollbar height="100%">
      <div class="container">
        <div
          class="item"
          v-for="(item, index) in Object.keys(ElIcons)"
          :key="index"
          @click="clickItem(item)"
        >
         ...
        </div>
      </div>
    </el-scrollbar>
  </el-dialog>

3、为了让弹窗在不同尺寸的设备下都能够显示完整，对样式进行了改造。

.m-choose-icon-dialog-body-height {
  height: 70vh;
  display: flex;
  flex-direction: column;
  .el-dialog__body {
    overflow: hidden;
    padding: 10px 0;
  }
}

接下来，我们需要点击复制图标标签

1、封装一个input以供js操作浏览器选择和copy

import {ElMessage} from "element-plus";

export const useCopy = (text:string) => {
  // 创建输入框
  let input = document.createElement('input')
  // 给输入框赋值
  input.value = text
  // 添加到body中
  document.body.appendChild(input)
  // 选择输入框
  input.select()
  // 复制
  document.execCommand('Copy')
  // 删除输入框
  document.body.removeChild(input)
  // 提示信息
  ElMessage.success('复制成功！')
}

2、点击后拼接组件标签，调用封装方法
3、关闭图标选择器弹窗

// 点击copy图标选择器组件
let clickItem = (item:string) =>{
  // 拼接图标标签
  let text = `<el-icon-${toLine(item)} />`
  // 复制文本
  useCopy(text)
  dialogVisible.value = false
}

在学习过程中使用el-scrollbar无法正常显示，经过研究发现遍历的图标选择器需要用div包裹下就正常使用了。后在调试过程中，浏览器高度较小时，会导致弹窗还要想下滚动，想起flex布局可以简单的实现弹窗高度的自适应，故使用了height:70vh;display: flex; flex-direction: column;同时修改了el-dialog__body中的样式。整体效果非常好。

下一步就是学习省市区选择组件的封装了。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​