【Vue3+Vite+TS】11.0 组件八：时间选择组件

必备UI组件

将用到的组件：
TimeSelect 时间选择

DatePicker 日期选择器

时间选择

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

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

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

export { ChooseTime }

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

修改src\components\baseline\container\index.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-20 01:41:54
 * @LastEditTime: 2022-01-01 23:07:26
 * @LastEditors: Please set LastEditors
 * @Description: 全局基础组件全局注册
 * @FilePath: \vue3-element-ui-baseline\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'

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

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

路由新增新的路由：

 {
                path: '/chooseTime',
                component: () =>
                    import('../views/baseline/chooseTime/index.vue'),
            },

新增src\views\baseline\chooseTime\index.vue

效果如下：

image.png

image.png

日期选择

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

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

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

export { ChooseDate }

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

修改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'

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

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

修改src\views\baseline\chooseTime\index.vue

效果如下：

image.png

image.png