Input 输入框

通过键盘输入字符，录入信息

基础用法

查看代码

<template>
  <e-input v-model="value" style="width: 250px" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

const value = ref('')

watchEffect(() => {
  console.log(value.value)
})
</script>

一键清除

查看代码

<template>
  <e-input v-model="value" style="width: 250px" clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

禁用

查看代码

<template>
  <e-input v-model="value" style="width: 250px" disabled />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

密码输入框

查看代码

<template>
  <e-input v-model="value" type="password" style="width: 250px" clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

文本域

查看代码

<template>
  <e-input v-model="value" type="textarea" style="width: 250px" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

前缀or后缀图标

查看代码

<template>
  <e-input v-model="value" style="width: 250px" :prefix-icon="IconSearch" />
  <br />
  <e-input v-model="value" style="width: 250px" :suffix-icon="IconEdit" />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { IconEdit, IconSearch } from 'elin-ui'

const value = ref('')

watchEffect(() => {
  console.log(value.value)
})
</script>

Input API

Props

属性名	说明	类型	默认值
v-model	值	string	--
type	输入框类型	enum	false
placeholder	占位文本	string	'请输入'
disabled	禁用	boolean	false
readonly	只读	boolean	false
clearable	一键清除，文本域模式下无效	boolean	false
prefixIcon	前缀图标	VNode	--
suffixIcon	后缀图标	VNode	--