fusions-ui 1.2.7 → 1.2.8

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

@@ -1,393 +0,0 @@
-<template>
-	<view class="fu-input" :class="inputClass" :style="[wrapperStyle]" @click="handleClick">
-		<view class="fu-input__content">
-			<view class="fu-input__content__prefix-icon">
-				<slot name="prefix">
-				    <fu-icon :name="prefixIcon" :size="prefixSize" :color="prefixColor" />
-				</slot>
-			</view>
-			<view class="fu-input__content__field-box">
-				<input class="fu-input__content__field-box__field" :style="[inputStyle]" :type="type" :value="innerValue"
-					:disabled="disabled || readonly"
-					:focus="focus"
-					:cursor="cursor"
-					:auto-blur="autoBlur"
-					:maxlength="maxlength"
-					:placeholder="placeholder"
-					:placeholder-style="placeholderStyle"
-					:placeholder-class="placeholderClass"
-					:confirm-type="confirmType"
-					:confirm-hold="confirmHold"
-					:hold-keyboard="holdKeyboard"
-					:cursor-spacing="cursorSpacing"
-					:adjust-position="adjustPosition"
-					:selection-end="selectionEnd"
-					:selection-start="selectionStart"
-					:password="password || type === 'password' || undefined"
-					:ignoreCompositionEvent="ignoreCompositionEvent"
-					@input="handleInput"
-					@blur="handleBlur"
-					@focus="handleFocus"
-					@confirm="handleConfirm"
-					@keyboardheightchange="handleKeyboardheightchange" />
-			</view>
-			<view class="fu-input__content__clear" v-if="isShowClear" @tap="handleClear">
-			    <fu-icon name="close-fill" size="25" color="#CCCCCC" />
-			</view>
-			<view class="fu-input__content__subfix-icon">
-				<slot name="suffix">
-				    <fu-icon :name="suffixIcon" :size="suffixSize" :color="suffixColor" />
-				</slot>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * Input 输入框
-	 * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件fu-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
-	 * @property {String,Number} value input输入的值
-	 * @property {String} type  输入框类型 （ 默认 'text' ）
-     *  @value text 文本输入键盘
-	 * 	@value password 密码输入键盘
-	 * 	@value number 数字输入键盘，注意iOS上app-vue弹出的数字键盘并非9宫格方式
-	 * 	@value idcard 身份证输入键盘，信、支付宝、百度、QQ小程序
-	 * 	@value digit 带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持
-	 * @property {Boolean} disabled = [true|false] 是否禁用输入框（ 默认 false ）
-	 * @property {Boolean} readonly = [true|false] 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 （ 默认 false ）
-	 * @property {String} disabledColor 禁用状态时的背景色（默认 '#F5F7FA'）
-	 * @property {Boolean} clearable = [true|false]  是否显示清除控件 (默认false)
-	 * @property {Boolean} password = [true|false]  是否密码类型（默认false）
-	 * @property {String,Number} maxlength  最大输入长度，设置为 -1 的时候不限制最大长度 (默认 -1), 在支付宝小程序中 type="digit" 时IOS无法触发input事件
-	 * @property {String} placeholder 输入框为空时的占位符 (默认null)
-	 * @property {String} placeholderClass 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名:deep()包裹 （ 默认 'input-placeholder' ）
-	 * @property {String,Object} placeholderStyle 指定placeholder的样式，字符串/对象形式，如"color: red;"
-	 * @property {String} confirmType 设置右下角按钮的文字，兼容性详见uni-app文档 （ 默认 'done' ）
-	 * @property {Boolean} confirmHold = [true|false] 点击键盘右下角按钮时是否保持键盘不收起，H5无效 （ 默认 false ）
-	 * @property {Boolean} holdKeyboard = [true|false]	focus时，点击页面的时候不收起键盘，微信小程序有效 （ 默认 false ）
-	 * @property {Boolean} focus = [true|false] 自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 （ 默认 false ）
-	 * @property {Boolean} autoBlur = [true|false]	键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 （ 默认 false ）
-	 * @property {String,Number} cursor 指定focus时光标的位置（ 默认 -1 ）
-	 * @property {String,Number} cursorSpacing	输入框聚焦时底部与键盘的距离 （ 默认 30 ）
-	 * @property {String,Number} selectionStart	光标起始位置，自动聚集时有效，需与selection-end搭配使用 （ 默认 -1 ）
-	 * @property {String,Number} selectionEnd 光标结束位置，自动聚集时有效，需与selection-start搭配使用 （ 默认 -1 ）
-	 * @property {Boolean} adjustPosition = [true|false] 键盘弹起时，是否自动上推页面 （ 默认 true ）
-	 * @property {String} align = [left|center|right] 输入框内容对齐方式（ 默认 'left' ）
-     *  @value left 左显示
-     *  @value center 居中显示
-     *  @value right 右显示
-	 * @property {String,Number} size 输入框字体的大小（ 默认 14）
-	 * @property {String} color 输入框字体颜色（ 默认 '#333333' ）
-	 * @property {String} prefixIcon 输入框前置图标
-	 * @property {String,Number} prefixSize 输入框前置图标大小（默认 18）
-	 * @property {String} prefixColor 输入框前置图标颜色  默认（#8f9ca2）
-	 * @property {String} suffixIcon 输入框后置图标
-	 * @property {String,Number} suffixSize 输入框后置图标大小（默认18）
-	 * @property {String} suffixColor 输入框后置图标颜色  默认（#8f9ca2）
-	 * @property {String} border = [surround|bottom|none] 边框类型，surround-四周边框，bottom-底部边框，none-无边框 （ 默认 'surround' ）
-	 * 	@value surround 四周边框
-	 * 	@value bottom 底部边框
-	 * 	@value none 无边框
-	 * @property {String} shape = [circle|square] 输入框形状，circle-圆形，square-方形（默认 'square'）
-	 * 	@value circle 圆形
-	 * 	@value square 方形
-	 * @property {String} margin 自定义外间距（默认 '0'）
-	 * @property {Function} formatter 内容式化函数
-	 * @property {String,Object} customStyle 定义需要用到的外部样式
-	 * @property {Boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理
-	 * 
-	 * @event {Function} click readonly或disabled为true时 点击input时触发
-	 * @event {Function} input 输入内容变化时触发
-	 * @event {Function} change 输入内容变化时触发
-	 * @event {Function} clear 点击清空内容
-	 * @event {Function} blur 输入框失去焦点时触发
-	 * @event {Function} confirm 点击完成按钮时触发
-	 * @event {Function} focus 输入框聚焦时触发
-	 * @event {Function} keyboardheightchange 键盘高度发生变化的时候触发此事件 微信小程序基础库2.7.0+、App 3.1.0+
-	 * @example <fu-input placeholder="请输入内容"></fu-input>
-	 */
-	export default {
-		name:"FuInput",
-		mixins: [mpMixin, mixin, props],
-		emits: ['input', 'update:modelValue', 'change', 'clear', 'blur', 'confirm', 'focus', 'click', 'keyboardheightchange'],
-        model: {
-			prop: 'modelValue',
-			event: 'update:modelValue'
-		},
-		data() {
-			return {
-				// 输入框的值
-				innerValue: "",
-				// H5端的blur会先于点击清除控件的点击click事件触发，导致focused瞬间为false，从而隐藏了清除控件而无法被点击到
-				focused: false,
-				// value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
-				firstChange: true,
-				// value绑定值的变化是由内部还是外部引起的
-				changeFromInner: false,
-				// 过滤处理方法
-				innerFormatter: value => value
-			};
-		},
-		computed: {
-			// 是否显示清除控件
-			isShowClear() {
-			    const { clearable, readonly, focused, innerValue } = this;
-			    return !!clearable && !readonly && !!focused && innerValue !== "";
-			},
-			// 组件的类名
-			inputClass() {
-				let classes = [], { border, disabled, shape } = this;
-				border === 'surround' && (classes = classes.concat(['fu-border']));
-				classes.push(`fu-input-${shape}`);
-				border === 'bottom' && (classes = classes.concat(['fu-border-bottom', 'fu-input-no-radius']));
-				return classes.join(' ');
-			},
-			// 组件的样式
-			wrapperStyle() {
-				const style = {
-					margin: this.margin
-				};
-				// 禁用状态下，被背景色加上对应的样式
-				if (this.disabled) {
-					style.backgroundColor = this.disabledColor;
-				}
-				// 无边框时，去除内边距
-				if (this.border === "none") {
-					style.padding = "0";
-				} else {
-					// 由于uni-app的iOS开发者能力有限，导致需要分开写才有效
-					style.paddingTop = '10px';
-					style.paddingBottom = '10px';
-					style.paddingLeft = '8px';
-					style.paddingRight = '8px';
-				}
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
-			},
-			// 输入框的样式
-			inputStyle() {
-				let style = {
-					color: this.color,
-					fontSize: this.$fu.addUnit(this.size),
-					textAlign: this.align,
-				};
-				if(this.disabled || this.readonly) {
-					style['pointer-events'] = 'none';
-					// 禁用状态下，被背景色加上对应的样式 兼容支付宝小程序
-					if (this.disabled) {
-						style.backgroundColor = this.disabledColor;
-					}
-				}
-				return style;
-			},
-		},
-		methods: {
-			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
-			setFormatter(e) {
-				this.innerFormatter = e
-			},
-			
-			// 当键盘输入时，触发input事件
-			handleInput(e) {
-				let { value = '' } = e.detail || {};
-				// 格式化过滤方法
-				const formatter = this.formatter || this.innerFormatter
-				const formatValue = formatter(value)
-				// 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
-				this.innerValue = value
-				this.$nextTick(() => {
-					this.innerValue = formatValue;
-					this.valueChange();
-				})
-			},
-			
-			// 内容发生变化，进行处理
-			valueChange() {
-				const value = this.innerValue;
-				this.$nextTick(() => {
-					// 兼容 Vue2
-					this.$emit('input', value);
-					// 兼容 Vue3
-					this.$emit('update:modelValue', value);
-					// 标识value值的变化是由内部引起的
-					this.changeFromInner = true;
-					this.$emit('change', value);
-				});
-			},
-			
-			// 输入框失去焦点时触发
-			handleBlur(e) {
-				this.$emit("blur", e.detail.value);
-				// H5端的blur会先于点击清除控件的点击click事件触发，导致focused
-				// 瞬间为false，从而隐藏了清除控件而无法被点击到
-				this.$fu.sleep(50).then(() => {
-					this.focused = false;
-				});
-			},
-			
-			// 输入框聚焦时触发
-			handleFocus(e) {
-				this.focused = true;
-				this.$emit("focus");
-			},
-			
-			// 点击清除控件
-			handleClear() {
-				this.innerValue = "";
-				this.$nextTick(() => {
-					this.valueChange();
-					this.$emit("clear");
-				});
-			},
-			
-			// 点击完成按钮时触发
-			handleConfirm(event) {
-				this.$emit("confirm", this.innerValue);
-			},
-			
-			// 键盘高度发生变化的时候触发此事件
-			// 兼容性：微信小程序2.7.0+、App 3.1.0+
-			handleKeyboardheightchange() {
-				this.$emit("keyboardheightchange");
-			},
-			
-			// 点击input时触发（仅readonly=true时生效）
-			handleClick(event) {
-				event.stopPropagation(); // 阻止事件向上传播
-				if(this.readonly) {
-					this.$emit('click')
-				}
-			}
-		},
-		watch: {
-			// #ifndef VUE3
-			value: {
-			    immediate: true,
-			    handler(newVal, oldVal) {
-					this.innerValue = newVal;
-					/* #ifdef H5 */
-					// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-					if (this.firstChange === false && this.changeFromInner === false) {
-						this.valueChange();
-					}
-					/* #endif */
-					this.firstChange = false;
-					// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-					this.changeFromInner = false;
-			    },
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(newVal) {
-					this.innerValue = newVal;
-					/* #ifdef H5 */
-					// 在H5中，外部value变化后，修改input中的值，不会触发@input事件，此时手动调用值变化方法
-					if (this.firstChange === false && this.changeFromInner === false) {
-						this.valueChange();
-					}
-					/* #endif */
-					this.firstChange = false;
-					// 重置changeFromInner的值为false，标识下一次引起默认为外部引起的
-					this.changeFromInner = false;
-				}
-			},
-			// #endif
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$color_333333: #333333;
-	$color_dadbde: #dadbde;
-	
-	.fu-input {
-		@include flex(row);
-		align-items: center;
-		justify-content: space-between;
-		flex: 1;
-		
-		&__content {
-			@include flex(row);
-			flex: 1;
-			align-items: center;
-			justify-content: space-between;
-			
-			&__field-box {
-				@include flex(row);
-				position: relative;
-				margin: 0;
-				flex: 1;
-				
-				&__field {
-					text-align: left;
-					color: $color_333333;
-					font-size: 14px;
-					flex: 1;
-					/* #ifdef MP-ALIPAY */
-					padding: 0;
-					/* #endif */
-				}
-			}
-			
-			&__clear {
-				width: 20px;
-				height: 20px;
-				border-radius: 100px;
-				display: flex;
-				/* #ifdef APP-NVUE */
-				flex-direction: row;
-				/* #endif */
-				align-items: center;
-				justify-content: center;
-				transform: scale(0.82);
-				margin-left: 4px;
-			}
-			
-			&__subfix-icon {
-				margin-left: 4px;
-			}
-			
-			&__prefix-icon {
-				margin-right: 4px;
-			}
-		}
-	}
-	
-	.fu-border {
-		border-width: 0.5px;
-		border-color: $color_dadbde;
-		border-style: solid;
-	}
-	
-	.fu-border-bottom {
-		border-bottom-width: 0.5px;
-		border-color: $color_dadbde;
-		border-bottom-style: solid;
-	}
-	
-	.fu-input-circle {
-		border-radius: 1000rpx !important;
-		overflow: hidden;
-	}
-	
-	.fu-input-square {
-		border-radius: 5px;
-	}
-	
-	.fu-input-no-radius {
-		border-radius: 0;
-	}
-	
-	.fu-input-password {
-		:deep(.uni-input-input) {
-			-webkit-text-security: disc;
-			text-security:disc;
-		}
-	}
-</style>

package/components/fu-input/props.js

@@ -1,291 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description value / v-model 输入的值
-		 */
-		value: {
-			type: [String,Number],
-			default: ''
-		},
-		modelValue: {
-			type: [String,Number],
-			default: ''
-		},
-		/**
-		 * @description number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
-		 * idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序
-		 * digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序
-		 * text-文本输入键盘
-		 * @default 'text'
-		 */
-		type: {
-			type: String,
-			default: 'text'
-		},
-		/**
-		 * @description 是否禁用输入框
-		 * @default false
-		 */
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
-		 * @default false
-		 */
-		readonly: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 禁用状态时的背景色
-		 * @default '#F5F7FA'
-		 */
-		disabledColor: {
-			type: String,
-			default: '#F5F7FA'
-		},
-		/**
-		 * @description 是否显示清除控件
-		 * @default false
-		 */
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 是否密码类型
-		 * @default false
-		 */
-		password: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 最大输入长度，设置为 -1 的时候不限制最大长度
-		 * @default -1
-		 */
-		maxlength: {
-			type: [String, Number],
-			default: -1
-		},
-		/**
-		 * @description 输入框为空时的占位符
-		 * @default null
-		 */
-		placeholder: {
-			type: String,
-			default: null
-		},
-		/**
-		 * @description 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写:deep(...)
-		 * @default 'input-placeholder'
-		 */
-		placeholderClass: {
-			type: String,
-			default: 'input-placeholder'
-		},
-		/**
-		 * @description 指定placeholder的样式
-		 * @default 'color: #CCCCCC'
-		 */
-		placeholderStyle: {
-			type: [String, Object],
-			default:  'color: #CCCCCC'
-		},
-		/**
-		 * @description 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档https://uniapp.dcloud.io/component/input
-		 * @default 'done'
-		 */
-		confirmType: {
-			type: String,
-			default: 'done'
-		},
-		/**
-		 * @description 点击键盘右下角按钮时是否保持键盘不收起，H5无效
-		 * @default false
-		 */
-		confirmHold: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description focus时，点击页面的时候不收起键盘，微信小程序有效
-		 * @default false
-		 */
-		holdKeyboard: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 自动获取焦点
-		 * 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
-		 * @default false
-		 */
-		focus: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
-		 * @default false
-		 */
-		autoBlur: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 指定focus时光标的位置
-		 * @default -1
-		 */
-		cursor: {
-			type: [String, Number],
-			default: -1
-		},
-		/**
-		 * @description 输入框聚焦时底部与键盘的距离
-		 * @default 30
-		 */
-		cursorSpacing: {
-			type: [String, Number],
-			default: 30
-		},
-		/**
-		 * @description 光标起始位置，自动聚集时有效，需与selection-end搭配使用
-		 * @default -1
-		 */
-		selectionStart: {
-			type: [String, Number],
-			default: -1
-		},
-		/**
-		 * @description 光标结束位置，自动聚集时有效，需与selection-start搭配使用
-		 * @default -1
-		 */
-		selectionEnd: {
-			type: [String, Number],
-			default: -1
-		},
-		/**
-		 * @description 键盘弹起时，是否自动上推页面
-		 * @default true
-		 */
-		adjustPosition: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 输入框内容对齐方式
-		 * @values 'left' - 左对齐, 'center' - 居中, 'right' - 右对齐
-		 * @default 'left'
-		 */
-		align: {
-			type: String,
-			default: 'left'
-		},
-		/**
-		 * @description 输入框字体的大小
-		 * @default 14
-		 */
-		size: {
-			type: [String, Number],
-			default: 14
-		},
-		/**
-		 * @description 输入框字体颜色
-		 * @default '#333333'
-		 */
-		color: {
-			type: String,
-			default: '#333333'
-		},
-		/**
-		 * @description 输入框前置图标
-		 */
-		prefixIcon: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 输入框前置图标大小
-		 * @default 18
-		 */
-		prefixSize: {
-			type: [String,Number],
-			default: 18
-		},
-		/**
-		 * @description 输入框前置图标颜色
-		 * @default '#8f9ca2'
-		 */
-		prefixColor: {
-			type: String,
-			default: '#8f9ca2'
-		},
-		/**
-		 * @description 输入框后置图标
-		 */
-		suffixIcon: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 输入框后置图标大小
-		 * @default 18
-		 */
-		suffixSize: {
-			type: [String,Number],
-			default: 18
-		},
-		/**
-		 * @description 输入框后置图标颜色
-		 * @default '#8f9ca2'
-		 */
-		suffixColor: {
-			type: String,
-			default: '#8f9ca2'
-		},
-		/**
-		 * @description 边框类型
-		 * @values 'surround' - 四周边框, 'bottom' - 底部边框, 'none' - 无边框
-		 * @default 'surround'
-		 */
-		border: {
-			type: String,
-			default: 'surround'
-		},
-		/**
-		 * @description 输入框形状，circle-圆形，square-方形
-		 * @values 'circle' - 圆形, 'square' - 方形
-		 * @default 'square'
-		 */
-		shape: {
-			type: String,
-			default: 'square'
-		},
-		/**
-		 * @description 设置外间距
-		 */
-		margin: {
-			type: String,
-			default: '0'
-		},
-		/**
-		 * @description 用于处理或者过滤输入框内容的方法
-		 * @default null
-		 */
-		formatter: {
-			type: [Function, null],
-			default: null
-		},
-		/**
-		 * @description 是否忽略组件内对文本合成系统事件的处理
-		 * @default true
-		 */
-		ignoreCompositionEvent: {
-			type: Boolean,
-			default: true
-		}
-	}
-}