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> |