province-uniapp-qinghai-ipad/components/commonSelect.vue

<template>
	<view>
		<u-input v-model="v" readonly placeholder="请选择">
			<template v-if="!readonly" slot="suffix">
				<u-button @tap="openSelect" text="点击选择" type="primary" size="small"></u-button>
			</template>
		</u-input>
		<action-sheet :actions="options" title="请选择" :show="showSelector" @closeOnClickOverlay="showSelector = false"
			@close="showSelector = false" @select="onSelect" />
	</view>
</template>

<script>
	import {
		str,
		clone
	} from '@/utils/tools';
	import * as allStatic from './options.js'
	import actionSheet from './u-action-sheet/my-action-sheet.vue'
	export default {
		name: "commonSelect",
		props: {
			value: {
				type: [String, Number],
				required: false,
				default: null,
			},
			data: {
				type: [String, Array],
				required: true
			},
			remote: {
				type: Boolean,
				required: false,
				default: false,
			},
			readonly: {
				type: Boolean,
				required: false,
				default: false,
			}
		},
		components: {
			// uInput
			actionSheet
		},
		data() {
			return {
				v: str(this.value, null),
				_name: this.getName(),
				options: [],
				showSelector: false,
			};
		},
		watch: {
			value(n, o) {
				this._vlaue = str(n, null)
			},
			data: {
				handler: function(n, o) {
					this.initOptions()
				},
				immediate: true,
			}
		},
		methods: {
			getName() {
				if (!this.v) {
					return ''
				}
			},
			openSelect() {
				uni.hideKeyboard()
				if (!this.readonly) {
					this.showSelector = true
				}
			},
			onSelect(n) {
				this.v = n.name
				console.log('select', arguments);
			},
			parseData(d) {
				return {
					name: d.text,
					value: d.value,
					raw: d,
				}
			},
			initOptions() {
				if (Array.isArray(this.data)) { // 本地数据
					this.options = clone(this.data).map(this.parseData)
					console.log(this.options);
				} else if(this.remote){ // 字典数据

				} else { // 静态数据
					this.options = allStatic[this.data].map(this.parseData)
				}
			}
		}
	}
</script>

<style>

</style>