fusions-ui 1.2.7 → 1.2.8

package/components/code-input/src/code-input.vue

@@ -0,0 +1,158 @@
+<template>
+	<view class="fu-code-input">
+		<view class="fu-code-input__item" :style="[itemStyle(index)]" v-for="(item, index) in codeLength" :key="index">
+			<view class="fu-code-input__item__dot" v-if="dot && codeArray.length > index"></view>
+			<text 
+				:style="{
+					fontSize: $fu.addUnit(fontSize),
+					fontWeight: bold ? 'bold' : 'normal',
+					color: color
+				}" v-else>
+				{{ codeArray[index] }}
+			</text>
+			<view class="fu-code-input__item__line" :style="[lineStyle]" v-if="mode === 'line'"></view>
+			<view class="fu-code-input__item__cursor" :style="{backgroundColor: color}" v-if="isFocus && codeArray.length === index"></view>
+		</view>
+		<input 
+			class="fu-code-input__input" 
+			:style="{ height: $fu.addUnit(size) }" 
+			:disabled="disabledKeyboard" 
+			type="number" 
+			:focus="focus" 
+			:value="inputValue" 
+			:maxlength="maxlength"
+			:adjustPosition="adjustPosition" 
+			@focus="isFocus = true" 
+			@blur="isFocus = false"
+			@input="inputHandler" />
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * CodeInput 验证码输入
+	 * @description 此组件一般用于验证用户短信验证码的场景，也可以结合fuui的键盘组件使用
+	 * @tutorial http://www.fusions.top/components/codeInput.html
+	 * @property {String | Number} v-model 预置值
+	 * @property {String | Number} maxlength 最大输入长度 （默认 4）
+	 * @property {Boolean} dot = [true|false] 是否用圆点填充 （默认 false ）
+	 * @property {String} mode = [box|line] 显示模式 （默认 'box' ）
+	 * 	@value box 盒子模式
+	 * 	@value line 底部横线模式
+	 * @property {Boolean} hairline = [true|false] 是否细边框 （默认 false ）
+	 * @property {String | Number} space 字符间的距离 （默认 10 ）
+	 * @property {Boolean} focus = [true|false] 是否自动获取焦点 （默认 false ）
+	 * @property {Boolean} bold = [true|false] 字体和输入横线是否加粗 （默认 false ）
+	 * @property {String} color 字体颜色 （默认 '#626468' ）
+	 * @property {String | Number} fontSize 字体大小，单位px （默认 18 ）
+	 * @property {String | Number} size 输入框的大小，宽等于高 （默认 35 ）
+	 * @property {Boolean} disabledKeyboard = [true|false]	是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true （默认 false ）
+	 * @property {String} borderColor 边框和线条颜色 （默认 '#cdcdce' ）
+	 * @property {Boolean} disabledDot = [true|false] 是否禁止输入"."符号 （默认 true ）
+	 * @property {String | Number} radius 自定义圆角 仅mode为box有效（默认 '4'）
+	 * 
+	 * @event {Function} change	输入内容发生改变时触发
+	 * @event {Function} finish	输入字符个数达maxlength值时触发
+	 * @example	<fu-code-input v-model="value" :focus="true"></fu-code-input>
+	 */
+	import { codeInputEmits, codeInputProps } from './code-input';
+	import { useCodeInput, useCodeInputCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuCodeInput', options: { virtualHost: true } });
+	
+	const props = defineProps(codeInputProps);
+	const $emit = defineEmits(codeInputEmits);
+	
+	const {
+		inputValue,
+		isFocus,
+		inputHandler,
+		customInput
+	} = useCodeInput(props, $emit);
+	
+	const {
+		codeLength,
+		itemStyle,
+		codeArray,
+		lineStyle
+	} = useCodeInputCustomStyle(props, inputValue);
+</script>
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$fu-code-input-cursor-width: 1px;
+	$fu-code-input-cursor-height: 40%;
+	$fu-code-input-cursor-animation-duration: 1s;
+	$fu-code-input-cursor-animation-name: fu-cursor-flicker;
+	$fu-content-color: #787a7f;
+
+	.fu-code-input {
+		@include components.flex;
+		position: relative;
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		/* #endif */
+
+		&__item {
+			@include components.flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			&__text {
+				font-size: 15px;
+				color: $fu-content-color;
+			}
+
+			&__dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 100px;
+				background-color: $fu-content-color;
+			}
+
+			&__line {
+				position: absolute;
+				bottom: 0;
+				height: 4px;
+				border-radius: 100px;
+				width: 40px;
+				background-color: $fu-content-color;
+			}
+
+			&__cursor {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: $fu-code-input-cursor-width;
+				height: $fu-code-input-cursor-height;
+				animation: $fu-code-input-cursor-animation-duration fu-cursor-flicker infinite;
+			}
+		}
+
+		&__input {
+			// 之所以需要input输入框，是因为有它才能唤起键盘
+			// 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
+			position: absolute;
+			left: -750rpx;
+			width: 1500rpx;
+			top: 0;
+			background-color: transparent;
+			text-align: left;
+		}
+	}
+
+	@keyframes fu-cursor-flicker {
+		0% {
+			opacity: 0;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+</style>

package/components/code-input/src/composables/code-input-custom.ts

@@ -0,0 +1,74 @@
+import { computed, Ref, type CSSProperties } from 'vue';
+import type { CodeInputProps } from '../code-input';
+
+export const useCodeInputCustomStyle = (props: CodeInputProps, inputValue: Ref<string>) => {
+	// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+	const codeLength = computed(() => {
+		return new Array(Number(props.maxlength))
+	});
+	
+	// 循环item的样式
+	const itemStyle = computed(() => {
+		return (index: number) => {
+			const addUnit = uni.$fu.addUnit;
+			const style: Record<string, any> = {
+				width: addUnit(props.size),
+				height: addUnit(props.size)
+			};
+			// 盒子模式下，需要额外进行处理
+			if (props.mode === 'box') {
+				// 设置盒子的边框，如果是细边框，则设置为0.5px宽度
+				style.border = `${props.hairline ? 0.5 : 1}px solid ${props.borderColor}`;
+				// 如果盒子间距为0的话
+				if (uni.$fu.getPx(props.space) === 0) {
+					// 给第一和最后一个盒子设置圆角
+					if (index === 0) {
+						style.borderTopLeftRadius = '3px';
+						style.borderBottomLeftRadius = '3px';
+					}
+					if (index === codeLength.value.length - 1) {
+						style.borderTopRightRadius = '3px';
+						style.borderBottomRightRadius = '3px';
+					}
+					// 最后一个盒子的右边框需要保留
+					if (index !== codeLength.value.length - 1) {
+						style.borderRight = 'none';
+					}
+				} else {
+					style.borderRadius = addUnit(props.radius);
+				}
+			}
+			if (index !== codeLength.value.length - 1) {
+				// 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
+				style.marginRight = addUnit(props.space)
+			} else {
+				// 最后一个盒子的有边框需要保留
+				style.marginRight = 0
+			}
+			return style
+		}
+	});
+	
+	// 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+	const codeArray = computed(() => {
+		return String(inputValue.value).split('')
+	});
+	
+	// 下划线模式下，横线的样式
+	const lineStyle = computed<CSSProperties>(() => {
+		const { hairline, size, borderColor } = props;
+		const style: Record<string, any> = {}
+		style.height = hairline? '1px' : '3px';
+		style.width = uni.$fu.addUnit(size);
+		// 线条模式下，背景色即为边框颜色
+		style.backgroundColor = borderColor;
+		return style
+	});
+	
+	return {
+		codeLength,
+		itemStyle,
+		codeArray,
+		lineStyle
+	}
+}

package/components/code-input/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './code-input-custom'
+export * from './use-code-input'

package/components/code-input/src/composables/use-code-input.ts

@@ -0,0 +1,67 @@
+import { ref, onMounted, nextTick, watch, type SetupContext } from 'vue';
+import type { CodeInputProps, CodeInputEmits } from '../code-input';
+
+export const useCodeInput = (props: CodeInputProps, $emit: SetupContext<CodeInputEmits>['emit']) => {
+	const inputValue = ref('');
+	const isFocus = ref(props.focus);
+	
+	// 监听输入框的值发生变化
+	const inputHandler = (e: any) => {
+		const value = e.detail.value;
+		inputValue.value = value
+		// 是否允许输入“.”符号
+		if (props.disabledDot) {
+			nextTick(() => {
+				inputValue.value = value.replace('.', '')
+			})
+		}
+		// 未达到maxlength之前，发送change事件，达到后发送finish事件
+		$emit('change', value)
+		// 修改通过v-model双向绑定的值
+		$emit('input', value)
+		$emit('update:modelValue', value)
+		// 达到用户指定输入长度时，发出完成事件
+		if (String(value).length >= Number(props.maxlength)) {
+			$emit('finish', value)
+		}
+	};
+	
+	// 自定义键盘输入值监听
+	const customInput = () => {
+		const value = inputValue.value;
+		// 是否允许输入“.”符号
+		if (props.disabledDot) {
+			nextTick(() => {
+				inputValue.value = value.replace('.', '')
+			})
+		}
+		// 未达到maxlength之前，发送change事件，达到后发送finish事件
+		$emit('change', value)
+		// 达到用户指定输入长度时，发出完成事件
+		if (String(value).length >= Number(props.maxlength)) {
+			$emit('finish', value)
+		}
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		const value = String(props.modelValue);
+		inputValue.value = String(value).substring(0, Number(props.maxlength));
+	});
+	
+	// watch监听事件
+	watch(() => props.modelValue, (newVal) => {
+		// 转为字符串，超出部分截掉
+		inputValue.value = String(newVal).substring(0, Number(props.maxlength));
+		if (props.disabledKeyboard) {
+			customInput();
+		}
+	});
+	
+	return {
+		inputValue,
+		isFocus,
+		inputHandler,
+		customInput
+	}
+}

package/components/code-verify/index.ts

@@ -0,0 +1 @@
+export * from './src/code-verify'

package/components/code-verify/src/code-verify.ts

@@ -0,0 +1,160 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const codeVerifyProps = {
+	/**
+	 * @description 倒计时总秒数
+	 * @default 60
+	 */
+	seconds: {
+		type: Number,
+		default: 60
+	},
+	/**
+	 * @description 发送前显示文本
+	 * @default '获取验证码'
+	 */
+	startText: {
+		type: String,
+		default: '获取验证码'
+	},
+	/**
+	 * @description 发送中显示文本
+	 * @default '请稍候...'
+	 */
+	sendText: {
+		type: String,
+		default: '请稍候...'
+	},
+	/**
+	 * @description 正在倒计时中的提示
+	 * @default 'Xs后获取'
+	 */
+	changeText: {
+		type: String,
+		default: 'Xs后获取'
+	},
+	/**
+	 * @description 倒计时结束时的提示
+	 * @default '重新获取'
+	 */
+	endText: {
+		type: String,
+		default: '重新获取'
+	},
+	/**
+	 * @description 按钮宽度
+	 */
+	width: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 按钮高度
+	 */
+	height: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 按钮字体颜色
+	 */
+	color: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 按钮字体大小
+	 * @default 14
+	 */
+	size: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 按钮背景颜色
+	 * @default 'transparent'
+	 */
+	bgColor: {
+		type: String,
+		default: 'transparent'
+	},
+	/**
+	 * @description 按钮边框颜色
+	 * @default 'transparent'
+	 */
+	borderColor: {
+		type: String,
+		default: 'transparent'
+	},
+	/**
+	 * @description 按钮圆角值
+	 * @default 4
+	 */
+	radius: {
+		type: [String, Number],
+		default: 4
+	},
+	/**
+	 * @description 倒计时的时候是否改变opacity值
+	 * @default true
+	 */
+	isOpacity: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
+	 * @default 0
+	 */
+	successVal: {
+		type: Number,
+		default: 0
+	},
+	/**
+	 * @description 是否在H5刷新或各端返回再进入时继续倒计时
+	 * @default false
+	 */
+	keepRunning: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+	 */
+	uniqueKey: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 是否默认为倒计时状态
+	 * @default false
+	 */
+	startState: {
+		type: Boolean,
+		default: false
+	},
+	...componentProps
+};
+
+export const codeVerifyEmits = {
+	/**
+	 * @description 点击按钮触发
+	 */
+	send: () => true,
+	/**
+	 * @description 开始倒计时触发
+	 */
+	start: () => true,
+	/**
+	 * @description 结束倒计时触发
+	 */
+	end: () => true,
+	/**
+	 * @description 倒计时期间，每秒触发一次
+	 */
+	change: (_e: any) => true
+};
+
+export type CodeVerifyProps = ExtractPropTypes<typeof codeVerifyProps>;
+export type CodeVerifyEmits = typeof codeVerifyEmits;

package/components/code-verify/src/code-verify.vue

@@ -0,0 +1,87 @@
+<template>
+	<view 
+		class="fu-code-verify" 
+		:style="[{
+			fontSize: $fu.addUnit(size),
+			background: bgColor,
+			color: color,
+			borderColor: borderColor,
+			borderRadius: $fu.addUnit(radius),
+			...($fu.addStyle(customStyle) || {}),
+			...(width && { width: $fu.addUnit(width)}),
+			...(height && { lineHeight: $fu.addUnit(height)})
+		}, opacity]" 
+		@tap="handleStart">
+		<slot>{{text || ''}}</slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * CodeVerify 验证码组件
+	 * @description 此组件考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
+	 * @tutorial http://www.fusions.top/components/codeVerify.html
+	 * @property {Number} seconds 倒计时所需秒数（默认 60）单位秒
+	 * @property {String} startText 发送前显示文本  默认 '获取验证码' 
+	 * @property {String} sendText 发送中显示文本  默认 '请稍候...'
+	 * @property {String} changeText 正在倒计时中的提示，必须带有字母"x"，（默认 'X秒重新获取' ）
+	 * @property {String} endText 倒计结束的提示语，（默认 '重新获取' ）
+	 * @property {String | Number} width 按钮宽度
+	 * @property {String | Number} height 按钮高度
+	 * @property {String} color 按钮字体颜色
+	 * @property {String | Number} size  按钮字体大小  默认（默认 14）
+	 * @property {String} bgColor  按钮背景颜色  默认transparent
+	 * @property {String} borderColor 按钮边框颜色  默认transparent  
+	 * @property {Number | String} radius 按钮圆角值  默认0  单位rpx
+	 * @property {Boolean} isOpacity = [true|false]  倒计时的时候是否改变opacity值  默认true
+	 * @property {Number} successVal  短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）	默认0
+	 * @property {Boolean} keepRunning = [true|false]	是否在H5刷新或各端返回再进入时继续倒计时（ 默认false ）
+	 * @property {String} uniqueKey	为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+	 * @property {Boolean} startState = [true|false] 是否默认倒计时状态  默认false
+	 * @property {String | Object} customStyle 自定义外部样式
+	 * 
+	 * @event {Function} send 点击按钮触发
+	 * @event {Function} start 开始倒计时触发
+	 * @event {Function} end 结束倒计时触发
+	 * @event {Function} change	倒计时期间，每秒触发一次
+	 * @example <fu-code-verify ref="codeVerifyRef" @change="change" seconds="60"></fu-code-verify> 
+	 */
+	import { codeVerifyEmits, codeVerifyProps } from './code-verify';
+	import { useCodeVerify, useCodeVerifyCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuCodeVerify', options: { virtualHost: true } });
+	
+	const props = defineProps(codeVerifyProps);
+	const $emit = defineEmits(codeVerifyEmits);
+	
+	const {
+		text,
+		opacity,
+		handleStart,
+		startTimer,
+		reset
+	} = useCodeVerify(props, $emit);
+	
+	const {
+		itemStyle
+	} = useCodeVerifyCustomStyle(props);
+	
+	// 暴露方法给父组件
+	defineExpose({
+		startTimer,
+		reset
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/color.scss' as *;
+	
+	.fu-code-verify {
+		width: fit-content;
+		border-width: 1rpx;
+		border-style: solid;
+		border-color: transparent;
+		color: $fu-color-primary;
+		text-align: center;
+	}
+</style>

package/components/code-verify/src/composables/code-verify-custom.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import type { CodeVerifyProps } from '../code-verify';
+
+export const useCodeVerifyCustomStyle = (props: CodeVerifyProps) => {
+	const itemStyle = computed(() => {
+		let style: Record<string, any> = {
+			fontSize: uni.$fu.addUnit(props.size),
+			background: props.bgColor,
+			color: props.color,
+			borderColor: props.borderColor,
+			borderRadius: uni.$fu.addUnit(props.radius),
+			...(uni.$fu.addStyle(props.customStyle) || {}),
+			...(props.width && { width: uni.$fu.addUnit(props.width) }),
+			...(props.height && { lineHeight: uni.$fu.addUnit(props.height) }),
+		};
+		
+		return style
+	});
+	
+	return {
+		itemStyle
+	}
+}

package/components/code-verify/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './code-verify-custom'
+export * from './use-code-verify'