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

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

课程内容：

今天学习的内容包括：
2-13 利用app.use特性全局注册组件——全局封装后便于维护，使用更方便。
2-14 扩展一个省市区街道四级联动组件——根据已学知识，进行封装学习。
2-15 扩展一个级联选择框的省市区组件——根据 element-plus 的级联组件加以封装实现。
2-16 本章回顾——再次回顾本章学习内容

课程收获：

全局封装：

1、在每个组件中新建一个index.ts文件，使用app.component进行组件注册

import { App } from 'vue'
...

export default {
  install: function (app: App) {
    app.component('m-choose-area', chooseArea)
  }
}

2、在 components 文件下新建 index.ts 进行自己组件的整体挂载

import { App } from 'vue'
...

const components = [...]

export default {
  install: function (app: App) {
    components.map((item: any) => {
      app.use(item)
    })
  }
}

3、整体挂载到main.ts中

import mUI from '@/components'
app.use(mUI)

扩展一个省市区街道四级联动组件

1、在 github 上下载对应 json 文件
2、根据以往学习进行加入街道

<el-select
      clearable
      filterable
      style="margin: 0 10px"
      :disabled="!area"
      placeholder="请选择区域"
      v-model="street"
    >
      <el-option
        v-for="item in selectStreet"
        :key="item.code"
        :value="item.code"
        :label="item.name"
      />
    </el-select>
  // 下拉框选择街道的值
  let street = ref<string>('')
  // 区域下拉框的所有数据
  let selectArea = ref<AreaItem[]>([])
   // 监听选择街道
  watch(
    () => street.value,
    (value) => {
      if (!value) return
      let provinceData: Data = {
        code: province.value,
        name: allAreas.find((item) => item.code === province.value)!.name
      }
      let cityData: Data = {
        code: city.value,
        name: selectCity.value.find((item) => item.code === city.value)!.name
      }
      let areaData: Data = {
        code: value,
        name: selectArea.value.find((item) => item.code === area.value)!.name
      }
      let streetData: Data = {
        code: value,
        name: selectStreet.value.find((item) => item.code === value)!.name
      }
      emits('change', {
        province: provinceData,
        city: cityData,
        area: areaData,
        street: streetData
      })
    }
  )

扩展一个级联选择框的省市区组件

1、使用 element-plus 的级联组件进而封装自己的级联省市区组件

  <div>
    <el-cascader
      :options="options"
      :props="areaProps"
      clearable
      @change="change"
    />
  </div>

  import allAreas from '../lib/pca-code.json'
  import { watch, ref } from 'vue'

  let options = ref<any>(allAreas)
  let areaProps = ref<any>({
    value: 'code',
    label: 'name'
  })

  let change = (data: any) => {
    console.log(data)
  }

本章回顾

本章学习了环境搭建、全局图标注册、图标选择器、伸缩菜单、省市区选择器。一个初步的开发已经学习到了，到目前为止可以使用 vue3+ts+vite 进行开发项目了。

跟着老师的思路学习老师的方法，希望自己早点把课程学完。

下一步就是学习 封装组件初级篇（下）了。今天学习就先到这里吧。

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

​
​
​