From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 30 Nov 2023 16:36:45 +0800 Subject: [PATCH] fix:是否修改 --- uni_modules/uview-ui/components/u-picker/u-picker.vue | 283 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 283 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-picker/u-picker.vue b/uni_modules/uview-ui/components/u-picker/u-picker.vue new file mode 100644 index 0000000..8885917 --- /dev/null +++ b/uni_modules/uview-ui/components/u-picker/u-picker.vue @@ -0,0 +1,283 @@ +<template> + <u-popup + :show="show" + @close="closeHandler" + > + <view class="u-picker"> + <u-toolbar + v-if="showToolbar" + :cancelColor="cancelColor" + :confirmColor="confirmColor" + :cancelText="cancelText" + :confirmText="confirmText" + :title="title" + @cancel="cancel" + @confirm="confirm" + ></u-toolbar> + <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 "../../libs/css/components.scss"; + + .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> -- Gitblit v1.8.0