diff --git a/examples/routers/dropdown.vue b/examples/routers/dropdown.vue
index f9557b4..977051a 100644
--- a/examples/routers/dropdown.vue
+++ b/examples/routers/dropdown.vue
@@ -1,352 +1,44 @@
<template>
<div>
- <div>
- <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
- <a href="javascript:void(0)">
- right-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
- <a href="javascript:void(0)">
- right-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
- <a href="javascript:void(0)">
- bottom-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
- <a href="javascript:void(0)">
- bottom-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
- <a href="javascript:void(0)">
- top-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
- <a href="javascript:void(0)">
- top-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
- <a href="javascript:void(0)">
- left-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
- <a href="javascript:void(0)">
- left-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
- <a href="javascript:void(0)">
- top
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
- <a href="javascript:void(0)">
- bottom
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
- <a href="javascript:void(0)">
- left
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
- <a href="javascript:void(0)">
- right
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- </div>
- <br><br><br><br>
- <div style='width:600px;height:100px;overflow: auto;border:1px solid'>
- <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
- <a href="javascript:void(0)">
- right-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
- <a href="javascript:void(0)">
- right-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
- <a href="javascript:void(0)">
- bottom-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
- <a href="javascript:void(0)">
- bottom-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
- <a href="javascript:void(0)">
- top-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
- <a href="javascript:void(0)">
- top-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
- <a href="javascript:void(0)">
- left-start
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
- <a href="javascript:void(0)">
- left-end
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
-
- <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
- <a href="javascript:void(0)">
- top
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
- <a href="javascript:void(0)">
- bottom
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
- <a href="javascript:void(0)">
- left
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
- <a href="javascript:void(0)">
- right
- <Icon type="arrow-down-b"></Icon>
- </a>
- <DropdownMenu slot="list">
- <DropdownItem>驴打滚</DropdownItem>
- <DropdownItem>炸酱面</DropdownItem>
- <DropdownItem>豆汁儿</DropdownItem>
- <DropdownItem>冰糖葫芦</DropdownItem>
- <DropdownItem>北京烤鸭</DropdownItem>
- </DropdownMenu>
- </Dropdown>
- </div>
+ <Dropdown trigger="hover">
+ <a href="javascript:void(0)">
+ 下拉菜单
+ <Icon type="ios-arrow-down"></Icon>
+ </a>
+ <DropdownMenu slot="list">
+ <DropdownItem>驴打滚</DropdownItem>
+ <DropdownItem>炸酱面</DropdownItem>
+ <DropdownItem disabled>豆汁儿</DropdownItem>
+ <DropdownItem>冰糖葫芦</DropdownItem>
+ <DropdownItem divided>北京烤鸭</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ <Dropdown trigger="click">
+ <a href="javascript:void(0)">
+ 下拉菜单
+ <Icon type="ios-arrow-down"></Icon>
+ </a>
+ <DropdownMenu slot="list">
+ <DropdownItem>驴打滚</DropdownItem>
+ <DropdownItem>炸酱面</DropdownItem>
+ <DropdownItem disabled>豆汁儿</DropdownItem>
+ <DropdownItem>冰糖葫芦</DropdownItem>
+ <DropdownItem divided>北京烤鸭</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ <Dropdown trigger="contextMenu">
+ <a href="javascript:void(0)">
+ 下拉菜单
+ <Icon type="ios-arrow-down"></Icon>
+ </a>
+ <DropdownMenu slot="list">
+ <DropdownItem>驴打滚</DropdownItem>
+ <DropdownItem>炸酱面</DropdownItem>
+ <DropdownItem disabled>豆汁儿</DropdownItem>
+ <DropdownItem>冰糖葫芦</DropdownItem>
+ <DropdownItem divided>北京烤鸭</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
</div>
</template>
<script>
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index 6d1233a..842a791 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -4,7 +4,7 @@
v-click-outside="onClickoutside"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave">
- <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
+ <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
<transition name="transition-drop">
<Drop
:class="dropdownCls"
@@ -33,7 +33,7 @@
props: {
trigger: {
validator (value) {
- return oneOf(value, ['click', 'hover', 'custom']);
+ return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
},
default: 'hover'
},
@@ -60,6 +60,14 @@
return {
[prefixCls + '-transfer']: this.transfer
};
+ },
+ relClasses () {
+ return [
+ `${prefixCls}-rel`,
+ {
+ [`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
+ }
+ ];
}
},
data () {
@@ -89,6 +97,13 @@
}
this.currentVisible = !this.currentVisible;
},
+ handleRightClick () {
+ if (this.trigger === 'custom') return false;
+ if (this.trigger !== 'contextMenu') {
+ return false;
+ }
+ this.currentVisible = !this.currentVisible;
+ },
handleMouseenter () {
if (this.trigger === 'custom') return false;
if (this.trigger !== 'hover') {
@@ -113,6 +128,7 @@
},
onClickoutside (e) {
this.handleClose();
+ this.handleRightClose();
if (this.currentVisible) this.$emit('on-clickoutside', e);
},
handleClose () {
@@ -122,6 +138,13 @@
}
this.currentVisible = false;
},
+ handleRightClose () {
+ if (this.trigger === 'custom') return false;
+ if (this.trigger !== 'contextMenu') {
+ return false;
+ }
+ this.currentVisible = false;
+ },
hasParent () {
// const $parent = this.$parent.$parent.$parent;
const $parent = findComponentUpward(this, 'Dropdown');
diff --git a/src/styles/components/dropdown.less b/src/styles/components/dropdown.less
index 56c2ab8..a610d5d 100644
--- a/src/styles/components/dropdown.less
+++ b/src/styles/components/dropdown.less
@@ -16,6 +16,11 @@
&-rel{
//display: inline-block;
position: relative;
+ &-user-select-none{
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ }
}
&-menu{
--
libgit2 0.21.4