vue 開發系列（三） vue 組件開發

概要

vue 的一個特點是進行組件開發，組件的優勢是我們可以封裝自己的控件，實現重用，比如我們在平台中封裝了自己的附件控件，輸入控件等。

組件的開發

在vue 中一個組件，就是一個獨立的.vue 文件，這個文件分為三部分。

1.模板

2.腳本

3.樣式

我們看一個系統中最常用的組件。

<template>
  <div >
      <div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>
      <div class="box-custom-component" v-else-if="right=='w'">
              <input 
                  type="text"   
                  @blur="blurHandler" 
                  @focus="focusHandler" 
                  :required="required" 
                  v-model="currentValue" 
                  :placeholder="placeholder"
              ></input>
                
               <a href="javascript:;" class="yd-input-clear" tabindex="-1" @click="clearInput" v-show="showClear && !isempty"></a>
        
        
      </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { calcRight } from "@/assets/app.js";
import {VTypes,RxUtil} from "@/assets/util.js";
    
export default{
    name : "rx-input",
    props: {
        value:[String,Number],
        permission:Object,
        permissionkey:String,
        showClear:{
            type: Boolean,
        default: true
        },
        readonly: {
        type: Boolean,
        default: false
     },
      placeholder:{
        type: String,
        default: ""
      },
            required: {
        type: Boolean,
        default: false
        },
        /**
         * 驗證表達式
         */
        vtype:{
            type: String,
        default: ""
        },
        onblur:Function,
        onfocus:Function,
        conf:Object
    },
    data(){
        return {
            currentValue: this.value,
            iserror:false,
            isempty:true,
            checkReq:true
        }
    },
    computed: {
        right :function () {
                return calcRight(this);    
        }
    },
    mounted(){
            this.valid(this.required);
    },
    methods: {
        
            valid(chkReq_) {
                var val=this.currentValue;
                
                if(chkReq_ && this.required){
                    if(RxUtil.isEmpty(val)){
//                        this.iserror=true;
                        return false;
                    }
                }
                if(!this.vtype) {
//                    this.iserror=false;
                    return true;
                } 
                var validFunc=VTypes[this.vtype];
                if(typeof validFunc=="undefined") {
//                    this.iserror=false;
                    return true;
                }
                //驗證
                var rtn= validFunc.valid(val);
//                this.iserror=!rtn;
                return rtn; 
            },
            blurHandler(e) {
//                this.iserror=!this.valid(this.checkReq);
                this.onblur && this.onblur(e);
            },
            focusHandler(e) {
        this.showClear = true;
        this.onfocus && this.onfocus(e);
        },
        clearInput(){
            this.currentValue = '';
            if(this.required){
//              this.iserror=true; 
            }
        }
        },
    watch: {
        currentValue: function (val, oldVal){
                this.$emit('input', this.currentValue);
                //是否為空
                this.isempty=RxUtil.isEmpty(val);
            },
            value :function(val,oldVal){
                if(val!=oldVal){
                    this.currentValue=this.value;
                }
            }
    }
}

</script>

<style scoped>

.box-custom-component::after{
    content: '';
    display: block;
    clear: both;
}

.box-custom-component input{
    float: left;
    width:calc(100% - .65rem);
}

.box-custom-component a{
    float: left;
    width: .65rem;
}

</style>

定義好組件后，使用方法如下：

1.import 組件

import RxInput from '@/components/common/form/RxInput';

2.注冊組件

Vue.component(RxInput.name, RxInput);

3.使用組件

<rx-input v-model="data.email"      permissionkey="email" :required="true" vtype="email" :readonly="false" :permission=""  ></rx-input>

這里我們定義了v-model 我們通過將數據綁定到組件上實現數據的雙向綁定。

實現雙向綁定，需要注意兩點：

1.定義一個value 的屬性。

　　在上面組件的代碼中，我們可以看到我們定義了一個value屬性。

　　在只讀的情況下 直接綁定顯示。

 <div v-if="right=='r'" class="readOnlyBgColor">{{value}}</div>

　　另外我們在data定義上，將value 賦值給了 currentValue 。這個值綁定到輸入控件上。

2.數據改變時調用方法。

this.$emit('input', this.currentValue);

這樣就實現了數據的雙向綁定。