vue——自定义组件（模仿 vuetify 表单）

定义组件：

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

更多关于 model 的解释请看：https://cn.vuejs.org/v2/api/#model

VInput.vue

<template>
    <div class="input-wrapper" :v-rule="v_rule">
        <label for="input" class="label">{
   {
   setting.title}}：</label>
        <div class="input">
            <input
                    id="input"
                    class="content"
                    :type="setting.type?setting.type:'text'"
                    :value="value"
                    @input="check($event)"
                    @blur="rule($event.target.value)"
                    @click="rule($event.target.value)"
            >
            <div class="rules">{
   {
   getRules}}</div>
        </div>
    </div>
</template>

<script>
  export default {
   
    model: {
   
      prop: 'value',
      event: 'input'
    },
    props: {
   
      setting: Object,// *:title rules |:type
      value: [String, Number]
    },
    data () {
   
      return