Apex

# 下拉框 select

# 描述

用于弹出一个下拉菜单给用户选择操作。

# 使用效果

# 使用方法

在 .ux 文件中引入组件

<import name="my-select" src="apex-ui/components/select/index"></import>
1

# 示例

<template>
    <div class="wrap">
        <div class="item" onclick="singleSelect">
            <text class="type">单选</text>
            <div class="icon">
                <text>{{result1}}</text>
                <my-icon type="arrow-fwd" size="40"></my-icon>
            </div>
        </div>
        <div class="item" onclick="multiSelect">
            <text class="type">多选</text>
            <div class="icon">
                <text>{{result2}}</text>
                <my-icon type="arrow-fwd" size="40"></my-icon>
            </div>
        </div>
        <div class="item" onclick="customSelect">
            <text class="type">自定义个数</text>
            <div class="icon">
                <text>{{result3}}</text>
                <my-icon type="arrow-fwd" size="40"></my-icon>
            </div>
        </div>
        <my-select id="select1" oncomfirm="singleClose"></my-select>
        <my-select id="select2" oncomfirm="multiClose"></my-select>
        <my-select id="select3" oncomfirm="customClose"></my-select>
    </div>
</template>
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
.wrap {
  flex: 1;
  width: 100%;
  background-color: #f9f9f9;
  flex-direction: column;
  justify-content: center;
  .item {
    border: 1px solid #eeeeee;
    background-color: #fff;
    height: 80px;
    width: 100%;
    padding-left: 20px;
    align-items: center;
    justify-content: space-between;
    .type {
      height: 80px;
      width: 40%;
      justify-content: space-between;
    }
    .icon {
      justify-content: space-between;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
export default {
    data: {
        result1: "请选择",
        result2: "请选择",
        result3: "请选择",
        opt1: []
    },
    singleSelect() {
        let opt = ["苹果", "梨子", "西瓜", "荔枝", "榴莲", "番石榴"]
        this.$child('select1').showSelect({
            options: opt,
        })
    },
    multiSelect() {
        let opt = ["医生", "法官", "律师", "教师", "警察", "护士", "会计"]
        this.$child('select2').showSelect({
            options: opt,
            type: 'checkBox'
        })
    },
    customSelect() {
        let opt = ["北京", "伦敦", "东京", "巴黎", "罗马", "柏林", "哥本哈根", "曼谷"]
        this.$child('select3').showSelect({
            options: opt,
            type: 'checkBox',
            max: 3
        })
    },
    singleClose(evt) {
        this.result1 = evt.detail.data || "请选择"
    },
    multiClose(evt) {
        this.result2 = evt.detail.data || "请选择"
    },
    customClose(evt) {
        this.result3 = evt.detail.data || "请选择"
    },
}
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

# API

# 组件参数-

属性 类型 默认值 说明
options Array - 自定义可选项个数
type String radio 下拉框类型:'checkBox'
max Number -1 自定义可选项的最大个数(type为checkBox时)

# 组件事件

事件名称 事件描述 返回值
confirm 点击返回所选项 event

# 组件方法

方法名称 事件描述 参数
showToast(option) 显示提示 option
hideToast() 隐藏提示 -

← 步骤条 steps →