✨(component): 整理 button 与 card 代码
This commit is contained in:
parent
7057e4894f
commit
8bc1d329cd
@ -8,45 +8,39 @@ export default {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import {
|
import { ButtonBorder, ButtonEmits, ButtonNativeType, ButtonSize, ButtonType } from "./interface";
|
||||||
ButtonBorder,
|
|
||||||
ButtonEmits,
|
|
||||||
ButtonNativeType,
|
|
||||||
ButtonSize,
|
|
||||||
ButtonType,
|
|
||||||
} from "./interface";
|
|
||||||
import { BooleanOrString, String } from "../../types";
|
import { BooleanOrString, String } from "../../types";
|
||||||
|
|
||||||
export interface LayButtonProps {
|
export interface ButtonProps {
|
||||||
type?: ButtonType;
|
type?: ButtonType;
|
||||||
size?: ButtonSize;
|
size?: ButtonSize;
|
||||||
prefixIcon?: String;
|
prefixIcon?: String;
|
||||||
suffixIcon?: String;
|
suffixIcon?: String;
|
||||||
loadingIcon?: String;
|
loadingIcon?: String;
|
||||||
|
borderStyle?: String;
|
||||||
border?: ButtonBorder;
|
border?: ButtonBorder;
|
||||||
fluid?: BooleanOrString;
|
fluid?: BooleanOrString;
|
||||||
radius?: BooleanOrString;
|
radius?: BooleanOrString;
|
||||||
loading?: BooleanOrString;
|
loading?: BooleanOrString;
|
||||||
disabled?: BooleanOrString;
|
disabled?: BooleanOrString;
|
||||||
nativeType?: ButtonNativeType;
|
nativeType?: ButtonNativeType;
|
||||||
borderStyle?: String;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayButtonProps>(), {
|
const props = withDefaults(defineProps<ButtonProps>(), {
|
||||||
fluid: false,
|
|
||||||
radius: false,
|
|
||||||
loading: false,
|
|
||||||
disabled: false,
|
|
||||||
loadingIcon: "layui-icon-loading-one",
|
loadingIcon: "layui-icon-loading-one",
|
||||||
nativeType: "button",
|
|
||||||
borderStyle: "soild",
|
borderStyle: "soild",
|
||||||
|
nativeType: "button",
|
||||||
|
disabled: false,
|
||||||
|
loading: false,
|
||||||
|
radius: false,
|
||||||
|
fluid: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(ButtonEmits);
|
const emits = defineEmits(ButtonEmits);
|
||||||
|
|
||||||
const onClick = (event: MouseEvent) => {
|
const onClick = (event: MouseEvent) => {
|
||||||
if (!props.disabled) {
|
if (!props.disabled) {
|
||||||
emit("click", event);
|
emits("click", event);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -5,17 +5,17 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, useSlots } from "vue";
|
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
import { computed, useSlots } from "vue";
|
||||||
import { String } from "../../types";
|
import { String } from "../../types";
|
||||||
import { CardShadow } from "./interface";
|
import { CardShadow } from "./interface";
|
||||||
|
|
||||||
export interface LayCardProps {
|
export interface CardProps {
|
||||||
title?: String;
|
title?: String;
|
||||||
shadow?: CardShadow;
|
shadow?: CardShadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayCardProps>(), {
|
const props = withDefaults(defineProps<CardProps>(), {
|
||||||
shadow: "always",
|
shadow: "always",
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -33,11 +33,10 @@ const classes = computed(() => {
|
|||||||
<div class="layui-card" :class="classes">
|
<div class="layui-card" :class="classes">
|
||||||
<div class="layui-card-header" v-if="slot.title || title || slot.extra">
|
<div class="layui-card-header" v-if="slot.title || title || slot.extra">
|
||||||
<span class="layui-card-header-title">
|
<span class="layui-card-header-title">
|
||||||
<slot name="title" v-if="slot.title"></slot>
|
<slot name="title">{{ title }}</slot>
|
||||||
<template v-else>{{ title }}</template>
|
|
||||||
</span>
|
</span>
|
||||||
<span class="layui-card-header-extra">
|
<span class="layui-card-header-extra" v-if="slot.extra">
|
||||||
<slot name="extra" v-if="slot.extra"></slot>
|
<slot name="extra"></slot>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card-body">
|
<div class="layui-card-body">
|
||||||
|
@ -22,7 +22,8 @@ const getStyle = computed<any>(() => {
|
|||||||
let allChild = item.value.parentNode.children;
|
let allChild = item.value.parentNode.children;
|
||||||
let allChildNum = allChild.length;
|
let allChildNum = allChild.length;
|
||||||
|
|
||||||
let activeIndex, currentIndex = 0;
|
let activeIndex,
|
||||||
|
currentIndex = 0;
|
||||||
for (let index = 0; index < allChild.length; index++) {
|
for (let index = 0; index < allChild.length; index++) {
|
||||||
const element = allChild[index];
|
const element = allChild[index];
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
@ -55,7 +55,6 @@ const changeLocales = (lang: string, locales: any, merge: boolean) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const changeTheme = (theme: string) => {
|
const changeTheme = (theme: string) => {
|
||||||
|
|
||||||
const defaultPartial: Partial<Theme> = {
|
const defaultPartial: Partial<Theme> = {
|
||||||
mode: 1,
|
mode: 1,
|
||||||
brightness: 100,
|
brightness: 100,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user