@10yun/cv-mobile-ui 0.5.3 → 0.5.4

package/ui-cv/cv-form-item/cv-form-item.vue

@@ -451,7 +451,8 @@ export default {
   align-items: center;
   width: 65px;
   padding: 5px 0;
-  height: 36px;
+  min-height: 36px;
+  font-weight: 500;
 }
 
 .cv-form-item__label .label-text {
@@ -467,11 +468,13 @@ export default {
   /* #ifndef APP-NVUE */
   width: 100%;
   box-sizing: border-box;
-  min-height: 36px;
+  min-height: 40px;
   /* #endif */
   flex: 1;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
 }
 
 .label-icon {

package/ui-cv/cv-geo-local/cv-geo-local.vue

@@ -1,9 +1,10 @@
 <template>
   <view class="cv-geo-local-wrap">
-    <view class="cv-geo-local" ref="onEmpty">
+    <view class="cv-geo-local-info" ref="onEmpty">
       <textarea
-        class="cv-geo-local-item"
+        class="cv-geo-local-content"
         v-model="localVal"
+        :value="localVal"
         :maxlength="maxlength"
         :placeholder="placeholder"
         placeholder-class="cv-geo-local-placeholder"
@@ -16,41 +17,60 @@
     </view>
     <view class="cv-geo-local-map" v-if="isShowMap">
       <map
-        style="width: 100%; height: 342rpx"
+        style="width: 100%; height: 170px"
         :longitude="map_location.longitude"
         :latitude="map_location.latitude"
-        :scale="scale"
+        :scale="localScale"
         show-location
         :markers="markers"
       ></map>
     </view>
   </view>
 </template>
-
 <script>
-import MixinsInput from '../mixins/mixins-input.js';
 export default {
-  mixins: [MixinsInput],
   name: 'cvGeoLocal',
   options: {
     addGlobalClass: true
   },
   props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    modelValue: {
+      type: [Number, String],
+      default: ''
+    },
     placeholder: {
-      type: String,
-      default: '小区、门牌号等'
+      type: [String],
+      default: '请输入定位地址'
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    clearable: {
+      type: [Boolean],
+      default: false
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 5
     },
     isShowMap: {
       type: Boolean,
-      default() {
-        return false;
-      }
+      default: false
     },
     location: {
       type: Object,
       default() {
         return {};
       }
+    },
+    scale: {
+      type: [Number, String],
+      default: 14
     }
   },
   watch: {
@@ -69,7 +89,15 @@ export default {
         this.initLocation();
       }
     },
-    value(n) {
+    value(newVal) {
+      this.localVal = newVal;
+      if (this.isShowMap) {
+        console.log('change:value');
+        this.initLocation();
+      }
+    },
+    modelValue(newVal) {
+      this.localVal = newVal;
       if (this.isShowMap) {
         console.log('change:value');
         this.initLocation();
@@ -78,37 +106,92 @@ export default {
   },
   data() {
     return {
+      localStyle: '',
+      localVal: '',
       markers: [],
       //当前选择的位置
-      scale: 12,
+      localScale: 14,
       map_location: {
-        longitude: 116.397486,
-        latitude: 39.90865
-      }
+        longitude: 119.296411,
+        latitude: 26.074286
+      },
+      parentObj: null
     };
   },
   created() {
+    this.localVal = this.doValueGet();
+    this.localScale = this.scale;
     this.initLocation();
   },
+  mounted() {
+    this.parentObj = this.getParent();
+    this._itemStyle();
+    console.log(this.parentObj);
+  },
   methods: {
+    doValueGet() {
+      if (this.value === '') return this.modelValue;
+      if (this.modelValue === '') return this.value;
+      return this.value;
+    },
+    /**
+     * 获取父元素实例
+     */
+    getParent(name = 'cvFormItem') {
+      let parent = this.$parent;
+      let parentName = parent.$options.name;
+      while (parentName !== name) {
+        parent = parent.$parent;
+        if (!parent) return false;
+        parentName = parent.$options.name;
+      }
+      return parent;
+    },
+    _itemStyle() {
+      /**计算label宽度 */
+      let styleWidth = '';
+      if (this.parentObj.labelPosition) {
+        styleWidth = 'width:calc( 100% - 33px);';
+      } else {
+        let itemWidth = this.parentObj.labelWidth || 70;
+        styleWidth = `width:calc( 100% - 33px - ${itemWidth}px);`;
+      }
+      this.localStyle = styleWidth;
+    },
+    onBlur(e) {
+      this.localVal = e.detail.value;
+      this.funcOnInput();
+    },
+    funcOnInput(e) {
+      console.log('-----funcOnInput---', this.localVal);
+      this.$emit('input', this.localVal);
+      this.$emit('update:modelValue', this.localVal);
+    },
+    /* 监听自己清除按钮点击事件 */
+    onEmpty() {
+      this.localVal = '';
+      this.funcOnInput();
+    },
     initLocation() {
       if (this.location.longitude && this.location.latitude) {
         this.map_location = this.location;
       }
-      if (this.value) {
-        this.$set(this.map_location, 'address', this.value);
+      console.log('--', this.map_location);
+      if (this.localVal) {
+        this.$set(this.map_location, 'address', this.localVal);
       }
     },
     chooseLocation() {
       uni.chooseLocation({
         keyword: '小区 写字楼', //搜索关键字，仅App平台支持
         success: (res) => {
+          console.log(res);
           if (res.errMsg == 'chooseLocation:ok') {
-            this.localVal = res.address;
+            this.localVal = res.address || '';
             this.map_location = { ...res };
-            this.scale = 16;
+            this.localScale = 16;
             this.$emit('location', { ...res });
-            this.$emit('input', this.localVal);
+            this.funcOnInput();
           }
         }
       });
@@ -138,9 +221,18 @@ export default {
 <style>
 .cv-geo-local-wrap {
   display: contents;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.cv-geo-local-info {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
-.cv-geo-local-item {
-  min-height: 60px;
+.cv-geo-local-content {
+  min-height: 46px;
   line-height: 1.5em;
   font-size: 14px;
   padding: 7px 30px 0 0;
@@ -148,8 +240,8 @@ export default {
 }
 .cv-geo-local-rtip {
   color: #999;
-  width: 50rpx;
-  padding: 10rpx 0rpx 10rpx 0;
+  width: 25px;
+  padding: 5 0 5 0;
   position: absolute;
   right: 0;
   top: -7px;
@@ -167,7 +259,6 @@ export default {
   right: 3px;
 }
 .cv-geo-local-map {
-  padding: 10px 15px;
   background-color: #ffffff;
 }
 </style>

package/ui-cv/{cv-picker-region/cv-picker-region.vue → cv-geo-region/cv-geo-region.vue}

@@ -20,20 +20,20 @@
     </picker>
   </view>
 </template>
-
 <script>
-import MixinsPicker from '../mixins/mixins-picker.js';
 import province from '../dict/area-province.js';
 import city from '../dict/area-city.js';
 import county from '../dict/area-county.js';
 export default {
-  mixins: [MixinsPicker],
   name: 'cvPickerRegion',
   props: {
-    //默认输入框内容
     value: {
-      type: Array,
-      default: () => {}
+      type: [Array, Object],
+      default: () => []
+    },
+    modelValue: {
+      type: [Array, Object],
+      default: () => []
     },
     dataType: {
       type: String,
@@ -42,18 +42,27 @@ export default {
     joint: {
       type: String,
       default: ''
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      default: '请选择'
     }
   },
   watch: {
     value(newVal) {
       this.localVal = newVal;
       this.itemsSortOut();
+    },
+    modelValue(newVal) {
+      this.localVal = newVal;
+      this.itemsSortOut();
     }
   },
   data() {
     return {
       iconTop: false,
-      localVal: '',
+      localVal: [],
       range_data: [], //弹窗临时数组
       last_range_data: [], //最终显示页面数组
       items_index: [0, 0, 0], //当前下标
@@ -67,11 +76,20 @@ export default {
     };
   },
   created() {
-    this.localVal = this.value;
+    this.localVal = this.doValueGet();
     this.localDataType = this.dataType != 'value' ? 'text' : 'value';
     this.itemsSortOut();
   },
   methods: {
+    doValueGet() {
+      if (this.value === '' || (Array.prototype.isPrototypeOf(this.value) && this.value.length === 0)) {
+        return this.modelValue;
+      }
+      if (this.modelValue === '' || (Array.prototype.isPrototypeOf(this.modelValue) && this.modelValue.length === 0)) {
+        return this.value;
+      }
+      return this.value;
+    },
     initReginData(data) {
       let localData = [];
       for (const key in data) {
@@ -137,6 +155,9 @@ export default {
       this.updatelocalVal();
       this.iconTop = false;
     },
+    changeIconTop() {
+      this.iconTop = true;
+    },
     /* 取消选择 */
     onCancel(e) {
       this.iconTop = false;
@@ -188,6 +209,7 @@ export default {
         value[2] = this.range_data[2][items_index[2]].value;
       }
       this.$emit('input', value);
+      this.$emit('update:modelValue', value);
 
       // 把选中的3个数组传递出去
 

package/ui-cv/cv-input-digit/cv-input-digit.vue

@@ -24,9 +24,7 @@
 </template>
 
 <script>
-import MixinsInput from '../mixins/mixins-input.js';
 export default {
-  mixins: [MixinsInput],
   name: 'cvInputDigit',
   inject: {
     cvFormGroup: {
@@ -36,18 +34,83 @@ export default {
     }
   },
   props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    modelValue: {
+      type: [Number, String],
+      default: ''
+    },
     placeholder: {
       type: [String],
       default: '请输入数字'
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    clearable: {
+      type: [Boolean],
+      default: false
+    },
+    maxlength: {
+      type: [Number, String],
+      default: -1
     }
   },
   // 监听动态数据变化
-  watch: {},
+  watch: {
+    value(newVal) {
+      this.localVal = newVal;
+    },
+    modelValue(newVal) {
+      this.localVal = newVal;
+    }
+  },
   data() {
-    return {};
+    return {
+      localStyle: '',
+      localVal: ''
+    };
+  },
+  created() {
+    this.localVal = this.doValueGet();
+  },
+  mounted() {
+    this._itemStyle();
   },
-  created() {},
-  methods: {}
+  methods: {
+    doValueGet() {
+      if (this.value === '') return this.modelValue;
+      if (this.modelValue === '') return this.value;
+      return this.value;
+    },
+    _itemStyle() {
+      /* 计算输入框右侧预留空间 */
+      let paddingRight = 0;
+      if (this.$slots['append']) {
+        paddingRight += 20;
+      }
+      if (this.clearable) {
+        paddingRight += 30;
+      }
+      this.localStyle = 'margin-right:' + paddingRight + 'px;';
+    },
+    onBlur(e) {
+      this.localVal = e.detail.value;
+      this.funcOnInput();
+    },
+    funcOnInput(e) {
+      this.$emit('input', this.localVal);
+      this.$emit('update:modelValue', this.localVal);
+    },
+    /* 监听自己清除按钮点击事件 */
+    onEmpty() {
+      this.localVal = '';
+      this.funcOnInput();
+    }
+  }
 };
 </script>
 <style>

package/ui-cv/cv-input-idcard/cv-input-idcard.vue

@@ -20,9 +20,7 @@
 </template>
 
 <script>
-import MixinsInput from '../mixins/mixins-input.js';
 export default {
-  mixins: [MixinsInput],
   name: 'cvInputIdcard',
   inject: {
     cvFormGroup: {
@@ -32,22 +30,87 @@ export default {
     }
   },
   props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    modelValue: {
+      type: [Number, String],
+      default: ''
+    },
     placeholder: {
       type: [String],
       default: '请输入身份证'
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    clearable: {
+      type: [Boolean],
+      default: false
+    },
+    maxlength: {
+      type: [Number, String],
+      default: -1
     }
   },
   data() {
-    return {};
+    return {
+      localStyle: '',
+      localVal: ''
+    };
   },
-  watch: {},
-  created() {},
-  methods: {}
+  watch: {
+    value(newVal) {
+      this.localVal = newVal;
+    },
+    modelValue(newVal) {
+      this.localVal = newVal;
+    }
+  },
+  created() {
+    this.localVal = this.doValueGet();
+  },
+  mounted() {
+    this._itemStyle();
+  },
+  methods: {
+    doValueGet() {
+      if (this.value === '') return this.modelValue;
+      if (this.modelValue === '') return this.value;
+      return this.value;
+    },
+    _itemStyle() {
+      /* 计算输入框右侧预留空间 */
+      let paddingRight = 0;
+      if (this.$slots['append']) {
+        paddingRight += 20;
+      }
+      if (this.clearable) {
+        paddingRight += 30;
+      }
+      this.localStyle = 'margin-right:' + paddingRight + 'px;';
+    },
+    onBlur(e) {
+      this.localVal = e.detail.value;
+      this.funcOnInput();
+    },
+    funcOnInput(e) {
+      this.$emit('input', this.localVal);
+      this.$emit('update:modelValue', this.localVal);
+    },
+    /* 监听自己清除按钮点击事件 */
+    onEmpty() {
+      this.localVal = '';
+      this.funcOnInput();
+    }
+  }
 };
 </script>
 <style>
 .cv-input__content {
-  height: 36px;
+  min-height: 36px;
   line-height: 36px;
   font-size: 14px;
 }

package/ui-cv/cv-input-number/cv-input-number.vue

@@ -22,11 +22,8 @@
     </view>
   </view>
 </template>
-
 <script>
-import MixinsInput from '../mixins/mixins-input.js';
 export default {
-  mixins: [MixinsInput],
   name: 'cvInputNumber',
   inject: {
     cvFormGroup: {
@@ -36,23 +33,76 @@ export default {
     }
   },
   props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    modelValue: {
+      type: [Number, String],
+      default: ''
+    },
     placeholder: {
       type: [String],
       default: '请输入数字'
+    },
+    disabled: {
+      type: [Boolean],
+      default: false
+    },
+    clearable: {
+      type: [Boolean],
+      default: false
+    },
+    maxlength: {
+      type: [Number, String],
+      default: -1
     }
   },
   data() {
-    return {};
+    return {
+      localStyle: '',
+      localVal: ''
+    };
   },
   watch: {
     value(newVal) {
       this.localVal = this._dealValue(newVal);
+    },
+    modelValue(newVal) {
+      this.localVal = this._dealValue(newVal);
     }
   },
   created() {
-    this.localVal = this._dealValue(this.value);
+    // this.localVal = this._dealValue(this.value);
+  },
+  mounted() {
+    this._itemStyle();
   },
   methods: {
+    _itemStyle() {
+      /* 计算输入框右侧预留空间 */
+      let paddingRight = 0;
+      if (this.$slots['append']) {
+        paddingRight += 20;
+      }
+      if (this.clearable) {
+        paddingRight += 30;
+      }
+      this.localStyle = 'margin-right:' + paddingRight + 'px;';
+    },
+    onBlur(e) {
+      this.localVal = e.detail.value;
+      this.funcOnInput();
+    },
+    funcOnInput(e) {
+      this.$emit('input', this.localVal);
+      this.$emit('update:modelValue', this.localVal);
+    },
+    /* 监听自己清除按钮点击事件 */
+    onEmpty() {
+      this.localVal = '';
+      this.funcOnInput();
+    },
     _dealValue(value) {
       if (Object.prototype.toString.call(value) === '[object Number]') {
         return value.toString();
@@ -66,7 +116,7 @@ export default {
 
 <style>
 .cv-input__content {
-  height: 36px;
+  min-height: 36px;
   line-height: 36px;
   font-size: 14px;
 }