(component): 整理 button 与 card 代码

This commit is contained in:
就眠儀式 2022-10-14 22:36:23 +08:00
parent 7057e4894f
commit 8bc1d329cd
5 changed files with 21 additions and 28 deletions

View File

@ -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);
} }
}; };
@ -87,4 +81,4 @@ const classes = computed(() => {
<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>
</button> </button>
</template> </template>

View File

@ -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">

View File

@ -1 +1 @@
export type CardShadow = "always" | "hover" | "never"; export type CardShadow = "always" | "hover" | "never";

View File

@ -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

View File

@ -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,