<template>
	<view class="my-input">	
	<input  		
	:value="value" 		
	@input="bindinput" 	
	//移动端无法通过.select() 实现内容选中，只能通过focus()配合selection-start和selection-end实现
	:selection-start="start" 	
     :selection-end="end"	
     :placeholder="mplaceholder" 		
     :type="type" 		
     @blur="bindblur" 		
     @focus="inputfocus($event)"		/>			
     </view>
</template>
<script>	
export default { 		
props: { 			
        value: { 				
        type: [Number, String],				
        default: ''			
        },			
        placeholder: { 				
        type: String,				
        default: '请输入数据'			
        }					
     },		
     data() { 			
     return { 				
     num: '',				
     start: -1,				
     end: -1,								
     mplaceholder: '',								
     type: 'string'			
     }	
 },		
 mounted() { 			
 this.mplaceholder = this.placeholder		},		
 methods: { 			
 inputfocus: function(event) { 							
       this.start = 0			
       this.end =event.target.value.length			
       this.type = 'number'			
       },			
       bindblur: function() { 								
       this.start = -1,				
       this.end = -1,	
       //input类型如果是number类是无法实现选中，所以如果input需要使用Number类型，需在失去焦点后，将其变为String类型，从而在下一次聚焦实现内容选中 
       this.type = 'string'			
       },			
       bindinput: function(event) { 				
       this.num = event.detail.value				
       this.$emit('input', this.num)			     
       }		
   }	
}
</script>
<style>	
input { 		
border-bottom: 1px solid #000000; 				text-align: center;	
}	
input:focus-within { 	
//聚焦后，改变边框颜色，如果用:focus会导致两层边框 
border-bottom: 2px solid blue;	
}
</style>