liyingang
2 years ago
parent
8cde0764cf
commit
1b5d5a0509
13 changed files with 1057 additions and 89 deletions
@ -0,0 +1,465 @@ |
|||||||
|
<template> |
||||||
|
<vPicker ref="picker" :show="show" :closeOnClickOverlay="closeOnClickOverlay" :columns="columns" :title="title" |
||||||
|
:itemHeight="itemHeight" :showToolbar="showToolbar" :visibleItemCount="visibleItemCount" |
||||||
|
:defaultIndex="innerDefaultIndex" :cancelText="cancelText" :confirmText="confirmText" :cancelColor="cancelColor" |
||||||
|
:confirmColor="confirmColor" @close="close" @cancel="cancel" @confirm="confirm" @change="change"> |
||||||
|
<view class="time-box"> |
||||||
|
<view :class="{ |
||||||
|
'time-box-item': true, |
||||||
|
'time-box-item-check': dateCheck === 'start' |
||||||
|
}" @click="handleCheck('start')"> |
||||||
|
{{start ? start : '开始时间'}} |
||||||
|
<u-icon class="time-box-item-clear" v-show="start" @click="handleClear('start')" size="16" |
||||||
|
name="close-circle"></u-icon> |
||||||
|
</view> |
||||||
|
<view class="date-split"> |
||||||
|
— |
||||||
|
</view> |
||||||
|
<view :class="{ |
||||||
|
'time-box-item': true, |
||||||
|
'time-box-item-check': dateCheck === 'end', |
||||||
|
}" @click="handleCheck('end')"> |
||||||
|
{{end ? end : '结束时间'}} |
||||||
|
<u-icon class="time-box-item-clear" v-show="end" @click="handleClear('end')" size="16" |
||||||
|
name="close-circle"></u-icon> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</vPicker> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
function times(n, iteratee) { |
||||||
|
let index = -1 |
||||||
|
const result = Array(n < 0 ? 0 : n) |
||||||
|
while (++index < n) { |
||||||
|
result[index] = iteratee(index) |
||||||
|
} |
||||||
|
return result |
||||||
|
} |
||||||
|
import props from './props.js'; |
||||||
|
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'; |
||||||
|
import vPicker from '../v-picker/index.vue' |
||||||
|
/** |
||||||
|
* DatetimePicker 时间日期选择器 |
||||||
|
* @description 此选择器用于时间日期 |
||||||
|
* @tutorial https://www.uviewui.com/components/datetimePicker.html |
||||||
|
* @property {Boolean} show 用于控制选择器的弹出与收起 ( 默认 false ) |
||||||
|
* @property {Boolean} showToolbar 是否显示顶部的操作栏 ( 默认 true ) |
||||||
|
* @property {String | Number} value 绑定值 |
||||||
|
* @property {String} title 顶部标题 |
||||||
|
* @property {String} mode 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择 ( 默认 ‘datetime ) |
||||||
|
* @property {Number} maxDate 可选的最大时间 默认值为后10年 |
||||||
|
* @property {Number} minDate 可选的最小时间 默认值为前10年 |
||||||
|
* @property {Number} minHour 可选的最小小时，仅mode=time有效 ( 默认 0 ) |
||||||
|
* @property {Number} maxHour 可选的最大小时，仅mode=time有效 ( 默认 23 ) |
||||||
|
* @property {Number} minMinute 可选的最小分钟，仅mode=time有效 ( 默认 0 ) |
||||||
|
* @property {Number} maxMinute 可选的最大分钟，仅mode=time有效 ( 默认 59 ) |
||||||
|
* @property {Function} filter 选项过滤函数 |
||||||
|
* @property {Function} formatter 选项格式化函数 |
||||||
|
* @property {Boolean} loading 是否显示加载中状态 ( 默认 false ) |
||||||
|
* @property {String | Number} itemHeight 各列中，单个选项的高度 ( 默认 44 ) |
||||||
|
* @property {String} cancelText 取消按钮的文字 ( 默认 '取消' ) |
||||||
|
* @property {String} confirmText 确认按钮的文字 ( 默认 '确认' ) |
||||||
|
* @property {String} cancelColor 取消按钮的颜色 ( 默认 '#909193' ) |
||||||
|
* @property {String} confirmColor 确认按钮的颜色 ( 默认 '#3c9cff' ) |
||||||
|
* @property {String | Number} visibleItemCount 每列中可见选项的数量 ( 默认 5 ) |
||||||
|
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器 ( 默认 false ) |
||||||
|
* @property {Array} defaultIndex 各列的默认索引 |
||||||
|
* @event {Function} close 关闭选择器时触发 |
||||||
|
* @event {Function} confirm 点击确定按钮，返回当前选择的值 |
||||||
|
* @event {Function} change 当选择值变化时触发 |
||||||
|
* @event {Function} cancel 点击取消按钮 |
||||||
|
* @example <u-datetime-picker :show="show" :value="value1" mode="datetime" ></u-datetime-picker> |
||||||
|
*/ |
||||||
|
export default { |
||||||
|
name: 'datetime-picker', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
components: { |
||||||
|
vPicker |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
columns: [], |
||||||
|
innerDefaultIndex: [], |
||||||
|
innerFormatter: (type, value) => value, |
||||||
|
dateCheck: '', |
||||||
|
start: '', |
||||||
|
end: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
show(newValue, oldValue) { |
||||||
|
if (newValue) { |
||||||
|
this.start = this.startDate |
||||||
|
this.end = this.endDate |
||||||
|
this.handleCheck('start') |
||||||
|
// this.updateColumnValue(this.innerValue) |
||||||
|
} else { |
||||||
|
this.dateCheck = null |
||||||
|
} |
||||||
|
}, |
||||||
|
propsChange() { |
||||||
|
this.init() |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值 |
||||||
|
propsChange() { |
||||||
|
return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, |
||||||
|
this.filter, |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.init() |
||||||
|
// this.handleCheck('startDate') |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleClear(type) { |
||||||
|
this[this.dateCheck] = '' |
||||||
|
}, |
||||||
|
handleCheck(type) { |
||||||
|
if (this.dateCheck !== type) { |
||||||
|
this.dateCheck = type |
||||||
|
if (!this[this.dateCheck]) { |
||||||
|
this[this.dateCheck] = dayjs().format('YYYY-MM-DD') |
||||||
|
} |
||||||
|
this.$nextTick(() => { |
||||||
|
this.init() |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
init() { |
||||||
|
this.innerValue = this.correctValue(this[this.dateCheck]) |
||||||
|
this.updateColumnValue(this.innerValue) |
||||||
|
}, |
||||||
|
// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用 |
||||||
|
setFormatter(e) { |
||||||
|
this.innerFormatter = e |
||||||
|
}, |
||||||
|
// 关闭选择器 |
||||||
|
close() { |
||||||
|
if (this.closeOnClickOverlay) { |
||||||
|
this.$emit('close') |
||||||
|
} |
||||||
|
}, |
||||||
|
// 点击工具栏的取消按钮 |
||||||
|
cancel() { |
||||||
|
this.$emit('cancel') |
||||||
|
}, |
||||||
|
// 点击工具栏的确定按钮 |
||||||
|
confirm() { |
||||||
|
if (!this.start && this.end) { |
||||||
|
return this.$.toast('请选择开始时间') |
||||||
|
} |
||||||
|
if (!this.end && this.start) { |
||||||
|
return this.$.toast('请选择结束时间') |
||||||
|
} |
||||||
|
if (this.start && this.end && this.start > this.end) { |
||||||
|
return this.$.toast('开始时间不能大于结束时间') |
||||||
|
} |
||||||
|
this.$emit('confirm-date', [this.start, this.end]) |
||||||
|
this.$emit('confirm', { |
||||||
|
value: this.innerValue, |
||||||
|
mode: this.mode |
||||||
|
}) |
||||||
|
this.$emit('input', this.innerValue) |
||||||
|
}, |
||||||
|
//用正则截取输出值,当出现多组数字时,抛出错误 |
||||||
|
intercept(e, type) { |
||||||
|
let judge = e.match(/\d+/g) |
||||||
|
//判断是否掺杂数字 |
||||||
|
if (judge.length > 1) { |
||||||
|
uni.$u.error("请勿在过滤或格式化函数时添加数字") |
||||||
|
return 0 |
||||||
|
} else if (type && judge[0].length == 4) { //判断是否是年份 |
||||||
|
return judge[0] |
||||||
|
} else if (judge[0].length > 2) { |
||||||
|
uni.$u.error("请勿在过滤或格式化函数时添加数字") |
||||||
|
return 0 |
||||||
|
} else { |
||||||
|
return judge[0] |
||||||
|
} |
||||||
|
}, |
||||||
|
// 列发生变化时触发 |
||||||
|
change(e) { |
||||||
|
const { |
||||||
|
indexs, |
||||||
|
values |
||||||
|
} = e |
||||||
|
let selectValue = '' |
||||||
|
if (this.mode === 'time') { |
||||||
|
// 根据value各列索引，从各列数组中，取出当前时间的选中值 |
||||||
|
selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}` |
||||||
|
} else { |
||||||
|
// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019 |
||||||
|
const year = parseInt(this.intercept(values[0][indexs[0]], 'year')) |
||||||
|
const month = parseInt(this.intercept(values[1][indexs[1]])) |
||||||
|
let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1) |
||||||
|
let hour = 0, |
||||||
|
minute = 0 |
||||||
|
// 此月份的最大天数 |
||||||
|
const maxDate = dayjs(`${year}-${month}`).daysInMonth() |
||||||
|
// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求 |
||||||
|
if (this.mode === 'year-month') { |
||||||
|
date = 1 |
||||||
|
} |
||||||
|
// 不允许超过maxDate值 |
||||||
|
date = Math.min(maxDate, date) |
||||||
|
if (this.mode === 'datetime') { |
||||||
|
hour = parseInt(this.intercept(values[3][indexs[3]])) |
||||||
|
minute = parseInt(this.intercept(values[4][indexs[4]])) |
||||||
|
} |
||||||
|
// 转为时间模式 |
||||||
|
selectValue = Number(new Date(year, month - 1, date, hour, minute)) |
||||||
|
} |
||||||
|
// 取出准确的合法值，防止超越边界的情况 |
||||||
|
selectValue = this.correctValue(selectValue) |
||||||
|
this.innerValue = selectValue |
||||||
|
this.updateColumnValue(selectValue) |
||||||
|
// 发出change时间，value为当前选中的时间戳 |
||||||
|
this.$emit('change', { |
||||||
|
value: selectValue, |
||||||
|
// #ifndef MP-WEIXIN |
||||||
|
// 微信小程序不能传递this实例，会因为循环引用而报错 |
||||||
|
picker: this.$refs.picker, |
||||||
|
// #endif |
||||||
|
mode: this.mode |
||||||
|
}) |
||||||
|
this[this.dateCheck] = dayjs(selectValue).format('YYYY-MM-DD') |
||||||
|
}, |
||||||
|
// 更新各列的值，进行补0、格式化等操作 |
||||||
|
updateColumnValue(value) { |
||||||
|
this.innerValue = value |
||||||
|
this.updateColumns() |
||||||
|
this.updateIndexs(value) |
||||||
|
}, |
||||||
|
// 更新索引 |
||||||
|
updateIndexs(value) { |
||||||
|
let values = [] |
||||||
|
const formatter = this.formatter || this.innerFormatter |
||||||
|
const padZero = uni.$u.padZero |
||||||
|
if (this.mode === 'time') { |
||||||
|
// 将time模式的时间用:分隔成数组 |
||||||
|
const timeArr = value.split(':') |
||||||
|
// 使用formatter格式化方法进行管道处理 |
||||||
|
values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])] |
||||||
|
} else { |
||||||
|
const date = new Date(value) |
||||||
|
values = [ |
||||||
|
formatter('year', `${dayjs(value).year()}`), |
||||||
|
// 月份补0 |
||||||
|
formatter('month', padZero(dayjs(value).month() + 1)) |
||||||
|
] |
||||||
|
if (this.mode === 'date') { |
||||||
|
// date模式，需要添加天列 |
||||||
|
values.push(formatter('day', padZero(dayjs(value).date()))) |
||||||
|
} |
||||||
|
if (this.mode === 'datetime') { |
||||||
|
// 数组的push方法，可以写入多个参数 |
||||||
|
values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value) |
||||||
|
.hour())), formatter('minute', padZero(dayjs(value).minute()))) |
||||||
|
} |
||||||
|
} |
||||||
|
// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引 |
||||||
|
const indexs = this.columns.map((column, index) => { |
||||||
|
// 通过取大值，可以保证不会出现找不到索引的-1情况 |
||||||
|
return Math.max(0, column.findIndex(item => item === values[index])) |
||||||
|
}) |
||||||
|
this.innerDefaultIndex = indexs |
||||||
|
}, |
||||||
|
// 更新各列的值 |
||||||
|
updateColumns() { |
||||||
|
const formatter = this.formatter || this.innerFormatter |
||||||
|
// 获取各列的值，并且map后，对各列的具体值进行补0操作 |
||||||
|
const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, |
||||||
|
value))) |
||||||
|
this.columns = results |
||||||
|
}, |
||||||
|
getOriginColumns() { |
||||||
|
// 生成各列的值 |
||||||
|
const results = this.getRanges().map(({ |
||||||
|
type, |
||||||
|
range |
||||||
|
}) => { |
||||||
|
let values = times(range[1] - range[0] + 1, (index) => { |
||||||
|
let value = range[0] + index |
||||||
|
value = type === 'year' ? `${value}` : uni.$u.padZero(value) |
||||||
|
return value |
||||||
|
}) |
||||||
|
// 进行过滤 |
||||||
|
if (this.filter) { |
||||||
|
values = this.filter(type, values) |
||||||
|
} |
||||||
|
return { |
||||||
|
type, |
||||||
|
values |
||||||
|
} |
||||||
|
}) |
||||||
|
return results |
||||||
|
}, |
||||||
|
// 通过最大值和最小值生成数组 |
||||||
|
generateArray(start, end) { |
||||||
|
return Array.from(new Array(end + 1).keys()).slice(start) |
||||||
|
}, |
||||||
|
// 得出合法的时间 |
||||||
|
correctValue(value) { |
||||||
|
const isDateMode = this.mode !== 'time' |
||||||
|
if (isDateMode && !uni.$u.test.date(value)) { |
||||||
|
// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间 |
||||||
|
value = this.minDate |
||||||
|
} else if (!isDateMode && !value) { |
||||||
|
// 如果是时间类型，而又没有默认值的话，就用最小时间 |
||||||
|
value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}` |
||||||
|
} |
||||||
|
// 时间类型 |
||||||
|
if (!isDateMode) { |
||||||
|
if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式') |
||||||
|
let [hour, minute] = value.split(':') |
||||||
|
// 对时间补零，同时控制在最小值和最大值之间 |
||||||
|
hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour))) |
||||||
|
minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute))) |
||||||
|
return `${ hour }:${ minute }` |
||||||
|
} else { |
||||||
|
// 如果是日期格式，控制在最小日期和最大日期之间 |
||||||
|
value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value |
||||||
|
value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value |
||||||
|
return value |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取每列的最大和最小值 |
||||||
|
getRanges() { |
||||||
|
if (this.mode === 'time') { |
||||||
|
return [{ |
||||||
|
type: 'hour', |
||||||
|
range: [this.minHour, this.maxHour], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'minute', |
||||||
|
range: [this.minMinute, this.maxMinute], |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
const { |
||||||
|
maxYear, |
||||||
|
maxDate, |
||||||
|
maxMonth, |
||||||
|
maxHour, |
||||||
|
maxMinute, |
||||||
|
} = this.getBoundary('max', this.innerValue); |
||||||
|
const { |
||||||
|
minYear, |
||||||
|
minDate, |
||||||
|
minMonth, |
||||||
|
minHour, |
||||||
|
minMinute, |
||||||
|
} = this.getBoundary('min', this.innerValue); |
||||||
|
const result = [{ |
||||||
|
type: 'year', |
||||||
|
range: [minYear, maxYear], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'month', |
||||||
|
range: [minMonth, maxMonth], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'day', |
||||||
|
range: [minDate, maxDate], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'hour', |
||||||
|
range: [minHour, maxHour], |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'minute', |
||||||
|
range: [minMinute, maxMinute], |
||||||
|
}, |
||||||
|
]; |
||||||
|
if (this.mode === 'date') |
||||||
|
result.splice(3, 2); |
||||||
|
if (this.mode === 'year-month') |
||||||
|
result.splice(2, 3); |
||||||
|
return result; |
||||||
|
}, |
||||||
|
// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值 |
||||||
|
getBoundary(type, innerValue) { |
||||||
|
const value = new Date(innerValue) |
||||||
|
const boundary = new Date(this[`${type}Date`]) |
||||||
|
const year = dayjs(boundary).year() |
||||||
|
let month = 1 |
||||||
|
let date = 1 |
||||||
|
let hour = 0 |
||||||
|
let minute = 0 |
||||||
|
if (type === 'max') { |
||||||
|
month = 12 |
||||||
|
// 月份的天数 |
||||||
|
date = dayjs(value).daysInMonth() |
||||||
|
hour = 23 |
||||||
|
minute = 59 |
||||||
|
} |
||||||
|
// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推 |
||||||
|
if (dayjs(value).year() === year) { |
||||||
|
month = dayjs(boundary).month() + 1 |
||||||
|
if (dayjs(value).month() + 1 === month) { |
||||||
|
date = dayjs(boundary).date() |
||||||
|
if (dayjs(value).date() === date) { |
||||||
|
hour = dayjs(boundary).hour() |
||||||
|
if (dayjs(value).hour() === hour) { |
||||||
|
minute = dayjs(boundary).minute() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return { |
||||||
|
[`${type}Year`]: year, |
||||||
|
[`${type}Month`]: month, |
||||||
|
[`${type}Date`]: date, |
||||||
|
[`${type}Hour`]: hour, |
||||||
|
[`${type}Minute`]: minute |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import '@/uni_modules/uview-ui/libs/css/components.scss'; |
||||||
|
|
||||||
|
.time-box { |
||||||
|
display: flex !important; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
flex-direction: row; |
||||||
|
border-top: 1px solid rgba(230, 230, 230, 1); |
||||||
|
padding: 20px 12px; |
||||||
|
|
||||||
|
.date-split { |
||||||
|
padding: 0 12px; |
||||||
|
} |
||||||
|
|
||||||
|
&-item { |
||||||
|
flex: 1; |
||||||
|
background: rgba(240, 243, 247, 1); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 32px; |
||||||
|
border-radius: 4px; |
||||||
|
border: 1px solid transparent; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&-check { |
||||||
|
background: rgba(38, 99, 191, 0.1); |
||||||
|
color: rgba(54, 63, 77, 1); |
||||||
|
border: 1px solid #2663BF; |
||||||
|
} |
||||||
|
|
||||||
|
&-clear { |
||||||
|
position: absolute; |
||||||
|
right: 5px; |
||||||
|
top: 9px; |
||||||
|
z-index: 999; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,124 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 是否打开组件
|
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.datetimePicker.show |
||||||
|
}, |
||||||
|
// 是否展示顶部的操作栏
|
||||||
|
showToolbar: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.datetimePicker.showToolbar |
||||||
|
}, |
||||||
|
startDate: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.datetimePicker.value |
||||||
|
}, |
||||||
|
endDate: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.datetimePicker.value |
||||||
|
}, |
||||||
|
// 绑定值
|
||||||
|
value: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.datetimePicker.value |
||||||
|
}, |
||||||
|
// 顶部标题
|
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.datetimePicker.title |
||||||
|
}, |
||||||
|
// 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
|
||||||
|
mode: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.datetimePicker.mode |
||||||
|
}, |
||||||
|
// 可选的最大时间
|
||||||
|
maxDate: { |
||||||
|
type: Number, |
||||||
|
// 最大默认值为后10年
|
||||||
|
default: uni.$u.props.datetimePicker.maxDate |
||||||
|
}, |
||||||
|
// 可选的最小时间
|
||||||
|
minDate: { |
||||||
|
type: Number, |
||||||
|
// 最小默认值为前10年
|
||||||
|
default: uni.$u.props.datetimePicker.minDate |
||||||
|
}, |
||||||
|
// 可选的最小小时，仅mode=time有效
|
||||||
|
minHour: { |
||||||
|
type: Number, |
||||||
|
default: uni.$u.props.datetimePicker.minHour |
||||||
|
}, |
||||||
|
// 可选的最大小时，仅mode=time有效
|
||||||
|
maxHour: { |
||||||
|
type: Number, |
||||||
|
default: uni.$u.props.datetimePicker.maxHour |
||||||
|
}, |
||||||
|
// 可选的最小分钟，仅mode=time有效
|
||||||
|
minMinute: { |
||||||
|
type: Number, |
||||||
|
default: uni.$u.props.datetimePicker.minMinute |
||||||
|
}, |
||||||
|
// 可选的最大分钟，仅mode=time有效
|
||||||
|
maxMinute: { |
||||||
|
type: Number, |
||||||
|
default: uni.$u.props.datetimePicker.maxMinute |
||||||
|
}, |
||||||
|
// 选项过滤函数
|
||||||
|
filter: { |
||||||
|
type: [Function, null], |
||||||
|
default: uni.$u.props.datetimePicker.filter |
||||||
|
}, |
||||||
|
// 选项格式化函数
|
||||||
|
formatter: { |
||||||
|
type: [Function, null], |
||||||
|
default: uni.$u.props.datetimePicker.formatter |
||||||
|
}, |
||||||
|
// 是否显示加载中状态
|
||||||
|
loading: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.datetimePicker.loading |
||||||
|
}, |
||||||
|
// 各列中，单个选项的高度
|
||||||
|
itemHeight: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.datetimePicker.itemHeight |
||||||
|
}, |
||||||
|
// 取消按钮的文字
|
||||||
|
cancelText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.datetimePicker.cancelText |
||||||
|
}, |
||||||
|
// 确认按钮的文字
|
||||||
|
confirmText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.datetimePicker.confirmText |
||||||
|
}, |
||||||
|
// 取消按钮的颜色
|
||||||
|
cancelColor: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.datetimePicker.cancelColor |
||||||
|
}, |
||||||
|
// 确认按钮的颜色
|
||||||
|
confirmColor: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.datetimePicker.confirmColor |
||||||
|
}, |
||||||
|
// 每列中可见选项的数量
|
||||||
|
visibleItemCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.datetimePicker.visibleItemCount |
||||||
|
}, |
||||||
|
// 是否允许点击遮罩关闭选择器
|
||||||
|
closeOnClickOverlay: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.datetimePicker.closeOnClickOverlay |
||||||
|
}, |
||||||
|
// 各列的默认索引
|
||||||
|
defaultIndex: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.datetimePicker.defaultIndex |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,266 @@ |
|||||||
|
<template> |
||||||
|
<u-popup :show="show" @close="closeHandler"> |
||||||
|
<view class="u-picker"> |
||||||
|
<u-toolbar class="v-toolbar" v-if="showToolbar" :cancelColor="cancelColor" :confirmColor="confirmColor" |
||||||
|
:cancelText="cancelText" :confirmText="confirmText" :title="title" @cancel="cancel" |
||||||
|
@confirm="confirm"></u-toolbar> |
||||||
|
<slot></slot> |
||||||
|
<picker-view class="u-picker__view" :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`" |
||||||
|
:value="innerIndex" :immediateChange="immediateChange" :style="{ |
||||||
|
height: `${$u.addUnit(visibleItemCount * itemHeight)}` |
||||||
|
}" @change="changeHandler"> |
||||||
|
<picker-view-column v-for="(item, index) in innerColumns" :key="index" class="u-picker__view__column"> |
||||||
|
<text v-if="$u.test.array(item)" class="u-picker__view__column__item u-line-1" |
||||||
|
v-for="(item1, index1) in item" :key="index1" :style="{ |
||||||
|
height: $u.addUnit(itemHeight), |
||||||
|
lineHeight: $u.addUnit(itemHeight), |
||||||
|
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal' |
||||||
|
}">{{ getItemText(item1) }}</text> |
||||||
|
</picker-view-column> |
||||||
|
</picker-view> |
||||||
|
<view v-if="loading" class="u-picker--loading"> |
||||||
|
<u-loading-icon mode="circle"></u-loading-icon> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</u-popup> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
/** |
||||||
|
* u-picker |
||||||
|
* @description 选择器 |
||||||
|
* @property {Boolean} show 是否显示picker弹窗（默认 false ） |
||||||
|
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ） |
||||||
|
* @property {String} title 顶部标题 |
||||||
|
* @property {Array} columns 对象数组，设置每一列的数据 |
||||||
|
* @property {Boolean} loading 是否显示加载中状态（默认 false ） |
||||||
|
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ） |
||||||
|
* @property {String} cancelText 取消按钮的文字（默认 '取消' ） |
||||||
|
* @property {String} confirmText 确认按钮的文字（默认 '确定' ） |
||||||
|
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ） |
||||||
|
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ） |
||||||
|
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ） |
||||||
|
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ） |
||||||
|
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ） |
||||||
|
* @property {Array} defaultIndex 各列的默认索引 |
||||||
|
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ） |
||||||
|
* @event {Function} close 关闭选择器时触发 |
||||||
|
* @event {Function} cancel 点击取消按钮触发 |
||||||
|
* @event {Function} change 当选择值变化时触发 |
||||||
|
* @event {Function} confirm 点击确定按钮，返回当前选择的值 |
||||||
|
*/ |
||||||
|
import props from './props.js'; |
||||||
|
export default { |
||||||
|
name: 'u-picker', |
||||||
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// 上一次选择的列索引 |
||||||
|
lastIndex: [], |
||||||
|
// 索引值 ，对应picker-view的value |
||||||
|
innerIndex: [], |
||||||
|
// 各列的值 |
||||||
|
innerColumns: [], |
||||||
|
// 上一次的变化列索引 |
||||||
|
columnIndex: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// 监听默认索引的变化，重新设置对应的值 |
||||||
|
defaultIndex: { |
||||||
|
immediate: true, |
||||||
|
handler(n) { |
||||||
|
this.setIndexs(n, true) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 监听columns参数的变化 |
||||||
|
columns: { |
||||||
|
immediate: true, |
||||||
|
handler(n) { |
||||||
|
this.setColumns(n) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取item需要显示的文字，判别为对象还是文本 |
||||||
|
getItemText(item) { |
||||||
|
if (uni.$u.test.object(item)) { |
||||||
|
return item[this.keyName] |
||||||
|
} else { |
||||||
|
return item |
||||||
|
} |
||||||
|
}, |
||||||
|
// 关闭选择器 |
||||||
|
closeHandler() { |
||||||
|
if (this.closeOnClickOverlay) { |
||||||
|
this.$emit('close') |
||||||
|
} |
||||||
|
}, |
||||||
|
// 点击工具栏的取消按钮 |
||||||
|
cancel() { |
||||||
|
this.$emit('cancel') |
||||||
|
}, |
||||||
|
// 点击工具栏的确定按钮 |
||||||
|
confirm() { |
||||||
|
this.$emit('confirm', { |
||||||
|
indexs: this.innerIndex, |
||||||
|
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]), |
||||||
|
values: this.innerColumns |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 选择器某一列的数据发生变化时触发 |
||||||
|
changeHandler(e) { |
||||||
|
const { |
||||||
|
value |
||||||
|
} = e.detail |
||||||
|
let index = 0, |
||||||
|
columnIndex = 0 |
||||||
|
// 通过对比前后两次的列索引，得出当前变化的是哪一列 |
||||||
|
for (let i = 0; i < value.length; i++) { |
||||||
|
let item = value[i] |
||||||
|
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0 |
||||||
|
// 设置columnIndex为当前变化列的索引 |
||||||
|
columnIndex = i |
||||||
|
// index则为变化列中的变化项的索引 |
||||||
|
index = item |
||||||
|
break // 终止循环，即使少一次循环，也是性能的提升 |
||||||
|
} |
||||||
|
} |
||||||
|
this.columnIndex = columnIndex |
||||||
|
const values = this.innerColumns |
||||||
|
// 将当前的各项变化索引，设置为"上一次"的索引变化值 |
||||||
|
this.setLastIndex(value) |
||||||
|
this.setIndexs(value) |
||||||
|
|
||||||
|
this.$emit('change', { |
||||||
|
// #ifndef MP-WEIXIN || MP-LARK |
||||||
|
// 微信小程序不能传递this，会因为循环引用而报错 |
||||||
|
picker: this, |
||||||
|
// #endif |
||||||
|
value: this.innerColumns.map((item, index) => item[value[index]]), |
||||||
|
index, |
||||||
|
indexs: value, |
||||||
|
// values为当前变化列的数组内容 |
||||||
|
values, |
||||||
|
columnIndex |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 设置index索引，此方法可被外部调用设置 |
||||||
|
setIndexs(index, setLastIndex) { |
||||||
|
this.innerIndex = uni.$u.deepClone(index) |
||||||
|
if (setLastIndex) { |
||||||
|
this.setLastIndex(index) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 记录上一次的各列索引位置 |
||||||
|
setLastIndex(index) { |
||||||
|
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中 |
||||||
|
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列 |
||||||
|
this.lastIndex = uni.$u.deepClone(index) |
||||||
|
}, |
||||||
|
// 设置对应列选项的所有值 |
||||||
|
setColumnValues(columnIndex, values) { |
||||||
|
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法 |
||||||
|
this.innerColumns.splice(columnIndex, 1, values) |
||||||
|
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0 |
||||||
|
let tmpIndex = uni.$u.deepClone(this.innerIndex) |
||||||
|
for (let i = 0; i < this.innerColumns.length; i++) { |
||||||
|
if (i > this.columnIndex) { |
||||||
|
tmpIndex[i] = 0 |
||||||
|
} |
||||||
|
} |
||||||
|
// 一次性赋值，不能单个修改，否则无效 |
||||||
|
this.setIndexs(tmpIndex) |
||||||
|
}, |
||||||
|
// 获取对应列的所有选项 |
||||||
|
getColumnValues(columnIndex) { |
||||||
|
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值 |
||||||
|
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性 |
||||||
|
(async () => { |
||||||
|
await uni.$u.sleep() |
||||||
|
})() |
||||||
|
return this.innerColumns[columnIndex] |
||||||
|
}, |
||||||
|
// 设置整体各列的columns的值 |
||||||
|
setColumns(columns) { |
||||||
|
this.innerColumns = uni.$u.deepClone(columns) |
||||||
|
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量 |
||||||
|
if (this.innerIndex.length === 0) { |
||||||
|
this.innerIndex = new Array(columns.length).fill(0) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取各列选中值对应的索引 |
||||||
|
getIndexs() { |
||||||
|
return this.innerIndex |
||||||
|
}, |
||||||
|
// 获取各列选中的值 |
||||||
|
getValues() { |
||||||
|
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值 |
||||||
|
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性 |
||||||
|
(async () => { |
||||||
|
await uni.$u.sleep() |
||||||
|
})() |
||||||
|
return this.innerColumns.map((item, index) => item[this.innerIndex[index]]) |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
@import "@/uni_modules/uview-ui/libs/css/components.scss"; |
||||||
|
|
||||||
|
|
||||||
|
.v-toolbar { |
||||||
|
/deep/ .u-toolbar__title { |
||||||
|
font-weight: bold !important; |
||||||
|
color: rgba(54, 63, 77, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.u-picker { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&__view { |
||||||
|
|
||||||
|
&__column { |
||||||
|
@include flex; |
||||||
|
flex: 1; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
&__item { |
||||||
|
@include flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: block; |
||||||
|
/* #endif */ |
||||||
|
color: $u-main-color; |
||||||
|
|
||||||
|
&--disabled { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
cursor: not-allowed; |
||||||
|
/* #endif */ |
||||||
|
opacity: 0.35; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&--loading { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
right: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
@include flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
background-color: rgba(255, 255, 255, 0.87); |
||||||
|
z-index: 1000; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,79 @@ |
|||||||
|
export default { |
||||||
|
props: { |
||||||
|
// 是否展示picker弹窗
|
||||||
|
show: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.picker.show |
||||||
|
}, |
||||||
|
// 是否展示顶部的操作栏
|
||||||
|
showToolbar: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.picker.showToolbar |
||||||
|
}, |
||||||
|
// 顶部标题
|
||||||
|
title: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.picker.title |
||||||
|
}, |
||||||
|
// 对象数组，设置每一列的数据
|
||||||
|
columns: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.picker.columns |
||||||
|
}, |
||||||
|
// 是否显示加载中状态
|
||||||
|
loading: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.picker.loading |
||||||
|
}, |
||||||
|
// 各列中，单个选项的高度
|
||||||
|
itemHeight: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.picker.itemHeight |
||||||
|
}, |
||||||
|
// 取消按钮的文字
|
||||||
|
cancelText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.picker.cancelText |
||||||
|
}, |
||||||
|
// 确认按钮的文字
|
||||||
|
confirmText: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.picker.confirmText |
||||||
|
}, |
||||||
|
// 取消按钮的颜色
|
||||||
|
cancelColor: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.picker.cancelColor |
||||||
|
}, |
||||||
|
// 确认按钮的颜色
|
||||||
|
confirmColor: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.picker.confirmColor |
||||||
|
}, |
||||||
|
// 每列中可见选项的数量
|
||||||
|
visibleItemCount: { |
||||||
|
type: [String, Number], |
||||||
|
default: uni.$u.props.picker.visibleItemCount |
||||||
|
}, |
||||||
|
// 选项对象中，需要展示的属性键名
|
||||||
|
keyName: { |
||||||
|
type: String, |
||||||
|
default: uni.$u.props.picker.keyName |
||||||
|
}, |
||||||
|
// 是否允许点击遮罩关闭选择器
|
||||||
|
closeOnClickOverlay: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.picker.closeOnClickOverlay |
||||||
|
}, |
||||||
|
// 各列的默认索引
|
||||||
|
defaultIndex: { |
||||||
|
type: Array, |
||||||
|
default: uni.$u.props.picker.defaultIndex |
||||||
|
}, |
||||||
|
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
|
||||||
|
immediateChange: { |
||||||
|
type: Boolean, |
||||||
|
default: uni.$u.props.picker.immediateChange |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 594 B |
Loading…
Reference in new issue