[新增] input 组件
This commit is contained in:
		
							parent
							
								
									4e2d9c0f4b
								
							
						
					
					
						commit
						af7f672852
					
				@ -1,7 +1,7 @@
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-input v-model="data"></lay-input>{{data}}
 | 
			
		||||
  <lay-input v-model="data"></lay-input>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -19,4 +19,25 @@ export default {
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-input placeholder="请输入密码"></lay-input>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { ref } from 'vue'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  setup() {
 | 
			
		||||
 | 
			
		||||
    return {
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <input :type="type" :value="modelValue" :name="name" class="layui-input" @input="updateValue"/>
 | 
			
		||||
  <input :type="type" :value="modelValue" :placeholder="placeholder" :name="name" class="layui-input" @input="updateValue"/>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup name="LayInput" lang="ts">
 | 
			
		||||
@ -10,12 +10,13 @@ const props =
 | 
			
		||||
    name?: string
 | 
			
		||||
    type?: string
 | 
			
		||||
    modelValue?: string
 | 
			
		||||
    placeholder?: string
 | 
			
		||||
  }>()
 | 
			
		||||
 | 
			
		||||
const emit = defineEmits(['update:modelValue'])
 | 
			
		||||
 | 
			
		||||
const updateValue = function(event: unknown,value: unknown) {
 | 
			
		||||
  emit('update:modelValue', value)
 | 
			
		||||
const updateValue = function(event: InputEvent) {
 | 
			
		||||
  emit('update:modelValue', (event.target as HTMLInputElement).value)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user