mali-applet-ui 0.0.32 → 0.0.35

package/README.md

@@ -1,32 +1,32 @@
-# mali-applet-ui
-
-Mali-Applet-UI 码里云小程序组件库  
-
-## 安装
-
-```bash
-# npm方式安装
-npm install mali-applet-ui
-```
-
-## 按需引入
-
-1. `pages.json`配置easycom规则(按需引入)
-
-```js
-// pages.json
-{
-  "easycom": {
-    "autoscan": true,
-    "custom": {
-      "^ml-(.*)": "mali-applet-ui/components/ml-$1/ml-$1.vue"
-    }
-  },
-	// 此为本身已有的内容
-  "pages": [
-    // ......
-  ]
-}
-```
-
-深圳叮当科技技术有限公司
+# mali-applet-ui
+
+Mali-Applet-UI 码里云小程序组件库  
+
+## 安装
+
+```bash
+# npm方式安装
+npm install mali-applet-ui
+```
+
+## 按需引入
+
+1. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^ml-(.*)": "mali-applet-ui/components/ml-$1/ml-$1.vue"
+    }
+  },
+  // 此为本身已有的内容
+  "pages": [
+    // ......
+  ]
+}
+```
+
+深圳叮当科技技术有限公司

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

@@ -3,7 +3,7 @@
 		class="ml-amount-input"
 		v-model="inpVal"
 		type="text"
-		:class="{'is-right': align === 'right', 'is-border': border}"
+		:class="[{'is-right': align === 'right', 'is-border': border}, className]"
 		autocomplete="off"
 		:placeholder="placeholder"
 		:maxlength="maxLength"
@@ -44,7 +44,8 @@ export default {
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+    className: String
 	},
 	data () {
 		return {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-amount-text">
+	<view class="ml-amount-text" :class="className">
 		<slot name="symbol">
 			<view v-if="symbol" class="amount-flag">￥</view>
 		</slot>
@@ -31,6 +31,7 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		className: String
 	},
 	computed: {
 		amountUnit () {

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

@@ -1,5 +1,5 @@
 <template>
-  <button class="ml-button" :class="[`type-${type}`, status ? `status-${status}` : '', round ? 'is-round' : '']" @tap="tapEvent" @click="clickEvent">
+  <button class="ml-button" :class="[className, `type-${type}`, status ? `status-${status}` : '', round ? 'is-round' : '']" @tap="tapEvent" @click="clickEvent">
     <slot>{{ content }}</slot>
   </button>
 </template>
@@ -17,7 +17,8 @@ export default {
     type: {
       type: String,
       default: 'button'
-    }
+    },
+    className: String
   },
   methods: {
     tapEvent () {

package/components/ml-checkbox/ml-checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-checkbox" :class="{'is-checked': checked, 'is-disabled': disabled}" @tap="tapEvent">
+	<view class="ml-checkbox" :class="[className, {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
     <ml-icon class="checkbox-icon" :name="checked ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
     <text class="checkbox-content">
       <slot>
@@ -23,7 +23,8 @@ export default {
     },
     indeterminate: Boolean,
     disabled: Boolean,
-    content: String
+    content: String,
+    className: String
 	},
   computed: {
     checked () {

package/components/ml-checkbox-group/ml-checkbox-group.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-group" :class="{'is-disabled': disabled, 'is-vertical': vertical}">
+	<view class="ml-radio-group" :class="[className, {'is-disabled': disabled, 'is-vertical': vertical}]">
     <view class="ml-radio-group-item" v-for="(item, index) in options" :key="index">
       <ml-checkbox :value="value.includes(item.value) ? item.value : null" :label="item.value" :content="item.label" :disabled="disabled || item.disabled" @change="changeEvent"></ml-checkbox>
     </view>
@@ -16,7 +16,8 @@ export default {
 		value: Array,
     options: Array,
     disabled: Boolean,
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
 	},
 	methods: {
 		changeEvent ({ label, checked }) {

package/components/ml-chunk-group/ml-chunk-group.vue

@@ -0,0 +1,113 @@
+<template>
+  <view class="ml-chunk-group" :class="[className, status ? `status-${status}` : '', align ? `align-${align}` : '', {'is-vertical': vertical, 'is-header': title || $slots.title}]">
+    <view v-if="title || $slots.title" class="ml-chunk-group-title">
+      <slot name="title">
+        <view v-if="prefixIcon" class="ml-chunk-group-left-icon">
+          <ml-icon :className="prefixIcon"></ml-icon>
+        </view>
+        <text class="ml-chunk-group-title-content">{{ title }}</text>
+      </slot>
+    </view>
+    <view class="ml-chunk-group-body">
+      <view class="ml-chunk-group-content">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+	name: 'MlChunkGroup',
+  options: {
+    virtualHost: true
+  },
+	props: {
+    title: String,
+    prefixIcon: String,
+    vertical: Boolean,
+    status: String,
+    align: String,
+    className: String
+	},
+  provide() {
+    return {
+      mlChunk: this
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-chunk-group {
+  display: block;
+  border-radius: 10rpx;
+  background: #ffffff;
+  .ml-chunk-group-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 70rpx;
+    padding: 0 20rpx ;
+  }
+  .ml-chunk-group-left-icon {
+    font-size: 38rpx;
+    flex-shrink: 0;
+    padding-right: 10rpx;
+  }
+  .ml-chunk-group-content {
+    display: flex;
+    flex-direction: row;
+    border-radius: 10rpx;
+  }
+  &.is-header {
+    .ml-chunk-group-body {
+      padding: 0 20rpx;
+    }
+  }
+  &.is-vertical {
+    .ml-chunk-group-content {
+      flex-direction: column;
+    }
+  }
+  &.align-left {
+    text-align: left;
+  }
+  &.align-center {
+    text-align: center;
+  }
+  &.align-right {
+    text-align: right;
+  }
+  &.status-primary {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-primary;
+    }
+  }
+  &.status-success {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-success;
+    }
+  }
+  &.status-info {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: #909399;
+    }
+  }
+  &.status-warning {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-warning;
+    }
+  }
+  &.status-danger {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-error;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <view class="ml-chunk-item" :class="[className, span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+	name: 'MlChunkItem',
+  options: {
+    virtualHost: true
+  },
+	props: {
+    span: [String, Number],
+    align: String,
+    width: String,
+    className: String
+	},
+  inject: {
+    chunk: {
+      from: 'mlChunk',
+      default: null
+    }
+  },
+  computed: {
+    isVertical () {
+      return this.chunk ? this.chunk.vertical : ''
+    },
+    styles () {
+      return this.width ? `width: ${this.width};` : '' 
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-chunk-item {
+  display: flex;
+  flex-direction: column;
+  padding: 10rpx;
+  line-height: 50rpx;
+  $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
+          37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
+          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
+  &.align-left {
+    text-align: left;
+  }
+  &.align-center {
+    text-align: center;
+  }
+  &.align-right {
+    text-align: right;
+  }
+  &:not(.is-fixed) {
+    flex-grow: 1;
+  }
+  @for $index from 0 to length($spans) {
+    &.span-#{$index + 1} {
+      width: nth($spans, $index + 1);
+    }
+  }
+  &:not(.is-vertical) {
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  &.is-vertical {
+    flex-direction: row;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  &:last-child {
+    border: 0;
+  }
+}
+</style>

package/components/ml-col/ml-col.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-col" :class="[span && !width ? `span-${span}` : '', align ? `align-${align}` : '', width ? 'is-fixed' : '']" :style="styles">
+  <view class="ml-col" :class="[className, span && !width ? `span-${span}` : '', align ? `align-${align}` : '', width ? 'is-fixed' : '']" :style="styles">
     <slot></slot>
   </view>
 </template>
@@ -13,11 +13,12 @@ export default {
 	props: {
     span: [String, Number],
     align: String,
-    width: String
+    width: String,
+    className: String
 	},
   computed: {
     styles () {
-      return this.width ? `${this.width}` : '' 
+      return this.width ? `width: ${this.width};` : '' 
     }
   }
 }

package/components/ml-date-picker/ml-date-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectVal" type="date" :start="start" :end="end" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectVal" type="date" :start="start" :end="end" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,6 +13,7 @@ export default {
     border: Boolean,
     start: [String, Number],
     end: [String, Number],
+    className: String
   },
   data () {
     return {

package/components/ml-date-range-picker/ml-date-range-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectDates" type="daterange" :start="start" :end="end" @change="changeEvent" :border="border" :clear-icon="clear"/>
+  <uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="start" :end="end" @change="changeEvent" :border="border" :clear-icon="clear"/>
 </template>
 
 <script>
@@ -17,7 +17,8 @@ export default {
     clear: {
       type: Boolean,
       default: true
-    }
+    },
+    className: String
   },
   data () { 
     return {

package/components/ml-datetime-picker/ml-datetime-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectVal" type="datetime" :start="start" :end="end" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="start" :end="end" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,6 +13,7 @@ export default {
     border: Boolean,
     start: [String, Number],
     end: [String, Number],
+    className: String
   },
   data () {
     return {

package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectDates" type="datetimerange" :start="start" :end="end" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="start" :end="end" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,7 +13,8 @@ export default {
     startDate: String,
     endDate: String,
     start: [String, Number],
-    end: [String, Number]
+    end: [String, Number],
+    className: String
   },
   data () {
     return {

package/components/ml-echarts/ml-echarts.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-echarts" :style="{height: height || '400rpx', width: width || '100%'}">
+	<view class="ml-echarts" :class="className" :style="{height: height || '400rpx', width: width || '100%'}">
 		<canvas type="2d" class="ml-canvas" :canvas-id="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
 	</view>
 </template>
@@ -44,7 +44,8 @@ export default {
 		height:String,
 		width: String,
 		lazyLoad:Boolean,
-		forceUseOldCanvas: Boolean
+		forceUseOldCanvas: Boolean,
+		className: String
 	},
 	data() {
 		return {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-form" :class="{'is-vertical': vertical}">
+  <view class="ml-form" :class="[className, {'is-vertical': vertical}]">
     <uni-forms ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
       <slot></slot>
     </uni-forms>
@@ -18,7 +18,8 @@ export default {
     data: Object,
     items: Array,
     rules: Object,
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
   },
   data () {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-forms-item :label="title" :name="field">
+  <uni-forms-item :class="className" :label="title" :name="field">
     <slot></slot>
   </uni-forms-item>
 </template>
@@ -12,7 +12,8 @@ export default {
   },
   props: {
     title: String,
-    field: String
+    field: String,
+    className: String
   }
 }
 </script>

package/components/ml-full-watermark/ml-full-watermark.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-full-watermark">
+	<view class="ml-full-watermark" :class="className">
 		<view class="ml-full-watermark-text" v-for="index in 40" :key="index">{{ content }}</view>
 	</view>
 </template>
@@ -7,11 +7,9 @@
 <script>
 export default {
 	name: 'MlFullWatermark',
-  options: {
-    virtualHost: true
-  },
 	props: {
-		content: String
+		content: String,
+		className: String
 	}
 }
 </script>

package/components/ml-icon/ml-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <text class="ml-icon" :class="[name ? `${prefix}${name}` : '', className]" @click="clickEvent"></text>
+  <text class="ml-icon" :class="[className, name ? `${prefix}${name}` : '']" @click="clickEvent"></text>
 </template>
 
 <script>

package/components/ml-image-swiper/ml-image-swiper.vue

@@ -1,33 +1,66 @@
 <template>
-  <view class="ml-image-swiper">
-    <swiper :autoplay="autoplay" :interval="interval" :style="{height: height || '400rpx'}" circular indicator-dots>
-      <swiper-item v-for="(item, index) in options" :key="index">
-        <image class="ml-image-swiper-img" mode="widthFix" :src="item.url"></image>
-      </swiper-item>
-    </swiper>
-  </view>
+  <swiper class="ml-image-swiper" :current="current" :class="className" :style="styles" :autoplay="autoplay" :interval="interval" circular indicator-dots @change="changeEvent">
+    <swiper-item v-for="(item, index) in options" :key="index">
+      <image class="ml-image-swiper-img" mode="aspectFill" :src="item.url"></image>
+    </swiper-item>
+  </swiper>
 </template>
 
 <script>
+import XEUtils from 'xe-utils'
 export default {
 	name: 'MlImageSwiper',
   options: {
     virtualHost: true
   },
 	props: {
-    value: Number,
+    value: [Number, String],
     options: Array,
     autoplay: Boolean,
     interval: Number,
-    width: String,
-    height: String
-	}
+    height: String,
+    className: String
+	},
+  data () {
+    return {
+      current: 0
+    }
+  },
+  computed: {
+    styles () {
+      return this.height ? `height: ${this.height};` : '' 
+    }
+  },
+  watch: {
+    value () {
+      this.updateActive()
+    }
+  },
+  created () {
+    this.updateActive()
+  },
+  methods: {
+    updateActive () {
+      const index = XEUtils.findIndexOf(this.options, item => item.value === this.value)
+      this.current = index > -1 ? index : 0
+    },
+    changeEvent (e) {
+      const index = e.detail.current
+      const option = this.options[index]
+      this.current = index
+      const value = option ? option.value : 0
+      this.$emit('input', value)
+      this.$emit('change', { value, option })
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 .ml-image-swiper {
+  height: 100%;
   .ml-image-swiper-img {
+    height: 100%;
     width: 100%;
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
-	<view class="ml-input" :class="{'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled}">
+	<view class="ml-input" :class="[className, {'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled}]">
 		<view v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
-			<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
+			<ml-icon v-if="prefixIcon" :class="prefixIcon"></ml-icon>
 			<ml-icon v-else name="search"></ml-icon>
 		</view>
 		<input
@@ -12,7 +12,7 @@
 			:placeholder="placeholder"
 			@input="inputEvent" />
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
-			<ml-icon :className="suffixIcon"></ml-icon>
+			<ml-icon :class="suffixIcon"></ml-icon>
 		</view>
 	</view>
 </template>
@@ -34,7 +34,8 @@ export default {
 		placeholder: {
 			type: String,
 			default: '请输入'
-		}
+		},
+		className: String
 	},
 	data () {
 		return {

package/components/ml-list-menu-group/ml-list-menu-group.vue

@@ -0,0 +1,51 @@
+<template>
+  <view class="ml-list-menu-group" :class="className">
+    <view v-if="title || $slots.title" class="ml-list-menu-group-title">
+      <slot name="title">
+        <view v-if="prefixIcon" class="ml-list-menu-group-left-icon">
+          <ml-icon :className="prefixIcon"></ml-icon>
+        </view>
+        <text class="ml-list-menu-group-title-content">{{ title }}</text>
+      </slot>
+    </view>
+    <view class="ml-list-menu-group-content">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListMenuGroup',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    title: String,
+    prefixIcon: String,
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-menu-group {
+  margin: 20rpx 0;
+  background: #ffffff;
+  .ml-list-menu-group-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 70rpx;
+  }
+  .ml-list-menu-group-left-icon {
+    font-size: 38rpx;
+    flex-shrink: 0;
+    padding: 0 10rpx;
+  }
+  .ml-list-menu-group-content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

package/components/ml-list-menu-item/ml-list-menu-item.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="ml-list-menu-item" :class="className" @click="clickEvent" @tap="tapEvent">
+    <view v-if="prefixIcon" class="ml-list-menu-item-left-icon">
+      <ml-icon :className="prefixIcon"></ml-icon>
+    </view>
+    <view class="ml-list-menu-item-content">
+      <slot>
+        <text>{{ name }}</text>
+      </slot>
+    </view>
+    <view v-if="showDot" class="ml-list-menu-item-dot">
+      <text class="ml-list-menu-item-dot-num">{{ getDotNum(dotNum) }}</text>
+    </view>
+    <view class="ml-list-menu-item-right-icon">
+      <ml-icon class="right-icon" name="arrow-right"></ml-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListMenuItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    name: String,
+		prefixIcon: String,
+		suffixIcon: String,
+    url: String,
+    redirect: Boolean,
+    className: String,
+    showDot: Boolean,
+    dotNum: [String, Number]
+  },
+  methods: {
+    getDotNum (num) {
+      return num > 99 ? '99+' : num
+    },
+    clickEvent () {
+      this.$emit('click', {})
+    },
+    tapEvent () {
+      if (this.url) {
+        if (this.redirect) {
+          uni.redirectTo({
+            url: this.url
+          })
+        } else {
+          uni.navigateTo({
+            url: this.url
+          })
+        }
+      }
+      this.$emit('tap', {})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-menu-item {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 90rpx;
+  font-size: 30rpx;
+  padding: 0 20rpx;
+  background: #ffffff;
+  &:first-child {
+    border-top: 1px solid #e5e5e5;
+  }
+  .ml-list-menu-item-content {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-list-menu-item-dot {
+    position: relative;
+    flex-shrink: 0;
+    .ml-list-menu-item-dot-num {
+      background-color: #f56c6c;
+      color: #fff;
+      border-radius: 40rpx;
+      padding: 0 10rpx;
+      vertical-align: middle;
+      display: inline-block;
+      min-width: 40rpx;
+      text-align: center;
+      font-size: 22rpx;
+      line-height: 40rpx;
+    }
+  }
+  .ml-list-menu-item-left-icon,
+  .ml-list-menu-item-right-icon {
+    flex-shrink: 0;
+    padding: 0 10rpx;
+  }
+  .ml-list-menu-item-left-icon {
+    font-size: 38rpx;
+  }
+  .ml-list-menu-item-right-icon {
+    font-size: 30rpx;
+  }
+}
+</style>

package/components/ml-month-picker/ml-month-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <picker :value="value" class="ml-month-picker" :class="{'is-border': border}" mode="date" fields="month" @change="changeEvent">
+  <picker :value="value" class="ml-month-picker" :class="[className, {'is-border': border}]" mode="date" fields="month" @change="changeEvent">
 		<view class="picker-warpper">
       <view class="picker-text">{{ value || '请选择' }}</view>
       <ml-icon class="picker-icon" name="arrow-down"></ml-icon>
@@ -15,7 +15,8 @@ export default {
   },
   props: {
 		value: String,
-    border: Boolean
+    border: Boolean,
+    className: String
   },
   methods: {
     changeEvent (e) {

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

@@ -3,7 +3,7 @@
 		class="ml-number-input"
 		v-model="inpVal"
 		type="text"
-		:class="{'is-right': align === 'right', 'is-border': border}"
+		:class="[className, {'is-right': align === 'right', 'is-border': border}]"
 		autocomplete="off"
 		:placeholder="placeholder"
 		:maxlength="maxLength"
@@ -32,7 +32,8 @@ export default {
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+    className: String
 	},
 	data () {
 		return {

package/components/ml-progress-bar/ml-progress-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-progress-bar">
+  <view class="ml-progress-bar" :class="className">
     <view class="progress-bar-header">
       <slot name="header">
         <view v-if="title !== null" class="progress-bar-title" :class="{underline: titleUnderline}">{{ title }}</view>
@@ -52,7 +52,8 @@ export default {
     },
     backgroundColor: String,
     showNum: Boolean,
-    unit: String
+    unit: String,
+    className: String
   },
   computed: {
     percNum () {

package/components/ml-province-city-picker/ml-province-city-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-region-picker" :style="{width: width || '160rpx'}">
+  <view class="ml-region-picker" :class="className" :style="{width: width || '160rpx'}">
     <uni-data-picker
       v-model="selectVals"
       popup-title="请选择城市"
@@ -26,6 +26,7 @@ export default {
     city: String,
     width: String,
     optionProps: Object,
+    className: String
   },
   data () {
     return {

package/components/ml-radio/ml-radio.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio" :class="{'is-checked': checked, 'is-disabled': disabled}" @tap="tapEvent">
+	<view class="ml-radio" :class="[className, {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
     <ml-icon class="radio-icon" :name="checked ? 'radio-checked' : 'radio-unchecked'"></ml-icon>
     <text class="radio-content">
       <slot>
@@ -22,7 +22,8 @@ export default {
       default: false
     },
     disabled: Boolean,
-    content: String
+    content: String,
+    className: String
 	},
   computed: {
     checked () {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-button" :class="{'is-disabled': disabled}">
+	<view class="ml-radio-button" :class="[className, {'is-disabled': disabled}]">
     <view class="ml-radio-button-item" v-for="(item, index) in options" :class="{'is-active': value === item.value}" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
   </view>
 </template>
@@ -13,7 +13,8 @@ export default {
 	props: {
 		value: [Boolean, Number, String],
     options: Array,
-    disabled: Boolean
+    disabled: Boolean,
+    className: String
 	},
 	methods: {
 		changeEvent (option) {

package/components/ml-radio-group/ml-radio-group.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-group" :class="{'is-disabled': disabled, 'is-vertical': vertical}">
+	<view class="ml-radio-group" :class="[className, {'is-disabled': disabled, 'is-vertical': vertical}]">
     <view class="ml-radio-group-item" v-for="(item, index) in options" :key="index">
       <ml-radio :value="value" :label="item.value" :content="item.label" :disabled="disabled || item.disabled" @change="changeEvent"></ml-radio>
     </view>
@@ -16,7 +16,8 @@ export default {
 		value: [Boolean, Number, String],
     options: Array,
     disabled: Boolean,
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
 	},
 	methods: {
 		changeEvent ({ value }) {

package/components/ml-row/ml-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-row" :class="{'is-vertical': vertical}">
+  <view class="ml-row" :class="[className, {'is-vertical': vertical}]">
     <slot></slot>
   </view>
 </template>
@@ -11,7 +11,8 @@ export default {
     virtualHost: true
   },
 	props: {
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
 	}
 }
 </script>

package/components/ml-section/ml-section.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-section" :class="[type ? `type-${type}` : '']">
+  <view class="ml-section" :class="[className, type ? `type-${type}` : '']">
     <view v-if="title || $slots.header" class="ml-section-header">
       <slot name="header">
         <text class="ml-section-header-title">{{ title }}</text>
@@ -19,7 +19,8 @@ export default {
   },
 	props: {
     title: String,
-    type: String
+    type: String,
+    className: String
 	}
 }
 </script>

package/components/ml-select-picker/ml-select-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <picker class="ml-select-picker" :class="{'is-border': border}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
+  <picker class="ml-select-picker" :class="[className, {'is-border': border}]" :range="optionList" :range-key="optLabelField" @change="changeEvent">
     <view class="picker-warpper" :style="{width: width || '160rpx'}">
       <view class="picker-text">
         <text v-if="value !== null">{{ selectName }}</text>
@@ -26,7 +26,8 @@ export default {
     options: Array,
     optionProps: Object,
     width: String,
-    isAll: Boolean
+    isAll: Boolean,
+    className: String
   },
   data () {
     return {

package/components/ml-tabbar/ml-tabbar.vue

@@ -1,9 +1,9 @@
 <template>
-  <view class="ml-tabbar">
+  <view class="ml-tabbar" :class="className">
     <view class="ml-tabbar-item" v-for="(item) in options" :key="item.value" :class="{'is-active': value == item.value}" @tap="tapEvent(item)">
       <view class="ml-tabbar-icon">
         <ml-icon class="icon" :name="value == item.value ? item.activeIcon : item.icon"></ml-icon>
-        <view v-if="item.showNum && item.num > 0" class="ml-tabbar-num">{{ item.num }}</view>
+        <view v-if="item.showDot && item.dotNum > 0" class="ml-tabbar-num">{{ getDotNum(item.dotNum) }}</view>
       </view>
       <view class="ml-tabbar-name">{{ item.name }}</view>
     </view>
@@ -15,7 +15,8 @@ export default {
   name: 'MlTabbar',
   props: {
     value: [String, Number],
-    options: Array
+    options: Array,
+    className: String
   },
   data() {
     return {
@@ -45,6 +46,9 @@ export default {
         })
       }
     },
+    getDotNum (num) {
+      return num > 99 ? '99+' : num
+    },
     tapEvent (option) {
       const value = option.value
       this.updateTitle(option)

package/components/ml-table/ml-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-table" :style="{height: height ? (isNaN(height) ? height : `${height}rpx`) : ''}">
+  <view class="ml-table" :class="className" :style="{height: height ? (isNaN(height) ? height : `${height}rpx`) : ''}">
     <view class="table-header">
       <view class="table-column-header">
         <view class="table-tr">
@@ -75,6 +75,7 @@ export default {
   },
   props: {
     loading: Boolean,
+    className: String,
     height: [Number, String],
     headerData: Array,
     data: Array,

package/components/ml-tabs/ml-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-tabs">
+  <view class="ml-tabs" :class="className">
     <scroll-view scroll-x>
       <view class="ml-tabs-navs">
         <view class="ml-tabs-nav-item" v-for="(item, index) in options" :key="index" :class="{'is-active': value === item.value}" @tap="changeEvent(item)">{{ item.label }}</view>
@@ -16,7 +16,8 @@ export default {
   },
   props: {
     value: [String, Number],
-    options: Array
+    options: Array,
+    className: String
   },
   data () {
     return {}

package/components/ml-textarea/ml-textarea.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-textarea" :class="{'is-border': border}">
+	<view class="ml-textarea" :class="[className, {'is-border': border}]">
 		<view v-if="readonly" class="content">{{ inpVal }}</view>
 		<view v-else>
 			<textarea class="textarea" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
@@ -49,7 +49,8 @@ export default {
       default: false
     },
 		showVoice: Boolean,
-    fontColor: String
+    fontColor: String,
+    className: String
   },
   data () {
     return {

package/components/ml-year-picker/ml-year-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <picker :value="value" class="ml-year-picker" :class="{'is-border': border}" mode="date" fields="year" @change="changeEvent">
+  <picker :value="value" class="ml-year-picker" :class="[className, {'is-border': border}]" mode="date" fields="year" @change="changeEvent">
 		<view class="picker-warpper">
       <view class="picker-text">{{ value || '请选择' }}</view>
       <ml-icon class="picker-icon" name="arrow-down"></ml-icon>
@@ -15,7 +15,8 @@ export default {
   },
   props: {
 		value: String,
-    border: Boolean
+    border: Boolean,
+    className: String
   },
   methods: {
     changeEvent (e) {

package/package.json

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

package/components/ml-list-menu/ml-list-menu.vue

@@ -1,78 +0,0 @@
-<template>
-  <view class="ml-list-menu" @click="clickEvent" @tap="tapEvent">
-    <view v-if="prefixIcon" class="ml-list-menu-left-icon">
-      <ml-icon :className="prefixIcon"></ml-icon>
-    </view>
-    <view class="ml-list-menu-content">
-      <slot>
-        <text>{{ name }}</text>
-      </slot>
-    </view>
-    <view class="ml-list-menu-right-icon">
-      <ml-icon class="right-icon" name="arrow-right"></ml-icon>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'MlListMenu',
-  options: {
-    virtualHost: true
-  },
-  props: {
-    name: String,
-		prefixIcon: String,
-		suffixIcon: String,
-    url: String,
-    redirect: Boolean
-  },
-  methods: {
-    clickEvent () {
-      this.$emit('click', {})
-    },
-    tapEvent () {
-      if (this.url) {
-        if (this.redirect) {
-          uni.redirectTo({
-            url: this.url
-          })
-        } else {
-          uni.navigateTo({
-            url: this.url
-          })
-        }
-      }
-      this.$emit('tap', {})
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.ml-list-menu {
-  display: flex;
-  flex-direction: row;
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 90rpx;
-  font-size: 30rpx;
-  padding: 0 20rpx;
-  .ml-list-menu-content {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .ml-list-menu-left-icon,
-  .ml-list-menu-right-icon {
-    flex-shrink: 0;
-    padding: 0 10rpx;
-  }
-  .ml-list-menu-left-icon {
-    font-size: 38rpx;
-  }
-  .ml-list-menu-right-icon {
-    font-size: 30rpx;
-  }
-}
-</style>