gxd-uni-library-editx 1.0.0

package/src/components/XdTabScroll/XdTabScroll.vue

@@ -0,0 +1,212 @@
+<template>
+	<view class="xd-tab-scroll"
+    :style="{
+      width: width,
+      margin: '0 auto'
+    }"
+  >
+		<scroll-view
+      class="xd-tab-scroll__box"
+      scroll-x
+      :scroll-with-animation="true"
+      :scroll-into-view="toView"
+    >
+      <view class="xd-tab-scroll__list">
+        <slot>
+          <view
+            v-for="(item,index) in uiList"
+            :key="index"
+            :id="`${toViewFix}-${index}`"
+            :style="getItemStyle"
+            @click="clickTab(item,index)"
+          >
+            <view :style="'border-radius:' + itemRadius + ';' + (index === activeIndex ? activeStyle: '')">
+              <view :style="{width: imageWidth + 'rpx', height: imageHeight + 'rpx'}">
+                <image
+                  :src="item.image"
+                  :style="{
+                    maxHeight: (imageHeight - 30) + 'rpx',
+                    maxWidth: (imageWidth - 30) + 'rpx',
+                  }"
+                ></image>
+              </view>
+              <view v-if="item.name">{{item.name}}</view>
+            </view>
+          </view>
+        </slot>
+      </view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+
+  /**
+   * XdTabScroll 全局Ui
+   * @description 左右滚动项目路径
+   * @property list {String} 滚动显示项目 默认：null (在使用插槽情况下可以不用设置列表值)
+   * @property background {String} 插件项目列表显示背景颜色 默认：''
+   * @property width {Number} 插件容器宽度 默认：100%
+   * @property itemRadius {Number|String}  插件项目列表边框圆角值 默认： 10rpx
+   * @property marginRight {String} 插件项目列表右边框值 默认: 10rpx
+   * @property imageWidth {Number|String}  项目图片宽度值 默认：默认: 164
+   * @property imageHeight {Number}  项目图片高度值 默认：120
+   * @property index {Array|Object}  默认显示第几个  默认：0
+   * @property activeStyle {Boolean}  当前选中项样式  默认：'''
+   *
+   * @event {Function} onChange    点击项目事件
+   */
+	export default {
+	  name:'XdTabScroll',
+    components: {},
+		props: {
+			list: {
+				type: Array | null,
+				default () {
+					return []
+				}
+			},
+      background: {
+        type: String, //rpx
+        default: ''
+      },
+
+      width: {
+        type: String, //rpx
+        default: '100%'
+      },
+
+      itemRadius: {
+        type: String, //rpx
+        default: '10rpx'
+      },
+
+      marginRight:{
+        type: String, //rpx
+        default: '10rpx'
+      },
+
+      imageWidth: {
+        type: Number | String, //rpx
+        default: 164
+      },
+
+      imageHeight: {
+        type: Number | String, //rpx
+        default: 120
+      },
+
+			index: {
+				type: Number,
+				default: 0
+			},
+
+      activeStyle:{
+        type: String, //css写法
+        default: ''
+      }
+		},
+    data() {
+      return {
+        activeIndex: 0,
+        toViewFix: 'xd-scroll__index',
+        toView: null,
+
+        uiList: [],
+        dataTest: [
+          {image: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20200709113615729.jpg?x-oss-process=style/common', name: '', url: ''},
+          {image: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/20200709113447212.jpg?x-oss-process=style/common', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''},
+          {image: 'https://sandbox-image.jufubao.cn/20210719171512575.png', name: '', url: ''}
+        ]
+      };
+    },
+
+    computed:{
+      getItemStyle() {
+        let style = `width:${this.imageWidth}rpx;background:${this.background};
+        border-radius:${this.itemRadius};margin-right:${this.marginRight};`
+        return `${style}`
+      }
+    },
+    mounted(){
+	    this.$nextTick(()=>{
+	      if(this.list === null) {
+	        this.uiList = this.$xdUniHelper.cloneDeep(this.dataTest);
+        }
+	      else{
+          this.uiList = this.$xdUniHelper.cloneDeep(this.list);
+        }
+	      this.toView = `${this.toView}-0`;
+        setTimeout(() => {
+          this.activeIndex = this.index;
+          this.toView = `${this.toViewFix}-${this.index}`;
+        }, 10);
+      });
+    },
+
+		methods: {
+			clickTab(item, index) {
+				this.activeIndex = index;
+        this.toView = `${this.toViewFix}-${this.activeIndex}`;
+				this.$emit('onChange', item, index);
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+	.xd-tab-scroll {
+		display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    overflow: hidden;
+    padding: 0;
+
+    &__box {
+      width: 100%;
+      height: 100%;
+    }
+
+    &__list {
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      height: 100%;
+      box-sizing: border-box;
+
+      & > view {
+
+        & > view {
+          flex-shrink: 0;
+
+          & > view:first-child {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          & > view:nth-child(2) {
+            text-align: center;
+            padding: 0 unit(20, rpx);
+            margin-bottom: unit(15, rpx);
+            font-size: unit(24, rpx);
+            .uni-max-cut(1, 26);
+            line-height: unit(26, rpx);
+
+
+          }
+        }
+      }
+    }
+	}
+
+
+</style>

package/src/components/XdTag/XdTag.vue

@@ -0,0 +1,423 @@
+<template>
+  <view v-if="show">
+    <view
+      :class="[
+        'xd-tag--' + type,
+        disabled === true || disabled === 'true' ? 'xd-tag--disabled' : '',
+        inverted === true || inverted === 'true' ? type + '-xd-tag--inverted' : '',
+        circle === true || circle === 'true' ? 'xd-tag--circle' : '',
+        mark === true || mark === 'true' ? 'xd-tag--mark' : '',
+        'xd-tag--' + size
+      ]"
+      @click.stop="onClick()"
+      class="xd-tag"
+      :style="getStyle"
+      v-if="isStop"
+    >
+      <view
+        class="xd-tag__text"
+        :class="[
+          type === 'default' ? 'xd-tag-text--default':'xd-tag-text',
+          inverted === true || inverted === 'true' ? 'xd-tag-text--'+type : '',
+          size === 'small' ? 'xd-tag-text--small':''
+        ]"
+        :style="{
+          color: fontColor ? (fontColor + '!important') : '',
+          paddingRight: isClose ? (size === 'small'? '20rpx': '40rpx'): 0,
+        }"
+      >
+        <view><slot></slot></view>
+        <view
+          @click.stop="handleClose"
+          v-if="isClose"
+        >
+          <xd-font-icon  icon="iconguanbi2" size="20"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+    <view
+      :class="[
+      'xd-tag--' + type,
+      disabled === true || disabled === 'true' ? 'xd-tag--disabled' : '',
+      inverted === true || inverted === 'true' ? type + '-xd-tag--inverted' : '',
+      circle === true || circle === 'true' ? 'xd-tag--circle' : '',
+      mark === true || mark === 'true' ? 'xd-tag--mark' : '',
+      'xd-tag--' + size
+    ]"
+      @click="onClick()"
+      class="xd-tag"
+      :style="getStyle"
+      v-if="!isStop"
+    >
+      <view
+        class="xd-tag__text"
+        :class="[
+        type === 'default' ? 'xd-tag--default':'xd-tag-text',
+        inverted === true || inverted === 'true' ? 'xd-tag-text--'+type : '',
+        size === 'small' ? 'xd-tag-text--small':''
+      ]"
+        :style="{
+        color: fontColor ? (fontColor + '!important') : '',
+        paddingRight: isClose ? (size === 'small'? '20rpx': '40rpx'): 0,
+      }"
+      >
+        <view>
+          <slot></slot>
+        </view>
+        <view
+          @click.stop="handleClose"
+          v-if="isClose"
+        >
+          <xd-font-icon icon="iconguanbi2" :size="size === 'small'? 16: 22"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  /**
+   * XdTag 标签
+   * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
+   * @property {String} text 标签内容
+   * @property {String} size = [normal|small] 大小尺寸
+   *  @value normal 正常
+   *  @value small 小尺寸
+   * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
+   *  @value default 灰色
+   *  @value primary 蓝色
+   *  @value success 绿色
+   *  @value warning 黄色
+   *  @value error 红色
+   *  @value royal 紫色
+   * @property {Boolean} isClose 是否显示关闭icon 默认：false
+   * @property {Boolean} isStop 是否阻止冒泡 默认：false
+   * @property {Boolean} selected 是否被选中 默认：false
+   * @property {String}  radius  圆角处理 默认为30rpx
+   * @property {Boolean} disabled = [true|false] 是否为禁用状态
+   * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
+   * @property {Boolean} circle = [true|false] 是否为圆角
+   * @property {String} color 文字值 默认为 $mainColor
+   * @property {String|Number} height 插件高度 默认为: null （传入高度取消size展示）
+   * @property {String|Number} width 插件宽度 默认为 null
+   *
+   *
+   * @event {Function} click 点击 Tag 触发事件
+   */
+
+  export default {
+    name: "XdTag",
+    components: {XdFontIcon},
+    props: {
+      isClose: {
+        type: [Boolean],
+        default: false
+      },
+      type: {
+        // 标签类型: default、primary、success、warning、error、royal
+        type: String,
+        default: "default"
+      },
+      isStop:{
+        type: [Boolean],
+        default: false
+      },
+      padding:{
+        type: String,
+        default: "0 16rpx"
+      },
+      size: {
+        // 标签大小 normal, small
+        type: String,
+        default: "normal"
+      },
+      // 标签内容
+      text: {
+        type: String,
+        default: ""
+      },
+      disabled: {
+        // 是否为禁用状态
+        type: [Boolean, String],
+        default: false
+      },
+      inverted: {
+        // 是否为空心
+        type: [Boolean, String],
+        default: false
+      },
+      circle: {
+        // 是否为圆角样式
+        type: [Boolean, String],
+        default: false
+      },
+      mark: {
+        // 是否为标记样式
+        type: [Boolean, String],
+        default: false
+      },
+      radius: {
+        type: String,
+        default: ''
+      },
+      color: {
+        type: String,
+        default: ''
+      },
+      width: {
+        type: String|Number|null,
+        default: null //rpx
+      },
+      height: {
+        type: String | Number| null,
+        default: null //rpx
+      },
+      selected: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        fontColor: '',
+        show: true
+      }
+    },
+    created() {
+      if(this.inverted) this.fontColor = this.$mainColor;
+
+      if (this.color) {
+        this.fontColor = this.color;
+      }
+    },
+
+    watch:{
+      selected(newVal) {
+        //被选中字体颜色为白色  为被选中字体颜色为主色调
+        if(newVal) {
+          this.fontColor = '#fff'
+        } else {
+          this.fontColor = this.$mainColor
+        }
+      }
+    },
+
+    computed: {
+      getStyle() {
+        let style = '';
+        if (this.type === 'primary' && !this.inverted) {
+          style = `background: ${this.$mainColor}; border-color: ${this.$mainColor}`;
+        }
+        if (this.type === 'primary' && this.inverted) {
+          if(this.color) style = `background:#fff; border-color: ${this.color}; color: ${this.color}`;
+          else style = `background:#fff; border-color: ${this.$mainColor}; color: ${this.$mainColor}`;
+
+        }
+
+        if (this.radius && !this.circle) {
+          style = `${style};border-radius: ${this.radius}`;
+        }
+
+        if(this.width) {
+          style = `${style};width: ${this.width}rpx`;
+        }
+
+        if (this.height) {
+          style = `${style};height: ${this.height}rpx;line-height: ${this.height}rpx`;
+        }
+
+        return `${style};padding: ${this.padding}`;
+      }
+    },
+    methods: {
+      handleClose(){
+        this.show = false;
+        this.$emit('close');
+
+      },
+      onClick() {
+        console.log('click')
+        if (this.disabled === true || this.disabled === "true") {
+          return;
+        }
+        this.$emit("click");
+      }
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  @tag-pd: 0 32rpx;
+  @tag-small-pd: 0 16rpx;
+
+  .xd-tag {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    /* #endif */
+    padding: @tag-pd;
+    height: unit(60, rpx);
+    line-height: unit(60, rpx);
+    justify-content: center;
+    color: @xd-text-color;
+    border-radius: @xd-border-radius-base;
+    background-color: @xd-bg-color-grey;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @xd-bg-color-grey;
+  }
+
+  .xd-tag--circle {
+    border-radius: unit(30, rpx);
+  }
+
+  .xd-tag--mark {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: unit(30, rpx);
+    border-bottom-right-radius: unit(30, rpx);
+  }
+
+  .xd-tag--disabled {
+    opacity: 0.5;
+  }
+
+  .xd-tag--small {
+    height: unit(40, rpx);
+    padding: @tag-small-pd;
+    line-height: unit(40, rpx);
+    font-size: @xd-font-size-sm;
+  }
+
+  .xd-tag--default {
+    color: @xd-text-color;
+    font-size: @xd-font-size-base;
+    background-color: #fff;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: #efefef;
+  }
+
+  .default-xd-tag--inverted {
+    color: @custom-btn-primary;
+    background-color: @xd-bg-white;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-primary;
+  }
+
+  .xd-tag-text--small {
+    font-size: @xd-font-size-sm !important;
+  }
+
+  .xd-tag-text {
+    color: @xd-text-color-inverse;
+    font-size: @xd-font-size-base;
+  }
+
+  .xd-tag-text--primary {
+    color: @custom-btn-primary !important;
+  }
+
+  .xd-tag-text--success {
+    color: @custom-btn-success !important;
+  }
+
+  .xd-tag-text--warning {
+    color: @custom-btn-warning !important;
+  }
+
+  .xd-tag-text--error {
+    color: @custom-btn-danger !important;
+  }
+
+  .xd-tag--primary {
+    color: @xd-text-color-inverse;
+    background-color: @custom-btn-primary;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-primary;
+  }
+
+  .primary-xd-tag--inverted {
+    color: @custom-btn-primary;
+    background-color: @xd-bg-white;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-primary;
+  }
+
+  .xd-tag--success {
+    color: @xd-text-color-inverse;
+    background-color: @custom-btn-success;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-success;
+  }
+
+  .success-xd-tag--inverted {
+    color: @custom-btn-success;
+    background-color: @xd-bg-white;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-success;
+  }
+
+  .xd-tag--warning {
+    color: @xd-text-color-inverse;
+    background-color: @custom-btn-warning;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-warning;
+  }
+
+  .warning-xd-tag--inverted {
+    color: @custom-btn-warning;
+    background-color: @xd-bg-white;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-warning
+  }
+
+  .xd-tag--error {
+    color: @xd-text-color-inverse;
+    background-color: @custom-btn-danger;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-danger;
+  }
+
+  .error-xd-tag--inverted {
+    color: @custom-btn-danger;
+    background-color: @xd-bg-white;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @custom-btn-danger;
+  }
+
+  .xd-tag--inverted {
+    color: @xd-text-color;
+    background-color: @xd-bg-white;
+    border-width: unit(2, rpx);
+    border-style: solid;
+    border-color: @xd-bg-color-grey;
+  }
+
+
+  .xd-tag__text {
+    text-align: center;
+    position: relative;
+    width: 100%;
+
+    & > view:first-child {
+
+    }
+
+    & > view:nth-child(2) {
+      position: absolute;
+      right: unit(5,rpx);
+      top: unit(0,rpx)
+    }
+  }
+</style>