139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<template>
|
||
<view class="mpvue-picker">
|
||
<page-head :title="title"></page-head>
|
||
<view class="uni-padding-wrap uni-common-mt">
|
||
<view class="uni-title">
|
||
<!-- #ifndef H5 -->
|
||
<uni-icons size="16" type="info"></uni-icons>
|
||
<!-- #endif -->
|
||
说明 :
|
||
</view>
|
||
<view class="uni-helllo-text">
|
||
<view>
|
||
在App端可在pages.json里配置buttons，暂不支持动态改变buttons的样式，使用onNavigationBarButtonTap可监听城市选择按钮的点击事件。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
|
||
:pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"
|
||
:pickerValueArray="pickerValueArray"></mpvue-picker>
|
||
|
||
<!-- <picker ref="mpvuePicker" @change="bindPickerChange" :value="index" :range="pickerValueArray" range-key="label">
|
||
<view class="">{{pickerValueArray[index].label}}</view>
|
||
</picker>
|
||
-->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// https://github.com/zhetengbiji/mpvue-picker
|
||
import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
|
||
// https://github.com/zhetengbiji/mpvue-citypicker
|
||
|
||
export default {
|
||
components: {
|
||
mpvuePicker
|
||
},
|
||
data() {
|
||
return {
|
||
title: 'nav-city-dropdown',
|
||
pickerValueArray: [{
|
||
label: '北京市',
|
||
value: 110000
|
||
},
|
||
{
|
||
label: '天津市',
|
||
value: 120000
|
||
},
|
||
{
|
||
label: '广州市',
|
||
value: 440100
|
||
},
|
||
{
|
||
label: '深圳市',
|
||
value: 440300
|
||
}
|
||
],
|
||
themeColor: '#007AFF',
|
||
mode: '',
|
||
deepLength: 1,
|
||
pickerValueDefault: [0],
|
||
index: 0,
|
||
};
|
||
},
|
||
onReady() {
|
||
// #ifdef VUE3
|
||
this.setStyle(0, '北京市')
|
||
// #endif
|
||
// #ifndef VUE3
|
||
this.setStyle(1, '北京市')
|
||
// #endif
|
||
},
|
||
methods: {
|
||
onCancel(e) {
|
||
console.log(e);
|
||
},
|
||
// 单列
|
||
showSinglePicker() {
|
||
this.mode = 'selector';
|
||
this.deepLength = 1;
|
||
this.pickerValueDefault = [0];
|
||
this.$refs.mpvuePicker.show();
|
||
},
|
||
onConfirm(e) {
|
||
console.log(e.label);
|
||
// #ifdef VUE3
|
||
this.setStyle(0, e.label)
|
||
// #endif
|
||
// #ifndef VUE3
|
||
this.setStyle(1, e.label)
|
||
// #endif
|
||
},
|
||
/**
|
||
* 修改导航栏buttons
|
||
* index[number] 修改的buttons 下标索引，最右边索引为0
|
||
* text[string] 需要修改的text 内容
|
||
*/
|
||
setStyle(index, text) {
|
||
let pages = getCurrentPages();
|
||
let page = pages[pages.length - 1];
|
||
if (text.length > 3) {
|
||
text = text.substr(0, 3) + '...';
|
||
}
|
||
// #ifdef APP-PLUS
|
||
let currentWebview = page.$getAppWebview();
|
||
let titleNView = currentWebview.getStyle().titleNView;
|
||
// 添加文字过长截取为3个字符，请根据自己业务需求更改
|
||
titleNView.buttons[0].text = text;
|
||
currentWebview.setStyle({
|
||
titleNView: titleNView
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
// h5 临时方案
|
||
const btn = document.getElementsByClassName('uni-btn-icon')[index]
|
||
btn.innerText = text;
|
||
// #endif
|
||
}
|
||
},
|
||
onBackPress() {
|
||
if (this.$refs.mpvuePicker.showPicker) {
|
||
this.$refs.mpvuePicker.pickerCancel();
|
||
return true;
|
||
}
|
||
},
|
||
onUnload() {
|
||
if (this.$refs.mpvuePicker.showPicker) {
|
||
this.$refs.mpvuePicker.pickerCancel();
|
||
}
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
if (e.index === 0) {
|
||
this.showSinglePicker();
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style></style>
|