sard-uniapp
Version:
sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库
66 lines (47 loc) • 2.88 kB
Markdown
title: PopoutInput
subtitle: 弹出式输入框
group: 表单组件
## 介绍
输入框组件，用于配合弹出框组件和表单控件一起使用。自定义了输入框样式。
## 引入
```js
import PopoutInput from 'sard-uniapp/components/popout-input/popout-input.vue'
```
## 代码演示
### 基础使用
使用 `v-model` 绑定值， `click` 事件监听点击事件。
<<< @demo/popout-input/demo/Basic.vue
## API
### PopoutInputProps
| 属性 | 描述 | 类型 | 默认值 |
| ----------------------------- | -------------------- | ---------- | ------------- |
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| model-value | 输入框值 | string | - |
| placeholder | 输入框占位符内容 | string | - |
| disabled | 禁用状态 | boolean | false |
| readonly | 只读状态 | boolean | false |
| loading | 加载状态 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| multiline | 是否多行输入框 | boolean | false |
| arrow <sup>1.22+</sup> | 自定义箭头图标名 | string | 'caret-right' |
| arrow-family <sup>1.22+</sup> | 自定义箭头图标字体 | string | 'sari' |
| input-props <sup>1.22+</sup> | 自定义输入框组件属性 | InputProps | - |
### PopoutInputSlots
| 插槽 | 描述 | 属性 |
| -------------------------- | -------------------- | ------------ |
| arrow <sup>1.22+</sup> | 自定义箭头 | `() => void` |
| prepend <sup>1.25.4+</sup> | 自定义输入框前置内容 | `() => void` |
| append <sup>1.25.4+</sup> | 自定义输入框后置内容 | `() => void` |
### PopoutInputEmits
| 事件 | 描述 | 类型 |
| ------------------------ | ---------------------------------- | ------------------------- |
| click | 点击输入框时触发，只读和禁用不触发 | `() => void` |
| update:model-value | 输入框值改变时触发 | `(value: string) => void` |
| change <sup>1.9.2+</sup> | 输入框值改变时触发 | `(value: string) => void` |
| clear | 点击清除按钮时触发 | `() => void` |
## 主题定制
### CSS 变量
<<< @comp/popout-input/variables.scss#variables