vue实现的dropDown

实现：

css

.btn-group {
    min-width: 100px;
    height: 40px;
    position: relative;
    margin: 10px 1px;
    display: inline-block;
    vertical-align: middle;
    a {
        &:hover {
             text-decoration: none;
         }
    }
}
.dropdown-toggle {
    font-family: PingFangSC-Semibold;
    list-style-type: none;
    color: #FFFFFF;;
    min-width: 100px;
    padding: 10px;
    text-transform: none;
    font-weight: 300;
    margin-bottom: 7px;
    border: 0;
    border-radius: 0;
    /*&:hover {*/
         /*background: #e1e1e1;*/
         /*cursor: pointer;*/
     /*}*/
}
.hide {
    display: none;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 100px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.dropdown-menu > li > a {
    padding: 10px 30px;
    display: block;
    clear: both;
    font-weight: normal;
    line-height: 1.6;
    color: #333333;
    white-space: nowrap;
    text-decoration: none;
    &:hover {
         background: #efefef;
         color: #409FCB;
     }
}
.dropdown-menu > li {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin: 0
}
.caret {
    display: relative;
    width: 0;
    position: relative;
    top: 10px;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    float: right;
}

html

<div class="btn-group" ref="main">
        <li @click="toggleMenu()" class="dropdown-toggle" v-if="selectedOption.name !== undefined">
            {{ selectedOption.name }}
            <span class="caret"></span>
        </li>

        <li @click="toggleMenu()" class="dropdown-toggle" v-if="selectedOption.name === undefined">
            Please select an item
            <span class="caret"></span>
        </li>

        <ul class="dropdown-menu" :class="{ 'hide' : !showMenu}">
            <li v-for="option in options">
                <a href="javascript:void(0)" @click="updateOption(option)">
                    {{ option.name }}
                </a>
            </li>
        </ul>
</div>

JS部分

use([], function() {
    Vue.component('vueDropdownWidget', {
        pageName: "common",
        template: "public/widget/vueDropdown/vueDropdown.html",
        data:function() {
            return {
                selectedOption: {
                    name: '',
                },
                showMenu: false,
            }
        },
        props:{
            options: {
                type: [Array, Object]
            },
            selected: {},
        },
        created: function() {},
        mounted: function() {
            this.selectedOption = this.selected;
            document.addEventListener('click', this.hidePanel, false)

        },
        destroyed: function() {},
        methods: {
            updateOption:function(option) {
                this.selectedOption = option;
                this.showMenu = false;
                this.$emit('updateOption', this.selectedOption);
            },
            toggleMenu:function() {
                this.showMenu = !this.showMenu;
            },
            closeBtnGroup:function () {
                this.showMenu = false;
            },
            hidePanel:function(e) {
                if (!this.$refs.main.contains(e.target)) {//点击除弹出层外的空白区域
                    this.showMenu = false;
                }
            },
        }
    });
});

使用的时候在data里面定义

arrayOfObjects:[{
    name:"简体中文"
},{
    name:"繁體中文"
},{
    name:"English"
}],
object:{
    name:"简体中文"
},

html中

<vue-dropdown-widget :options="arrayOfObjects" :selected="object" v-on:updateOption="methodToRunOnSelect"></vue-dropdown-widget>