补充 button 文档
This commit is contained in:
parent
265ab686f2
commit
a65c591a04
@ -1,7 +1,7 @@
|
|||||||
::: title 基础使用
|
::: title 基础使用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 lay-button 标签, 创建一个按钮
|
::: demo 使用 `lay-button` 标签, 创建一个按钮
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="primary">原始按钮</lay-button>
|
<lay-button type="primary">原始按钮</lay-button>
|
||||||
@ -29,7 +29,7 @@ export default {
|
|||||||
::: title 简约按钮
|
::: title 简约按钮
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 border 属性设置 主要按钮 边框主题
|
::: demo 使用 `border` 属性设置边框主题
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="primary">原始按钮</lay-button>
|
<lay-button type="primary">原始按钮</lay-button>
|
||||||
@ -57,7 +57,7 @@ export default {
|
|||||||
::: title 按钮尺寸
|
::: title 按钮尺寸
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
|
::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="primary" size="lg">原始按钮</lay-button>
|
<lay-button type="primary" size="lg">原始按钮</lay-button>
|
||||||
@ -85,7 +85,7 @@ export default {
|
|||||||
::: title 流式按钮
|
::: title 流式按钮
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 传入 fluid 属性, 创建最大化按钮
|
::: demo 传入 `size` 属性, 创建最大化按钮
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="primary" fluid>最大化按钮</lay-button>
|
<lay-button type="primary" fluid>最大化按钮</lay-button>
|
||||||
@ -111,7 +111,7 @@ export default {
|
|||||||
::: title 圆角按钮
|
::: title 圆角按钮
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 传入 radius 属性,创建圆角按钮
|
::: demo 传入 `radius` 属性,创建圆角按钮
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="primary" radius>原始按钮</lay-button>
|
<lay-button type="primary" radius>原始按钮</lay-button>
|
||||||
@ -139,7 +139,7 @@ export default {
|
|||||||
::: title 按钮分组
|
::: title 按钮分组
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 lay-button-group 标签, 创建一个按钮组
|
::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
@ -173,7 +173,7 @@ export default {
|
|||||||
::: title 图标按钮
|
::: title 图标按钮
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 结合 lay-icon 组件, 创建图标按钮
|
::: demo 结合 `lay-icon` 组件, 创建图标按钮
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button-container>
|
<lay-button-container>
|
||||||
@ -199,7 +199,7 @@ export default {
|
|||||||
::: title 按钮容器
|
::: title 按钮容器
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 lay-button-container 标签, 创建一个按钮容器
|
::: demo 使用 `lay-button-container` 标签, 创建一个按钮容器
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button-container>
|
<lay-button-container>
|
||||||
@ -226,7 +226,7 @@ export default {
|
|||||||
::: title 加载按钮
|
::: title 加载按钮
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 传入 loading 属性, 控制按钮的加载状态
|
::: demo 传入 `loading` 属性, 控制按钮的加载状态
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button-container>
|
<lay-button-container>
|
||||||
@ -255,7 +255,7 @@ export default {
|
|||||||
::: title 事件处理
|
::: title 事件处理
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 @click 设置单击回调
|
::: demo 使用 `@click` 设置单击回调
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
|
<lay-button type="default" @click="clickHandle">单击事件</lay-button>
|
||||||
@ -280,29 +280,55 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 按钮属性
|
::: title Button 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 属性 | 描述 | 可选值 |
|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||||
| ------ | ------ | --------------------------------------------- |
|
| ----------- | -------- | ------- | --------- | ----------------------------------|
|
||||||
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
|
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
|
||||||
| size | 尺寸 | `lg` `sm` `xs` |
|
| size | 尺寸 | string | -- | `lg` `sm` `xs` |
|
||||||
| fluid | 最大化 | `true` `false` |
|
| fluid | 最大化 | boolean | `false` | `true` `false` |
|
||||||
| radius | 圆角 | `true` `false` |
|
| radius | 圆角 | boolean | `false` | `true` `false` |
|
||||||
| border | 边框 | `green` `blue` `orange` `red` `black` |
|
| border | 边框 | string | `green` | `green` `blue` `orange` `red` |
|
||||||
|
| disabled | 禁用 | boolean | `false` | `true` `false` |
|
||||||
|
| loading | 加载 | boolean | `false` | `true` `false` |
|
||||||
|
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 按钮事件
|
::: title Button 插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 名称 | 描述 | 参数 |
|
||||||
|
| ----- | -------- | ---- |
|
||||||
|
| default | 默认内容 | -- |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title Button Group 属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
|
||||||
|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||||
|
| ----------- | -------- | ------- | --------- | ----------------------------------|
|
||||||
|
| - | - | - | - |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title Button Group 插槽
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| 事件 | 描述 | 参数 |
|
| 事件 | 描述 | 参数 |
|
||||||
| ----- | -------- | ---- |
|
| ----- | -------- | ---- |
|
||||||
| click | 单击事件 | `--` |
|
| default | 默认内容 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
<li>
|
<li>
|
||||||
<h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3>
|
<h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>
|
||||||
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
|
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
|
||||||
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
|
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
|
||||||
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
||||||
|
@ -28,9 +28,9 @@
|
|||||||
.lay-table-box table th {
|
.lay-table-box table th {
|
||||||
color: #666;
|
color: #666;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
white-space: nowrap; /*表头内容强制在一行显示*/
|
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
|
.lay-table-box table th,
|
||||||
.lay-table-box table td {
|
.lay-table-box table td {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user