【Vue3+Vite+TS】12.0 组件九:城市选择

必备UI组件

将用到的组件:
Popover 气泡卡片
Radio 单选框
Select 选择器
Layout 布局
Scrollbar 滚动条

组件设计

首先初始化项目文件结构。
新建src\components\baseline\chooseCity\src\index.vue

<template>
    <div>ChooseCity</div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped></style>

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

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

export { ChooseCity }

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

修改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'
import Notification from './notification'
import List from './list'
import Menu from './menu'
import Progress from './progress'
import ChooseTime from './chooseTime'
import ChooseDate from './chooseDate'
import ChooseCity from './chooseCity'

const components = [
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
]
export {
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
}

//组件可通过use的形式使用
export 
如若转载请注明原文及出处:https://www.dsiab.com/post/29e44fcf-16e4-422b-b62e-1dbb3ed3a1a6
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: