Vue 组件 Smart Select

Smart Select 允许您轻松将常规表单下拉框转换为包含分组单选输入的动态页面。您可以在许多原生应用中看到该功能。

它不是一个独立的 Vue 组件，而只是使用 <f7-list> 和 <f7-list-item> 组件搭配 Framework7 的 Smart Select 组件的特定情况。

Smart Select 属性

属性	类型	描述
<f7-list-item> 属性
smart-select	布尔值	启用 Smart Select 行为
smart-select-params	对象	包含 Smart Select 参数的对象

示例

smart-select.vue

<template>
  <f7-page>
    <f7-navbar title="Smart Select"></f7-navbar>
    <f7-block>
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </f7-block>
    <f7-list strong-ios outline-ios dividers-ios>
      <f7-list-item title="Fruit" smart-select>
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          <option value="pear">Pear</option>
          <option value="orange">Orange</option>
          <option value="melon">Melon</option>
          <option value="peach">Peach</option>
          <option value="banana">Banana</option>
        </select>
      </f7-list-item>
      <f7-list-item
        title="Car"
        smart-select
        :smart-select-params="{
          openIn: 'popup',
          searchbar: true,
          searchbarPlaceholder: 'Search car',
        }"
      >
        <select name="car" multiple>
          <optgroup label="Japanese">
            <option value="honda" selected>Honda</option>
            <option value="lexus">Lexus</option>
            <option value="mazda">Mazda</option>
            <option value="nissan">Nissan</option>
            <option value="toyota">Toyota</option>
          </optgroup>
          <optgroup label="German">
            <option value="audi" selected>Audi</option>
            <option value="bmw">BMW</option>
            <option value="mercedes">Mercedes</option>
            <option value="vw">Volkswagen</option>
            <option value="volvo">Volvo</option>
          </optgroup>
          <optgroup label="American">
            <option value="cadillac">Cadillac</option>
            <option value="chrysler">Chrysler</option>
            <option value="dodge">Dodge</option>
            <option value="ford" selected>Ford</option>
          </optgroup>
        </select>
      </f7-list-item>
      <f7-list-item title="Mac or Windows" smart-select :smart-select-params="{ openIn: 'sheet' }">
        <select name="mac-windows">
          <option value="mac" selected>Mac</option>
          <option value="windows">Windows</option>
        </select>
      </f7-list-item>
      <f7-list-item title="Super Hero" smart-select :smart-select-params="{ openIn: 'popover' }">
        <select name="superhero" multiple>
          <option value="Batman" selected>Batman</option>
          <option value="Superman">Superman</option>
          <option value="Hulk">Hulk</option>
          <option value="Spiderman">Spiderman</option>
          <option value="Ironman">Ironman</option>
          <option value="Thor">Thor</option>
          <option value="Wonder Woman">Wonder Woman</option>
        </select>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7List, f7Block, f7ListItem } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7Block,
    f7ListItem,
  },
};
</script>

点此提交改进意见

本页中

Smart Select 属性
示例