【Vue3+Vite+TS】11.0 組件八：時(shí)間選擇組件

必備UI組件

將用到的組件：
TimeSelect 時(shí)間選擇

DatePicker 日期選擇器

時(shí)間選擇

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

<template>
    <div class="bs-wrapper">
        <div class="box">
            <!-- :max-time="endTime" -->
            <el-time-select
                v-bind="$attrs.startOptions"
                v-model="startTime"
                :placeholder="startPlaceholder"
                :start="startTimeStart"
                :step="startStep"
                :end="startTimeEnd"
            ></el-time-select>
        </div>
        <div class="box">
            <el-time-select
                v-bind="$attrs.endOptions"
                v-model="endTime"
                :min-time="startTime"
                :placeholder="endPlaceholder"
                :start="endTimeStart"
                :step="endStep"
                :end="endTimeEnd"
                :disabled="endTimeDisabled"
            ></el-time-select>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
    //說(shuō)明：開(kāi)始時(shí)間提示
    startPlaceholder: {
        type: String,
        default: '請(qǐng)選擇開(kāi)始時(shí)間',
    },
    //說(shuō)明：開(kāi)始時(shí)間的默認(rèn)開(kāi)始選擇
    startTimeStart: {
        type: String,
        default: '00:00',
    },
    // 說(shuō)明：開(kāi)始時(shí)間時(shí)間間隔
    startStep: {
        type: String,
        default: '00:30',
    },
    //說(shuō)明：開(kāi)始時(shí)間的默認(rèn)結(jié)束選擇
    startTimeEnd: {
        type: String,
        default: '24:00',
    },

    //說(shuō)明：結(jié)束時(shí)間提示
    endPlaceholder: {
        type: String,
        default: '請(qǐng)選擇結(jié)束時(shí)間',
    },
    //說(shuō)明：結(jié)束時(shí)間的默認(rèn)開(kāi)始選擇
    endTimeStart: {
        type: String,
        default: '00:00',
    },
    // 說(shuō)明：結(jié)束時(shí)間時(shí)間間隔
    endStep: {
        type: String,
        default: '00:30',
    },
    //說(shuō)明：結(jié)束時(shí)間的默認(rèn)結(jié)束選擇
    endTimeEnd: {
        type: String,
        default: '24:00',
    },
})

//子傳父
let emits = defineEmits(['startChange', 'endChange'])
// 開(kāi)始時(shí)間
const startTime = ref<string>('')
// 結(jié)束時(shí)間
const endTime = ref<string>('')
// 結(jié)束時(shí)間是否顯示可編輯：默認(rèn)不可編輯
const endTimeDisabled = ref<boolean>(true)
//開(kāi)始時(shí)間清空，聯(lián)動(dòng)把結(jié)束時(shí)間也清空
watch(
    () => startTime.value,
    val => {
        if (val === '') {
            endTime.value = ''
            endTimeDisabled.value = true
        } else {
            endTimeDisabled.value = false
            endTime.value = ''
            //給父組件分發(fā)事件
            emits('startChange', val)
        }
    }
)
//結(jié)束時(shí)間監(jiān)聽(tīng)
watch(
    () => endTime.value,
    val => {
        if (val !== '') {
            emits('endChange', {
                startTime: startTime.value,
                endTime: val,
            })
        }
    }
)
</script>

<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
}
.box {
    margin-right: 0.2rem;
}
</style>

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

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

export { ChooseTime }

//組件可通過(guò)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: 全局基礎(chǔ)組件全局注冊(cè)
 * @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,
}

//組件可通過(guò)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

<template>
    <div>
        <bs-choose-time
            @startChange="startChange"
            @endChange="endChange"
        ></bs-choose-time>
        <br />
        <bs-choose-time
            :startOptions="startOptions"
            :endOptions="endOptions"
        ></bs-choose-time>
    </div>
</template>
<script lang="ts" setup>
interface timeValue {
    startTime: string
    endTime: string
}
const startChange = (value: string) => {
    console.log('startChange', value)
}
const endChange = (value: timeValue) => {
    console.log('endChange', value)
}

const startOptions = { size: 'mini', clearable: false }

const endOptions = { size: 'mini', clearable: false }
</script>
<style lang="scss" scoped></style>

效果如下：


image.png

image.png

日期選擇

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

<!--
 * @Author: bobokaka
 * @Date: 2021-12-23 00:07:25
 * @LastEditDate: 2022-01-02 12:17:03
 * @LastEditors: Please set LastEditors
 * @Description: 時(shí)間選擇器
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\trend\src\index.vue
-->
<template>
    <div class="bs-wrapper">
        <div class="box__start">
            <!-- :max-time="endDate" -->
            <el-date-picker
                v-model="stratDate"
                v-bind="$attrs.startOptions"
                type="date"
                :placeholder="startPlaceholder"
                :disabled-date="startDisabledDate"
            ></el-date-picker>
        </div>
        <div>
            <el-date-picker
                v-model="endDate"
                v-bind="$attrs.endOptions"
                type="date"
                :placeholder="endPlaceholder"
                :disabled="endDateDisabled"
                :disabled-date="endDisabledDate"
            ></el-date-picker>
        </div>
        <div></div>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
    //說(shuō)明：開(kāi)始日期提示
    startPlaceholder: {
        type: String,
        default: '請(qǐng)選擇開(kāi)始日期',
    },
    //說(shuō)明：結(jié)束日期提示
    endPlaceholder: {
        type: String,
        default: '請(qǐng)選擇結(jié)束日期',
    },
    //是否禁用選擇今天之前的日期
    disableBeforeToDay: {
        type: Boolean,
        default: false,
    },
    //是否禁用選擇今天之后的日期
    disableAfterToDay: {
        type: Boolean,
        default: false,
    },
    //可否選擇當(dāng)天
    selectToDay: {
        type: Boolean,
        default: true,
    },
})

//子傳父
let emits = defineEmits(['startChange', 'endChange'])
//開(kāi)始日期
const stratDate = ref<Date | null>(null)

//結(jié)束日期
const endDate = ref<Date | null>(null)
// 結(jié)束日期是否顯示可編輯：默認(rèn)不可編輯
const endDateDisabled = ref<boolean>(true)

//一天的毫秒數(shù)
const oneDateNumber = 1000 * 60 * 60 * 24
//禁用開(kāi)始日期的函數(shù)
let startDisabledDate = (time: Date) => {
    if (props.disableBeforeToDay && props.disableAfterToDay) {
        return (
            time.getTime() < Date.now() - oneDateNumber ||
            time.getTime() > Date.now() - oneDateNumber
        )
    } else if (props.disableBeforeToDay) {
        return time.getTime() < Date.now() - oneDateNumber
    } else if (props.disableAfterToDay) {
        return time.getTime() > Date.now() - oneDateNumber
    }
}
//禁用結(jié)束日期的函數(shù)
const endDisabledDate = (time: Date) => {
    //是否禁用選擇今天之前的日期\是否禁用選擇今天之后的日期
    //此時(shí)無(wú)意義，結(jié)束日期不能選任何值
    if (props.disableBeforeToDay && props.disableAfterToDay) {
        if (stratDate.value) {
            return (
                time.getTime() < Date.now() - oneDateNumber ||
                time.getTime() > Date.now() - oneDateNumber ||
                (props.selectToDay
                    ? time.getTime() <=
                      stratDate.value.getTime() - oneDateNumber
                    : time.getTime() <
                      stratDate.value.getTime() + oneDateNumber)
            )
        }
    } else if (props.disableBeforeToDay) {
        //假設(shè)開(kāi)始時(shí)間是2022-04-1
        //禁用選擇今天之前的日期，比如今天是2022-04-10
        //selectToDay 可否選擇當(dāng)天：true 可，可以選擇包括開(kāi)始日期到當(dāng)天之前的日期，范圍是2022-04-1至2022-04-10
        //selectToDay 可否選擇當(dāng)天：false 不可，可以選擇包括開(kāi)始日期下一天到當(dāng)天之前的日期，范圍是2022-04-2至2022-04-10
        if (stratDate.value) {
            return (
                time.getTime() < Date.now() - oneDateNumber ||
                (props.selectToDay
                    ? time.getTime() <=
                      stratDate.value.getTime() - oneDateNumber
                    : time.getTime() <
                      stratDate.value.getTime() + oneDateNumber)
            )
        }
    } else if (props.disableAfterToDay) {
        //假設(shè)開(kāi)始時(shí)間是2022-04-15
        //禁用選擇今天之后的日期，比如今天是2022-04-10
        //selectToDay 可否選擇當(dāng)天：true 可，可以選擇開(kāi)始日期、當(dāng)天之后的日期，范圍是2022-04-15之后的日期
        //selectToDay 可否選擇當(dāng)天：false 不可，可以選擇開(kāi)始日期、當(dāng)天之后的日期，范圍是2022-04-16之后的日期
        if (stratDate.value) {
            return (
                time.getTime() > Date.now() - oneDateNumber ||
                (props.selectToDay
                    ? time.getTime() <=
                      stratDate.value.getTime() - oneDateNumber
                    : time.getTime() <
                      stratDate.value.getTime() + oneDateNumber)
            )
        }
    } else {
        //假設(shè)開(kāi)始時(shí)間是2022-04-15
        //比如今天是2022-04-10
        //selectToDay 可否選擇當(dāng)天：true 可，可以選擇開(kāi)始日期之后的日期，范圍是2022-04-15之后的日期
        //selectToDay 可否選擇當(dāng)天：false 不可，可以選擇開(kāi)始日期之后的日期，范圍是2022-04-16之后的日期
        if (stratDate.value) {
            return props.selectToDay
                ? time.getTime() <= stratDate.value.getTime() - oneDateNumber
                : time.getTime() < stratDate.value.getTime() + oneDateNumber
        }
    }
}
//開(kāi)始日期清空，聯(lián)動(dòng)把結(jié)束日期也清空
watch(
    () => stratDate.value,
    val => {
        endDate.value = null
        endDateDisabled.value = true
        if (val) {
            endDateDisabled.value = false
            //給父組件分發(fā)事件
            emits('startChange', val)
        }
    }
)
//結(jié)束日期監(jiān)聽(tīng)
watch(
    () => endDate.value,
    val => {
        if (val !== null) {
            emits('endChange', {
                stratDate: stratDate.value,
                endDate: val,
            })
        }
    }
)
</script>

<style lang="scss" scoped>
.bs-wrapper {
    display: flex;
}
.box {
    &__start {
        margin-right: 0.2rem;
    }
}
</style>

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

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

export { ChooseDate }

//組件可通過(guò)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,
}

//組件可通過(guò)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

<template>
    <div>
        <div>
            <span style="display: inline-block; margin-bottom: 0.1rem">
                時(shí)間選擇:
            </span>
            <bs-choose-time
                @startChange="startChange"
                @endChange="endChange"
            ></bs-choose-time>
        </div>
        <div>
            <span style="display: inline-block; margin: 0.1rem 0">
                時(shí)間選擇(增加element其他屬性):
            </span>
            <bs-choose-time
                :startOptions="startOptions"
                :endOptions="endOptions"
            ></bs-choose-time>
        </div>
        <div>
            <span style="display: inline-block; margin: 0.1rem 0">
                日期選擇:
            </span>
            <bs-choose-date
                @startChange="startDateChange"
                @endChange="endDateChange"
            ></bs-choose-date>
        </div>
        <div>
            <span style="display: inline-block; margin: 0.1rem 0">
                日期選擇 (過(guò)去時(shí)間):
            </span>
            <bs-choose-date
                :disableBeforeToDay="false"
                :disableAfterToDay="true"
                :selectToDay="true"
                @startChange="startDateChange"
                @endChange="endDateChange"
            ></bs-choose-date>
        </div>
        <div>
            <span style="display: inline-block; margin: 0.1rem 0">
                日期選擇(未來(lái)時(shí)間):
            </span>
            <bs-choose-date
                :disableBeforeToDay="true"
                :disableAfterToDay="false"
                :selectToDay="true"
                @startChange="startDateChange"
                @endChange="endDateChange"
            ></bs-choose-date>
        </div>
        <div>
            <span style="display: inline-block; margin: 0.1rem 0">
                日期選擇(過(guò)去時(shí)間,不能當(dāng)天到當(dāng)天):
            </span>
            <bs-choose-date
                :disableBeforeToDay="false"
                :disableAfterToDay="true"
                :selectToDay="false"
                @startChange="startDateChange"
                @endChange="endDateChange"
            ></bs-choose-date>
        </div>
        <div>
            <span style="display: inline-block; margin: 0.1rem 0">
                日期選擇(自定義屬性):
            </span>
            <bs-choose-date
                :startOptions="startOptions"
                :endOptions="endOptions"
                @startChange="startDateChange"
                @endChange="endDateChange"
            ></bs-choose-date>
        </div>
    </div>
</template>
<script lang="ts" setup>
interface timeValue {
    startTime: string
    endTime: string
}
interface dateValue {
    stratDate: Date
    endDate: Date
}
const startChange = (value: string) => {
    console.log('startChange', value)
}
const endChange = (value: timeValue) => {
    console.log('endChange', value)
}
const startDateChange = (value: Date) => {
    console.log('startChange', value)
}
const endDateChange = (value: dateValue) => {
    console.log('endChange', value)
}
const startOptions = { size: 'mini', clearable: false }

const endOptions = { size: 'mini', clearable: false }
</script>
<style lang="scss" scoped></style>

效果如下：


image.png

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容