gxd-uni-library-editx 1.0.0

package/src/components/XdLabelNew/XdLabelNew.vue

@@ -0,0 +1,193 @@
+<template>
+  <view class="xd-label">
+    <view class="xd-label__title"
+      v-if="uiLabel.length > 0"
+      :style="boxStyle"
+      :class="{
+        'left': justifyContent === 'flex-start',
+        'center': justifyContent === 'space-between',
+        'right': justifyContent === 'flex-end',
+      }"
+    >
+      <view class="xd-label__title-required" v-if="required || star" v-html="(required?'*': '&nbsp;')"></view>
+      <view
+        class="xd-label__title-text"
+        :style="{
+          fontSize: size + 'rpx',
+        }"
+      >
+        <view v-for="(item,index) in uiLabel" :key="index">{{item}}</view>
+      </view>
+      <view class="xd-label__title-icon" v-if="strIcon" :style="{fontSize: size + 'rpx'}">{{strIcon}}</view>
+    </view>
+    <view class="xd-label__content">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * XdLabelNew
+   * @description 在列表组中所有标题文字使用相同左右对齐插件，
+   * 备注：在列表组中有使用带"*"时候，不带 * 号插件中也需要传入star的值并进行占位
+   *
+   * @property {String} label 标题名称 {必填}
+   * @property {Boolean} star 不带"*"号插件对"*"号区域进行占位 默认：true
+   * @property {String|Number} size 标题文字大小，单位：rpx   默认：32
+   * @property {Boolean} required 是否带"*"号， 默认：false
+   * @property {String|Number} width 宽度值   默认：auto
+   * @property {String} color 标题文字颜色   默认：#333
+   * @property {String} justifyContent 对齐方式  默认：space-between  其值：flex-start，flex-end ,space-between
+   *
+   * @slot 支持插槽（1个插槽） 默认
+   */
+  export default {
+    name: "XdLabel",
+    props: {
+      label: {
+        type: String,
+        required: true
+      },
+      star: {
+        type: Boolean,
+        default: false
+      },
+      size: {
+        type: String | Number, //rpx
+        default: 30,
+      },
+      required: {
+        type: Boolean,
+        default: false
+      },
+      color: {
+        type: String,
+        default: '#333'
+      },
+      width: {
+        type: String | Number, //rpx
+        default: 'auto',
+      },
+      justifyContent: {
+        type: String,
+        default: 'space-between', //flex-start，flex-end ,space-between
+      }
+    },
+    data(){
+      return {
+        uiWidth: 0,
+        uiLabel: [],
+        strIcon: '',
+        boxStyle: '',
+      }
+    },
+    created() {
+      this.uiWidth = this.width;
+      let reg = /^(([0-9]+)|(auto)+|(([0-9\.]+)%)+)$/; //数字|%|auto
+      let reg1 = /^([0-9])+$/; //数字类格式
+      if(!reg.test(this.width)) {
+        throw new Error(`width格式错误, 当前值为:${this.width}`);
+      }
+
+      //两端对齐方式检查
+      if((this.justifyContent === 'space-between' || this.justifyContent === 'flex-end')
+        && this.width === 'auto') {
+        throw new Error(`lable=${this.label}列配置错误，设置两端对齐,右对齐方式，必须设置元素宽度`)
+      }
+
+      //数字类型
+      if(reg1.test(this.width)) {
+        if(this.$xdUniHelper.checkVarType(this.width) === 'string' ) {
+          this.uiWidth = Number(this.width);
+        }
+        this.uiWidth = `${this.uiWidth}rpx`
+      }
+
+      let reg2 = /.*([:：])$/;
+      let name = this.label.replace(/[:：]/g, '：')
+      if (reg2.test(name) && this.justifyContent === 'space-between') {
+        this.strIcon = '：';
+        this.uiLabel = name.replace(/[:：]/g, '').split('');
+      } else {
+        this.uiLabel = name.split('');
+      }
+      this.boxStyle = `color:${this.color};`;
+      if(this.justifyContent === 'space-between' || this.justifyContent === 'flex-end' ) {
+        this.boxStyle = `${this.boxStyle}width: ${this.uiWidth};`
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+
+    &__title {
+      display: flex;
+      align-items: center;
+      padding-right: unit(10, rpx);
+      box-sizing: border-box;
+      flex-shrink: 0;
+
+      &-text {
+        display: flex;
+        align-items: center;
+      }
+
+      &-icon {
+        flex-shrink: 0;
+      }
+
+      &-required {
+        color: red;
+        padding-right: unit(10, rpx);
+        width: unit(20, rpx);
+      }
+
+      &.center {
+        justify-content: space-between;
+      }
+
+      &.center > &-text {
+        justify-content: space-between;
+        flex: 1;
+      }
+
+      &.center > &-required {
+        flex-shrink: 0;
+      }
+
+      &.left {
+        justify-content: flex-start;
+      }
+
+      &.left > &-text {
+        justify-content: flex-start;
+      }
+
+      &.left > &-required {
+        flex-shrink: 0;
+      }
+
+      &.right {
+        justify-content: flex-end;
+      }
+
+      &.right > &-text {
+        justify-content: flex-end;
+      }
+
+    }
+
+
+    &__content {
+      flex: 1;
+      width: 0;
+    }
+  }
+</style>