小鹅通组件

# Dropdown 下拉菜单

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

# 初始化

单独引入时：在入口js文件处引入

import { Dropdown } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Dropdown)
1
2
3

# 效果

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

# 基础用法


下拉菜单 jQuery vue react 
<ss-dropdown>
  <span>下拉菜单<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>jQuery</ss-dropdown-item>
    <ss-dropdown-item>vue</ss-dropdown-item>
    <ss-dropdown-item>react</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>
1
2
3
4
5
6
7
8

# 触发方式


hover激活 操作1 操作2 操作3

click激活 操作1 操作2 操作3

hover/click都可以激活 操作1 操作2 操作3 
<ss-dropdown>
  <span>hover激活<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>操作1</ss-dropdown-item>
    <ss-dropdown-item>操作2</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>

<ss-dropdown :trigger="['click']">
  <span>click激活<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>操作1</ss-dropdown-item>
    <ss-dropdown-item>操作2</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>

<ss-dropdown :trigger="['hover', 'click']">
  <span>hover/click都可以激活<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>操作1</ss-dropdown-item>
    <ss-dropdown-item>操作2</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 菜单方向


靠左显示 这是很长很长的文字 操作2 操作3

靠右显示 这是很长很长的文字 操作2 操作3

居中显示 这是很长很长的文字 操作2 操作3 
<ss-dropdown placement="bottomLeft">
  <span>靠左显示<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>这是很长很长的文字</ss-dropdown-item>
    <ss-dropdown-item>操作2</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>

<ss-dropdown placement="bottomRight">
  <span>靠右显示<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>这是很长很长的文字</ss-dropdown-item>
    <ss-dropdown-item>操作2</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>

<ss-dropdown placement="bottomCenter">
  <span>居中显示<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>这是很长很长的文字</ss-dropdown-item>
    <ss-dropdown-item>操作2</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 禁止项


含有禁止项 操作1 无权限 操作3 
<ss-dropdown>
  <span>含有禁止项<i class="icon-icon-down"></i></span>
  <ss-dropdown-menu slot="menu">
    <ss-dropdown-item>操作1</ss-dropdown-item>
    <ss-dropdown-item disabled>无权限</ss-dropdown-item>
    <ss-dropdown-item>操作3</ss-dropdown-item>
  </ss-dropdown-menu>
</ss-dropdown>
1
2
3
4
5
6
7
8

# 参数

参数 说明 类型 默认值 可选值
trigger 触发方式 Array ['hover'] ['hover'],['click'],['hover','click']
visible 首次加载是否显示下拉菜单 Boolean true —
placement 下拉菜单显示位置 Boolean bottomLeft bottomLeft,bottomRight,bottomCenter

# 事件

事件名称 说明 回调参数
click 点击下拉菜单触发事件 —

← Input 输入框 →