mali-applet-ui 0.1.4 → 0.1.6

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

@@ -2,18 +2,22 @@
 	<view v-if="isFromReadonly" class="ml-amount-input is-readonly">
 		<view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
 	</view>
-	<input
-		v-else
-		class="ml-amount-input"
-		v-model="inpVal"
-		type="digit"
-		:class="[{'is-right': align === 'right', 'is-border': border}, className]"
-		autocomplete="off"
-		:placeholder="placeholder"
-		:maxlength="maxLength"
-		:disabled="disabled"
-		@blur="blurEvent"
-		@input="inputEvent" />
+	<view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border}, className]">
+		<view v-if="showTip" class="ml-amount-tip">
+			<text>首位：</text>
+			<text>{{ firstNumLabel }}</text>
+		</view>
+		<input
+			v-model="inpVal"
+			type="digit"
+			class="ml-amount-input-inp"
+			autocomplete="off"
+			:placeholder="placeholder"
+			:maxlength="maxLength"
+			:disabled="disabled"
+			@blur="blurEvent"
+			@input="inputEvent" />
+	</view>
 </template>
 
 <script>
@@ -49,6 +53,7 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		showTip: Boolean,
     className: String
 	},
   inject: {
@@ -86,6 +91,35 @@ export default {
 			return Number(this.max)
 			}
 			return null
+		},
+		firstNumLabel () {
+			const numVal = XEUtils.toNumber(this.value)
+			if (numVal > 999999999999) {
+				return '万亿'
+			} else if (numVal > 99999999999) {
+				return '千亿'
+			} else if (numVal > 9999999999) {
+				return '百亿'
+			} else if (numVal > 999999999) {
+				return '十亿'
+			} else if (numVal > 99999999) {
+				return '亿'
+			} else if (numVal > 9999999) {
+				return '千万'
+			} else if (numVal > 999999) {
+				return '百万'
+			} else if (numVal > 99999) {
+				return '十万'
+			} else if (numVal > 9999) {
+				return '万'
+			} else if (numVal > 999) {
+				return '千'
+			} else if (numVal > 99) {
+				return '百'
+			} else if (numVal > 9) {
+				return '十'
+			}
+			return '个'
 		}
 	},
 	watch: {
@@ -100,19 +134,23 @@ export default {
 		}
 	},
 	created () {
-		this.inpVal = this.value
+		this.updateValue()
 	},
 	methods: {
+		updateValue () {
+			this.inpVal = this.value ? XEUtils.toFixed(XEUtils.toNumber(this.value), 2) : ''
+		},
 		checkValue  () {
-			if (this.minNum !== null && (Number(this.value) < this.minNum)) {
-			this.$emit('input', this.minNum)
-			return { status: false, value: this.minNum }
+			const numVal = XEUtils.toNumber(this.value)
+			if (this.minNum !== null && (numVal < this.minNum)) {
+				this.$emit('input', this.minNum)
+				return { status: false, value: this.minNum }
 			}
-			if (this.maxNum !== null && (Number(this.value) > this.maxNum)) {
-			this.$emit('input', this.maxNum)
-			return { status: false, value: this.maxNum }
+			if (this.maxNum !== null && (numVal > this.maxNum)) {
+				this.$emit('input', this.maxNum)
+				return { status: false, value: this.maxNum }
 			}
-			const val = XEUtils.floor(Number(this.value), 2)
+			const val = XEUtils.floor(numVal, 2)
 			if (`${val}` !== `${this.value}`) {
 				this.$emit('input', val)
 				return { status: false, value: val }
@@ -121,6 +159,7 @@ export default {
 		},
 		blurEvent () {
 			this.checkValue()
+			this.updateValue()
 			this.$emit('blur')
 		},
 		inputEvent () {
@@ -134,16 +173,29 @@ export default {
 
 <style lang="scss">
 .ml-amount-input {
-	font-size: $uni-font-size-base;
-	padding: 0 10rpx;
-	height: 70rpx;
-	width: 100%;
+	position: relative;
 	&.is-right {
-		text-align: right;
+		.ml-amount-input-inp {
+			text-align: right;
+		}
 	}
 	&.is-border {
-    border: 1px solid #e5e5e5;
-    border-radius: 10rpx;
+		.ml-amount-input-inp {
+			border: 1px solid #e5e5e5;
+			border-radius: 10rpx;
+		}
+	}
+	.ml-amount-tip {
+		position: absolute;
+		top: -60rpx;
+		right: 10rpx;
+		z-index: 1;
+	}
+	.ml-amount-input-inp {
+		font-size: $uni-font-size-base;
+		width: 100%;
+		height: 70rpx;
+		padding: 0 10rpx;
 	}
 }
 .ml-amount-input-readonly-content {

package/components/ml-button/ml-button.vue

@@ -93,15 +93,17 @@ export default {
     &.size-medium {
       height: 90rpx;
       line-height: 90rpx;
-      font-size:  $uni-font-size-lg;
+      font-size: 36rpx;
     }
     &.size-small {
       height: 70rpx;
       line-height: 70rpx;
+      font-size: 28rpx;
     }
     &.size-mini {
       height: 60rpx;
       line-height: 60rpx;
+      font-size: 24rpx;
     }
     &.status-primary {
       color: #ffffff;

package/components/ml-form-item/ml-form-item.vue

@@ -14,7 +14,7 @@
           <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
           <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" :showVoice="renderOpts.showVoice || true" border @change="modelEvent"></ml-textarea>
           <ml-upload v-else-if="matchComponent('MlUpload')" :value="itemValue" :mediatype="renderOpts.mediatype || 'image'" @change="modelEvent"></ml-upload>
-          <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" border @change="modelEvent"></ml-amount-input>
+          <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" :showTip="itemVertical" border @change="modelEvent"></ml-amount-input>
           <ml-amount-text v-else-if="matchComponent('MlAmountText')" :value="itemValue" @change="modelEvent"></ml-amount-text>
           <text v-else class="ml-form-item-default-content">{{ itemValue }}</text>
         </slot>
@@ -176,7 +176,6 @@ export default {
   }
   .ml-form-item-header {
     min-height: 70rpx;
-    color: rgba(0, 0, 0, 0.65);
   }
   .ml-form-item-header-asterisk {
     display: inline;
@@ -192,6 +191,7 @@ export default {
   &:not(.is-vertical) {
     .ml-form-item-header {
       flex-shrink: 0;
+      color: rgba(0, 0, 0, 0.65);
     }
   }
   &.title-align-left {

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

@@ -13,6 +13,7 @@
 			class="ml-input-inp"
 			autocomplete="off"
 			:placeholder="placeholder"
+			:maxlength="maxlength"
 			@input="inputEvent" 
 			@confirm="confirmEvent"/>
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
@@ -39,6 +40,10 @@ export default {
 			type: String,
 			default: '请输入'
 		},
+		maxlength: {
+			type: String,
+			default: '50'
+		},
 		className: String
 	},
   inject: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "码里云小程序组件库",
   "files": [
     "components",