mali-applet-ui 0.0.36 → 0.0.39

package/components/ml-approval-type/ml-approval-type.vue

@@ -0,0 +1,50 @@
+<template>
+  <view class="ml-approval-type" :class="className" :style="styles">{{ currLabel }}</view>
+</template>
+
+<script>
+export default {
+  name: 'MlApprovalType',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [String, Number],
+    className: String
+  },
+  data () {
+    return {
+      statusList: [
+        { value: 0, label: '起草中', color: '' },
+        { value: 1, label: '审批中', color: '#09B2FE' },
+        { value: 2, label: '已通过', color: '#42E38D' },
+        { value: 3, label: '已驳回', color: '#FF4A4A' },
+        { value: 4, label: '会签中', color: '#F4788E' },
+        { value: 5, label: '处理中', color: '#FFA500' },
+        { value: 6, label: '已完成', color: '#2497FF' }
+      ]
+    }
+  },
+  computed: {
+    selectItem () {
+      return this.statusList.find(item => String(item.value) === String(this.value))
+    },
+    currLabel () {
+      return this.selectItem ? this.selectItem.label : ''
+    },
+    styles () {
+      return this.selectItem && this.selectItem.color? `background:${this.selectItem.color};` : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-approval-type {
+  display: inline-block;
+  color: #ffffff;
+  padding: 6rpx 18rpx;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+}
+</style>

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

@@ -18,10 +18,23 @@ export default {
       type: String,
       default: 'button'
     },
+    redirect: Boolean,
+    url: String,
     className: String
   },
   methods: {
     tapEvent () {
+      if (this.url) {
+        if (this.redirect) {
+          uni.redirectTo({
+            url: this.url
+          })
+        } else {
+          uni.navigateTo({
+            url: this.url
+          })
+        }
+      }
       this.$emit('tap', {})
     },
     clickEvent () {

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

@@ -1,7 +1,9 @@
 <template>
 	<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">
+    <text class="ml-checkbox-icon">
+      <ml-icon :name="checked ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
+    </text>
+    <text class="ml-checkbox-content">
       <slot>
         <text>{{ content }}</text>
       </slot>
@@ -56,7 +58,7 @@ export default {
   &.is-checked {
     color: $uni-color-primary;
   }
-  .checkbox-icon {
+  .ml-checkbox-icon {
     display: inline-block;
     width: 40rpx;
     margin-right: 5rpx;

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

@@ -47,7 +47,7 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 70rpx;
+    height: 80rpx;
     padding: 0 20rpx ;
   }
   .ml-chunk-group-left-icon {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-chunk-item" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles">
+  <view class="ml-chunk-item" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles" @click="clickEvent" @tap="tapEvent">
     <slot></slot>
   </view>
 </template>
@@ -29,6 +29,14 @@ export default {
     styles () {
       return this.width ? `width: ${this.width};` : '' 
     }
+  },
+  methods: {
+    clickEvent () {
+      this.$emit('click', {})
+    },
+    tapEvent () {
+      this.$emit('tap', {})
+    }
   }
 }
 </script>
@@ -37,7 +45,7 @@ export default {
 .ml-chunk-item {
   display: flex;
   flex-direction: column;
-  padding: 10rpx;
+  padding: 20rpx 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%,

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-col" :class="[className || '', 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}` : '', {'is-flex': flex,'is-fixed': width || shrink}]" :style="styles">
     <slot></slot>
   </view>
 </template>
@@ -12,6 +12,8 @@ export default {
   },
 	props: {
     span: [String, Number],
+    flex: Boolean,
+    shrink: Boolean,
     align: String,
     width: String,
     className: String
@@ -29,6 +31,19 @@ export default {
   $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%;
+  &.is-flex {
+    display: flex;
+    flex-direction: row;
+    &.align-left {
+      justify-content: left;
+    }
+    &.align-center {
+      justify-content: center;
+    }
+    &.align-right {
+      justify-content: right;
+    }
+  }
   &.align-left {
     text-align: left;
   }

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

@@ -1,6 +1,6 @@
 <template>
-  <view class="ml-form" :class="[className || '', {'is-vertical': vertical}]">
-    <uni-forms ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
+  <view class="ml-form" :class="[className || '']">
+    <uni-forms :key="fKey" ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
       <slot></slot>
     </uni-forms>
   </view>
@@ -19,10 +19,17 @@ export default {
     items: Array,
     rules: Object,
     vertical: Boolean,
+    labelWidth: String,
     className: String
   },
+  provide() {
+    return {
+      mlForm: this
+    }
+  },
   data () {
     return {
+      fKey: 1
     }
   },
   computed: {
@@ -38,6 +45,11 @@ export default {
       return rest
     }
   },
+  created () {
+    this.$nextTick(() => {
+      this.fKey++
+    })
+  },
   methods: {
     matchComponent (item, name) {
       return item.itemRender && item.itemRender.name === name

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

@@ -0,0 +1,26 @@
+<template>
+  <view class="ml-form-group" :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlFormItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-form-group {
+  margin: 10rpx 0;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  background: #ffffff;
+}
+</style>

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

@@ -1,5 +1,11 @@
 <template>
-  <uni-forms-item :class="className" :label="title" :name="field">
+  <uni-forms-item
+    ref="uniFormItem"
+    :class="className"
+    :label="title"
+    :name="field"
+    :label-width="itemLabelWidth"
+    :label-position="itemVertical">
     <slot></slot>
   </uni-forms-item>
 </template>
@@ -13,7 +19,52 @@ export default {
   props: {
     title: String,
     field: String,
+    vertical: {
+      type: Boolean,
+       default: null
+    },
+    labelWidth: String,
     className: String
+  },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+  computed: {
+    itemVertical () {
+      let vertical = this.vertical
+      if (!vertical) {
+        vertical = this.form ? this.form.vertical : ''
+      }
+      return vertical ? 'top' : 'left'
+    },
+    itemLabelWidth () {
+      let labelWidth = this.labelWidth
+      if (!labelWidth) {
+        labelWidth = this.form ? this.form.labelWidth : ''
+      }
+      if (labelWidth && !isNaN(labelWidth)) {
+        labelWidth = `${labelWidth}rpx`
+      }
+      return labelWidth
+    }
+  },
+  created () {
+    this.init()
+  },
+  watch: {
+    itemVertical () {
+      this.init()
+    }
+  },
+  methods: {
+    init () {
+      this.$nextTick(() => {
+        this.$refs.uniFormItem.localLabelPos = this.itemVertical
+      })
+    }
   }
 }
 </script>

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

@@ -10,7 +10,8 @@
 			class="ml-input-inp"
 			autocomplete="off"
 			:placeholder="placeholder"
-			@input="inputEvent" />
+			@input="inputEvent" 
+			@confirm="confirmEvent"/>
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
 			<ml-icon :class="suffixIcon"></ml-icon>
 		</view>
@@ -55,6 +56,10 @@ export default {
 			const value = this.inpVal
 			this.$emit('input', value)
 			this.$emit('change', { value })
+		},
+		confirmEvent () {
+			const value = this.inpVal
+			this.$emit('confirm', { value })
 		}
 	}
 }
@@ -64,11 +69,11 @@ export default {
 .ml-input {
 	display: flex;
 	flex-direction: row;
-	font-size: $uni-font-size-base;
 	.ml-input-inp {
 		padding: 0 20rpx;
 		height: 70rpx;
 		width: 100%;
+		font-size: $uni-font-size-base;
 	}
 	.ml-input-prefix-icon,
 	.ml-input-suffix-icon {
@@ -76,6 +81,7 @@ export default {
 		flex-shrink: 0;
     align-items: center;
     border: 1px solid #e5e5e5;
+		font-size: 30rpx;
 	}
 	.ml-input-prefix-icon {
 		padding-left: 20rpx;

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

@@ -0,0 +1,32 @@
+<template>
+  <view class="ml-list-group" :class="className">
+    <view class="ml-list-group-content">
+      <scroll-view scroll-y>
+        <slot></slot>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListGroup',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    title: String,
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-group {
+  padding: 0 10rpx;
+  .ml-list-group-content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <view class="ml-list-item" :class="className" @click="clickEvent" @tap="tapEvent">
+    <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-item-left-icon">
+      <ml-icon :className="prefixIcon"></ml-icon>
+    </view>
+    <view class="ml-list-item-content">
+      <slot>
+        <text>{{ name }}</text>
+      </slot>
+    </view>
+    <view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-list-item-right-icon">
+      <ml-icon :className="suffixIcon"></ml-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    name: String,
+		prefixIcon: String,
+		suffixIcon: {
+      type: String,
+      default: 'mlicon-arrow-right'
+    },
+    url: String,
+    redirect: Boolean,
+    className: String
+  },
+  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-item {
+  display: flex;
+  flex-direction: row;
+  padding: 20rpx;
+  margin: 10rpx 0;
+  border-radius: 10rpx;
+  background: #ffffff;
+  .ml-list-item-content {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-list-item-left-icon,
+  .ml-list-item-right-icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 10rpx;
+  }
+  .ml-list-item-left-icon {
+    font-size: 38rpx;
+  }
+  .ml-list-item-right-icon {
+    font-size: 30rpx;
+  }
+}
+</style>

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

@@ -1,8 +1,8 @@
 <template>
-  <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>
+  <picker :value="value" class="ml-month-picker" mode="date" fields="month" @change="changeEvent">
+		<view class="ml-month-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-month-picker-text">{{ value || '请选择' }}</view>
+      <ml-icon class="ml-month-picker-icon" name="arrow-down"></ml-icon>
     </view>
 	</picker>
 </template>
@@ -30,34 +30,33 @@ export default {
 
 <style lang="scss">
 .ml-month-picker {
-  font-size: 14px;
+  display: inline-block;
+	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0 5px;
-  padding-left: 10px;
+  padding: 0;
   position: relative;
-  display: flex;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 35px;
-  width: 240rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-month-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 194rpx;
-  }
-  .picker-text {
-    flex-grow: 1;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-month-picker-text {
+  flex-grow: 1;
+}
+.ml-month-picker-icon {
+  color: #6a6a6a;
 }
 </style>

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

@@ -1,7 +1,9 @@
 <template>
 	<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">
+    <text class="ml-radio-icon">
+      <ml-icon :name="checked ? 'radio-checked' : 'radio-unchecked'"></ml-icon>
+    </text>
+    <text class="ml-radio-content">
       <slot>
         <text>{{ content }}</text>
       </slot>
@@ -47,7 +49,7 @@ export default {
   &.is-checked {
     color: $uni-color-primary;
   }
-  .radio-icon {
+  .ml-radio-icon {
     font-size: 1.1em;
     margin-right: 10rpx;
   }

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

@@ -21,6 +21,7 @@ export default {
 .ml-row {
   display: flex;
   flex-direction: row;
+  flex-grow: 1;
   &.is-vertical {
     flex-direction: column;
   }

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

@@ -1,11 +1,13 @@
 <template>
-  <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">
+  <picker class="ml-select-picker" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
+    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-select-picker-text">
         <text v-if="value !== null">{{ selectName }}</text>
         <text v-else class="picker-placeholder">{{ placeholder }}</text>
       </view>
-      <ml-icon class="picker-icon" name="arrow-down" />
+      <view class="ml-select-picker-icon">
+        <ml-icon name="arrow-down" />
+      </view>
     </view>
   </picker>
 </template>
@@ -76,35 +78,37 @@ export default {
 
 <style lang="scss">
 .ml-select-picker {
+  display: inline-block;
 	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 8rpx;
-  padding: 0 10rpx;
-  padding-left: 20rpx;
+  padding: 0;
   position: relative;
-  display: inline-flex;;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 70rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-select-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .picker-text {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-select-picker-text {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ml-select-picker-icon {
+  display: inline;
+  color: #6a6a6a;
 }
 </style>

package/components/ml-status-tag/ml-status-tag.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="ml-status-tag" :class="[className, status ? `status-${status}` : '']" :style="styles">
+    <slot>
+      <text>{{ content }}</text>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlStatusTag',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    color: String,
+    content: String,
+    status: String,
+    className: String
+  },
+  computed: {
+    styles () {
+      return this.color ? `background:${this.color};` : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-status-tag {
+  display: inline-block;
+  color: #ffffff;
+  padding: 6rpx 18rpx;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+  &.status-primary {
+    background: $uni-color-primary;
+  }
+  &.status-success {
+    background: $uni-color-success;
+  }
+  &.status-info {
+    background: #909399;
+  }
+  &.status-warning {
+    background: $uni-color-warning;
+  }
+  &.status-danger {
+    background: $uni-color-error;
+  }
+}
+</style>

package/components/ml-switch/ml-switch.vue

@@ -0,0 +1,27 @@
+<template>
+  <switch class="ml-switch" :class="className" :checked="value" :color="color" @change="changeEvent"></switch>
+</template>
+
+<script>
+export default {
+  name: 'MlSwitch',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: Boolean,
+    color: {
+      type: String,
+      default: '#007aff'
+    },
+    className: String
+  },
+  methods: {
+    changeEvent (e) {
+      const value = e.detail.value
+      this.$emit('input', value)
+      this.$emit('change', { value })
+    }
+  }
+}
+</script>

package/components/ml-tab-pane/ml-tab-pane.vue

@@ -0,0 +1,35 @@
+<template>
+  <view v-if="selectTab === name" class="ml-tab-pane" :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlTabPane',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    name: [String, Number],
+    className: String
+  },
+  inject: {
+    tabs: {
+      from: 'mlTabs',
+      default: null
+    }
+  },
+  computed: {
+    selectTab () {
+      return this.tabs ? this.tabs.value : null
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-tab-pane {
+  display: block;
+}
+</style>

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

@@ -1,10 +1,19 @@
 <template>
   <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>
-      </view>
-    </scroll-view>
+    <view class="ml-tabs-header">
+      <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}" :style="itemStyles" @tap="changeEvent(item)">
+            <view class="ml-tabs-nav-title">{{ item.label }}</view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    <view class="ml-tabs-content">
+      <scroll-view scroll-y>
+        <slot></slot>
+      </scroll-view>
+    </view>
   </view>
 </template>
 
@@ -17,11 +26,22 @@ export default {
   props: {
     value: [String, Number],
     options: Array,
-    className: String
+    className: String,
+    itemWidth: String
+  },
+  provide() {
+    return {
+      mlTabs: this
+    }
   },
   data () {
     return {}
   },
+  computed: {
+    itemStyles () {
+      return this.itemWidth ? `width:${this.itemWidth};` : ''
+    }
+  },
   methods: {
     changeEvent (item) {
       const value = item.value
@@ -35,17 +55,21 @@ export default {
 <style lang="scss">
 .ml-tabs {
   .ml-tabs-navs {
-    display: inline-block;
     white-space: nowrap;
   }
   .ml-tabs-nav-item {
     position: relative;
     display: inline-block;
-    padding: 10rpx 20rpx;
-    margin: 0 10rpx;
+    padding: 10rpx 20rpx 0 20rpx;
+    text-align: center;
+    .ml-tabs-nav-title {
+      padding: 10rpx 20rpx;
+    }
     &.is-active {
-      color: $uni-color-primary;
-      border-bottom: 1px solid $uni-color-primary;
+      .ml-tabs-nav-title {
+        color: $uni-color-primary;
+        border-bottom: 2px solid $uni-color-primary;
+      }
     }
   }
 }

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

@@ -1,11 +1,11 @@
 <template>
 	<view class="ml-textarea" :class="[className || '', {'is-border': border}]">
-		<view v-if="readonly" class="content">{{ inpVal }}</view>
+		<view v-if="readonly" class="ml-textarea-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>
-			<view v-if="showWordLimit" class="word-count">
-				<VoiceInput v-if="showVoice" class="word-voice" v-model="inpVal" @input="inputEvent"></VoiceInput>
-				<view class="word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
+			<textarea class="ml-textarea-inp" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
+			<view v-if="showWordLimit" class="ml-textarea-word-count">
+				<VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput>
+				<view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
 			</view>
 		</view>
 	</view>
@@ -80,26 +80,27 @@ export default {
 <style lang="scss">
 .ml-textarea {
 	font-size: $uni-font-size-base;
-  padding: 20rpx 10rpx 10rpx 30rpx;
+  padding: 20rpx 10rpx 10rpx 20rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
     border-radius: 10rpx;
   }
-  & > .content {
+  .ml-textarea-content {
     width: 100%;
     overflow: auto;
     word-break: break-all;
   }
-  .textarea {
+  .ml-textarea-inp {
     color: rgba(39, 42, 48, 0.4500);
     height: 280rpx;
     width: 100%;
+		font-size: $uni-font-size-base;
   }
-  .word-count {
+  .ml-textarea-word-count {
     padding-top: 10rpx;
     display: flex;
   }
-  .word-numbers {
+  .ml-textarea-word-numbers {
     flex-grow: 1;
     color: #999999;
     text-align: right;

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

@@ -1,8 +1,8 @@
 <template>
-  <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>
+  <picker :value="value" class="ml-year-picker"  mode="date" fields="year" @change="changeEvent">
+		<view class="ml-year-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-year-picker-text">{{ value || '请选择' }}</view>
+      <ml-icon class="ml-year-picker-icon" name="arrow-down"></ml-icon>
     </view>
 	</picker>
 </template>
@@ -30,34 +30,33 @@ export default {
 
 <style lang="scss">
 .ml-year-picker {
-  font-size: 14px;
+  display: inline-block;
+	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0 5px;
-  padding-left: 10px;
+  padding: 0;
   position: relative;
-  display: flex;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 35px;
-  width: 240rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-year-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 194rpx;
-  }
-  .picker-text {
-    flex-grow: 1;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-year-picker-text {
+  flex-grow: 1;
+}
+.ml-year-picker-icon {
+  color: #6a6a6a;
 }
 </style>

package/package.json

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

package/components/ml-fixed-bottom/ml-fixed-bottom.vue

@@ -1,33 +0,0 @@
-<template>
-  <view class="ml-fixed-bottom" :class="[className || '']" :style="styles">
-    <slot></slot>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'MlFixedBottom',
-  options: {
-    virtualHost: true
-  },
-  props: {
-    bottom: String,
-    className: String
-  },
-  computed: {
-    styles () {
-      return this.bottom ? `bottom:${this.bottom};` : ''
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.ml-fixed-bottom {
-  display: flex;
-  flex-direction: row;
-  position: fixed;
-  width: 100%;
-  bottom: 40rpx;
-}
-</style>