178 lines
4.3 KiB
Vue
178 lines
4.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<DaDropdownVue2
|
||
ref="daDropdownVue2Ref"
|
||
:dropdownMenu="dropdownMenuList"
|
||
@confirm="handleConfirm"
|
||
@close="handleClose"
|
||
@open="handleOpen">
|
||
<template v-slot:slot3="{item,index}">
|
||
<view style="padding: 40px">
|
||
自定义插槽内容
|
||
<input
|
||
type="text"
|
||
class="slot-input"
|
||
placeholder="请输入1"
|
||
v-model="item.value">
|
||
|
||
<input
|
||
type="text"
|
||
class="slot-input"
|
||
placeholder="请输入2"
|
||
v-model="item.value">
|
||
|
||
|
||
<view class="uni-list-cell">
|
||
<view class="uni-list-cell-left">
|
||
当前选择
|
||
</view>
|
||
<view class="uni-list-cell-db">
|
||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||
<view class="uni-input">{{date}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<button @click="onGetInput(item,index)">查询</button>
|
||
</view>
|
||
</template>
|
||
</DaDropdownVue2>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import DaDropdownVue2 from '../../components/da-dropdown-vue2/index.vue'
|
||
export default {
|
||
components: { DaDropdownVue2 },
|
||
data() {
|
||
const currentDate = this.getDate({
|
||
format: true
|
||
})
|
||
return {
|
||
title: 'picker',
|
||
array: ['中国', '美国', '巴西', '日本'],
|
||
index: 0,
|
||
date: currentDate,
|
||
time: '12:01',
|
||
dropdownMenuList: [
|
||
// {
|
||
// title: '插槽1',
|
||
// type: 'slot1',
|
||
// prop: 'god1',
|
||
// showArrow: true,
|
||
// },
|
||
// {
|
||
// title: '下拉',
|
||
// type: 'cell',
|
||
// prop: 'god1',
|
||
// showAll: true,
|
||
// showIcon: true,
|
||
// // value: '2', // 默认内容2
|
||
// options: [
|
||
// { label: '下拉列表项1', value: '1', suffix: '副标题' },
|
||
// { label: '下拉列表项2', value: '2' },
|
||
// { label: '下拉列表项3', value: '3' },
|
||
// ],
|
||
// },
|
||
// {
|
||
// title: '插槽2',
|
||
// type: 'slot2',
|
||
// prop: 'god2',
|
||
// showArrow: true,
|
||
// },
|
||
{
|
||
title: '条件查询',
|
||
type: 'slot3',
|
||
prop: 'god3',
|
||
showArrow: true,
|
||
},
|
||
// {
|
||
// title: '日期',
|
||
// type: 'daterange',
|
||
// prop: 'god6',
|
||
// // 默认选中 2022-01-01到2022-02-01
|
||
// // value: { start: '2022-01-01', end: '2022-02-01' },
|
||
// },
|
||
// {
|
||
// title: '插槽4',
|
||
// type: 'slot4',
|
||
// prop: 'god4',
|
||
// showArrow: true,
|
||
// },
|
||
// {
|
||
// title: '插槽5',
|
||
// type: 'slot5',
|
||
// prop: 'god5',
|
||
// showArrow: true,
|
||
// },
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
startDate() {
|
||
return this.getDate('start');
|
||
},
|
||
endDate() {
|
||
return this.getDate('end');
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
bindPickerChange: function(e) {
|
||
console.log('picker发送选择改变，携带值为', e.detail.value)
|
||
this.index = e.detail.value
|
||
},
|
||
bindDateChange: function(e) {
|
||
this.date = e.detail.value
|
||
},
|
||
bindTimeChange: function(e) {
|
||
this.time = e.detail.value
|
||
},
|
||
getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
|
||
if (type === 'start') {
|
||
year = year - 60;
|
||
} else if (type === 'end') {
|
||
year = year + 2;
|
||
}
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
handleConfirm(v, selectedValue) {
|
||
console.log('handleConfirm ==>', v, selectedValue)
|
||
},
|
||
handleClose(v, callbackMenuList) {
|
||
console.log('handleClose ==>', v, callbackMenuList)
|
||
},
|
||
handleOpen(v) {
|
||
console.log('handleOpen ==>', v)
|
||
},
|
||
handleSwitchChange(event, item, index) {
|
||
console.log('handleSwitchChange ==>', event, item, index)
|
||
|
||
item.value = event.detail.value === true ? 1 : 0
|
||
// 操作完成后关闭弹窗
|
||
this.$refs.daDropdownVue2Ref?.closeMenuPopup()
|
||
},
|
||
onGetInput(item, index) {
|
||
console.log('onGetInput ==>', item, index)
|
||
console.log('当前输入的内容是 ==>', item.value)
|
||
|
||
// 操作完成后关闭弹窗
|
||
this.$refs.daDropdownVue2Ref?.closeMenuPopup()
|
||
},
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("genzong.css");
|
||
</style> |