必備UI組件
將用到的組件：
TimeSelect 時(shí)間選擇
時(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({
//說明：開始時(shí)間提示
startPlaceholder: {
type: String,
default: '請(qǐng)選擇開始時(shí)間',
},
//說明：開始時(shí)間的默認(rèn)開始選擇
startTimeStart: {
type: String,
default: '00:00',
},
// 說明：開始時(shí)間時(shí)間間隔
startStep: {
type: String,
default: '00:30',
},
//說明：開始時(shí)間的默認(rèn)結(jié)束選擇
startTimeEnd: {
type: String,
default: '24:00',
},
//說明：結(jié)束時(shí)間提示
endPlaceholder: {
type: String,
default: '請(qǐng)選擇結(jié)束時(shí)間',
},
//說明：結(jié)束時(shí)間的默認(rèn)開始選擇
endTimeStart: {
type: String,
default: '00:00',
},
// 說明：結(jié)束時(shí)間時(shí)間間隔
endStep: {
type: String,
default: '00:30',
},
//說明：結(jié)束時(shí)間的默認(rèn)結(jié)束選擇
endTimeEnd: {
type: String,
default: '24:00',
},
})
//子傳父
let emits = defineEmits(['startChange', 'endChange'])
// 開始時(shí)間
const startTime = ref<string>('')
// 結(jié)束時(shí)間
const endTime = ref<string>('')
// 結(jié)束時(shí)間是否顯示可編輯：默認(rèn)不可編輯
const endTimeDisabled = ref<boolean>(true)
//開始時(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)聽
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 }
//組件可通過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,
}
//組件可通過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({
//說明：開始日期提示
startPlaceholder: {
type: String,
default: '請(qǐng)選擇開始日期',
},
//說明：結(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'])
//開始日期
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
//禁用開始日期的函數(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í)無意義桦卒，結(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è)開始時(shí)間是2022-04-1
//禁用選擇今天之前的日期嫡霞，比如今天是2022-04-10
//selectToDay 可否選擇當(dāng)天：true 可，可以選擇包括開始日期到當(dāng)天之前的日期侵状，范圍是2022-04-1至2022-04-10
//selectToDay 可否選擇當(dāng)天：false 不可，可以選擇包括開始日期下一天到當(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è)開始時(shí)間是2022-04-15
//禁用選擇今天之后的日期随夸，比如今天是2022-04-10
//selectToDay 可否選擇當(dāng)天：true 可，可以選擇開始日期潭枣、當(dāng)天之后的日期比默，范圍是2022-04-15之后的日期
//selectToDay 可否選擇當(dāng)天：false 不可，可以選擇開始日期盆犁、當(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è)開始時(shí)間是2022-04-15
//比如今天是2022-04-10
//selectToDay 可否選擇當(dāng)天：true 可，可以選擇開始日期之后的日期蚣抗，范圍是2022-04-15之后的日期
//selectToDay 可否選擇當(dāng)天：false 不可侈百，可以選擇開始日期之后的日期瓮下，范圍是2022-04-16之后的日期
if (stratDate.value) {
return props.selectToDay
? time.getTime() <= stratDate.value.getTime() - oneDateNumber
: time.getTime() < stratDate.value.getTime() + oneDateNumber
}
}
}
//開始日期清空，聯(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)聽
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 }
//組件可通過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
<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">
日期選擇 (過去時(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">
日期選擇(未來時(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">
日期選擇(過去時(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
