vue封装组件

var drop_template ='<transition enter-active-class=\"animated fadeIn\" leave-active-class=\"animated fadeOut\">'+
    '               <div class="dropbox" v-bind:class="selfadaption==\'\'?\'\':selfadaption">'+
    '                   <div class="drop-down">'+
    '                        <div class="drop-down-text-box" @click="isshow?dataModel.isShow=false:dataModel.isShow=true;goBack(2)">'+
    '                               <span class="drop-down-text">{{textname}}</span>'+
    '                               <span><div  class="drop-down-img"></div></span>'+
    '                        </div>'+
    '                        <div v-show="isshow" v-bind:class="selectbox==\'\'?\'\':selectbox" class="drop-down-list">'+
    '                               <div v-if="issearch" class="drop-down-list-input">'+
    '                                   <img class="drop-down-list-box-img" :src="imgurl==\'\'?\'/images/search.png\':\'imgurl\'">'+
    '                                   <input class="drop-down-list-box-input" v-model="dataModel.name" type="text">'+
    '                               </div>'+
    '                               <div v-bind:class="selectlistbox==\'\'?\'\':selectlistbox" class="drop-down-list-select">'+
    '                                   <div v-for="item in binddata" @click="dataModel.allItem=item;dataModel.isShow=false;goBack(1);" class="drop-down-list-selectc-text" v-if="limit&&(dataModel.name==\'\'?true:(item.name.search(dataModel.name.toUpperCase()) != -1))">{{item.name}}</div>'+
    '                               </div>'+
    '                        </div>'+
    '                  </div>'+
    '             </div>'+
    '           </transition>';
Vue.component('drop-box',{
    template:drop_template,
    props: [
        "isnumber",
        "issearch",
        "selfadaption",
        "selectbox",
        "selectlistbox",
        "isshow",
        "limit",
        "imgurl",
        "binddata",
        "textname",
        "backfuns"
    ],
    data:function(){
        return {
            dataModel:{
                name:'',
                isShow:this.isShow,
                allItem:''
            }
        }
    },
    methods: {

        goBack:function (t) {
            var tt=this.isshow;
            this.backfuns(this.dataModel,t,this.isnumber);
        }
    }
});

 

调用


<drop-box 
:isnumber="indexShow==1"
:isSearch="true"  
:isshow="iSBName" 
:textname="sBName"
:binddata="listTotal.coinList" 
:backfuns="dropBack" 
:limit="indexShow==1" 
:selfadaption="'dropboxt'"
 :selectbox="'drop-down-listg'" 
:selectlistbox="''" 
:imgurl="''" >
</drop-box>
                    

 

.drop-down-list-select::-webkit-scrollbar {
    width: 3px;
    height: 0px;
}
/*滚动整体*/

.drop-down-list-select::-webkit-scrollbar-button {
    background-color: #15284c;
}
/*滚动滚动条内颜色*/

.drop-down-list-select::-webkit-scrollbar-track {
    background: #15284c;
}

.drop-down-list-select::-webkit-scrollbar-thumb {
    background: #2a404f;
    border-radius: 10px;
}

.drop-down-list-select::-webkit-scrollbar-corner {
    background: #2a404f;
}

.dropbox {
    width: 300px;
    color: rgba(255,255,255,1);
    height: 32px;
    line-height: 32px;
}
.dropboxs {
    width: 162px;
    height: 32px;
    line-height: 32px;
    background: #202e58;
    border: 1px solid rgba(111, 142, 255, 0.5);
    border-radius: 3px;
    color: #d6ddff;
    float: left;
    margin-left: 20px;
}

.dropboxt {
    width: 162px;
    height: 32px;
    line-height: 32px;
    background: #202e58;
    border: 1px solid rgba(111, 142, 255, 0.5);
    border-radius: 3px;
    color: #d6ddff;
    float: left;
}

.drop-down{
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
}
.drop-down-text-box{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.drop-down-text{
    margin-left: 10px;
    font-size: 14px;
}
.drop-down-img{
    width: 0;
    height: 0;
    margin-top: -3.5px;
    border-width: 7px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    background: #202e58;
    position: absolute;
    right: 10px;
    top: 50%
}
.drop-down-list{
    width: 100%;
    background: #2b4071;
    color: #EEEFF7;
    position: absolute;
    line-height: 36px;
    top: 48px;
    z-index: 1;
}

.drop-down-listg{
    width: 100%;
    background:#15284c;
    color: #FFFFFF;
    position: absolute;
    line-height: 36px;
    top: 34px;
    z-index: 1;
}
.drop-down-list-input{
    width: 90%;
    height: 30px;
    border: 1px solid #495d9a;
    margin: 5px auto;
}
.drop-down-list-box-img{
    float: right;
    width: 16px;
    height: 16px;
    margin-top: 10px;
    margin-right: 10px;
}
.drop-down-list-box-input{
    float: left;
    width: 60%;
    height: 100%;
    border: none;
    background: transparent;
    color: #FFFFFF;
    padding-left: 10px;
    box-sizing: border-box;
}
.drop-down-list-select{
    overflow-y: auto;
    max-height: 192px;
}

.drop-down-list-select-v{
    overflow-y: auto;
    max-height: 122px;
}
.drop-down-list-selectc-text{
    padding-left: 10px;
    font-size: 14px;
}
.dropbox .drop-down-list-selectc-text:hover {
     background: #495689;
}

@media only screen and (max-width: 425px) {
    .dropbox {
        margin-bottom: 10px;
    }
    .dropboxs {
        width: 96%;
        margin-left: 0px;
    }

    .dropboxt {
        width: 96%;
    }

}