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

2022/8/6 4:22:52

本文主要是介绍【学习打卡】第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;
}

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

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

坚持打卡,坚持学习,未来可期,加油&#128512;~

https://img1.sycdn.imooc.com/62ebd7540001455819200897.jpg

https://img4.sycdn.imooc.com/62ebdb7d0001d48a19200897.jpg



这篇关于【学习打卡】第3天 图标选择器的二次封装的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程