mali-applet-ui 0.1.62 → 0.1.63

package/components/ml-amount-input/ml-amount-input.vue

@@ -2,7 +2,7 @@
 	<view v-if="isFromReadonly" class="ml-amount-input is-readonly">
 		<view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
 	</view>
-	<view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border}, className]">
+	<view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border, 'is-disabled': disabled, 'is-clear': clearable && inpVal}, className]">
 		<view v-if="showTip" class="ml-amount-tip">
 			<view>首位：</view>
 			<view class="ml-amount-tip-label">{{ firstNumLabel }}</view>
@@ -17,6 +17,9 @@
 			:disabled="disabled"
 			@blur="blurEvent"
 			@input="inputEvent" />
+		<view v-if="clearable && !disabled && inpVal" class="ml-amount-input-clear-icon" @click.stop="clearEvent">
+			<ml-icon name="delete-filling"></ml-icon>
+		</view>
 	</view>
 </template>
 
@@ -24,6 +27,10 @@
 import XEUtils from 'xe-utils'
 import { toAmountString, toWanAmountString } from '../../utils'
 
+function eqEmptyNull (value) {
+	return value === '' || XEUtils.eqNull(value)
+}
+
 export default {
 	name: 'MlAmountInput',
   options: {
@@ -54,6 +61,7 @@ export default {
 			default: false
 		},
 		showTip: Boolean,
+		clearable: Boolean,
     className: String
 	},
   inject: {
@@ -137,13 +145,17 @@ export default {
 		}
 	},
 	created () {
-		this.updateValue(this.inpVal)
+		this.updateValue(this.value)
 	},
 	methods: {
 		updateValue (value) {
-			this.inpVal = value === '' || XEUtils.eqNull(value) ? '' : XEUtils.toFixed(XEUtils.toNumber(value), 2)
+			this.inpVal = eqEmptyNull(value) ? '' : XEUtils.toFixed(XEUtils.toNumber(value), 2)
 		},
 		checkValue  () {
+			// 如果是空值，则不处理
+			if (eqEmptyNull(this.inpVal) && eqEmptyNull(this.value)) {
+				return { status: false, value: this.inpVal }
+			}
 			const numVal = XEUtils.toNumber(this.inpVal)
 			if (this.minNum !== null && (numVal < this.minNum)) {
 				this.$emit('input', this.minNum)
@@ -163,15 +175,22 @@ export default {
 		blurEvent () {
 			const rest = this.checkValue()
 			this.updateModel = rest.status
-			this.$nextTick(() => {
-				this.updateValue(rest.value)
-			})
+			if (rest.status) {
+				this.$nextTick(() => {
+					this.updateValue(rest.value)
+				})
+			}
 			this.$emit('blur', { value: this.inpVal })
 		},
 		inputEvent () {
 			const value = this.inpVal
 			this.$emit('input', value)
 			this.$emit('change', { value })
+		},
+		clearEvent () {
+			this.inpVal = ''
+			this.inputEvent()
+      this.$emit('clear', { value: this.inpVal })
 		}
 	}
 }
@@ -180,6 +199,12 @@ export default {
 <style lang="scss">
 .ml-amount-input {
 	position: relative;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: row;
+	.ml-amount-input-readonly-content {
+		padding: 20rpx 4rpx;
+	}
 	&.is-right {
 		.ml-amount-input-inp {
 			text-align: right;
@@ -209,8 +234,19 @@ export default {
 		height: 70rpx;
 		padding: 0 10rpx;
 	}
-}
-.ml-amount-input-readonly-content {
-	padding: 20rpx 4rpx;
+	.ml-amount-input-inp::-webkit-outer-spin-button,
+	.ml-amount-input-inp::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+	}
+	.ml-amount-input-clear-icon {
+		width: 60rpx;
+		display: flex;
+		flex-shrink: 0;
+    align-items: center;
+		justify-content: center;
+		background: #fff;
+		color: #c0c4cc;
+  	border-radius: 0 $ml-border-radius $ml-border-radius 0;
+	}
 }
 </style>

package/components/ml-number-input/ml-number-input.vue

@@ -1,20 +1,32 @@
 <template>
-	<input
-		class="ml-number-input"
-		v-model="inpVal"
-		:type="type === 'integer' ? 'number' : 'digit'"
-		:class="[className || '', {'is-right': align === 'right', 'is-border': border}]"
-		autocomplete="off"
-		:placeholder="placeholder"
-		:maxlength="maxLength"
-		:disabled="disabled"
-		@blur="blurEvent"
-		@input="inputEvent" />
+	<view v-if="isFromReadonly" class="ml-number-input is-readonly">
+		<view class="ml-number-input-readonly-content">{{ inpVal }}</view>
+	</view>
+	<view v-else class="ml-number-input" :class="[{'is-right': align === 'right', 'is-border': border, 'is-disabled': disabled, 'is-clear': clearable && inpVal}, className]">
+		<input
+			class="ml-number-input-inp"
+			v-model="inpVal"
+			:type="type === 'integer' ? 'number' : 'digit'"
+			:class="[className || '', {'is-right': align === 'right', 'is-border': border}]"
+			autocomplete="off"
+			:placeholder="placeholder"
+			:maxlength="maxLength"
+			:disabled="disabled"
+			@blur="blurEvent"
+			@input="inputEvent" />
+		<view v-if="clearable && !disabled && inpVal" class="ml-number-input-clear-icon" @click.stop="clearEvent">
+			<ml-icon name="delete-filling"></ml-icon>
+		</view>
+	</view>
 </template>
 
 <script>
 import XEUtils from 'xe-utils'
 
+function eqEmptyNull (value) {
+	return value === '' || XEUtils.eqNull(value)
+}
+
 export default {
 	name: 'MlNumberInput',
   options: {
@@ -37,6 +49,7 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		clearable: Boolean,
     className: String
 	},
 	data () {
@@ -53,10 +66,17 @@ export default {
 		}
 	},
 	created () {
-		this.inpVal = this.value
+		this.updateValue(this.value)
 	},
 	methods: {
+		updateValue (value) {
+			this.inpVal = eqEmptyNull(value) ? '' : String(XEUtils.toNumber(value))
+		},
 		checkValue  () {
+			// 如果是空值，则不处理
+			if (eqEmptyNull(this.inpVal) && eqEmptyNull(this.value)) {
+				return { status: true, value: this.inpVal }
+			}
 			const numVal = XEUtils.toNumber(XEUtils.toValueString(this.inpVal).slice(0, this.maxLength))
 			if (this.type === 'integer' && !/^[0-9]$/.test(numVal)) {
 				const value = XEUtils.toInteger(numVal)
@@ -80,6 +100,11 @@ export default {
 		},
 		inputEvent () {
 			this.$emit('input', this.inpVal)
+		},
+		clearEvent () {
+			this.inpVal = ''
+			this.inputEvent()
+      this.$emit('clear', { value: this.inpVal })
 		}
 	}
 }
@@ -87,10 +112,12 @@ export default {
 
 <style lang="scss">
 .ml-number-input {
-	font-size: $uni-font-size-base;
-	padding: 0 10rpx;
-	height: 70rpx;
-	width: 100%;
+	flex-grow: 1;
+	display: flex;
+	flex-direction: row;
+	.ml-number-input-readonly-content {
+		padding: 20rpx 4rpx;
+	}
 	&.is-right {
 		text-align: right;
 	}
@@ -98,5 +125,25 @@ export default {
     border: 1px solid #e5e5e5;
     border-radius: $ml-border-radius;
 	}
+	.ml-number-input-inp {
+		font-size: $uni-font-size-base;
+		width: 100%;
+		height: 70rpx;
+		padding: 0 10rpx;
+	}
+	.ml-number-input-inp::-webkit-outer-spin-button,
+	.ml-number-input-inp::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+	}
+	.ml-number-input-clear-icon {
+		width: 60rpx;
+		display: flex;
+		flex-shrink: 0;
+    align-items: center;
+		justify-content: center;
+		background: #fff;
+		color: #c0c4cc;
+  	border-radius: 0 $ml-border-radius $ml-border-radius 0;
+	}
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.1.62",
+  "version": "0.1.63",
   "description": "码里云小程序组件库",
   "files": [
     "components",
@@ -15,7 +15,7 @@
   "main": "index.js",
   "devDependencies": {
     "vuex": "^4.0.2",
-    "xe-utils": "3.5.6"
+    "xe-utils": "3.5.7"
   },
   "uni-app": {
     "scripts": {