✨(component): update
This commit is contained in:
parent
8bc1d329cd
commit
8af4ddbf6a
@ -8,21 +8,26 @@ 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 { ButtonBorder, ButtonEmits, ButtonNativeType, ButtonSize, ButtonType } from "./interface";
|
import {
|
||||||
import { BooleanOrString, String } from "../../types";
|
ButtonBorder,
|
||||||
|
ButtonEmits,
|
||||||
|
ButtonNativeType,
|
||||||
|
ButtonSize,
|
||||||
|
ButtonType,
|
||||||
|
} from "./interface";
|
||||||
|
|
||||||
export interface ButtonProps {
|
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;
|
borderStyle?: string;
|
||||||
border?: ButtonBorder;
|
border?: ButtonBorder;
|
||||||
fluid?: BooleanOrString;
|
fluid?: string | boolean;
|
||||||
radius?: BooleanOrString;
|
radius?: string | boolean;
|
||||||
loading?: BooleanOrString;
|
loading?: string | boolean;
|
||||||
disabled?: BooleanOrString;
|
disabled?: string | boolean;
|
||||||
nativeType?: ButtonNativeType;
|
nativeType?: ButtonNativeType;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7,11 +7,10 @@ export default {
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { computed, useSlots } from "vue";
|
import { computed, useSlots } from "vue";
|
||||||
import { String } from "../../types";
|
|
||||||
import { CardShadow } from "./interface";
|
import { CardShadow } from "./interface";
|
||||||
|
|
||||||
export interface CardProps {
|
export interface CardProps {
|
||||||
title?: String;
|
title?: string;
|
||||||
shadow?: CardShadow;
|
shadow?: CardShadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -19,7 +18,7 @@ const props = withDefaults(defineProps<CardProps>(), {
|
|||||||
shadow: "always",
|
shadow: "always",
|
||||||
});
|
});
|
||||||
|
|
||||||
const slot = useSlots();
|
const slots = useSlots();
|
||||||
|
|
||||||
const classes = computed(() => {
|
const classes = computed(() => {
|
||||||
return {
|
return {
|
||||||
@ -31,19 +30,19 @@ const classes = computed(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<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="slots.title || title || slots.extra">
|
||||||
<span class="layui-card-header-title">
|
<span class="layui-card-header-title">
|
||||||
<slot name="title">{{ title }}</slot>
|
<slot name="title">{{ title }}</slot>
|
||||||
</span>
|
</span>
|
||||||
<span class="layui-card-header-extra" v-if="slot.extra">
|
<span class="layui-card-header-extra" v-if="slots.extra">
|
||||||
<slot name="extra"></slot>
|
<slot name="extra"></slot>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card-body">
|
<div class="layui-card-body">
|
||||||
<slot name="body" v-if="slot.body"></slot>
|
<slot name="body" v-if="slots.body"></slot>
|
||||||
<slot v-else></slot>
|
<slot v-else></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card-footer" v-if="slot.footer">
|
<div class="layui-card-footer" v-if="slots.footer">
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,46 +6,35 @@ export default {
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import {
|
import { withDefaults, provide, useSlots, ref, computed, VNode, Ref, Component, watch } from "vue";
|
||||||
withDefaults,
|
|
||||||
provide,
|
|
||||||
useSlots,
|
|
||||||
ref,
|
|
||||||
computed,
|
|
||||||
VNode,
|
|
||||||
Ref,
|
|
||||||
Component,
|
|
||||||
watch,
|
|
||||||
} from "vue";
|
|
||||||
import CarouselItem from "../carouselItem/index.vue";
|
import CarouselItem from "../carouselItem/index.vue";
|
||||||
|
|
||||||
|
export interface CarouselProps {
|
||||||
|
width?: string;
|
||||||
|
height?: string;
|
||||||
|
modelValue: string;
|
||||||
|
anim?: string;
|
||||||
|
autoplay?: boolean;
|
||||||
|
arrow?: string;
|
||||||
|
interval?: number;
|
||||||
|
indicator?: string;
|
||||||
|
pauseOnHover?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<CarouselProps>(), {
|
||||||
|
width: "100%",
|
||||||
|
height: "280px",
|
||||||
|
anim: "default",
|
||||||
|
autoplay: true,
|
||||||
|
arrow: "hover",
|
||||||
|
interval: 3000,
|
||||||
|
indicator: "inside",
|
||||||
|
pauseOnHover: true,
|
||||||
|
});
|
||||||
|
|
||||||
const slot = useSlots() as any;
|
const slot = useSlots() as any;
|
||||||
const slots = slot.default && (slot.default() as any[]);
|
const slots = slot.default && (slot.default() as any[]);
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
width?: string;
|
|
||||||
height?: string;
|
|
||||||
modelValue: string;
|
|
||||||
anim?: string;
|
|
||||||
autoplay?: boolean;
|
|
||||||
arrow?: string;
|
|
||||||
interval?: number;
|
|
||||||
indicator?: string;
|
|
||||||
pauseOnHover?: boolean;
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
width: "100%",
|
|
||||||
height: "280px",
|
|
||||||
anim: "default",
|
|
||||||
autoplay: true,
|
|
||||||
arrow: "hover",
|
|
||||||
interval: 3000,
|
|
||||||
indicator: "inside",
|
|
||||||
pauseOnHover: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const active = computed({
|
const active = computed({
|
||||||
get() {
|
get() {
|
||||||
return props.modelValue;
|
return props.modelValue;
|
||||||
@ -55,12 +44,7 @@ const active = computed({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const anim = computed({
|
const anim = computed(() => props.anim);
|
||||||
get() {
|
|
||||||
return props.anim;
|
|
||||||
},
|
|
||||||
set() {},
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change"]);
|
const emit = defineEmits(["update:modelValue", "change"]);
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user