【Vue3+Vite+TS】7.0 组件五:通知菜单

必备UI组件

将用到的组件:

Badge 徽章
Popover 弹出框/气泡卡片
Tabs 标签页
Avatar 头像
Tag 标签
Scrollbar 滚动条

组件设计

新建src\components\baseline\notification\index.ts

import { App } from 'vue'
import Notification from './src/index.vue'

export { Notification }

//组件可通过use的形式使用
export default {
    Notification,
    install(app: App) {
        app.component('bs-notification', Notification)
    },
}

新建src\components\baseline\notification\src\index.vue


<template>
    <el-badge
        style="cursor: pointer"
        :value="value"
        :max="max"
        v-bind="$attrs"
        :is-dot="isDot"
    >
        <component :is="icon"></component>
    </el-badge>
</template>
<script lang="ts" setup>
const props = defineProps({
    //说明:图标
    icon: {
        type: String,
        default: 'el-icon-bell',
    },
    //说明:通知数量
    value: {
        type: [String, Number],
        default: 0,
    },
    color: {
        type: String,
        default: 'el-icon-bell',
    },
    //徽章最大值
    max: {
        type: Number,
    },
    //是否显示小圆点
    isDot: {
        type: Boolean,
        default: false,
    },
})
</script>
<style lang="scss" scoped></style>

新建src\views\baseline\notification\index.vue

<template>
如若转载请注明原文及出处:https://www.dsiab.com/post/a5b70df9-19e0-4af8-960a-2be231a94c2f
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: