嘟嘟云A sass ui框架

将动作或菜单折叠到下拉菜单中。

# 基础用法

移动到下拉菜单上，展开更多操作。

  • trigger默认为click,所以默认情况下拉由click事件触发

  • 3.0.7 版本更新了dropdown改为了双向绑定模式，对此和之前做了兼容。新增value，注：value和options中的value只能保留一个，现在请都使用v-model

  • 默认选中后会更新显示，您可可以通过noSwitchLable为true来更改为不更新视图

  • placeholder为默认的占位显示, 默认值请选择

  • 通过componentType和size可以更改按钮基础属性

  • title选项将会直接将显示文字覆盖，并且无法更新

默认触发更新视图
不更新视图 
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <span class="demonstration">默认触发更新视图</span>
        <higher-dropdown 
        v-model="value" 
        :list="unitOptions" />
      </div>
      <div class="block">
        <span class="demonstration">不更新视图</span>
        <higher-dropdown
        component-type="low"
        noSwitchLable
        placeholder="美食选择"
        v-model="value2" 
        :list="unitOptions" >
        </higher-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        value2: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔煎',
        }],
      }
    }
  }
</script>
Expand Copy

# 不同组件展现

  • 通过设置component-name来切换其他容器

  • 通过设置component-options来传入component-name组件中的参数

默认容器
自定义其他容器
使用插槽 
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <span class="demonstration">默认容器</span>
        <higher-dropdown 
        v-model="value" 
        :list="unitOptions" 
        :component-options="{
          props: {
            type: 'low'
          }
        }"
        />
      </div>
      <div class="block">
        <span class="demonstration">自定义其他容器</span>
        <higher-dropdown 
        component-name="div"
        :component-options="{
          class: 'demo-text'
        }"
        placeholder="美食选择"
        v-model="value2"
        :list="unitOptions" />
      </div>
    </div>
    <div class="source source-border-top">
      <div class="block">
        <span class="demonstration">使用插槽</span>
        <higher-dropdown 
        v-model="value3" 
        :list="unitOptions" 
        button-type="low" 
        v-slot="{ text }">
          <div>{{text}}</div>
        </higher-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: 'option1',
        value2: 'option1',
        value3: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔煎'
        }],
      }
    }
  }
</script>
Expand Copy

# 触发对象

  • 更改trigger属性来更改触发方式， 默认click
hover 激活
click 激活 
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <span class="demonstration">hover 激活</span>
        <higher-dropdown 
        v-model="value" 
        trigger="hover"
        :list="unitOptions" />
      </div>
      <div class="block">
        <span class="demonstration">click 激活</span>
        <higher-dropdown 
        v-model="value2" 
        :list="unitOptions" />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: 'option1',
        value2: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔煎'
        }],
      }
    }
  }
</script>
Expand Copy

# 菜单隐藏方式

  • 可以hide-on-click属性来配置。
  • 下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <higher-dropdown 
        v-model="value" 
        trigger="hover"
        :hide-on-click="false"
        :list="unitOptions" />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔煎'
        }],
      }
    }
  }
</script>
Expand Copy

# 不同尺寸

Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的尺寸。

  • 额外的尺寸：large、medium、small，通过设置size属性来配置它们。
大尺寸
默认尺寸
小尺寸 
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <span class="demonstration">大尺寸</span>
        <higher-dropdown 
        v-model="value" 
        size="large"
        :list="unitOptions" />
      </div>
      <div class="block">
        <span class="demonstration">默认尺寸</span>
        <higher-dropdown 
        v-model="value2" 
        :list="unitOptions" />
      </div>
      <div class="block">
        <span class="demonstration">小尺寸</span>
        <higher-dropdown 
        v-model="value3"
        size="small"
        :list="unitOptions" />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: 'option1',
        value2: 'option1',
        value3: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔煎'
        }],
      }
    }
  }
</script>
Expand Copy

# 可选项可自定义

移动到下拉菜单上，展开更多操作。

  • 3.3.5提供可以自定义style属性

  • 3.3.5并且提供,以item为开头的选项插槽如：item-${xxx}，可以自定义插槽内容

自定义style
自定义插槽 
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <span class="demonstration">自定义style</span>
        <higher-dropdown 
        component-type="low"
        placeholder="美食选择"
        v-model="value" 
        :list="unitOptions"  />
      </div>
      <div class="block">
        <span class="demonstration">自定义插槽</span>
        <higher-dropdown
        component-type="low"
        placeholder="美食选择"
        v-model="value2" 
        :list="unitOptions2" >
          <template v-slot:item-option5="{ item }">
            <div>
              自定义{{ item.label }}
            </div>
          </template>
        </higher-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        value2: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔',
          style: {
            'textAlign': 'center',
            color: 'var(--db-danger-base)'
          }
        }],
        unitOptions2: [{
          value: 'option1',
          label: '黄金糕'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉'
        }, {
          value: 'option4',
          label: '双皮奶'
        }, {
          value: 'option5',
          label: '蚵仔'
        }]
      }
    }
  }
</script>
Expand Copy

# 用于非选择仅菜单的方式

  • 目前表格上会使用到这种情况

  • 通过设置mode值为menu

  • menu 模式下的dropdown使用的是db-button组件属性您可以通过color来更改颜色

  • menu 模式下noSwitchLable默认true,isButton默认true,align默认center,isHover默认false

仅菜单 
<template>
  <div class="demo">
    <div class="source">
      <div class="block">
        <span class="demonstration">仅菜单</span>
        <higher-dropdown 
        component-type="text"
        placeholder="美食选择"
        mode="menu"
        :list="unitOptions" />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: 'option1',
        value2: 'option1',
        value3: 'option1',
        unitOptions: [{
          value: 'option1',
          label: '黄金'
        }, {
          value: 'option2',
          label: '狮子头'
        }, {
          value: 'option3',
          label: '螺蛳粉鸭'
        }, {
          value: 'option4',
          label: '双皮奶汤皮蛋',
          color: 'error'
        }, {
          value: 'option5',
          label: '蚵仔煎'
        }]
      }
    }
  }
</script>
Expand Copy
参数 说明 类型 可选值 默认值
componentType 菜单按钮类型，默认情况有效 string — —
size 菜单尺寸 string large / medium / small / mini —
title 锁定标题 string - -
placeholder 占位文字 string - 请选择
placement 菜单弹出位置 string top/top-start/top-end/bottom/bottom-start/bottom-end bottom-end
trigger 触发下拉的行为 string hover, click hover
hide-on-click 是否在点击菜单项后隐藏菜单 boolean — true
show-timeout 展开下拉菜单的延时（仅在 trigger 为 hover 时有效） number — 250
hide-timeout 收起下拉菜单的延时（仅在 trigger 为 hover 时有效） number — 150
tabindex Dropdown 组件的 tabindex (opens new window) number — 0
isHover 是否有hover boolean - false
align 对齐方式 string left center right left
color 设置颜色在isButton=true生效 string warning success error primary —
isButton 设置是否使用按钮显示 boolean - —
mode 模式 string - -
参数 说明 类型 可选值 默认值
color 设置颜色在isButton=true生效 string warning success error primary —
align 对齐方式 string left center right left
style 设置样式 object/array - —
Name 说明
— 触发下拉列表显示的元素。 注意： 必须是一个元素或者或者组件
default 按钮部分的插槽
item-${value} 下拉列表单个插槽
事件名称 说明 回调参数
input 双向绑定，返回value —
change 更改的事件回调 —
command 点击菜单项触发的事件回调 dropdown-item 的指令
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
参数 说明 类型 可选值 默认值
disabled 禁用 boolean — false
divided 显示分割线 boolean — false
icon 图标类名 string — —

← 穿梭框 transfer →