SOption <s-option>

下拉选择中的一个选项。 SOption 是 Shopify Polaris <s-option> web component 的带类型 Vue 3 wrapper。

import { SOption } from 'polaris-vue-elements'

示例

<SOption> doesn't render on its own — it's an option within an <SSelect> (optionally grouped by <SOptionGroup>). Its value prop is what gets bound into the parent's v-model, and its default slot is the visible option label.

United StatesCanadaFranceGermany

Value: (none)

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <!-- Each SOption's `value` is what SSelect's v-model receives -->
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

Props

Prop	类型	说明
defaultSelected	boolean	控件默认是否处于激活状态。
disabled	boolean	禁用控件，不允许任何交互。
selected	boolean	控件是否处于激活状态。
value	string	控件被选中时在表单数据中使用的值。

Slots

Slot	说明
default	作为选项标签显示的文本或元素，用于在下拉列表或选择列表中向用户标识该可选项。