vue 封裝組件（以button和select爲例）

時間 2021-08-12

標籤 vue ide this spa 3d component blog get input 欄目軟件設計简体版

原文原文鏈接

Button

目錄文件vue

首先建立button文件夾，新建index.vue文件
index.vueide

<template>
   <div :class="type == 'Default'?'btn default':type == 'primary'?'btn primary':type == 'danger'?'btn danger':'btn default'"
    :style="size == 'Default'? 'width:100px;padding:14px 0' : size =='mini'?'width:60px;padding:10px 0':'width:100px;padding:14px 0'">
      <span>
          <slot></slot>
      </span>
   </div>
</template>

<script>
//import common from './common'
export default {
  name:'L-button',
   props:{
        size:String,
        type:String,
        default:"Default"
    },
};
</script>

<style lang='stylus'>
   .btn{
        color:#fff;
        text-align: center;
        line-height:1;
        // padding:5px 10px
        border-radius:5px;
        
     }
     .default{
        background: red; 
     }
 
    .primary{
        background: yellow;
     }
 
    .danger{
        background: #ccc;
     }
</style>

在button同級目錄下建立index.js 用來註冊多個組件this

index.jsspa

    import Lbutton  from "./button/index.vue"
    import LSelect from "./select"
    const components = [
        Lbutton,
        LSelect
    ]
    const install = (vue)=>{
        for (let key in components){
            vue.component(components[key].name,components[key])
        }
    }
    export default {
        install，
        <!-- 按需加載 -->
        Lbutton,
        LSelect
    }

最後在main.js中引用3d

    import UI from "./components" // UI爲任意定義的
    Vue.use(UI)

應用組件component

    <L-button type="danger" size="mini">asdas</L-button>

效果：
blog

select

index.vue
簡易select 應用時不須要綁定v-model，支持多選單選和清空，change方法能夠獲取到當前的選中值ip

    <template>
      <div class="l-select">
        <div v-if="!multiple" class="l-select-content">
            <input class="select-input" readonly  style="padding:0 15px" type="text" v-model="selectModel" @focus="focus" @blur="blur">
            <ul v-show="show">
                <li class="l-select-li"  @click.stop="clickHandler(item,index,$event)" style="line-height:30px" v-for="(item,index) in data?data:options" :key="item.id">{{item.value}}</li>
            </ul>
        </div>
     <!-- multiple -->
         <div v-if="multiple" class="l-select-content">
            <div class="input" style="overflow:hidden;background:#fff;cursor:pointer" @click.stop="MulclickHandler" >
                <div style="width:1000px;padding:5px 10px;height:100%">
                    <div class="l-select-wrap"
                        v-for="(item) in multipleArr" :key="item.id"
                    >
                    {{item.value}}
                    </div>
                </div>
                 <div style="width:30px;height:95%;background:#fff;float:right;position:absolute;top:0;right:0px;border-radius:5px;margin:1px">
                        <i @click.stop="clearVal" class="fa fa-close" style="position:absolute;top:35%;right:10px"></i>
                    </div>
            </div>
            <ul v-show="show">
                <li class="l-select-li"  @click.stop="clickHandler(item,index,$event)" style="line-height:30px" v-for="(item,index) in data?data:options" :key="item.id">{{item.value}}</li>
            </ul>
        </div>
      </div>
    </template>
    
    <script>
    //import common from './common'
    export default {
      name:'L-select',
      props:{
        data:{
            type:Array 
        },
        multiple:Boolean
        // value:String
      },
      data() {
        return {
            showUL:true,
            selectModel:"",
            list:[],
            show:false,
            multipleArr:[],
            selectModelmul:'',
            docArr:[],
            options:[{id:1,label:'label',value:"value"},{id:2,label:'label',value:"value"}]
         };
      },
      watch:{
          selectModel(newval){
             this.$emit("change",this.selectId)
             this.closeUL()
          },
          multipleArr(newval){
             this.$emit("change",newval)
            //  this.show=false
          }
      },
    
      created(){ },
      mounted(){
          document.addEventListener("click",this.docClick)
          this.docArr = document.getElementsByClassName("l-select-li")
       },
      methods: {
        docClick(e){
            if(e.target.className!="select-input" && this.show){
                this.closeUL()
            }
            
        },
        clearVal(){
            this.multipleArr=[]
            this.selectModel=""
             this.docArr.forEach(item=>{
                item.style.color="#000"
                item.style.fontWeight="100"
            })  
        },
        focus(){
            this.show=true
        },
        MulclickHandler(){
            this.show=true
        },
        closeUL(){
            this.show=false
           
        },
        clickHandler(item,index,e){
            if(this.multiple){
                if(e.target.style.color=="rgb(37, 135, 255)"){
                    e.target.style.color="#000"
                    e.target.style.fontWeight="100"
                }else{
                    e.target.style.color="rgb(37, 135, 255)"
                    e.target.style.fontWeight="bold"
                }
                if(this.multipleArr.indexOf(item) == -1){
                    this.multipleArr.push(item)
                }else{
                    this.multipleArr.splice(this.multipleArr.indexOf(item),1)
                }
                
            }else{
                this.selectModel=item.value
                this.selectId=item
            }
        },
       }
    };
    </script>
    
    <style lang='stylus'>
    .l-select{
        width:180px;
        height:40px  
      .l-select-content{
        width 100%;
        height:100%;
        position:relative
        input{
            width:100%;
            height:100%;
            border-radius:5px
            border:1px solid black
        }
        input:focus{
            border:none
            border-radius:5px
        }
        .input{
            width:100%;
            height:100%;
            border-radius:5px
            border:1px solid black
        }
        .input:focus{
            border:none
            border-radius:5px
        }
    
      }
      ul{
          position:absolute;
          width:180px;
          max-height:200px;
          overflow:auto;
          background:#fff;
          box-shadow:0 0 5px 0;
          left:0;
          top:45px;
          padding:10px 15px
      }
      li{
          list-style none
      }
      .l-select-wrap{
          margin-right:5px;
          background:#f2f2f2;
          height:100%;
          float:left;
          line-height:2;
          border-radius:5px;
          color:#909399;
          padding:0 10px
      }
    
    }
    </style>

同button在index中註冊組件。get

應用：input

    <L-select multiple :data="data" @change="value"></L-select>

    <L-select multiple :data="data" @change="value"></L-select>
    //data爲須要傳遞的數據 change用來獲取選中的值
    //例如：data:[{id:1,label:'label1',value:"valuge1"},{id:2,label:'label1',value:"value1"},{id:3,label:'label1',value:"vaasdlue1"},{id:4,label:'label1',value:"vdfalue1"}]
    
    value(val){
      console.log(val,"ssssssssssss")
    }

使用效果：多選：

使用效果：單選：