fusions-ui 1.2.4 → 1.2.7

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

@@ -1,9 +1,9 @@
 <template>
-	<view class="fu-input" :class="inputClass" :style="[wrapperStyle]">
-		<view class="fu-input__content" @click="click">
+	<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-icons :name="prefixIcon" :size="prefixSize" :color="prefixColor"></fu-icons>
+				    <fu-icon :name="prefixIcon" :size="prefixSize" :color="prefixColor" />
 				</slot>
 			</view>
 			<view class="fu-input__content__field-box">
@@ -25,18 +25,18 @@
 					:selection-start="selectionStart"
 					:password="password || type === 'password' || undefined"
 					:ignoreCompositionEvent="ignoreCompositionEvent"
-					@input="onInput"
-					@blur="onBlur"
-					@focus="onFocus"
-					@confirm="onConfirm"
-					@keyboardheightchange="onkeyboardheightchange" />
+					@input="handleInput"
+					@blur="handleBlur"
+					@focus="handleFocus"
+					@confirm="handleConfirm"
+					@keyboardheightchange="handleKeyboardheightchange" />
 			</view>
-			<view class="fu-input__content__clear" v-if="isShowClear" @tap="onClear">
-			    <fu-icons name="close-fill" size="25" color="#CCCCCC"></fu-icons>
+			<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-icons :name="suffixIcon" :size="suffixSize" :color="suffixColor"></fu-icons>
+				    <fu-icon :name="suffixIcon" :size="suffixSize" :color="suffixColor" />
 				</slot>
 			</view>
 		</view>
@@ -80,10 +80,10 @@
      *  @value left 左显示
      *  @value center 居中显示
      *  @value right 右显示
-	 * @property {String,Number} size 输入框字体的大小（ 默认 '14px' ）
+	 * @property {String,Number} size 输入框字体的大小（ 默认 14）
 	 * @property {String} color 输入框字体颜色（ 默认 '#333333' ）
 	 * @property {String} prefixIcon 输入框前置图标
-	 * @property {String,Number} prefixSize 输入框前置图标大小（默认18）
+	 * @property {String,Number} prefixSize 输入框前置图标大小（默认 18）
 	 * @property {String} prefixColor 输入框前置图标颜色  默认（#8f9ca2）
 	 * @property {String} suffixIcon 输入框后置图标
 	 * @property {String,Number} suffixSize 输入框后置图标大小（默认18）
@@ -92,16 +92,14 @@
 	 * 	@value surround 四周边框
 	 * 	@value bottom 底部边框
 	 * 	@value none 无边框
-	 * @property {String} shape = [circle|square] 输入框形状，circle-圆形，square-方形 （ 默认 'square' ）如果设置了radius, shape无效
+	 * @property {String} shape = [circle|square] 输入框形状，circle-圆形，square-方形（默认 'square'）
 	 * 	@value circle 圆形
 	 * 	@value square 方形
-	 * @property {String,Number} radius 设置圆角 仅border = [surround|none]支持  （默认 ''）
-	 * @property {String,Number} height 自定义输入框高度 （默认 22）
-	 * @property {String,Number} padding 自定左右内间距（默认 6）
 	 * @property {String} margin 自定义外间距（默认 '0'）
 	 * @property {Function} formatter 内容式化函数
-	 * @property {String,Object} customStyle 自定义外部样式
+	 * @property {String,Object} customStyle 定义需要用到的外部样式
 	 * @property {Boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理
+	 * 
 	 * @event {Function} click readonly或disabled为true时 点击input时触发
 	 * @event {Function} input 输入内容变化时触发
 	 * @event {Function} change 输入内容变化时触发
@@ -110,11 +108,12 @@
 	 * @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",
-		emits: ['input', 'update:modelValue', 'change', 'clear', 'blur', 'confirm', 'focus', 'click', 'keyboardheightchange'],
 		mixins: [mpMixin, mixin, props],
+		emits: ['input', 'update:modelValue', 'change', 'clear', 'blur', 'confirm', 'focus', 'click', 'keyboardheightchange'],
         model: {
 			prop: 'modelValue',
 			event: 'update:modelValue'
@@ -142,35 +141,29 @@
 			// 组件的类名
 			inputClass() {
 				let classes = [], { border, disabled, shape } = this;
-				border === "surround" && (classes = classes.concat(["fu-border"]));
-				// 如果设置了radius, shape无效
-				if(!this.radius) {
-					classes.push(`fu-input-${shape}`);
-				}
-				border === "bottom" && (classes = classes.concat(["fu-border-bottom"]));
-				return classes.join(" ");
+				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 = {};
-				style.margin = this.margin;
-				style.height = this.$fu.addUnit(this.height);
+				const style = {
+					margin: this.margin
+				};
 				// 禁用状态下，被背景色加上对应的样式
 				if (this.disabled) {
 					style.backgroundColor = this.disabledColor;
 				}
-				if((this.border === 'surround' || this.border === 'none') && this.radius) {
-					style.borderRadius = this.$fu.addUnit(this.radius);
-				}
 				// 无边框时，去除内边距
 				if (this.border === "none") {
 					style.padding = "0";
 				} else {
 					// 由于uni-app的iOS开发者能力有限，导致需要分开写才有效
-					style.paddingTop = '6px';
-					style.paddingBottom = '6px';
-					style.paddingLeft = this.$fu.addUnit(this.padding);
-					style.paddingRight = this.$fu.addUnit(this.padding);
+					style.paddingTop = '10px';
+					style.paddingBottom = '10px';
+					style.paddingLeft = '8px';
+					style.paddingRight = '8px';
 				}
 				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
 			},
@@ -180,7 +173,6 @@
 					color: this.color,
 					fontSize: this.$fu.addUnit(this.size),
 					textAlign: this.align,
-					height: this.$fu.addUnit(this.height)
 				};
 				if(this.disabled || this.readonly) {
 					style['pointer-events'] = 'none';
@@ -199,8 +191,8 @@
 			},
 			
 			// 当键盘输入时，触发input事件
-			onInput(e) {
-				let { value = "" } = e.detail || {};
+			handleInput(e) {
+				let { value = '' } = e.detail || {};
 				// 格式化过滤方法
 				const formatter = this.formatter || this.innerFormatter
 				const formatValue = formatter(value)
@@ -217,18 +209,17 @@
 				const value = this.innerValue;
 				this.$nextTick(() => {
 					// 兼容 Vue2
-					this.$emit("input", value);
+					this.$emit('input', value);
 					// 兼容 Vue3
 					this.$emit('update:modelValue', value);
 					// 标识value值的变化是由内部引起的
 					this.changeFromInner = true;
-					this.$emit("change", value);
-					// console.log(this.fuFormItem)
+					this.$emit('change', value);
 				});
 			},
 			
 			// 输入框失去焦点时触发
-			onBlur(e) {
+			handleBlur(e) {
 				this.$emit("blur", e.detail.value);
 				// H5端的blur会先于点击清除控件的点击click事件触发，导致focused
 				// 瞬间为false，从而隐藏了清除控件而无法被点击到
@@ -238,13 +229,13 @@
 			},
 			
 			// 输入框聚焦时触发
-			onFocus(e) {
+			handleFocus(e) {
 				this.focused = true;
 				this.$emit("focus");
 			},
 			
 			// 点击清除控件
-			onClear() {
+			handleClear() {
 				this.innerValue = "";
 				this.$nextTick(() => {
 					this.valueChange();
@@ -253,19 +244,20 @@
 			},
 			
 			// 点击完成按钮时触发
-			onConfirm(event) {
+			handleConfirm(event) {
 				this.$emit("confirm", this.innerValue);
 			},
+			
 			// 键盘高度发生变化的时候触发此事件
 			// 兼容性：微信小程序2.7.0+、App 3.1.0+
-			onkeyboardheightchange() {
+			handleKeyboardheightchange() {
 				this.$emit("keyboardheightchange");
 			},
 			
-			// readonly或disabled为true时 点击input时触发
-			click(event) {
+			// 点击input时触发（仅readonly=true时生效）
+			handleClick(event) {
 				event.stopPropagation(); // 阻止事件向上传播
-				if(this.readonly || this.disabled) {
+				if(this.readonly) {
 					this.$emit('click')
 				}
 			}
@@ -310,42 +302,32 @@
 </script>
 
 <style lang="scss" scoped>
-	$color_303133: #303133;
+	@import '../../libs/style/components.scss';
+	$color_333333: #333333;
 	$color_dadbde: #dadbde;
 	
 	.fu-input {
-		display: flex;
-		/* #ifdef APP-NVUE */
-		flex-direction: row;
-		/* #endif */
+		@include flex(row);
 		align-items: center;
 		justify-content: space-between;
 		flex: 1;
 		
 		&__content {
+			@include flex(row);
 			flex: 1;
-			display: flex;
-			/* #ifdef APP-NVUE */
-			flex-direction: row;
-			/* #endif */
 			align-items: center;
 			justify-content: space-between;
 			
 			&__field-box {
+				@include flex(row);
 				position: relative;
-				display: flex;
-				/* #ifdef APP-NVUE */
-				flex-direction: row;
-				/* #endif */
 				margin: 0;
 				flex: 1;
 				
 				&__field {
-					line-height: 26px;
 					text-align: left;
-					color: $color_303133;
-					height: 24px;
-					font-size: 15px;
+					color: $color_333333;
+					font-size: 14px;
 					flex: 1;
 					/* #ifdef MP-ALIPAY */
 					padding: 0;
@@ -395,7 +377,11 @@
 	}
 	
 	.fu-input-square {
-		border-radius: 4px;
+		border-radius: 5px;
+	}
+	
+	.fu-input-no-radius {
+		border-radius: 0;
 	}
 	
 	.fu-input-password {

package/components/fu-input/props.js

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