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>