v-uni-app-ui 1.0.0 → 1.0.2

package/components/model/native/v-badge/v-badge.vue

@@ -0,0 +1,143 @@
+<template>
+	<view :class="['v-badge', { 'v-badge--dot': dot }, `v-badge--size-${size}`, `v-badge--position-${position}`]" :style="badgeStyle">
+		<slot></slot>
+		<view v-if="!dot && (isShowContent)" class="v-badge-content">
+			{{ displayContent }}
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed,inject } from 'vue';
+
+/**
+ * v-badge 标徽
+ * value    双向绑定值
+ * dot        省略显示
+ * max        最大值
+ * color    标徽颜色
+ * size		标徽大小		默认值:medium   可选值small小、medium中、large大
+ * position	标徽位置		默认值:right		可选值left左、right右
+ */
+const props = defineProps({
+	value: {
+		type: [Number, String],
+		default: 0
+	},
+	dot: {
+		type: Boolean,
+		default: false
+	},
+	max: {
+		type: Number,
+		default: 99
+	},
+	color: {
+		type: String,
+		default: '#ff5357'
+	},
+	fontColor: {
+		type: String,
+		default: '#fff'
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: string) => {
+			return ['small', 'medium', 'large'].includes(value);
+		}
+	},
+	position: {
+		type: String,
+		default: 'right',
+		validator: (value: string) => {
+			return ['left', 'right'].includes(value);
+		}
+	}
+});
+
+
+const config = inject<any>('config');
+const displayContent = computed(() => {
+	if (props.dot) return '';
+	if (props.max && props.value > props.max) {
+		return `${props.max}+`;
+	}
+	return props.value;
+});
+
+const isShowContent = computed(() => {
+	if (props.dot) return false;
+	if (typeof props.value === 'string') return props.value.length > 0;
+	return props.value > 0;
+});
+
+const badgeStyle = computed(() => {
+	return {
+		'--badge-color': props.color
+	};
+});
+</script>
+
+<style lang="scss" scoped>
+.v-badge {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+
+	.v-badge-content {
+		position: absolute;
+		top: -12rpx;
+		right: -12rpx;
+		background-color: var(--badge-color, #ff4500);
+		color: v-bind('fontColor');
+		border-radius: v-bind("config.borderRadius.circle");
+		padding: 0 8rpx;
+		font-size: v-bind("config.fontSize.hintText");
+		height: 30rpx;
+		line-height: 30rpx;
+		text-align: center;
+		min-width: 26rpx;
+		transform: scale(0.8);
+	}
+
+	&--dot::after {
+		content: '';
+		position: absolute;
+		top: -6rpx;
+		right: -6rpx;
+		width: 16rpx;
+		height: 16rpx;
+		background-color: var(--badge-color, #ff4500);
+		border-radius: 50%;
+	}
+
+	&--size-small .v-badge-content {
+		font-size: v-bind("config.fontSize.smallText");
+		height: 22rpx;
+		line-height: 22rpx;
+		min-width: 22rpx;
+		padding: 6rpx 12rpx;
+		transform: scale(0.7);
+	}
+
+	&--size-large .v-badge-content {
+		font-size: v-bind("config.fontSize.largeText");
+		height: 25rpx;
+		line-height: 25rpx;
+		min-width: 25px;
+		padding: 3rpx 8rpx;
+		transform: scale(0.9);
+	}
+
+	&--position-left .v-badge-content {
+		left: -12rpx;
+		right: auto;
+	}
+
+	&--position-left::after {
+		left: -12rpx;
+		right: auto;
+	}
+}
+</style>

package/components/model/native/v-button/v-button.vue

@@ -0,0 +1,273 @@
+<template>
+	<button
+		:class="['v-button', `v-button--${size} v-button--${type} v-button--${model}`, { 'v-button--loading': loading, 'v-button--disabled': disabled, 'v-button--plain': plain }]"
+		:disabled="disabled || loading"
+		@click="handleClick"
+	>
+		<view v-if="loading" class="spinner"></view>
+		<slot v-else></slot>
+	</button>
+</template>
+
+<script setup lang="ts">
+import { ref, onUnmounted, inject } from 'vue';
+/**
+ * v-button 按钮
+ * type 				按钮类型 			默认值:default  可选值default默认、delete删除、succeed成功、info信息、warn警告
+ * size 				按钮大小 			默认值:medium   可选值small小、medium中、large大
+ * model 				按钮模式 			默认值:semicircle圆角按钮 可选值:square方形按钮、circle圆形按钮、border下边框按钮、text文本
+ * disabled 			是否禁用 			true禁用  false不禁用
+ * loading 				是否加载  			true加载  false不加载
+ * plain				是否镂空				默认值:false		可选值:true镂空		false不镂空
+ * stabilizationTime	防抖时间 			默认值0
+ * intervalUpdateTime	间隔触发防抖时间
+ * degressionTime		递减时间
+ */
+const props = defineProps({
+	type: {
+		type: String,
+		default: 'default'
+	},
+	model: {
+		type: String,
+		default: 'semicircle',
+		validator: (v: string) => ['semicircle', 'square', 'circle', 'border'].includes(v)
+	},
+	size: {
+		type: String,
+		default: 'medium',
+		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	loading: {
+		type: Boolean,
+		default: false
+	},
+	plain: {
+		type: Boolean,
+		default: false
+	},
+	stabilizationTime: {
+		type: Number,
+		default: 0
+	},
+	intervalUpdateTime: {
+		type: Number,
+		default: 1000
+	},
+	degressionTime: {
+		type: Number,
+		default: 1000
+	}
+});
+
+const emit = defineEmits(['click', 'countdown']);
+
+const config = inject<any>('config');
+const clickTimer = ref<number | null>(null);
+const countdownTimer = ref<number | null>(null);
+const countdown = ref<number>(props.stabilizationTime);
+const isCountingDown = ref(false);
+
+onUnmounted(() => {
+	if (clickTimer.value !== null) {
+		clearTimeout(clickTimer.value);
+	}
+	if (countdownTimer.value !== null) {
+		clearInterval(countdownTimer.value);
+	}
+});
+
+const handleClick = (event: MouseEvent) => {
+	if (!props.disabled && !props.loading && !isCountingDown.value) {
+		if (clickTimer.value !== null) {
+			clearTimeout(clickTimer.value);
+		}
+		if (countdownTimer.value !== null) {
+			clearInterval(countdownTimer.value);
+		}
+		isCountingDown.value = true;
+		countdown.value = props.stabilizationTime;
+
+		emit('click', event);
+
+		if (countdown.value > 0) {
+			emit('countdown', { remaining: countdown.value, total: props.stabilizationTime });
+
+			countdownTimer.value = window.setInterval(() => {
+				if (countdown.value > 0) {
+					countdown.value -= props.degressionTime;
+					emit('countdown', { remaining: countdown.value, total: props.stabilizationTime });
+				}
+
+				if (countdown.value <= 0) {
+					clearInterval(countdownTimer.value!);
+					isCountingDown.value = false;
+					emit('countdown', { remaining: 0, total: props.stabilizationTime });
+				}
+			}, props.intervalUpdateTime);
+			clickTimer.value = window.setTimeout(() => {
+				isCountingDown.value = false;
+			}, props.stabilizationTime);
+		} else {
+			isCountingDown.value = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.v-button {
+	width: 150rpx;
+	height: 50rpx;
+	border: none;
+	cursor: pointer;
+	transition: all 0.3s;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+
+	&:hover {
+		opacity: v-bind('config.opacity.hover');
+	}
+
+	&:active {
+		opacity: v-bind('config.opacity.click');
+	}
+
+	&--semicircle {
+		border-radius: v-bind('config.borderRadius.semicircle');
+	}
+
+	&--square {
+		border-radius: v-bind('config.borderRadius.square');
+	}
+
+	&--circle {
+		border-radius: v-bind('config.borderRadius.circle');
+	}
+
+	&--border {
+		border-radius: 0;
+		border-bottom: 1rpx solid v-bind('config.border.color');
+	}
+
+	&--default {
+		background-color: v-bind('config.backgroundColor.default') !important;
+	}
+
+	&--delete {
+		background-color: v-bind('config.backgroundColor.delete') !important;
+	}
+
+	&--succeed {
+		background-color: v-bind('config.backgroundColor.succeed') !important;
+	}
+
+	&--info {
+		background-color: v-bind('config.backgroundColor.info') !important;
+	}
+
+	&--warn {
+		background-color: v-bind('config.backgroundColor.warn') !important;
+	}
+
+	&--text {
+		background-color: v-bind('config.backgroundColor.reversal') !important;
+		color: v-bind('config.fontColor.text');
+	}
+
+	&--small {
+		width: 120rpx;
+		height: 50rpx;
+		padding: 14rpx 2rpx;
+		font-size: v-bind("config.fontSize.smallText");
+	}
+
+	&--medium {
+		width: 150rpx;
+		height: 60rpx;
+		padding: 15rpx 0;
+		font-size: v-bind("config.fontSize.mediumText");
+	}
+
+	&--large {
+		width: 170rpx;
+		height: 70rpx;
+		padding: 20rpx 0;
+		font-size: v-bind("config.fontSize.largeText");
+	}
+
+	&--disabled,
+	&[disabled] {
+		opacity: v-bind('config.opacity.disabled');
+		cursor: not-allowed;
+		color: v-bind('config.fontColor.reversal') !important;
+	}
+
+	&--loading {
+		position: relative;
+		overflow: hidden;
+	}
+
+	&--plain {
+		background-color: transparent !important;
+		border: 1rpx solid;
+		color: currentColor;
+
+		&.v-button--default {
+			border-color:  v-bind("config.border.default");
+			color: v-bind("config.fontColor.default");
+		}
+
+		&.v-button--delete {
+			border-color:  v-bind("config.border.delete");
+			color: v-bind("config.fontColor.delete");
+		}
+
+		&.v-button--succeed {
+			border-color:  v-bind("config.border.succeed");
+			color: v-bind("config.fontColor.succeed");
+		}
+
+		&.v-button--info {
+			border-color: v-bind("config.border.info");
+			color: v-bind("config.fontColor.info");
+		}
+
+		&.v-button--warn {
+			border-color: v-bind("config.border.warn");
+			color: v-bind("config.fontColor.warn");
+		}
+
+		&.v-button--text {
+			border: none;
+			color: v-bind("config.fontColor.text");
+		}
+	}
+
+	.spinner {
+		width: 20rpx;
+		height: 20rpx;
+		border: 1rpx solid;
+		border-color: v-bind("config.border.color");
+		border-radius: 50%;
+		border-top-color: white;
+		animation: spin 1s ease-in-out infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+}
+
+uni-button:after {
+	border: none;
+}
+</style>

package/components/model/native/v-carousel/v-carousel.vue

@@ -0,0 +1,138 @@
+<template>
+	<view class="carousel-box">
+		<!-- 左右箭头 -->
+		<view class="carousel-nav-buttons" v-show="isEndsButton">
+			<view class="carousel-nav-buttons-prev" @click="prevSlide">
+				<slot name="prev-button">
+					<view class="default-prev-button">←</view>
+				</slot>
+			</view>
+			<view class="carousel-nav-buttons-next" @click="nextSlide">
+				<slot name="next-button">
+					<view class="default-next-button">→</view>
+				</slot>
+			</view>
+		</view>
+
+		<!-- 关键改动 1：key 强制重建 -->
+		<swiper
+			:key="carouselKey"
+			:indicator-dots="indicatorDots"
+			:autoplay="autoplay"
+			:interval="interval"
+			:duration="duration"
+			:current="currentVal"
+			:circular="circular"
+			@change="onSwiperChange"
+			class="swiper-box"
+		>
+			<swiper-item v-for="(item, index) in items" :key="index" class="carousel-item">
+				<slot :name="'item-' + index" :item="item"></slot>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject } from 'vue';
+
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	indicatorDots: { type: Boolean, default: true },
+	autoplay: { type: Boolean, default: true },
+	interval: { type: Number, default: 5000 },
+	duration: { type: Number, default: 400 },
+	current: { type: Number, default: 0 },
+	isEndsButton: { type: Boolean, default: false },
+	circular: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['update:current', 'change']);
+const config = inject<any>('config');
+
+const currentVal = ref(props.current);
+const carouselKey = ref(0); // 关键改动 2：刷新 key
+
+/* 双向绑定 current */
+watch(
+	() => props.current,
+	(v) => (currentVal.value = v),
+	{ immediate: true }
+);
+watch(currentVal, (v) => emit('update:current', v));
+
+/* 关键改动 3：节流防止抽搐 */
+let changing = false;
+const onSwiperChange = (e: any) => {
+	if (changing) return;
+	changing = true;
+	const { current } = e.detail;
+	currentVal.value = current;
+	emit('change', current);
+	setTimeout(() => (changing = false), 150);
+};
+
+/* 手动切换 */
+const prevSlide = () => {
+	const len = props.items.length;
+	currentVal.value = currentVal.value <= 0 ? len - 1 : currentVal.value - 1;
+	emit('change', currentVal.value);
+};
+const nextSlide = () => {
+	const len = props.items.length;
+	currentVal.value = currentVal.value >= len - 1 ? 0 : currentVal.value + 1;
+	emit('change', currentVal.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.carousel-box {
+	width: 100%;
+	/* 关键改动 4：禁止百分比高度，用固定值 */
+	height: 560rpx;
+	position: relative;
+}
+
+.carousel-nav-buttons {
+	position: absolute;
+	width: 90%;
+	top: 50%;
+	transform: translateY(-50%);
+	display: flex;
+	justify-content: space-between;
+	padding: 0 10rpx;
+	z-index: 10;
+}
+
+.carousel-nav-buttons-prev,
+.carousel-nav-buttons-next {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 50%;
+	background-color: rgba(255, 255, 255, 0.5);
+	cursor: pointer;
+	user-select: none;
+}
+
+.default-prev-button,
+.default-next-button {
+	font-size: v-bind('config.fontSize.largeText');
+	color: v-bind('config.fontColor.mainText');
+}
+
+.swiper-box {
+	width: 100%;
+	height: 100%;
+}
+
+.carousel-item {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+</style>