Merge pull request #52 from zhetengbiji/master

优化示例

examples/hello-uniapp/pages/template/mpvue-picker/mpvue-picker.vue

@@ -6,18 +6,21 @@
 			<view class="picker-text">{{pickerText}}</view>
 		</view>
 		<view class="page-bd">
-            <button type="default" @click="showMulLinkageTwoPicker">二级联动示例</button>
-            <button type="default" @click="showMulLinkageThreePicker">三级联动示例</button>
+			<button type="default" @click="showSinglePicker">单列选择</button>
+			<button type="default" @click="showMulLinkageTwoPicker">二级联动</button>
+			<button type="default" @click="showMulLinkageThreePicker">三级城市联动</button>
 		</view>
-        <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" mode="multiLinkageSelector" :deepLength="2" :pickerValueDefault="pickerValueDefault"
+		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
 		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
-        <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel"
-            @onConfirm="onConfirm"></mpvue-city-picker>
+		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
+		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
 	</view>
 </template>
 
 <script>
+	// https://github.com/zhetengbiji/mpvue-picker
 	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
+	// https://github.com/zhetengbiji/mpvue-citypicker
 	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
 	import cityData from '../../../common/city.data.js';
 
@@ -29,26 +32,58 @@
 		data() {
 			return {
 				pickerValueDefault: [0, 0],
-                pickerValueArray: cityData,
+				pickerSingleArray: [{
+						label: '中国',
+						value: 1
+					},
+					{
+						label: '俄罗斯',
+						value: 2
+					},
+					{
+						label: '美国',
+						value: 3
+					},
+					{
+						label: '日本',
+						value: 4
+					}
+				],
+				mulLinkageTwoPicker: cityData,
 				cityPickerValueDefault: [0, 0, 1],
 				themeColor: '#007AFF',
-                pickerText: ''
+				pickerText: '',
+				mode: '',
+				deepLength: 1,
+				pickerValueDefault: [0]
 			};
 		},
 		methods: {
 			onCancel(e) {
-                console.log(e);
+				console.log(e)
+			},
+			// 单列
+			showSinglePicker() {
+				this.pickerValueArray = this.pickerSingleArray
+				this.mode = 'selector'
+				this.deepLength = 1
+				this.pickerValueDefault = [0]
+				this.$refs.mpvuePicker.show()
 			},
 			// 二级联动选择
 			showMulLinkageTwoPicker() {
-                this.$refs.mpvuePicker.show();
+				this.pickerValueArray = this.mulLinkageTwoPicker
+				this.mode = 'multiLinkageSelector'
+				this.deepLength = 2
+				this.pickerValueDefault = [0, 0]
+				this.$refs.mpvuePicker.show()
 			},
 			// 三级联动选择
 			showMulLinkageThreePicker() {
-                this.$refs.mpvueCityPicker.show();
+				this.$refs.mpvueCityPicker.show()
 			},
 			onConfirm(e) {
-                this.pickerText = JSON.stringify(e);
+				this.pickerText = JSON.stringify(e)
 			}
 		},
 		onUnload() {