Input 输入

用于表单里 input 输入项。

基本用法

使用 v-model 绑定输入值。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
</script>

尺寸大小

设置不同尺寸。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" size="large" />
		<br /><br />
		<gov-input v-model="value" />
		<br /><br />
		<gov-input v-model="value" size="small" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
</script>

禁用状态

设置 disabled 禁用输入框。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" disabled />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("填充内容");
</script>

前缀后缀

设置 prefix 和 suffix 来显示前后缀。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" prefix="￥" suffix="RMB" />
		<br /><br />
		<gov-input v-model="value">
			<template #prefix> $ </template>
			<template #suffix> USD </template>
		</gov-input>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
</script>

前置后置

前置和后置插槽与 prefix 和 suffix 位置不同。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value">
			<template #addonBefore>💰</template>
			<template #addonAfter>🔥</template>
		</gov-input>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
</script>

清空按钮

当有内容时，鼠标经过现实清空按钮。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" clear />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("填充内容");
</script>

密码框

密码框模式，可以点击切换密码是否可见。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" password />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("123456");
</script>

字数提示

设置maxlength 来设置最大输入长度；设置 count 会有统计效果。

查看代码

<template>
	<demo-container class="gov-demo-input">
		<gov-input v-model="value" count />
		<br /><br />
		<gov-input v-model="value2" count :maxlength="5" />
		<br /><br />
		<gov-input v-model="value3" :maxlength="5" />
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref("");
const value2 = ref("");
const value3 = ref("");
</script>

Attributes

属性名	说明	类型	可选值	默认值
width	输入框宽度	Number	—	null
size	输入框尺寸	String	—	—
addonBefore	前置标签内容	String/Number	—	—
addonAfter	后置标签内容	String/Number	—	—
prefix	前缀内容	String/Number	—	—
suffix	后缀内容	String/Number	—	—
clearable	是否可清空	Boolean	true, false	true
password	是否为密码输入	Boolean	true, false	false
disabled	是否禁用	Boolean	true, false	false
readonly	是否只读	Boolean	true, false	false
placeholder	占位符	String	—	请输入
maxlength	最大长度	Number	—	—
count	是否显示字数统计	Boolean	true, false	false
modelValue	绑定值	String/Number	—	—
triggerForm	是否触发表单验证	Boolean	true, false	true

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	新的值
clear	清空按钮点击时触发	—
input	输入时触发	输入的值
change	值改变时触发	新的值
focus	获得焦点时触发	事件对象
blur	失去焦点时触发	事件对象

Slots

插槽名	说明
addonBefore	前置标签内容
addonAfter	后置标签内容
prefix	输入框前缀内容
suffix	输入框后缀内容
icon	自定义图标，可以放置自定义的图标。