theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

📝(component): 更新 input 文档

Browse Source
This commit is contained in:
就眠儀式 2022-07-28 10:52:14 +08:00
parent fbf78dd0dd
commit 16f16a1a84
2 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/input/index.ts
View File

@ -2,4 +2,4 @@ import { withInstall, WithInstallType } from "../../utils";
import Component from "./index.vue"; import Component from "./index.vue";
const component: WithInstallType<typeof Component> = withInstall(Component); const component: WithInstallType<typeof Component> = withInstall(Component);
export default component; export default component;

83
package/document-component/src/document/zh-CN/components/input.md
View File

@ -10,7 +10,7 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 使用 `lay-input` 标签, 创建输入框 ::: demo 使用 `lay-input` 标签, 创建输入框。
<template> <template>
<lay-input v-model="data1"></lay-input> <lay-input v-model="data1"></lay-input>
@ -36,7 +36,7 @@ export default {
::: title 提示信息 ::: title 提示信息
::: :::
::: demo ::: demo 通过 `placeholder` 属性, 设置输入框提示信息。
<template> <template>
<lay-input placeholder="提示信息"></lay-input> <lay-input placeholder="提示信息"></lay-input>
@ -60,7 +60,7 @@ export default {
::: title 前缀后缀 ::: title 前缀后缀
::: :::
::: demo ::: demo 通过 `prefix` 与 `suffix` 插槽, 设置框内前置后置内容。
<template> <template>
<lay-input> <lay-input>
@ -86,7 +86,7 @@ export default {
::: title 拼接内容 ::: title 拼接内容
::: :::
::: demo ::: demo 通过 `prepend` 与 `append` 插槽, 设置框外前置后置内容。
<template> <template>
<lay-input v-model="inputValue"> <lay-input v-model="inputValue">
@ -114,7 +114,7 @@ export default {
::: title 输入密码 ::: title 输入密码
::: :::
::: demo ::: demo 通过 `password` 属性, 启用显示密码明文操作。
<template> <template>
<lay-input v-model="inputValue1" type="password" password></lay-input> <lay-input v-model="inputValue1" type="password" password></lay-input>
@ -140,7 +140,7 @@ export default {
::: title 设置图标 ::: title 设置图标
::: :::
::: demo ::: demo 通过 `prefix-icon` 与 `suffix-icon` 属性, 设置前置后置图标。
<template> <template>
<lay-input prefix-icon="layui-icon-home" suffix-icon="layui-icon-home"> <lay-input prefix-icon="layui-icon-home" suffix-icon="layui-icon-home">
@ -164,7 +164,7 @@ export default {
::: title 允许清空 ::: title 允许清空
::: :::
::: demo ::: demo 通过 `allow-clear` 属性, 开启清空操作。
<template> <template>
<lay-input :allow-clear="true" v-model="value1"></lay-input> <lay-input :allow-clear="true" v-model="value1"></lay-input>
@ -220,7 +220,7 @@ export default {
::: title 禁止输入 ::: title 禁止输入
::: :::
::: demo ::: demo 通过 `disabled` 属性, 禁止输入。
<template> <template>
<lay-input placeholder="禁止输入" :disabled="disabled"></lay-input> <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 ::: title 尺寸Size
::: :::
::: demo ::: demo 通过 `size` 属性, 设置输入框尺寸。
<template> <template>
<div> <div>
@ -267,20 +289,21 @@ export default {
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------------------- | -------------------- | -------------- | | ----------------------- | -------------------- |-------------- |-------------- | -------------- |
| name | 原始属性 name | -- | | name | 原始属性 name | `string` | -- | -- |
| placeholder | 提示信息 | -- | | placeholder | 提示信息 | `string` | -- | -- |
| disabled | 禁用 | `true` `false` | | disabled | 禁用 | `boolean` | `false` | `true` `false` |
| readonly | 原生属性 readonly | `true` `false` | | readonly | 原生属性 readonly | `boolean` | `false` |`true` `false` |
| v-model / modelValue | 值 | -- | | v-model / modelValue | 值 | `string` `number` | -- |-- |
| autofocus | 原生属性 autofocus | `true` `false` | | autofocus | 原生属性 autofocus | `boolean` | `false` |`true` `false` |
| autocomplete | 原生属性 autocomplete | `true` `false` | | autocomplete | 原生属性 autocomplete | `boolean` | `false` |`true` `false` |
| allow-clear | 允许清空 allow-clear | `true` `false` | | allow-clear | 允许清空 allow-clear | `boolean` | `false` | `true` `false` |
| prefix-icon | 前置图标 | -- | | prefix-icon | 前置图标 | -- | -- | 内置 icon 集 |
| suffix-icon | 后置图标 | -- | | suffix-icon | 后置图标 | -- | -- | 内置 icon 集 |
| password | 开启密码显示隐藏 | `true` `false`| | password | 开启密码显示隐藏 | `boolean` | `false` |`true` `false` |
| size | 尺寸 | `lg` `md` `sm` `xs`，默认`md`| | size | 尺寸 | `string` | `md` | `lg` `md` `sm` `xs`|
| maxlength | 限制输入长度 | `number` | -- |-- |
::: :::
@ -289,13 +312,13 @@ export default {
::: table ::: table
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
| ----- | ------------------- | ----------------| | ----- | ------------------- | -------------------------- |
| input | 原生 input 事件 | event : Event | | input | 原生 input 事件 | (value : `string` `number`) |
| foucs | 原生 foucs 事件 | event : Event | | change| 原生 change 事件 | (value : `string` `number`) |
| blur | 原生 blur 事件 | event : Event | | foucs | 原生 foucs 事件 | event : Event |
| change| 原生 change 事件 | event : Event | | blur | 原生 blur 事件 | event : Event |
| clear | 清空 事件 | -- | | clear | 清空 事件 | -- |
::: :::