封装input组件的示例

<template>
	<view>
		<view>
			<input :type="type" 
			:value="value" 
			:name='name' 
			:disabled="disabled" 
			:placeholder="placeholder" 
			@input="handelInput"
			@focus='focus'
			@blur='blur'
			@confirm='confirm'
			/>
			<i class='clear' v-if='clearable&&value' @click='handelClear'></i>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:String,
				default:''
			},
			name:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:''
			},
			type:{
				type:String,
				default:''
			},
			disabled:{
				type:Boolean,
				default:false
			},
			clearable:{
				type:Boolean,
				default:false
			},
		},
		
		data() {
			return {
				
			}
		},
		methods: {
			handelInput(e){
				this.$emit('input',e.target.value)
			},
			handelClear(){
				this.$emit('input','')
			},
			focus(e){
				this.$emit('focus',e)
			},
			blur(e){
				this.$emit('blur',e)
			},
			confirm(e){
				this.$emit('confirm',e)
			},
		}
	}
</script>

<style>

</style>