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)