vue input组件用v-model

<style type="text/css" scoped>
.ipt-input-title {
  color: #6D89AF;
  flex-shrink: 0;
  font-weight: 500;
}

.ipt-holder {
  display: flex;
  flex: 1 1;
  height: 100%;
  align-items: center;
  color: #113260;
}

.ipt-input {
  display: flex;
  flex: 1 1;
  height: 0.5rem;
  color: #113260;
  font-weight: 400;
}

input::-webkit-input-placeholder {
  color: #B9B9B9;
}

input::-moz-input-placeholder {
  color: #B9B9B9;
}

input::-ms-input-placeholder {
  color: #B9B9B9;
}

</style>
<template>
  <div class="ipt-wrap">
    <div class="ipt-input-title" :style="{width:labelWidth}">{{title}}</div>
    <div class="ipt-holder">
      <span> {{isneedunit?'￥':''}}</span>
      <input class="ipt-input" :value="value" :maxlength="maxlength" v-bind="{ placeholder: placeholder,readonly:readonly,type:inputtype}" v-on:input="$emit('input', $event.target.value.trim())" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String
    },
    'label-width': {
      type: String
    },
    placeholder: {
      type: String
    },
    isneedunit: {
      type: Boolean,
      default: () => false
    },
    readonly: {
      type: Boolean,
      default: () => false
    },
    inputtype: {
      type: String,
      default: () => 'text'
    },
    maxlength: {
      type: String
    },
    value: {
      type: String
    }
  }
}

</script>

 

模版文件先引用

<template>
  <div class="com-wrap" style="display: flex;flex-direction: column;justify-content: space-between;">
   
        <com-input inputtype="text" title="XXXX" label-width="1.9rem" placeholder="请输入XXXX" v-model="userinfo.name"> </com-input>

  </div>
</template>
<script>
import cominput from '@/components/input.vue'
export default {
  components: {
    'com-input': cominput
  },
  data() {
    return {
      userinfo: {
        name: ''
      }
    }
  },
  methods: {

    uploadclick: function() {

    }
  },
  mounted: function() {


  },
}

</script>