新增input-number(数字输入框)、tooltip(文字提示)、修改input组件可接受number类型值

This commit is contained in:
xumi
2021-12-12 17:39:02 +08:00
parent e545b9221a
commit 961eac0127
17 changed files with 857 additions and 1 deletions

View File

@@ -0,0 +1,139 @@
::: title 基础使用
:::
::: demo
<template>
<lay-input-number v-model="data"></lay-input-number>
<lay-input-number v-model="data2" position="right"></lay-input-number>
</template>
<script>
import { ref } from 'vue';
const data = ref(0);
const data2 = ref(0);
export default {
setup() {
return {
data,
data2,
}
}
}
</script>
:::
::: title 尺寸
:::
::: demo
<template>
<div>
<div>
<lay-input-number></lay-input-number>
<lay-input-number size="md"></lay-input-number>
<lay-input-number size="sm"></lay-input-number>
<lay-input-number size="xs"></lay-input-number>
</div>
<div>
<lay-input-number position="right"></lay-input-number>
<lay-input-number position="right" size="md"></lay-input-number>
<lay-input-number position="right" size="sm"></lay-input-number>
<lay-input-number position="right" size="xs"></lay-input-number>
</div>
</div>
</template>
<script>
</script>
:::
::: title 限制数字大小
:::
::: demo
<template>
<lay-input-number :min="0" :max="10"></lay-input-number>
</template>
<script>
</script>
:::
::: title 数字步数
:::
::: demo
<template>
<lay-input-number :step="10"></lay-input-number>
</template>
<script>
</script>
:::
::: title 禁用
:::
::: demo
<template>
<p>禁用输入</p>
<lay-input-number v-model="data" disabled-input></lay-input-number>
<p>全部禁用</p>
<lay-input-number v-model="data2" disabled></lay-input-number>
</template>
<script>
import { ref } from 'vue';
const data = ref(10);
const data2 = ref(25);
export default {
setup() {
return {
data,
data2
}
}
}
</script>
:::
::: title input-number属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 |
| -------- | ------------- | ------ | ------ |
| v-model | 值 | `number` | 0 |
| name | 原生属性`name` | `number` | 5 |
| disabledInput | 禁用输入框输入 | `boolean` | false |
| disabled | 禁用操作 | `boolean` | false |
| step | 数字增减的步数 | `number` | 1 |
| position | 控制按钮显示位置, 目前除了默认值,只有`right`可填 | `string` | -- |
| min | 最小可输入的数 | `number` | -- |
| max | 最大可输入的数 | `number` | -- |
| size | 尺寸, 可选值`md` / `sm` / `xs`| `string` | 默认为最大尺寸 |
:::
::: title 事件
:::
::: table
| 属性 | 描述 | 回调参数 |
| -------- | -------- | ------ |
| change | 值更改触发事件 | (value: number) |
:::

View File

@@ -0,0 +1,75 @@
::: title 基础使用
:::
::: demo
<template>
<lay-tooltip content="假装这里有文字提示">
<lay-button>tooltip</lay-button>
</lay-tooltip>
</template>
<style>
</style>
:::
::: title 显示位置
:::
::: demo
<template>
<div style="padding: 100px;max-width:400px;">
<div style="text-align: center;">
<lay-tooltip content="假装这里有文字提示">
<lay-button>上边</lay-button>
</lay-tooltip>
</div>
<div>
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="left">
<lay-button style="float:left;">左边</lay-button>
</lay-tooltip>
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="right">
<lay-button style="float:right;">右边</lay-button>
</lay-tooltip>
<div style="clear: both;"></div>
</div>
<div style="text-align: center;">
<lay-tooltip content="假装这里有文字提示假装这里有文字提示假装这里有文字提示假装这里有文字提示" position="bottom">
<lay-button>下边</lay-button>
</lay-tooltip>
</div>
</div>
</template>
<style>
</style>
:::
::: title 浅色主题
:::
::: demo
<template>
<lay-tooltip content="假装这里有文字提示" :is-dark="false">
<lay-button>tooltip</lay-button>
</lay-tooltip>
</template>
<style>
</style>
:::
::: title tooltip属性
:::
::: table
| 属性 | 描述 | 可选值 |
| ----------- | -------- | -------------- |
| content | 显示内容 | -- |
| position | 显示位置 | `top`(默认值)、`bottom``left``right` |
| isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) |
:::

View File

@@ -280,6 +280,12 @@ export default {
title: '输入框',
subTitle: 'input',
path: '/zh-CN/components/input',
},
{
id: 341,
title: '数字输入框',
subTitle: 'inputNumber',
path: '/zh-CN/components/inputNumber',
},
{
id: 35,
@@ -316,6 +322,11 @@ export default {
title: '颜色选择器',
subTitle: 'colorPicker',
path: '/zh-CN/components/colorPicker',
}, {
id: 41,
title: '文字提示',
subTitle: 'tooltip',
path: '/zh-CN/components/tooltip',
},
]

View File

@@ -238,6 +238,11 @@ const zhCN = [
component: () => import('../../docs/zh-CN/components/input.md'),
meta: { title: '输入框' },
},
{
path: '/zh-CN/components/inputNumber',
component: () => import('../../docs/zh-CN/components/inputNumber.md'),
meta: { title: '数字输入框' },
},
{
path: '/zh-CN/components/textarea',
component: () => import('../../docs/zh-CN/components/textarea.md'),
@@ -273,6 +278,11 @@ const zhCN = [
component: () => import('../../docs/zh-CN/components/layer.md'),
meta: { title: '简介' },
},
{
path: '/zh-CN/components/tooltip',
component: () => import('../../docs/zh-CN/components/tooltip.md'),
meta: { title: '文字提示' },
},
{
path: '/zh-CN/components/modal',
component: () => import('../../docs/zh-CN/components/modal.md'),

View File

@@ -188,6 +188,12 @@ export default {
subTitle: 'input',
path: '/zh-CN/components/input',
},
{
id: 341,
title: '数字输入框',
subTitle: 'inputNumber',
path: '/zh-CN/components/inputNumber',
},
{
id: 35,
title: '文本域',
@@ -326,6 +332,12 @@ export default {
subTitle: 'field',
path: '/zh-CN/components/field',
},
{
id: 25,
title: '文字提示',
subTitle: 'tooltip',
path: '/zh-CN/components/tooltip',
},
],
},
{