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

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

课程内容：

今天学习的内容包括：
2-6 图标选择器-巧用两次watch控制弹框的显示与隐藏——外部传入属性与内部自有属性使用watch进行关联实现。
2-7 图标选择器-巧用component动态组件显示所有的图标——组件封装常用动态组件component。

课程收获：

图标选择器封装成组件，外部传参到组件中：

let props = defineProps<{
  // 弹出框的标题
  title: string,
  // 控制弹出框的显示与隐藏
  visible: boolean
}>()

此处控制弹出框显示与隐藏如果不使用组件内部自己的变量，则会导致显示隐藏诸多问题，在这里以我的经验可能会写一个关闭时触发emits(‘updata:visible’,false)，老师这里采用了拷贝一份父组件传递过来的visible+watch，巧妙的解决了显示隐藏问题。
第一个watch监听外部传参visible，进行更改内部dialogVisible
第二个watch监听内部dialogVisible，进而updata:visible

// 拷贝一份父组件传递过来的visible
let dialogVisible = ref<boolean>(props.visible)
// 监听visible的变化
watch(() => props.visible, val=>{
  dialogVisible.value = val
})
watch(() => dialogVisible.value, val=>{
  emits('update:visible', val)
})

引入图标

import  * as ElIcons from '@element-plus/icons-vue'

使用 Object.keys() 遍历渲染

 <div class="container">
        <div
          class="item"
          v-for="(item, index) in Object.keys(ElIcons)"
          :key="index"
          @click="clickItem(item)"
        >
          <div class="text">
            <component :is="`el-icon-${toLine(item)}`"></component>
          </div>
          <div class="icon">{{ item }}</div>
        </div>
      </div>

当我们的字体图标组件名非常长会导致换行，此时就需要设置一个高度，让所有的item都显示一样的高度，这样看起来就比较美观了。

.item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  cursor: pointer;
  height: 70px;
}

终于大工搞成，效果非常好。

下一步就是点击复制等交互效果了。今天学习就先到这里吧。

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

​