192 lines
4.7 KiB
Vue
192 lines
4.7 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<Sieving
|
|||
|
|
ref="daDropdown"
|
|||
|
|
:dropdownMenu="dropdownMenuList"
|
|||
|
|
themeColor="#333"
|
|||
|
|
@confirm="handleConfirm"
|
|||
|
|
@close="handleClose"
|
|||
|
|
@open="handleOpen">
|
|||
|
|
<!-- <template v-slot:slot2="{item,index}">
|
|||
|
|
<view style="padding: 20px">
|
|||
|
|
自定义插槽内容，更多业务
|
|||
|
|
<button @click="$refs.daDropdown.closeMenuPopup()">关闭</button>
|
|||
|
|
</view>
|
|||
|
|
</template> -->
|
|||
|
|
</Sieving>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 引入组件
|
|||
|
|
import Sieving from '@/components/sieving/index.vue'
|
|||
|
|
export default {
|
|||
|
|
components: { Sieving },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dropdownMenuList: [
|
|||
|
|
{
|
|||
|
|
title: '类型',
|
|||
|
|
type: 'cell',
|
|||
|
|
prop: 'god1',
|
|||
|
|
showAll: true,
|
|||
|
|
showIcon: true,
|
|||
|
|
value: '2', // 默认内容2
|
|||
|
|
options: [
|
|||
|
|
{ label: '综合排序', value: '1' },
|
|||
|
|
// { label: '下拉列表项1', value: '1', suffix: '可插入副标题' },
|
|||
|
|
{ label: '好评最多', value: '2' },
|
|||
|
|
{ label: '距离最近', value: '3' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
title: '口味',
|
|||
|
|
type: 'filter',
|
|||
|
|
prop: 'god4',
|
|||
|
|
// 默认选中单选2、多选2、3、滑动30
|
|||
|
|
value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
|
|||
|
|
options: [
|
|||
|
|
{
|
|||
|
|
title: '口味（单选）',
|
|||
|
|
type: 'radio',
|
|||
|
|
prop: 'ft1',
|
|||
|
|
options: [
|
|||
|
|
{ label: '酱香', value: '1' },
|
|||
|
|
{ label: '麻辣', value: '2' },
|
|||
|
|
{ label: '特辣', value: '3' },
|
|||
|
|
{ label: '微微辣', value: '4' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '配菜（可多选）',
|
|||
|
|
type: 'checkbox',
|
|||
|
|
prop: 'ft2',
|
|||
|
|
options: [
|
|||
|
|
{ label: '香菜', value: '1' },
|
|||
|
|
{ label: '辣椒', value: '2' },
|
|||
|
|
{ label: '折耳根', value: '3' },
|
|||
|
|
{ label: '蒜泥', value: '4' },
|
|||
|
|
{ label: '耗油', value: '5' },
|
|||
|
|
{ label: '精品牛肉酱', value: '6' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '糖度',
|
|||
|
|
type: 'slider',
|
|||
|
|
prop: 'ft3',
|
|||
|
|
componentProps: {
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
step: 1,
|
|||
|
|
showValue: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '区域',
|
|||
|
|
type: 'picker',
|
|||
|
|
prop: 'god5',
|
|||
|
|
showAll: true,
|
|||
|
|
showIcon: true,
|
|||
|
|
field: {
|
|||
|
|
label: 'label',
|
|||
|
|
value: 'value',
|
|||
|
|
children: 'children',
|
|||
|
|
},
|
|||
|
|
value: ['2', '2-2'], // 默认选中 级联X22
|
|||
|
|
options: [{
|
|||
|
|
label: '广东省',
|
|||
|
|
value: '1',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '佛山市',
|
|||
|
|
value: '1-1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '深圳市',
|
|||
|
|
value: '1-2',
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '海南省',
|
|||
|
|
value: '2',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '海口市',
|
|||
|
|
value: '2-1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '儋州市',
|
|||
|
|
value: '2-2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '三亚市',
|
|||
|
|
value: '2-3',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '浙江省',
|
|||
|
|
value: '3',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '杭州市',
|
|||
|
|
value: '3-1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '宁波市',
|
|||
|
|
value: '3-2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '嘉兴市',
|
|||
|
|
value: '3-3',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '日期',
|
|||
|
|
type: 'daterange',
|
|||
|
|
prop: 'god6',
|
|||
|
|
// 默认选中 2022-01-01到2022-02-01
|
|||
|
|
value: { start: '2022-01-01', end: '2022-02-01' },
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// title: '插槽',
|
|||
|
|
// type: 'slot2',
|
|||
|
|
// prop: 'god2',
|
|||
|
|
// showArrow: true,
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// title: '排序',
|
|||
|
|
// type: 'sort',
|
|||
|
|
// prop: 'god3',
|
|||
|
|
// value: 'asc', // 默认升序
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleConfirm(v, selectedValue) {
|
|||
|
|
console.log('当前项: ', v)
|
|||
|
|
console.log('---------------')
|
|||
|
|
console.log('全部项目(所有): ', selectedValue)
|
|||
|
|
},
|
|||
|
|
handleClose(v, callbackMenuList) {
|
|||
|
|
// console.log('handleClose ==>', v, callbackMenuList)
|
|||
|
|
},
|
|||
|
|
handleOpen(v) {
|
|||
|
|
// console.log('handleOpen ==>', v)
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
|
|||
|
|
</style>
|