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; size?: ButtonSize;
prefixIcon?: String; prefixIcon?: String;
suffixIcon?: String; suffixIcon?: String;
loadingIcon?: String;
border?: ButtonBorder; border?: ButtonBorder;
fluid?: BooleanOrString; fluid?: BooleanOrString;
radius?: BooleanOrString; radius?: BooleanOrString;
@ -36,6 +37,7 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
radius: false, radius: false,
loading: false, loading: false,
disabled: false, disabled: false,
loadingIcon: "layui-icon-loading-one",
nativeType: "button", nativeType: "button",
borderStyle: "soild", borderStyle: "soild",
}); });
@ -79,7 +81,8 @@ const classes = computed(() => {
<i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i> <i v-if="prefixIcon" :class="`layui-icon ${prefixIcon}`"></i>
<i <i
v-if="loading" 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> ></i>
<slot v-else></slot> <slot v-else></slot>
<i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i> <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[]; limits?: number[];
} }
const slots = useSlots();
const { t } = useI18n();
const props = withDefaults(defineProps<LayPageProps>(), { const props = withDefaults(defineProps<LayPageProps>(), {
limit: 10, limit: 10,
theme: "green", theme: "green",
@ -42,6 +38,9 @@ const props = withDefaults(defineProps<LayPageProps>(), {
limits: () => [10, 20, 30, 40, 50], limits: () => [10, 20, 30, 40, 50],
}); });
const { t } = useI18n();
const slots = useSlots();
const limits = ref(props.limits); const limits = ref(props.limits);
const pages = Math.floor(props.pages / 2); 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", childrenColumnName: "children",
dataSource: () => [], dataSource: () => [],
selectedKeys: () => [], selectedKeys: () => [],
selectedKey: '', selectedKey: "",
maxHeight: "auto", maxHeight: "auto",
even: false, even: false,
rowClassName: "", rowClassName: "",

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

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