【Vue3+Vite+TS】3.0 组件二：图标选择器

必备UI组件

图标选择器将用到以下几个组件：
Icon 图标
Button 按钮
Message 消息提示
Dialog 对话框

组件设计

修改路由src\router\index.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-19 11:26:38
 * @LastEditTime: 2021-12-20 21:17:12
 * @LastEditors: bobokaka
 * @Description: 路由
 * @FilePath: \vue3-element-ui-baseline\src\router\index.ts
 */
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: Container,
        children: [
            {
                path: '/',
                component: Home,
            },
            {
                path: '/chooseIcon',
                component: () => import('../views/chooseIcon/index.vue'),
            },
        ],
    },
]

const router = createRouter({
    routes,
    history: createWebHistory(),
})
export default router

新建src\views\chooseIcon\index.vue

<!--
 * @Author: bobokaka
 * @Date: 2021-12-20 20:29:00
 * @LastEditTime: 2021-12-20 21:03:47
 * @LastEditors: bobokaka
 * @Description: 图标选择器
 * @FilePath: \vue3-element-ui-baseline\src\views\chooseIcon\index.vue
-->
<template>
    <div>
        <choose-icon title="选择图标" v-model:visiable="visiable">
            选择图标
        </choose-icon>
    </div>
</template>
<script lang="ts" setup>
import ChooseIcon from '../../components/baseline/chooseIcon/src/index.vue'
import { ref } from 'vue'
const visiable = ref(false)
</script>
<style lang="scss" scoped></style>

新增src\components\baseline\chooseIcon\src\index.vue

<!--
 * @Author: bobokaka
 * @Date: 2021-12-20 01:41:21
 * @LastEditTime: 2021-12-20 21:15:36
 * @LastEditors: Please set LastEditors
 * @Description: 选择图标
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseIcon\src\index.vue
-->
<template>
    <el-button @click="handleClick" type="primary">
        <slot></slot>
    </el-button>
    <el-dialog :title="title" v-model="currentVisiable">111</el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
const props = defineProps<{
    //弹出框标题
    title: string
    //控制弹出框的显示与隐藏
    visiable: boolean
}>()
const emits = defineEmits(['update:visiable'])

const currentVisiable = ref<boolean>(props.visiable)
const handleClick = () => {
    //需要修改父组件的数据
    emits('update:visiable', !props.visiable)
}

//拷贝一份父组件传递过来的visiable
//监听visiable的变化

watch(
    () => props.visiable,
    val => {
        currentVisiable.value = val
    }
)
//监听组件内部currentVisiable的变化
watch(
    () => currentVisiable.value,
    val => {
        emits('update:visiable', val)
    }
)
</script>
<style lang="scss" scoped></style>

输入地址http://localhost:8080/chooseIcon