zoukankan      html  css  js  c++  java
  • 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);

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

  • 相关阅读:
    Java实现 LeetCode 400 第N个数字
    Java实现 LeetCode 400 第N个数字
    Java实现 LeetCode 399 除法求值
    Java实现 LeetCode 399 除法求值
    Java实现 LeetCode 399 除法求值
    Java实现 LeetCode 398 随机数索引
    Java实现 LeetCode 398 随机数索引
    Java实现 LeetCode 398 随机数索引
    linux中的cd ..和cd -命令有什么区别?
    GCC使用
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/8846272.html
Copyright © 2011-2022 走看看