Select 选择器

一、概述

定义

下拉选择器，用户通过下拉选项，选择需要的选项。

使用场景

• 弹出一个下拉选项给用户选择操作

• 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio

类型

• 大选择器

• 中选择器

• 小选择器

二、大选择器

适用于展示区域较大，同时选择操作重要度高时。

交互说明

• 用户激活选择框，出现选项浮层
• 选择选项后，选项浮层收起，选择操作完成

<template>
  <div class="se-select-wrap">
    <se-select size="large" v-model="value">
      <se-option
        v-for="(option, index) in options"
        :key="index"
        :value="option.value"
        :label="option.label"
      ></se-option>
    </se-select>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: 'bj',
            label: '北京'
          },
          {
            value: 'xz',
            label: '深圳'
          },
          {
            value: 'gz',
            label: '广州'
          },
          {
            value: 'sh',
            label: '上海'
          }
        ],
        value: ''
      }
    },
    watch: {
      value() {
        console.log(this.value)
      }
    }
  }
</script>

三、中选择器

用户非重要功能的选择项，该按钮操作在页面层级中的重要程度不高，亦或使用大按钮会扰乱用户阅读信息，可用中选择器替代。

交互说明

• 用户激活选择框，出现选项浮层
• 选择选项后，选项浮层收起，选择操作完成

<template>
  <div class="se-select-wrap">
    <se-select v-model="value">
      <se-option
        v-for="(option, index) in options"
        :key="index"
        :value="option.value"
        :label="option.label"
      ></se-option>
    </se-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: 'bj',
            label: '北京'
          },
          {
            value: 'xz',
            label: '深圳'
          },
          {
            value: 'gz',
            label: '广州'
          },
          {
            value: 'sh',
            label: '上海'
          }
        ],
        value: ''
      }
    },
    watch: {
      value() {
        console.log(this.value)
      }
    }
  }
</script>

四、小选择器

用于内容区域较小的地方。

<template>
  <div class="se-select-wrap">
    <se-select v-model="value" size="mini">
      <se-option
        v-for="(option, index) in options"
        :key="index"
        :value="option.value"
        :label="option.label"
      ></se-option>
    </se-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            value: 'bj',
            label: '北京'
          },
          {
            value: 'xz',
            label: '深圳'
          },
          {
            value: 'gz',
            label: '广州'
          },
          {
            value: 'sh',
            label: '上海'
          }
        ],
        value: ''
      }
    },
    watch: {
      value() {
        console.log(this.value)
      }
    }
  }
</script>

交互说明

• 用户激活选择框，出现选项浮层
• 选择选项后，选项浮层收起，选择操作完成

Select Props

Select Events

Option Props