fusions-ui 1.2.7 → 1.2.8

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

@@ -1,269 +0,0 @@
-<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>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	/**
-	 * CodeInput 验证码输入
-	 * @description 此组件一般用于验证用户短信验证码的场景，也可以结合fuui的键盘组件使用
-	 * @property {String,Number} value / 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>
-	 */
-	export default {
-		name: 'FuCodeInput',
-		mixins: [mpMixin, mixin, props],
-		emits: ['change', 'input', 'update:modelValue', 'finish'],
-		data() {
-			return {
-				inputValue: '',
-				isFocus: this.focus
-			}
-		},
-		created() {
-			const value = String(this.value) || String(this.modelValue);
-			this.inputValue = String(value).substring(0, this.maxlength);
-		},
-		computed: {
-			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
-			codeLength() {
-				return new Array(Number(this.maxlength))
-			},
-			// 循环item的样式
-			itemStyle() {
-				return index => {
-					const addUnit = this.$fu.addUnit;
-					const style = {
-						width: addUnit(this.size),
-						height: addUnit(this.size)
-					};
-					// 盒子模式下，需要额外进行处理
-					if (this.mode === 'box') {
-						// 设置盒子的边框，如果是细边框，则设置为0.5px宽度
-						style.border = `${this.hairline ? 0.5 : 1}px solid ${this.borderColor}`;
-						// 如果盒子间距为0的话
-						if (this.$fu.getPx(this.space) === 0) {
-							// 给第一和最后一个盒子设置圆角
-							if (index === 0) {
-								style.borderTopLeftRadius = '3px';
-								style.borderBottomLeftRadius = '3px';
-							}
-							if (index === this.codeLength.length - 1) {
-								style.borderTopRightRadius = '3px';
-								style.borderBottomRightRadius = '3px';
-							}
-							// 最后一个盒子的右边框需要保留
-							if (index !== this.codeLength.length - 1) {
-								style.borderRight = 'none';
-							}
-						} else {
-							style.borderRadius = addUnit(this.radius);
-						}
-					}
-					if (index !== this.codeLength.length - 1) {
-						// 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
-						style.marginRight = addUnit(this.space)
-					} else {
-						// 最后一个盒子的有边框需要保留
-						style.marginRight = 0
-					}
-					return style
-				}
-			},
-			// 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
-			codeArray() {
-				return String(this.inputValue).split('')
-			},
-			// 下划线模式下，横线的样式
-			lineStyle() {
-				const style = {}
-				style.height = this.hairline ? '1px' : '3px'
-				style.width = this.$fu.addUnit(this.size)
-				// 线条模式下，背景色即为边框颜色
-				style.backgroundColor = this.borderColor
-				return style
-			}
-		},
-		methods: {
-			// 监听输入框的值发生变化
-			inputHandler(e) {
-				const value = e.detail.value
-				this.inputValue = value
-				// 是否允许输入“.”符号
-				if (this.disabledDot) {
-					this.$nextTick(() => {
-						this.inputValue = value.replace('.', '')
-					})
-				}
-				// 未达到maxlength之前，发送change事件，达到后发送finish事件
-				this.$emit('change', value)
-				// 修改通过v-model双向绑定的值
-				this.$emit('input', value)
-				this.$emit('update:modelValue', value)
-				// 达到用户指定输入长度时，发出完成事件
-				if (String(value).length >= Number(this.maxlength)) {
-					this.$emit('finish', value)
-				}
-			},
-			// 自定义键盘输入值监听
-			customInput() {
-				const value = this.inputValue;
-				// 是否允许输入“.”符号
-				if (this.disabledDot) {
-					this.$nextTick(() => {
-						this.inputValue = value.replace('.', '')
-					})
-				}
-				// 未达到maxlength之前，发送change事件，达到后发送finish事件
-				this.$emit('change', value)
-				// 达到用户指定输入长度时，发出完成事件
-				if (String(value).length >= Number(this.maxlength)) {
-					this.$emit('finish', value)
-				}
-			}
-		},
-		watch: {
-			value(newVal) {
-				// 转为字符串，超出部分截掉
-				this.inputValue = String(newVal).substring(0, this.maxlength);
-				if (this.disabledKeyboard) {
-					this.customInput();
-				}
-			},
-			modelValue(newVal) {
-				// 转为字符串，超出部分截掉
-				this.inputValue = String(newVal).substring(0, this.maxlength);
-				if (this.disabledKeyboard) {
-					this.customInput();
-				}
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.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 flex;
-		position: relative;
-		/* #ifndef APP-NVUE */
-		overflow: hidden;
-		/* #endif */
-
-		&__item {
-			@include 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/fu-code-input/props.js

@@ -1,136 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description value / v-model 预置值
-		 */
-		value: {
-			type: [String,Number],
-			default: ''
-		},
-		modelValue: {
-			type: [String,Number],
-			default: ''
-		},
-		/**
-		 * @description 键盘弹起时，是否自动上推页面
-		 * @default true
-		 */
-		adjustPosition: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 最大输入长度
-		 * @default 4
-		 */
-		maxlength: {
-			type: [String,Number],
-			default: 4
-		},
-		/**
-		 * @description 是否用圆点填充
-		 * @default false
-		 */
-		dot: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 显示模式
-		 * @values 'box' - 盒子模式, 'line' - 底部横线模式
-		 * @default 'box'
-		 */
-		mode: {
-			type: String,
-			default: 'box'
-		},
-		/**
-		 * @description 是否细边框
-		 * @default false
-		 */
-		hairline: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 字符间的距离
-		 * @default 10
-		 */
-		space: {
-			type: [String,Number],
-			default: 10
-		},
-		/**
-		 * @description 是否自动获取焦点
-		 * @default false
-		 */
-		focus: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 字体是否加粗
-		 * @default false
-		 */
-		bold: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 字体颜色
-		 * @default '#626468'
-		 */
-		color: {
-			type: String,
-			default: '#626468'
-		},
-		/**
-		 * @description 字体大小
-		 * @default 18
-		 */
-		fontSize: {
-			type: [String,Number],
-			default: 18
-		},
-		/**
-		 * @description 输入框的大小，宽等于高
-		 * @default 35
-		 */
-		size: {
-			type: [String,Number],
-			default: 35
-		},
-		/**
-		 * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
-		 * @default false
-		 */
-		disabledKeyboard: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 边框和线条颜色
-		 * @default '#cdcdce'
-		 */
-		borderColor: {
-			type: String,
-			default: '#cdcdce'
-		},
-		/**
-		 * @description 是否禁止输入"."符号
-		 * @default true
-		 */
-		disabledDot: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 设置圆角
-		 * @default 4
-		 */
-		radius: {
-			type: [String,Number],
-			default: 4
-		}
-	}
-}

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

@@ -1,221 +0,0 @@
-<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>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * CodeVerify 验证码组件
-	 * @description 此组件考虑到用户实际发送验证码的场景，可能是一个按钮，也可能是一段文字，提示语各有不同，所以本组件 不提供界面显示，只提供提示语，由用户将提示语嵌入到具体的场景
-	 * @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 {Object,String} 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> 
-	 */
-	export default {
-		name:"FuCodeVerify",
-		emits: ['send', 'start', 'end', 'change'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				text: this.startText,
-				secNum: this.seconds,
-				timer: null,
-				opacity: '',
-				canGetCode: true, // 是否可以执行验证码操作
-			};
-		},
-		mounted() {
-			this.checkKeepRunning()
-			if(this.startState) {
-				this.start()
-			}
-		},
-		computed: {
-			itemStyle: {
-				get() {
-					let style = {
-						fontSize: this.$fu.addUnit(this.size),
-						background: this.bgColor,
-						color: this.color,
-						borderColor: this.borderColor,
-						borderRadius: this.$fu.addUnit(this.radius),
-						...(this.$fu.addStyle(this.customStyle) || {}),
-						...(this.width && { width: this.$fu.addUnit(this.width) }),
-						...(this.height && { lineHeight: this.$fu.addUnit(this.height) }),
-					};
-					return style
-				}
-			}
-		},
-		methods: {
-			checkKeepRunning() {
-				// 获取上一次退出页面(H5还包括刷新)时的时间戳，如果没有上次的保存，此值可能为空
-				let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$fuCountDownTimestamp'))
-				if(!lastTimestamp) return this.changeEvent(this.startText)
-				// 当前秒的时间戳
-				let nowTimestamp = Math.floor((+ new Date()) / 1000)
-				// 判断当前的时间戳，是否小于上一次的本该按设定结束，却提前结束的时间戳
-				if(this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
-					// 剩余尚未执行完的倒计秒数
-					this.secNum = lastTimestamp - nowTimestamp
-					// 清除本地保存的变量
-					uni.removeStorageSync(this.uniqueKey + '_$fuCountDownTimestamp')
-					// 开始倒计时
-					this.startTimer()
-				} else {
-					// 如果不存在需要继续上一次的倒计时，执行正常的逻辑
-					this.changeEvent(this.startText)
-				}
-			},
-			
-			handleStart() {
-				if(!this.secNum || this.timer) return
-				this.text = this.sendText || '';
-				this.opacity = `opacity: ${this.isOpacity? '.6': 1};`;
-				this.$emit('send')
-				this.changeEvent(this.sendText)
-			},
-			
-			startTimer() {
-				// 防止快速点击获取验证码的按钮而导致内部产生多个定时器导致混乱
-				if(this.timer) {
-					clearInterval(this.timer)
-					this.timer = null
-				}
-				this.$emit('start')
-				this.canGetCode = false;
-				// 这里放这句，是为了一开始时就提示，否则要等setInterval的1秒后才会有提示
-				this.text = this.changeText.replace(/x|X/, this.secNum);
-				this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
-				this.timer = setInterval(() => {
-					if (--this.secNum) {
-						// 用当前倒计时的秒数替换提示字符串中的"s"字母
-						this.text = this.changeText.replace(/x|X/, this.secNum);
-						this.changeEvent(this.changeText.replace(/x|X/, this.secNum))
-					} else {
-						clearInterval(this.timer)
-						this.timer = null
-						this.text = this.endText || '';
-						this.changeEvent(this.endText)
-						this.secNum = this.seconds;
-						this.opacity = 1;
-						this.$emit('end')
-						this.canGetCode = true
-					}
-				}, 1000)
-				this.setTimeToStorage()
-			},
-			
-			changeEvent(text) {
-				this.$emit('change', text)
-			},
-			
-			// 重置，可以让用户再次获取验证码
-			reset() {
-				this.canGetCode = false;
-				clearInterval(this.timer)
-                this.timer = null;
-				this.secNum = this.seconds;
-				this.text = this.startText;
-				this.opacity = 1;
-				this.changeEvent(this.startText)
-			},
-			
-			// 保存时间戳，为了防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
-			setTimeToStorage() {
-				if(!this.keepRunning || !this.timer) return
-				// 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
-				// 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
-				if(this.secNum > 0 && this.secNum <= this.seconds) {
-					// 获取当前时间戳(+ new Date()为特殊写法)，除以1000变成秒，再去除小数部分
-					let nowTimestamp = Math.floor((+ new Date()) / 1000)
-					// 将本该结束时候的时间戳保存起来 => 当前时间戳 + 剩余的秒数
-					uni.setStorage({
-						key: this.uniqueKey + '_$fuCountDownTimestamp',
-						data: nowTimestamp + Number(this.secNum)
-					})
-				}
-			}
-		},
-		watch: {
-			seconds: {
-				immediate: true,
-				handler(n) {
-					this.secNum = n;
-				}
-			},
-			successVal(val) {
-				if(val) {
-					this.startTimer()
-				}
-			}
-		},
-		// 组件销毁的时候，清除定时器，否则定时器会继续存在，系统不会自动清除
-		// #ifdef VUE2
-		// 组件销毁，兼容vue2
-		beforeDestroy() {
-			this.setTimeToStorage()
-			clearTimeout(this.timer)
-			this.timer = null;
-		}
-		// #endif
-		// #ifdef VUE3
-		// 组件销毁，兼容vue3
-		unmounted() {
-			this.setTimeToStorage()
-			clearTimeout(this.timer)
-			this.timer = null;
-		}
-		// #endif
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/color.scss';
-	
-	.fu-code-verify {
-		width: fit-content;
-		border-width: 1rpx;
-		border-style: solid;
-		border-color: transparent;
-		color: $fu-primary;
-		text-align: center;
-	}
-</style>