Sf-select NPM | npm.io

sf-select 下拉选择

当选项过多时，使用下拉菜单展示并选择内容。

基本用法

:::ysfdoc 列表以 id 作为主键

  <template>
    <sf-select>
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
            options:[
              {id: 0, name: '网易云'},
              {id: 1, name: '网易七鱼'},
              {id: 2, name: '网易云信'},
              {id: 3, name: '网易蜂巢'},
              {id: 4, name: '网易易盾'}
            ]
        }
      }
    }
  </script>

:::

默认选中

:::ysfdoc 设置sf-select的defid属性，则默认选中对应项

  <template>
    <sf-select :defid="1">
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
            options:[
              {id: 0, name: '网易云'},
              {id: 1, name: '网易七鱼'},
              {id: 2, name: '网易云信'},
              {id: 3, name: '网易蜂巢'},
              {id: 4, name: '网易易盾'}
            ]
        }
      }
    }
  </script>

:::

禁用状态

:::ysfdoc 设置sf-select的disabled属性为true，禁用整个组件

  <template>
    <sf-select :disabled=true>
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
            options:[
              {id: 0, name: '网易云'},
              {id: 1, name: '网易七鱼'},
              {id: 2, name: '网易云信'},
              {id: 3, name: '网易蜂巢'},
              {id: 4, name: '网易易盾'}
            ]
        }
      }
    }
  </script>

:::

禁用单个选项

:::ysfdoc 设置sf-option的disabled属性为true，禁用该选项

  <template>
    <sf-select>
        <sf-option v-for="option in options1" :id="option.id" :name="option.name" :disabled="option.disabled">
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
          options:[
            {id: 0, name: '网易云'},
            {id: 1, name: '网易七鱼'},
            {id: 2, name: '网易云信'},
            {id: 3, name: '网易蜂巢'},
            {id: 4, name: '网易易盾'}
          ],
          options1:[
            {id: 0, name: '网易云'},
            {id: 1, name: '网易七鱼', disabled: true},
            {id: 2, name: '网易云信'},
            {id: 3, name: '网易蜂巢'},
            {id: 4, name: '网易易盾'}
          ]
        }
      }
    }
  </script>

:::

自定义模板

:::ysfdoc 通过slot方式可自定义单个选项的html模板

  <template>
    <sf-select>
        <sf-option v-for="option in options" :id="option.id" :name="option.name" :disabled="option.disabled">
          <span>{{option.name}}</span>
          <span style="color: #d3dce6; margin-left: 10px;">{{option.des}}</span>
        </sf-option>
    </sf-select>
  </template>

  <script>
    export default {
      data() {
        return {
          options:[
            {id: 0, name: '网易云', des: 'cloud'},
            {id: 1, name: '网易七鱼', des: 'qiyu'},
            {id: 2, name: '网易云信', des: 'yunxin'},
            {id: 3, name: '网易蜂巢', des:'fc'},
            {id: 4, name: '网易易盾', des: 'edun'}
          ],
          options1:[
            {id: 0, name: '网易云'},
            {id: 1, name: '网易七鱼', disabled: true},
            {id: 2, name: '网易云信'},
            {id: 3, name: '网易蜂巢'},
            {id: 4, name: '网易易盾'}
          ]
        }
      }
    }
  </script>

:::