vue封装组件-白红宇

vue封装组件

阅读量：5052 次

发布时间：2019-06-12

本文共 4271 字，大约阅读时间需要 14 分钟。

var drop_template ='
     
      '+    '               
      
       '+    '                   
       
        '+    '                        
        
         '+    '                               
         {
    {textname}}'+    '                               
         
          '+    '                        
        
'+    '                        
        
         '+    '                               
         
          '+    '                                   
          '+    '                                   
          '+    '                               
         
'+    '                               
         
          '+    '                                   
          
           { {item.name}}
          
'+    '                               
         
'+    '                        
        
'+    '                  
       
'+    '             
      
'+    '           
     ';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-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%;    }}