fusions-ui 1.2.6 → 1.2.8

package/components/fu-keyboard/keyboard-number.vue

@@ -1,195 +0,0 @@
-<template>
-	<view class="fu-keyboard" @touchmove.stop.prevent="false">
-		<view class="fu-keyboard__button-wrapper" v-for="(item, index) in numList" :key="index">
-			<view class="fu-keyboard__button-wrapper__button" :style="[itemStyle(index)]" hover-class="fu-hover-class" :hover-stay-time="200" @tap="keyboardClick(item)">
-				<text class="fu-keyboard__button-wrapper__button__text">{{ item }}</text>
-			</view>
-		</view>
-		<view class="fu-keyboard__button-wrapper">
-			<view class="fu-keyboard__button-wrapper__button fu-keyboard__button-wrapper__button--gray" hover-class="fu-hover-class" :hover-stay-time="200" @touchstart.stop="backspaceClick" @touchend="clearTimer">
-				<fu-icon name="backspace" size="28" color="#303133" />
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	/**
-	 * KeyboardNumber 键盘组件
-	 * @description KeyboardNumber  数字键盘组件
-	 * @property {String} mode 键盘的类型，number 数字键盘，card 身份证键盘
-	 *  @value number 数字键盘
-	 * 	@value card 身份证键盘
-	 * @property {Boolean} dotDisabled = [true|false] 是否显示键盘的"."符号（默认 false）
-	 * @property {Boolean} random = [true|false] 是否打乱键盘按键的顺序（默认 false）
-	 * @event {Function} change		点击键盘触发
-	 * @event {Function} backspace	点击退格键触发
-	 */
-	export default {
-		name: 'UnKeyboardNumber',
-		emits: ['backspace','change'],
-		props: {
-			/**
-			 * @description 键盘的类型
-			 * @values 'number' - 数字键盘, 'card' - 身份证键盘
-			 * @default 'number'
-			 */
-			mode: {
-				type: String,
-				default: 'number'
-			},
-			/**
-			 * @description 是否显示键盘的"."符号
-			 * @default false
-			 */
-			dotDisabled: {
-				type: Boolean,
-				default: false
-			},
-			/**
-			 * @description 是否打乱键盘按键的顺序
-			 * @default false
-			 */
-			random: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {
-				backspace: 'backspace', // 退格键内容
-				dot: '.', // 点
-				timer: null, // 长按多次删除的事件监听
-				cardX: 'X' // 身份证的X符号
-			};
-		},
-		computed: {
-			// 键盘需要显示的内容
-			numList() {
-				let tmp = [];
-				if (this.dotDisabled && this.mode == 'number') {
-					if (!this.random) {
-						return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
-					} else {
-						return this.$fu.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
-					}
-				} else if (!this.dotDisabled && this.mode == 'number') {
-					if (!this.random) {
-						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.dot, 0];
-					} else {
-						let data = this.$fu.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
-						data.splice(-1, 0, this.dot,)
-						return data
-					}
-				} else if (this.mode == 'card') {
-					if (!this.random) {
-						return [1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0];
-					} else {
-						return this.$fu.randomArray([1, 2, 3, 4, 5, 6, 7, 8, 9, this.cardX, 0]);
-					}
-				}
-			},
-			// 按键的样式，在非乱序&&数字键盘&&不显示点按钮时，index为9时，按键占位两个空间
-			itemStyle() {
-				return index => {
-					let style = {};
-					if (this.mode == 'number' && this.dotDisabled && index == 9) style.width = '464rpx';
-					return style;
-				};
-			},
-			// 是否让按键显示灰色，只在非乱序&&数字键盘&&且允许点按键的时候
-			btnBgGray() {
-				return index => {
-					if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this.dotDisabled))) return true;
-					else return false;
-				};
-			},
-		},
-		methods: {
-			// 点击退格键
-			backspaceClick() {
-				this.$emit('backspace');
-				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
-				this.timer = null;
-				this.timer = setInterval(() => {
-					this.$emit('backspace');
-				}, 250);
-			},
-			clearTimer() {
-				clearInterval(this.timer);
-				this.timer = null;
-			},
-			// 获取键盘显示的内容
-			keyboardClick(val) {
-				// 允许键盘显示点模式和触发非点按键时，将内容转为数字类型
-				if (!this.dotDisabled && val != this.dot && val != this.cardX) val = Number(val);
-				this.$emit('change', val);
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$show-hover: 1;
-	$fu-number-keyboard-background-color:rgb(224, 228, 230) !default;
-	$fu-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
-	$fu-number-keyboard-button-width:222rpx !default;
-	$fu-number-keyboard-button-margin:4px 6rpx !default;
-	$fu-number-keyboard-button-border-top-left-radius:4px !default;
-	$fu-number-keyboard-button-border-top-right-radius:4px !default;
-	$fu-number-keyboard-button-border-bottom-left-radius:4px !default;
-	$fu-number-keyboard-button-border-bottom-right-radius:4px !default;
-	$fu-number-keyboard-button-height: 90rpx!default;
-	$fu-number-keyboard-button-background-color:#FFFFFF !default;
-	$fu-number-keyboard-button-box-shadow:0 2px 0px #BBBCBE !default;
-	$fu-number-keyboard-text-font-size:20px !default;
-	$fu-number-keyboard-text-font-weight:500 !default;
-	$fu-number-keyboard-text-color: #303133 !default;
-	$fu-number-keyboard-gray-background-color:rgb(200, 202, 210) !default;
-	$fu-number-keyboard-fu-hover-class-background-color: #BBBCC6 !default;
-
-	.fu-keyboard {
-		@include flex(row);
-		justify-content: space-around;
-		background-color: $fu-number-keyboard-background-color;
-		flex-wrap: wrap;
-		padding: $fu-number-keyboard-padding;
-
-		&__button-wrapper {
-			box-shadow: $fu-number-keyboard-button-box-shadow;
-			margin: $fu-number-keyboard-button-margin;
-			border-top-left-radius: $fu-number-keyboard-button-border-top-left-radius;
-			border-top-right-radius: $fu-number-keyboard-button-border-top-right-radius;
-			border-bottom-left-radius: $fu-number-keyboard-button-border-bottom-left-radius;
-			border-bottom-right-radius: $fu-number-keyboard-button-border-bottom-right-radius;
-
-			&__button {
-				width: $fu-number-keyboard-button-width;
-				height: $fu-number-keyboard-button-height;
-				background-color: $fu-number-keyboard-button-background-color;
-				@include flex(row);
-				justify-content: center;
-				align-items: center;
-				border-top-left-radius: $fu-number-keyboard-button-border-top-left-radius;
-				border-top-right-radius: $fu-number-keyboard-button-border-top-right-radius;
-				border-bottom-left-radius: $fu-number-keyboard-button-border-bottom-left-radius;
-				border-bottom-right-radius: $fu-number-keyboard-button-border-bottom-right-radius;
-
-				&__text {
-					font-size: $fu-number-keyboard-text-font-size;
-					font-weight: $fu-number-keyboard-text-font-weight;
-					color: $fu-number-keyboard-text-color;
-				}
-
-				&--gray {
-					background-color: $fu-number-keyboard-gray-background-color;
-				}
-			}
-		}
-	}
-
-	.fu-hover-class {
-		background-color: $fu-number-keyboard-fu-hover-class-background-color;
-	}
-</style>

package/components/fu-keyboard/props.js

@@ -1,138 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 键盘的类型
-		 * @values 'number' - 数字键盘, 'card' - 身份证键盘, 'car' - 车牌号键盘
-		 */
-		mode: {
-			type: String,
-			default: 'number'
-		},
-		/**
-		 * @description 是否显示键盘的"."符号
-		 * @default false
-		 */
-		dotDisabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否显示顶部工具条
-		 * @default true
-		 */
-		tooltip: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否显示工具条中间的提示
-		 * @default true
-		 */
-		showTips: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 工具条中间的提示文字
-		 */
-		tips: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 是否显示工具条左边的"取消"按钮
-		 * @default true
-		 */
-		showCancel: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否显示工具条右边的"完成"按钮
-		 * @default true
-		 */
-		showConfirm: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否打乱键盘按键的顺序
-		 * @default false
-		 */
-		random: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
-		 * @default true
-		 */
-		safeArea: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否允许通过点击遮罩关闭键盘
-		 * @default true
-		 */
-		isMaskClick: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否允许点击确认按钮关闭组件
-		 * @default true
-		 */
-		closeOnClickConfirm: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 层级
-		 * @default 10075
-		 */
-		zIndex: {
-			type: [String, Number],
-			default: 10075
-		},
-		/**
-		 * @description 取消按钮的文字
-		 * @default '取消'
-		 */
-		cancelText: {
-			type: String,
-			default: '取消'
-		},
-		/**
-		 * @description 确认按钮的文字
-		 * @default '确定'
-		 */
-		confirmText: {
-			type: String,
-			default: '确定'
-		},
-		/**
-		 * @description 输入一个中文后，是否自动切换到英文
-		 * @default false
-		 */
-		autoChange: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 被禁用的键
-		 */
-		disKeys: {
-			type: Array,
-			default: ()=>[]
-		},
-		/**
-		 * @description 是否自定义abc
-		 * @default false
-		 */
-		customabc: {
-			type: Boolean,
-			default: false
-		}
-	}
-}

package/components/fu-line/fu-line.vue

@@ -1,64 +0,0 @@
-<template>
-	<view class="fu-line" :class="[customClass]" :style="[lineStyle]"></view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * line 线条
-	 * @description 此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单
-	 * @property {String} color 线条的颜色 (默认 '#d6d7d9')
-	 * @property {String,Number} length 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 (默认 '100%')
-	 * @property {String} direction = [row|col]	线条的方向，row 横向，col 竖向 (默认 'row')
-	 * 	@value row 横向
-	 * 	@value col 竖向
-	 * @property {Boolean} hairline = [true|false] 是否显示细线条 (默认 true )
-	 * @property {String,Number} margin 线条与上下左右元素的间距，字符串形式，如"30px"  (默认 0)
-	 * @property {String} borderStyle = [solid|dashed|dotted] 设置线条类型 (默认 solid)
-	 * 	@value solid 实线
-	 * 	@value dashed 方形虚线
-	 * 	@value dotted 圆点虚线
-	 * @property {String,Number} borderWidth 设置线条宽度（默认 1px）
-	 * @property {String} customClass 定义需要用到的外部类
-	 * @property {String,Object} customStyle 定义需要用到的外部样式
-	 * 
-	 * @example <fu-line color="red"></fu-line>
-	 */
-	export default {
-		name:"FuLine",
-		mixins: [mpMixin, mixin, props],
-		computed: {
-			lineStyle() {
-				const style = {
-					margin: this.$fu.addUnit(this.margin),
-					borderColor: this.color
-				};
-				// 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
-				if (this.direction === 'row') {
-					// 此处采用兼容分开写，兼容nvue的写法
-					style.borderBottomWidth = this.$fu.addUnit(this.borderWidth) || '1px';
-					style.borderBottomStyle = this.borderStyle || 'solid';
-					style.width = this.$fu.addUnit(this.length);
-					if (this.hairline) style.transform = 'scaleY(0.5)'
-				} else {
-					// 如果是竖向线条，边框宽度为1px，再通过transform缩小一半，就是0.5px了
-					style.borderLeftWidth = this.$fu.addUnit(this.borderWidth) || '1px';
-					style.borderLeftStyle = this.borderStyle || 'solid';
-					style.height = this.$fu.addUnit(this.length);
-					if (this.hairline) style.transform = 'scaleX(0.5)'
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle))
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.fu-line {
-		/* #ifndef APP-NVUE */
-		vertical-align: middle;
-		/* #endif */
-	}
-</style>

package/components/fu-line/props.js

@@ -1,58 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 线条的颜色
-		 */
-		color: {
-			type: String,
-			default: '#d6d7d9'
-		},
-		/**
-		 * @description 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等
-		 */
-		length: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description 线条方向
-		 * @values 'col' - 竖向, 'row' - 横向
-		 * @default 'row'
-		 */
-		direction: {
-			type: String,
-			default: 'row'
-		},
-		/**
-		 * @description 是否显示细边框
-		 * @default true
-		 */
-		hairline: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px"
-		 */
-		margin: {
-			type: [String, Number],
-			default: 0
-		},
-		/**
-		 * @description 设置线条类型
-		 * @values 'solid' - 实线, 'dashed' - 方形虚线, 'dotted' - 圆点虚线
-		 * @default 'solid'
-		 */
-		borderStyle: {
-			type: String,
-			default: 'solid'
-		},
-		/**
-		 * @description 设置线条宽度（默认 1px）
-		 */
-		borderWidth: {
-			type: [String,Number],
-			default: ''
-		}
-	}
-}

package/components/fu-link/fu-link.vue

@@ -1,91 +0,0 @@
-<template>
-	<text 
-		class="fu-link" 
-		:class="[customClass]"
-		:style="[linkStyle]" 
-		@tap.stop="handleOpenLink">
-		<slot>
-			{{ text }}
-		</slot>
-	</text>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * Link 超链接
-	 * @description 此组件为超链接组件，在不同平台有不同表现形式：在APP平台会通过plus环境打开内置浏览器，在小程序中把链接复制到粘贴板，同时提示信息，在H5中通过window.open打开链接。
-	 * @property {String} color 文字颜色
-	 * @property {String,Number} size 字体大小（默认 15 ）
-	 * @property {Boolean} underLine = [true|false] 是否显示下划线 （默认 false ）
-	 * @property {String} href 跳转的链接，要带上http(s)
-	 * @property {String} mpTips 各个小程序平台把链接复制到粘贴板后的提示语（默认“链接已复制，请在浏览器打开”）
-	 * @property {String} text 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 
-	 * @property {String} customClass 定义需要用到的外部类
-	 * @property {Object,String} customStyle 定义需要用到的外部样式
-	 * 
-	 * @event {Function} click 点击链接触发
-	 * @example <fu-link text="不同平台有不同表现形式" href="http://www.baidu.com"></fu-link>
-	 */
-	export default {
-		name:"FuLink",
-		emits: ['click'],
-		mixins: [mpMixin, mixin, props],
-		computed: {
-			linkStyle() {
-				const style = {
-					color: this.color,
-					fontSize: this.$fu.addUnit(this.size),
-					// line-height设置为比字体大小多2px
-					lineHeight: this.$fu.addUnit(this.$fu.getPx(this.size) + 2),
-					textDecoration: this.underLine ? 'underline' : 'none'
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle))
-			}
-		},
-		methods: {
-			handleOpenLink(e) {
-				// #ifdef APP-PLUS
-				plus.runtime.openURL(this.href)
-				// #endif
-				// #ifdef H5
-				window.open(this.href)
-				// #endif
-				// #ifdef MP
-				uni.setClipboardData({
-					data: this.href,
-					success: () => {
-						uni.hideToast();
-						this.$nextTick(() => {
-							uni.showToast({
-								title: this.mpTips,
-								icon: 'none',
-								mask: true,
-							})
-						})
-					}
-				});
-				// #endif
-				this.$emit('click', e)
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	@import '../../libs/style/color.scss';
-	$fu-link-line-height:1 !default;
-	
-	.fu-link {
-		/* #ifndef APP-NVUE */
-		line-height: $fu-link-line-height;
-		/* #endif */
-		@include flex;
-		flex-wrap: wrap;
-		flex: 1;
-		color: $fu-primary;
-	}
-</style>

package/components/fu-link/props.js

@@ -1,49 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 文字颜色
-		 */
-		color: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 字体大小
-		 * @default 15
-		 */
-		size: {
-			type: [String, Number],
-			default: 15
-		},
-		/**
-		 * @description 是否显示下划线
-		 * @default false
-		 */
-		underLine: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 要跳转的链接
-		 */
-		href: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 小程序中复制到粘贴板的提示语
-		 * @default '链接已复制，请在浏览器打开'
-		 */
-		mpTips: {
-			type: String,
-			default: '链接已复制，请在浏览器打开'
-		},
-		/**
-		 * @description 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色
-		 */
-		text: {
-			type: String,
-			default: ''
-		}
-	}
-}

package/components/fu-loading/props.js

@@ -1,60 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 是否显示
-		 * @default true
-		 */
-		show: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 动画类型
-		 * @values 'circle' - 圆圈形状, 'semicircle' - 半圆形状, 'flower' - 花朵形状, 'over' - 翻转效果
-		 * @default 'flower'
-		 */
-		mode: {
-		  type: String,
-		  default: 'flower'
-		},
-		/**
-		 * @description 加载颜色
-		 * @default '#a5a6a8'
-		 */
-		color: {
-		  type: String,
-		  default: '#a5a6a8'
-		},
-		/**
-		 * @description 加载动画大小
-		 * @default 20
-		 */
-		size: {
-		  type: [String, Number],
-		  default: 20
-		},
-		/**
-		 * @description 动画模式
-		 * @default 'linear'
-		 */
-		timingFunction: {
-			type: String,
-			default: 'linear'
-		},
-		/**
-		 * @description 动画执行周期时间
-		 * @default 1200
-		 */
-		duration: {
-			type: [String, Number],
-			default: 1200
-		},
-		/**
-		 * @description 暗边颜色（仅mode=circle时生效）
-		 */
-		inactiveColor: {
-			type: String,
-			default: ''
-		}
-	}
-}