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

✨(button): 新增 loading-icon 属性, 允许自定义加载图标

Browse Source
This commit is contained in:
就眠儀式 2022-08-07 02:32:47 +08:00
parent 0058721468
commit 06d109dcef
4 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package/component/src/component/button/index.vue
View File

@ -22,6 +22,7 @@ export interface LayButtonProps {
size?: ButtonSize;
prefixIcon?: String;
suffixIcon?: String;
loadingIcon?: String;
border?: ButtonBorder;
fluid?: BooleanOrString;
radius?: BooleanOrString;
@ -36,6 +37,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
radius: false,
loading: false,
disabled: false,
loadingIcon: "layui-icon-loading-one",
nativeType: "button",
borderStyle: "soild",
});
@ -79,7 +81,8 @@ const classes = computed(() => {
<i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>
<i
v-if="loading"
class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"
:class="loadingIcon"
class="layui-icon layui-anim layui-anim-rotate layui-anim-loop"
></i>
<slot v-else></slot>
<i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i>

7
package/component/src/component/page/index.vue
View File

@ -24,10 +24,6 @@ export interface LayPageProps {
limits?: number[];
}
const slots = useSlots();
const { t } = useI18n();
const props = withDefaults(defineProps<LayPageProps>(), {
limit: 10,
theme: "green",
@ -42,6 +38,9 @@ const props = withDefaults(defineProps<LayPageProps>(), {
limits: () => [10, 20, 30, 40, 50],
});
const { t } = useI18n();
const slots = useSlots();
const limits = ref(props.limits);
const pages = Math.floor(props.pages / 2);

2
package/component/src/component/table/index.vue
View File

@ -58,7 +58,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
childrenColumnName: "children",
dataSource: () => [],
selectedKeys: () => [],
selectedKey: '',
selectedKey: "",
maxHeight: "auto",
even: false,
rowClassName: "",

30
package/document-component/src/document/zh-CN/components/button.md
View File

@ -119,7 +119,7 @@ export default {
::: title 流式按钮
:::
::: demo 使用 `fluid` 属性, 创建最大化按钮
::: demo 使用 `fluid` 属性, 使其适合父最大宽度
<template>
<lay-button type="primary" fluid="true">最大化按钮</lay-button>
@ -266,6 +266,7 @@ export default {
<template>
<lay-button-container>
<lay-button type="default" :loading="loadState">加载</lay-button>
<lay-button type="default" :loading="loadState" loadingIcon="layui-icon-loading">加载</lay-button>
<lay-switch v-model="loadState"></lay-switch>
</lay-button-container>
</template>
@ -320,19 +321,20 @@ export default {
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ---------------------------------- |
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
| size | 尺寸 | string | -- | `lg` `sm` `xs` |
| fluid | 最大化 | boolean | `false` | `true` `false` |
| radius | 圆角 | boolean | `false` | `true` `false` |
| border | 边框 | string | `green` | `green` `blue` `orange` `red` |
| border-style | 边框样式 | string | `soild` | `soild` `dashed` `dotted` |
| disabled | 禁用 | boolean | `false` | `true` `false` |
| loading | 加载 | boolean | `false` | `true` `false` |
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
| prefix-icon | 前置图标 | string | -- | 内置 icon 集 |
| suffix-icon | 后置图标 | string | -- | 内置 icon 集 |
| 属性 | 描述 | 类型 | 默认值 | 可选值 | 版本 |
| ----------- | -------- | ------- | --------- | ---------------------------------- | ---------------------------------- |
| type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` | -- |
| size | 尺寸 | string | -- | `lg` `sm` `xs` | -- |
| fluid | 最大化 | boolean | `false` | `true` `false` | -- |
| radius | 圆角 | boolean | `false` | `true` `false` | -- |
| border | 边框 | string | `green` | `green` `blue` `orange` `red` | -- |
| border-style | 边框样式 | string | `soild` | `soild` `dashed` `dotted` | -- |
| disabled | 禁用 | boolean | `false` | `true` `false` | -- |
| loading | 加载 | boolean | `false` | `true` `false` | -- |
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` | -- |
| prefix-icon | 前置图标 | string | -- | 内置 icon 集 | -- |
| suffix-icon | 后置图标 | string | -- | 内置 icon 集 | -- |
| loading-icon | 后置图标 | string | -- | 内置 icon 集 | `1.4.0` |
:::