select

概述

下拉选择按钮，点击将弹出包含所有可选值的下拉菜单，从该菜单中可以选择一个新值。

使用限制

子组件

仅支持 <option> 子组件。

属性

支持 通用属性

样式

除了支持 通用样式 以外，还支持如下样式。

事件

不支持 click 事件、longpress事件和 swipe 事件，除了支持 通用事件 以外，还支持如下事件。

示例代码

<template>
    <div class="container">
        <div class="page-title-wrap">
            <text class="page-title">{{componentName}}</text>
        </div>
        <div class="item-container">
            <text style="margin-bottom: 50px">南京的景点</text>
            <select class="select" onchange="changeValue">
                <option class="option" value="夫子庙">夫子庙</option>
                <option class="optionrgb" value="总统府" selected="true">总统府</option>
                <option class="optionrgba" value="老门东">老门东</option>
                <option class="optionhsl" value="大报恩寺">大报恩寺</option>
                <option class="optionhsla" value="中华门">中华门</option>
            </select>
        </div>
        <div class="item-container">
            <text style="margin-bottom: 50px">font-family</text>
            <select class="select font-family2" onchange="changeValue">
                <option class="option font-family1" value="sans-serif">font-family is sans-serif</option>
                <option class="option font-family2" value="serif" selected="true">font-family is serif</option>
                <option class="option font-family3" value="monospace">font-family is monospace</option>
            </select>
        </div>
    </div>
</template>
<script>
    import prompt from '@system.prompt'
    export default {
        data: {
            componentName: 'select'
        },
        changeValue(e) {
            prompt.showToast({
                message: `[${e.newValue}] selected`,
                duration: 2000,
                gravity: 'center'
            })
        }
    }
</script>
<style>
    .container {
        flex: 1;
        flex-direction: column;
    }
    .page-title-wrap {
        padding-top: 50px;
        padding-bottom: 80px;
        justify-content: center;
    }
    .page-title {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 40px;
        padding-right: 40px;
        border-color: #bbbbbb;
        color: #bbbbbb;
        border-bottom-width: 2px;
    }
    .item-container {
        margin-top: 20px;
        margin-bottom: 30px;
        flex-direction: column;
    }
    .item-title {
        padding-left: 30px;
        padding-bottom: 30px;
        padding-top: 30px;
        border-bottom-width: 1px;
        border-color: #bbbbbb;
        color: #aaaaaa;
    }
    .item-content {
        background-color: #ffffff;
        border-bottom-width: 1px;
        border-color: #bbbbbb;
        padding-left: 30px;
        padding-right: 30px;
    }
    .select {
        margin-left: 30px;
        margin-right: 30px;
        align-items: flex-start;
        border-color: #007DFF;
        border-width: 1px;
    }
    .option {
        color: #007DFF;
        font-size: 30px;
        font-weight: bold;
    }
    .optionrgb {
        color: rgb(207, 18, 49);
        font-size: 30px;
        font-weight: bold;
    }
    .optionrgba {
        color: rgba(86, 206, 38, 0.452);
        font-size: 30px;
        font-weight: bold;
    }
    .optionhsl {
        color: hsl(180, 100%, 80%);
        font-size: 30px;
        font-weight: bold;
    }
    .optionhsla {
        color: hsla(10, 90%, 60%, 0.9);
        font-size: 30px;
        font-weight: bold;
    }
    .font-family1 {
        font-family: sans-serif;
    }
    .font-family2 {
        font-family: serif;
    }
    .font-family3 {
        font-family: monospace;
    }
</style>

效果图如下：

版本更新说明