📝(component): 更新 input 文档
This commit is contained in:
就眠儀式
parent
fbf78dd0dd
commit
16f16a1a84
@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
|
||||
import Component from "./index.vue";
|
||||
|
||||
const component: WithInstallType<typeof Component> = withInstall(Component);
|
||||
export default component;
|
||||
export default component;
|
||||
@ -10,7 +10,7 @@
|
||||
::: title 基础使用
|
||||
:::
|
||||
|
||||
::: demo 使用 `lay-input` 标签, 创建输入框
|
||||
::: demo 使用 `lay-input` 标签, 创建输入框。
|
||||
|
||||
<template>
|
||||
<lay-input v-model="data1"></lay-input>
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
::: title 提示信息
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `placeholder` 属性, 设置输入框提示信息。
|
||||
|
||||
<template>
|
||||
<lay-input placeholder="提示信息"></lay-input>
|
||||
@ -60,7 +60,7 @@ export default {
|
||||
::: title 前缀后缀
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `prefix` 与 `suffix` 插槽, 设置框内前置后置内容。
|
||||
|
||||
<template>
|
||||
<lay-input>
|
||||
@ -86,7 +86,7 @@ export default {
|
||||
::: title 拼接内容
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `prepend` 与 `append` 插槽, 设置框外前置后置内容。
|
||||
|
||||
<template>
|
||||
<lay-input v-model="inputValue">
|
||||
@ -114,7 +114,7 @@ export default {
|
||||
::: title 输入密码
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `password` 属性, 启用显示密码明文操作。
|
||||
|
||||
<template>
|
||||
<lay-input v-model="inputValue1" type="password" password></lay-input>
|
||||
@ -140,7 +140,7 @@ export default {
|
||||
::: title 设置图标
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `prefix-icon` 与 `suffix-icon` 属性, 设置前置后置图标。
|
||||
|
||||
<template>
|
||||
<lay-input prefix-icon="layui-icon-home" suffix-icon="layui-icon-home">
|
||||
@ -164,7 +164,7 @@ export default {
|
||||
::: title 允许清空
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `allow-clear` 属性, 开启清空操作。
|
||||
|
||||
<template>
|
||||
<lay-input :allow-clear="true" v-model="value1"></lay-input>
|
||||
@ -220,7 +220,7 @@ export default {
|
||||
::: title 禁止输入
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `disabled` 属性, 禁止输入。
|
||||
|
||||
<template>
|
||||
<lay-input placeholder="禁止输入" :disabled="disabled"></lay-input>
|
||||
@ -243,10 +243,32 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 限制长度
|
||||
:::
|
||||
|
||||
::: demo 通过 `maxlength` 属性, 限制文本输入长度。
|
||||
|
||||
<template>
|
||||
<lay-input placeholder="限制内容长度" :maxlength="10"></lay-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸Size
|
||||
:::
|
||||
|
||||
::: demo
|
||||
::: demo 通过 `size` 属性, 设置输入框尺寸。
|
||||
|
||||
<template>
|
||||
<div>
|
||||
@ -267,20 +289,21 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------------------- | -------------------- | -------------- |
|
||||
| name | 原始属性 name | -- |
|
||||
| placeholder | 提示信息 | -- |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| readonly | 原生属性 readonly | `true` `false` |
|
||||
| v-model / modelValue | 值 | -- |
|
||||
| autofocus | 原生属性 autofocus | `true` `false` |
|
||||
| autocomplete | 原生属性 autocomplete | `true` `false` |
|
||||
| allow-clear | 允许清空 allow-clear | `true` `false` |
|
||||
| prefix-icon | 前置图标 | -- |
|
||||
| suffix-icon | 后置图标 | -- |
|
||||
| password | 开启密码显示隐藏 | `true` `false`|
|
||||
| size | 尺寸 | `lg` `md` `sm` `xs`，默认`md`|
|
||||
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||
| ----------------------- | -------------------- |-------------- |-------------- | -------------- |
|
||||
| name | 原始属性 name | `string` | -- | -- |
|
||||
| placeholder | 提示信息 | `string` | -- | -- |
|
||||
| disabled | 禁用 | `boolean` | `false` | `true` `false` |
|
||||
| readonly | 原生属性 readonly | `boolean` | `false` |`true` `false` |
|
||||
| v-model / modelValue | 值 | `string` `number` | -- |-- |
|
||||
| autofocus | 原生属性 autofocus | `boolean` | `false` |`true` `false` |
|
||||
| autocomplete | 原生属性 autocomplete | `boolean` | `false` |`true` `false` |
|
||||
| allow-clear | 允许清空 allow-clear | `boolean` | `false` | `true` `false` |
|
||||
| prefix-icon | 前置图标 | -- | -- | 内置 icon 集 |
|
||||
| suffix-icon | 后置图标 | -- | -- | 内置 icon 集 |
|
||||
| password | 开启密码显示隐藏 | `boolean` | `false` |`true` `false` |
|
||||
| size | 尺寸 | `string` | `md` | `lg` `md` `sm` `xs`|
|
||||
| maxlength | 限制输入长度 | `number` | -- |-- |
|
||||
|
||||
:::
|
||||
|
||||
@ -289,13 +312,13 @@ export default {
|
||||
|
||||
::: table
|
||||
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ----- | ------------------- | ----------------|
|
||||
| input | 原生 input 事件 | event : Event |
|
||||
| foucs | 原生 foucs 事件 | event : Event |
|
||||
| blur | 原生 blur 事件 | event : Event |
|
||||
| change| 原生 change 事件 | event : Event |
|
||||
| clear | 清空 事件 | -- |
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ----- | ------------------- | -------------------------- |
|
||||
| input | 原生 input 事件 | (value : `string` `number`) |
|
||||
| change| 原生 change 事件 | (value : `string` `number`) |
|
||||
| foucs | 原生 foucs 事件 | event : Event |
|
||||
| blur | 原生 blur 事件 | event : Event |
|
||||
| clear | 清空 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user