【Vue3+Vite+TS】6.0 组件四：趋势标记

必备UI组件

图标选择器将用到的组件：
无

组件设计

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

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

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

export { Trend }

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

修改src\components\baseline\index.ts

import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'

const components = [ChooseArea, ChooseIcon, Container, Trend]
export { ChooseArea, ChooseIcon, Container, Trend }

//组件可通过use的形式使用
export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    },
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
}

新建src\views\trend\index.vue

效果如下：

image.png

将组件改写为插槽用法

颜色翻转

修改src\components\baseline\trend\src\index.vue

修改src\views\trend\index.vue

image.png

自定义文字颜色

自定义图标

修改src\components\baseline\trend\src\index.vue

这里用到ts的枚举、断言等语法，看客朋友们如果不太理解，请自行百度学习。

image.png

image.png

修改src\views\trend\index.vue

image.png