PIUI 高质量开源组件库

# Dropdown 下拉菜单 v1.2.0

下拉选择容器，一般用于数据过滤、排序等场景。

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
√ √ √ √ √ √ √

# 示例

# 基础用法

TIP

  1. pi-dropdown 可通过v-model | value：进行所有下拉菜单的数值绑定，接收一个数组，数组中的每一项对应的 pi-dropdown-item 绑定的值（可选）
  2. pi-dropdown-item 也可通过v-model | value：进行该项菜单的数值绑定，接收一个值 String | Number，值与 pi-dropdown 绑定的数组中的每一项对应（可选）
  3. pi-dropdown 与 pi-dropdown-item 可以同时使用，但是 pi-dropdown-item 的值优先级高于 pi-dropdown 的值，会自动进行数据同步，覆盖 pi-dropdown 的值
<template>
  <pi-dropdown v-model="baseUsed.value">
    <pi-dropdown-item v-model="baseUsed.order" title="综合" :options="orders" />
    <pi-dropdown-item
      v-model="baseUsed.discount"
      title="折扣"
      :options="discounts"
      disabled
    />
    <pi-dropdown-item v-model="baseUsed.type" title="类型" :options="types" />
    <pi-dropdown-item v-model="baseUsed.size" title="尺寸" :options="sizes" />
    <pi-dropdown-item
      v-model="baseUsed.region"
      show-icon
      :icon-option="{ name: 'list' }"
      title="地区"
      :options="regions"
    />
  </pi-dropdown>
</template>

<script>
export default {
  data() {
    return {
      baseUsed: {
        value: ['credit', 4], // 绑定默认值
        order: 'credit',
        discount: 4,
        type: '',
        size: ''
      },
          orders: [
        {
          text: '默认排序',
          id: 'default'
        },
        {
          text: '信用',
          id: 'credit'
        },
        {
          text: '价格优先',
          id: 'price'
        }
      ],
      discounts: [
        {
          text: '全部',
          id: 1
        },
        {
          text: '9.9折',
          id: 2
        },
        {
          text: '8.8折',
          id: 3
        },
        {
          text: '7.7折',
          id: 4
        }
      ],
      types: [
        {
          text: '包邮',
          id: 1
        },
        {
          text: '全球购',
          id: 2
        },
        {
          text: '半折',
          id: 3
        },
        {
          text: '免费包邮',
          id: 4
        },
        {
          text: '折扣排序',
          id: 5
        }
      ],
      sizes: [
        {
          text: '小',
          id: 1
        },
        {
          text: '中',
          id: 2,
          disabled: true
        },
        {
          text: '大',
          id: 3
        }
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

# 自定义插槽

<template>
  <pi-dropdown ref="custom-slot" v-model="customSlot.value">
    <pi-dropdown-item v-model="customSlot.order" title="综合" :options="orders" />
    <pi-dropdown-item v-model="customSlot.discount" title="折扣" :options="discounts" />
    <pi-dropdown-item v-model="customSlot.type" title="自定义插槽" :options="types">
      <view class="pi-pd-24">
        <!-- 插槽内容 -->
        <pi-grid col="2" gap="24">
          <pi-grid-item v-for="(type, index) in types" :key="type.id" :index="index">
            <view
              class="pi-h-100P pi-flex-column-center pi-pd-tb-20"
              :class="{ 'pi-bg-fourth pi-white': customSlot.type === type.id }"
              @tap="handleSelectCustomSlot(type)"
            >
              {{ type.text }}
            </view>
          </pi-grid-item>
        </pi-grid>
      </view>
      <!-- 插槽内容 End -->
    </pi-dropdown-item>
    <pi-dropdown-item v-model="customSlot.size" title="尺寸" :options="sizes" />
    <pi-dropdown-item
      v-model="customSlot.region"
      show-icon
      :icon-option="{ name: 'list' }"
      title="地区"
      :options="regions"
    />
  </pi-dropdown>
</template>

<script>
export default {
  data() {
    return {
      customSlot: {
        value: [], // 绑定默认值
        order: '',
        discount: '',
        type: 3,
        size: '',
        region: ''
      },
      orders: [
        {
          text: '默认排序',
          id: 'default'
        },
        {
          text: '信用',
          id: 'credit'
        },
        {
          text: '价格优先',
          id: 'price'
        }
      ],
      discounts: [
        {
          text: '全部',
          id: 1
        },
        {
          text: '9.9折',
          id: 2
        },
        {
          text: '8.8折',
          id: 3
        },
        {
          text: '7.7折',
          id: 4
        }
      ],
      types: [
        {
          text: '包邮',
          id: 1
        },
        {
          text: '全球购',
          id: 2
        },
        {
          text: '半折',
          id: 3
        },
        {
          text: '免费包邮',
          id: 4
        },
        {
          text: '折扣排序',
          id: 5
        }
      ],
      sizes: [
        {
          text: '小',
          id: 1
        },
        {
          text: '中',
          id: 2,
          disabled: true
        },
        {
          text: '大',
          id: 3
        }
      ],
      regions: [
        {
          text: '广东',
          id: 1
        },
        {
          text: '广西',
          id: 2
        },
        {
          text: '北京',
          id: 3
        },
        {
          text: '新疆',
          id: 4
        }
      ]
    }
  },
  methods: {
    handleSelectCustomSlot(type) {
      this.customSlot.type = type.id
      this.$refs['custom-slot'].submit()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
Name Description Type Required Default
value 初始值 — false []
customStyle 自定义样式，对象形式 Object false -
customClass 自定义样式类，字符串形式 String false -
contentStyle 自定义样式，对象形式 Object false -
contentClass 自定义样式类，字符串形式 String false -
mask 弹窗蒙层的配置 Object false mask配置项
activeColor 默认选中色 String false -
itemHeight 行高 值为数字，则单位默认rpx String / Number false 110
keyField 选项id字段 String false id
displayField 选项显示字段 String false text
disabledField 选项禁用字段，默认为disabled String false disabled
selectedImg 选中图标的配置 Object false selectedImg配置项
selectedCheckbox 选中checkbox配置 Object false selectedCheckbox配置项
Name Description Type Required Default
value 初始值 — false -
customStyle 自定义样式，对象形式 Object false -
customClass 自定义样式类，字符串形式 String false -
showIcon 是否显示菜单 Boolean false dropdownItem.showIcon
iconOption 菜单图标配置, 对象形式 Object false iconOption配置项
title 菜单标题 String false dropdownItem.title
disabled 是否禁用 Boolean false dropdownItem.disabled
options 选项列表，默认 Array false -
itemHeight 行高 值为数字，则单位默认rpx String / Number false 110
keyField 选项id字段 String false id
displayField 选项显示字段 String false text
disabledField 选项禁用字段，默认为disabled String false disabled
selectedImg 选中图标的配置 Object false selectedImg配置项
selectedCheckbox 选中checkbox配置 Object false selectedCheckbox配置项

# Icon Option

以下属性覆盖pi-icon配置，其余属性参考icon配置项

参数 说明 类型 可选值 默认值
size 图标字体大小，单位rpx String | Number false 36

# SelectedCheckbox Option

以下属性覆盖pi-checkbox配置，其余属性参考checkbox配置项

参数 说明 类型 可选值 默认值
shape 形状 'round' 'square' 'dot' 'text' false 'round'
activeMode 激活模式 '' 'line' 'fill' false 'fill-circle'
事件名 描述 参数
change 选项发生变化事件 -
事件名 描述 参数
change 选项发生变化事件 -
Method Description Parameters
submit 关闭弹窗并同步数据 -

# Slots

名称 描述 插槽内容
default 自定义内容 -
Last updated: 2021/11/24 下午2:58:55

←

10:44