mirror of https://github.com/ElemeFE/element
commit
9b46a3fd08
|
@ -44,9 +44,8 @@
|
||||||
"purecss": "^0.6.0",
|
"purecss": "^0.6.0",
|
||||||
"q": "^1.4.1",
|
"q": "^1.4.1",
|
||||||
"uppercamelcase": "^1.1.0",
|
"uppercamelcase": "^1.1.0",
|
||||||
"vue": "^2.0.0-beta.7",
|
|
||||||
"vue-loader": "^9.3.2",
|
"vue-loader": "^9.3.2",
|
||||||
"vue": "^2.0.0-beta.8",
|
"vue": "^2.0.0-rc.1",
|
||||||
"vue-markdown-loader": "^0.4.0",
|
"vue-markdown-loader": "^0.4.0",
|
||||||
"vue-popup": "^0.2.1",
|
"vue-popup": "^0.2.1",
|
||||||
"vue-router": "^2.0.0-beta.2"
|
"vue-router": "^2.0.0-beta.2"
|
||||||
|
|
|
@ -24,17 +24,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ready() {
|
mounted() {
|
||||||
document.body.appendChild(this.$el);
|
document.body.appendChild(this.$el);
|
||||||
// this.$el.appendTo('body');
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.popper = new Popper(this.$parent.$el, this.$el, { gpuAcceleration: false, placement: `bottom-${this.menuAlign}` });
|
this.popper = new Popper(this.$parent.$el, this.$el, { gpuAcceleration: false, placement: `bottom-${this.menuAlign}` });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeDestroy() {
|
destroyed() {
|
||||||
this.$remove();
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.popper.destroy();
|
this.popper.destroy();
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
|
@ -1,34 +1,36 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="el-dropdown"
|
<div class="el-dropdown"
|
||||||
:class="{'el-dropdown--text': type === 'text'}"
|
:class="{'el-dropdown--text': type === 'text'}"
|
||||||
v-clickoutside="hide()"
|
v-clickoutside="hide"
|
||||||
>
|
>
|
||||||
<!-- 带独立的下拉菜单按钮 -->
|
<!-- 分割的下拉按钮 -->
|
||||||
<el-button-group v-if="iconSeparate">
|
<el-button-group v-if="iconSeparate">
|
||||||
<el-button :size="size" :type="type" @click="$emit('mainclick')">{{text}}</el-button>
|
<el-button :size="size" :type="type" @click.native="$emit('mainclick')">{{text}}</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
:size="size"
|
:size="size"
|
||||||
:type="type"
|
:type="type"
|
||||||
class="el-dropdown__icon-button"
|
class="el-dropdown__icon-button"
|
||||||
@mouseenter="handleMouseEnter"
|
@mouseenter.native="handleMouseEnter"
|
||||||
@mouseleave="handleMouseLeave"
|
@mouseleave.native="handleMouseLeave"
|
||||||
@click="handleClick">
|
@click.native="handleClick">
|
||||||
<i class="el-dropdown__icon el-icon-caret-bottom"></i>
|
<i class="el-dropdown__icon el-icon-caret-bottom"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-button-group>
|
</el-button-group>
|
||||||
<!-- 不带独立的下拉菜单按钮 -->
|
<!-- 不分割的下拉按钮 -->
|
||||||
<el-button :size="size" :type="type" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @click="handleClick" v-else>
|
<el-button :size="size" :type="type" @mouseenter.native="handleMouseEnter" @mouseleave.native="handleMouseLeave" @click.native="handleClick" v-else>
|
||||||
{{text}}<i class="el-dropdown__icon el-icon-caret-bottom"></i>
|
{{text}}<i class="el-dropdown__icon el-icon-caret-bottom"></i>
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- 下拉菜单 -->
|
<!-- 下拉菜单 -->
|
||||||
<el-dropdown-menu
|
<transition name="md-fade-bottom">
|
||||||
v-ref:menu
|
<el-dropdown-menu
|
||||||
v-if="visible"
|
ref:menu
|
||||||
@mouseenter="handleMouseEnter"
|
v-if="visible"
|
||||||
@mouseleave="handleMouseLeave"
|
@mouseenter.native="handleMouseEnter"
|
||||||
>
|
@mouseleave.native="handleMouseLeave"
|
||||||
<slot></slot>
|
>
|
||||||
</el-dropdown-menu>
|
<slot></slot>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -42,7 +44,7 @@
|
||||||
import ElButtonGroup from 'packages/button-group/index.js';
|
import ElButtonGroup from 'packages/button-group/index.js';
|
||||||
import ElDropdownMenu from './dropdown-menu.vue';
|
import ElDropdownMenu from './dropdown-menu.vue';
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import VueClickoutside from 'vue-clickoutside';
|
import VueClickoutside from 'main/utils/clickoutside.js';
|
||||||
Vue.use(VueClickoutside);
|
Vue.use(VueClickoutside);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
Loading…
Reference in New Issue