github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #55 from eleme/feat-dropdown 

update autocomplete
pull/2/head
baiyaaaaa 2016-08-12 14:45:43 +08:00 committed by GitHub
parent cf16180a71 a4a0701ab5
commit 9b46a3fd08
3 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -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"

6
packages/dropdown/src/dropdown-menu.vue
View File

@ -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);

26
packages/dropdown/src/dropdown.vue
View File

@ -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>
<!-- 下拉菜单 --> <!-- 下拉菜单 -->
<transition name="md-fade-bottom">
<el-dropdown-menu <el-dropdown-menu
v-ref:menu ref:menu
v-if="visible" v-if="visible"
@mouseenter="handleMouseEnter" @mouseenter.native="handleMouseEnter"
@mouseleave="handleMouseLeave" @mouseleave.native="handleMouseLeave"
> >
<slot></slot> <slot></slot>
</el-dropdown-menu> </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 {