Gitee
Appearance
Button Edit 按钮输入框 #
Button Edit 是允许在其编辑器内部嵌入按钮的文本输入框。开发者可以自定义输入框的按钮，以便于实现丰富的录入交互形式。
基本用法 #
输入框类型 #
对齐方式 #
状态 #
按钮 #
清空按钮 #
文本标签 #
提示信息 #
输入值长度限制 #
弹出面板交互设置 #
类型 #
typescript
type TextAlignment = 'left' | 'center' | 'right';
属性 #
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| id | string | -- | 标记组件的唯一标识 |
| autoComplete | boolean | false | 是否启用自动完成录入文本功能 |
| buttonContent | string | -- | 按钮内容，缺省为点击按钮图标 |
| customClass | string | -- | 组件自定义样式 |
| disable | boolean | false | 将组件设置为禁用状态 |
| editable | boolean | true | 是否允许在输入框编辑文本；inputType为tag时，此属性无效 |
| enableClear | boolean | false | 是否启用清空按钮 |
| readonly | boolean | false | 将组件输入框设置为只读 |
| textAlign | string as TextAlignment | 'left' | 设置输入框对齐方式，缺省状况为左对齐，可选择的值包括：'left','center','right'; inputType为tag时，此属性无效 |
| showButtonWhenDisabled | boolean | false | 是否允许在禁用组件时仍然显示组件按钮 |
| enableTitle | boolean | false | 是否启用输入框的的提示文本 |
| inputType | 'text' | 'tag' | 'text' | 设置输入框类型，缺省为文本输入框，可以选择设为标签输入框 |
| forcePlaceholder | boolean | false | 是否始终显示输入框提示文本 |
| placeholder | string | -- | 设置输入框提示文本 |
| minLength | number | -- | 设置输入框文本最小长度 |
| maxLength | number | -- | 设置输入框文本最大长度 |
| tabIndex | number | -- | 设置组件 Tab 键索引 |
| multiSelect | boolean | false | 是否支持多选 |
| separator | string | , | 多选分隔符 |
| popupOnInput | boolean | false | 开启后，输入时自动弹出选择面板；inputType为tag时，此属性无效 |
| popupOnFocus | boolean | false | 开启后，点击输入框自动弹出选择面板；inputType为tag时，此属性无效 |
| popupMinWidth | number | 320 | 弹出面板最小宽度 |
| buttonBehavior | Modal | Popup | -- | 按钮行为，可选值：Modal、Popup |
事件 #
typescript
type ClickButtonEvent = {origin: PointerEvent, value:string};
| 事件名 | 类型 | 说明 |
|---|---|---|
| clear | EventEmitter<[]> | 点击清空按钮事件 |
| click | EventEmitter<Array<MouseEvent>> | 点击输入框事件，inputType为 tag 时，此事件不会触发；参数类型详见 MouseEvent |
| clickButton | EventEmitter<Array<ClickButtonEvent>> | 点击按钮事件 |
| blur | EventEmitter<Array<FocusEvent>> | 输入框失去焦点事件，inputType为 tag 时，此事件不会触发, 参数类型详见 MouseEvent |
| focus | EventEmitter<Array<FocusEvent>> | 输入框获得焦点事件， inputType为 tag 时，此事件不会触发, 参数类型详见 MouseEvent |
| mouseEnterIcon | EventEmitter<Array<MouseEvent>> | 鼠标移入按钮事件. 参数类型详见 MouseEvent |
| mouseLeaveIcon | EventEmitter<Array<MouseEvent>> | 鼠标移出按钮事件. 参数类型详见 MouseEvent |
| keyup | EventEmitter<Array<KeyboardEvent>> | 抬起键盘按键事件. 参数类型详见 KeyboardEvent |
| keydown | EventEmitter<Array<KeyboardEvent>> | 按下键盘按键事件. 参数类型详见 KeyboardEvent |
| input | EventEmitter<Array<string>> | 在输入框录入字符事件 |
插槽 #
TIP
暂无内容