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);

这样就实现了数据的双向绑定。