Input

我用几行字形容你是我的谁

import { DuInput } from 'dangoui'

示例

各种例子

<template>
  <PreviewBlock title="最简例子">
    <DuInput placeholder="请输入描述" />
  </PreviewBlock>
  <PreviewBlock title="带后缀">
    <DuInput placeholder="请输入金额" suffix="元" />
  </PreviewBlock>
  <PreviewBlock title="不带 border">
    <DuInput placeholder="请输入金额" suffix="元" without-border />
  </PreviewBlock>
  <PreviewBlock title="显示清除图标">
    <DuInput placeholder="请输入金额" suffix="元" allow-clear />
  </PreviewBlock>
  <PreviewBlock title="右侧图标">
    <DuInput placeholder="请输入金额" right-icon="arrow-heavy-right" right-icon-size="8px" />
  </PreviewBlock>
  <PreviewBlock title="显示外边框">
    <DuInput placeholder="请输入金额" bordered allow-clear />
  </PreviewBlock>
  <PreviewBlock title="显示外边框/禁用">
    <DuInput placeholder="请输入金额" bordered disabled />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuInput } from 'dangoui'
</script>

API

属性

属性名	类型	默认值	说明
type	`"number" \| "text" \| "idcard" \| "digit" \| "safe-password" \| "nickname" \| "password"`	`"text"`
bordered	`boolean`	`false`	是否展示外边框
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
value	`string`	`""`
disabled	`boolean`	`false`	禁用
placeholder	`string`	`""`
autofocus	`boolean`	`false`	自动聚焦，拉起键盘
password	`boolean`	`false`	是否是密码类型
maxlength	`number`	`-1`
input-align	`string`	`"left"`
without-border	`boolean`	`false`	是否展示底部的分割线，可能想改一下这个名字
prefix	`string`	`""`	前缀文本
trim	`boolean`	`false`	自动去除输入的空格
suffix	`string`	`""`	后缀文本
cursor-spacing	`number`	`0`	cursorSpacing
confirm-type	`string`	`"done"`	confirmType
always-embed	`boolean`	`false`	alwaysEmbed
confirm-hold	`boolean`	`false`	confirmHold
cursor	`number`	`0`	cursor
selection-start	`number`	`-1`	selectionStart
selection-end	`number`	`-1`	selectionEnd
adjust-position	`boolean`	`true`	adjustPosition
allow-clear	`boolean`	`false`	当有内容时，点击清除图标能够清除内容
right-icon	`string`	-	rightIcon
right-icon-size	`string`	-	rightIconSize

事件

名称	类型
confirm	`(event: "confirm", value: { detail: { value: string; }; }): void`
update:value	`(event: "update:value", value: string): void`
input	`(event: "input", value: string): void`
change	`(event: "change", value: string): void`
focus	`(event: "focus", value: { detail: { height: number; }; }): void`
blur	`(event: "blur", value: { detail: {}; }): void`
keyboardheightchange	`(event: "keyboardheightchange", value: { detail: { height: number; duration: number; }; }): void`