From 659d09ec24dab6c451220c8f3bb3943b0fdb3ba1 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 08 Jan 2024 16:16:12 +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