feat: 新增 button 组件 suffix-icon 与 prefix-icon 属性
This commit is contained in:
parent
ad7977b511
commit
1aea44181a
@ -95,10 +95,10 @@ export default {
|
||||
::: demo 使用 `fluid` 属性, 创建最大化按钮
|
||||
|
||||
<template>
|
||||
<lay-button type="primary" fluid>最大化按钮</lay-button>
|
||||
<lay-button type="primary" fluid="true">最大化按钮</lay-button>
|
||||
<br/>
|
||||
<br/>
|
||||
<lay-button type="default" fluid>最大化按钮</lay-button>
|
||||
<lay-button type="default" fluid="true">最大化按钮</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -186,6 +186,7 @@ export default {
|
||||
<lay-button-container>
|
||||
<lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
|
||||
<lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
|
||||
<lay-button prefix-icon="layui-icon-left" suffix-icon="layui-icon-right"></lay-button>
|
||||
</lay-button-container>
|
||||
</template>
|
||||
|
||||
@ -309,6 +310,8 @@ export default {
|
||||
| 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 集 |
|
||||
|
||||
:::
|
||||
|
||||
|
@ -16,6 +16,8 @@
|
||||
<li>
|
||||
<h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3>
|
||||
<ul>
|
||||
<li>[新增] button 组件 prefix-icon 属性。
|
||||
<li>[新增] button 组件 suffix-icon 属性。</li>
|
||||
<li>[新增] table 组件 row 和 row-double 时间的 event 参数。</li>
|
||||
<li>[新增] table 组件 contextmenu 行右键事件。</li>
|
||||
<li>[支持] Cdn 直接导入。</li>
|
||||
|
@ -28,7 +28,7 @@
|
||||
>{{ t('home.changelog') }}</router-link
|
||||
></span
|
||||
>
|
||||
<span>{{ t('home.download') }}:<em class="site-showdowns">4680</em></span>
|
||||
<span>{{ t('home.download') }}:<em class="site-showdowns">5463</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-banner-other">
|
||||
|
@ -7,17 +7,25 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import { computed } from "vue";
|
||||
import {
|
||||
ButtonBorder,
|
||||
ButtonNativeType,
|
||||
ButtonSize,
|
||||
ButtonType,
|
||||
} from "./interface";
|
||||
import { BooleanOrString, String } from "src/types";
|
||||
|
||||
export interface LayButtonProps {
|
||||
type?: "primary" | "normal" | "warm" | "danger";
|
||||
size?: "lg" | "sm" | "xs";
|
||||
fluid?: boolean | string;
|
||||
radius?: boolean | string;
|
||||
border?: "green" | "blue" | "orange" | "red" | "black";
|
||||
disabled?: boolean | string;
|
||||
loading?: boolean | string;
|
||||
nativeType?: "button" | "submit" | "reset";
|
||||
icon?: string;
|
||||
type?: ButtonType;
|
||||
size?: ButtonSize;
|
||||
prefixIcon?: String;
|
||||
suffixIcon?: String;
|
||||
border?: ButtonBorder;
|
||||
fluid?: BooleanOrString;
|
||||
radius?: BooleanOrString;
|
||||
loading?: BooleanOrString;
|
||||
disabled?: BooleanOrString;
|
||||
nativeType?: ButtonNativeType;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayButtonProps>(), {
|
||||
@ -26,7 +34,6 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
|
||||
loading: false,
|
||||
disabled: false,
|
||||
nativeType: "button",
|
||||
icon: "",
|
||||
});
|
||||
|
||||
const emit = defineEmits(["click"]);
|
||||
@ -39,6 +46,11 @@ const onClick = (event: any) => {
|
||||
|
||||
const classes = computed(() => {
|
||||
return [
|
||||
{
|
||||
"layui-btn-fluid": props.fluid,
|
||||
"layui-btn-radius": props.radius,
|
||||
"layui-btn-disabled": props.disabled,
|
||||
},
|
||||
props.type ? `layui-btn-${props.type}` : "",
|
||||
props.size ? `layui-btn-${props.size}` : "",
|
||||
props.border ? `layui-border-${props.border}` : "",
|
||||
@ -49,22 +61,22 @@ const classes = computed(() => {
|
||||
<template>
|
||||
<button
|
||||
class="layui-btn"
|
||||
:class="[
|
||||
{
|
||||
'layui-btn-fluid': fluid,
|
||||
'layui-btn-radius': radius,
|
||||
'layui-btn-disabled': disabled,
|
||||
},
|
||||
classes,
|
||||
]"
|
||||
:class="classes"
|
||||
:type="nativeType"
|
||||
@click="onClick"
|
||||
>
|
||||
<i v-if="icon" :class="'layui-icon ' + icon"></i>
|
||||
<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="
|
||||
layui-icon
|
||||
layui-icon-loading-one
|
||||
layui-anim
|
||||
layui-anim-rotate
|
||||
layui-anim-loop
|
||||
"
|
||||
></i>
|
||||
<slot v-else></slot>
|
||||
<i v-if="suffixIcon" :class="`layui-icon ${suffixIcon}`"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
@ -0,0 +1,4 @@
|
||||
export type ButtonType = "primary" | "normal" | "warm" | "danger";
|
||||
export type ButtonSize = "lg" | "sm" | "xs";
|
||||
export type ButtonBorder = "green" | "blue" | "orange" | "red" | "black";
|
||||
export type ButtonNativeType = "button" | "submit" | "reset";
|
@ -19,11 +19,6 @@
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.layui-btn-group .layui-btn:hover {
|
||||
border-color: #d2d2d2;
|
||||
color: @button-primary-color;
|
||||
}
|
||||
|
||||
.layui-btn-group .layui-btn:first-child {
|
||||
border-left: none;
|
||||
border-radius: @button-border-radius 0 0 @button-border-radius;
|
||||
|
@ -17,3 +17,15 @@ export type Nullable<T> = T | null;
|
||||
export type MaybeRef<T> = Ref<T> | T;
|
||||
|
||||
export type Recordable = Record<string, any>;
|
||||
|
||||
/************************/
|
||||
|
||||
export type Number = number;
|
||||
|
||||
export type String = string;
|
||||
|
||||
export type Boolean = boolean;
|
||||
|
||||
export type NumberOrString = number | string;
|
||||
|
||||
export type BooleanOrString = boolean | string;
|
||||
|
Loading…
Reference in New Issue
Block a user