distinctui-uni 0.0.1 → 0.0.3

package/README.md

@@ -16,7 +16,7 @@ uni-app 项目 pages.json 配置
 "easycom": {
 	"autoscan": true,
 	"custom": {
-		"dist-(.*)": "distinctui-uni/components/distinctui/dist-$1/dist-$1.vue"
+		"d-(.*)": "distinctui-uni/components/distinctui/d-$1/d-$1.vue"
 	}
 }
 ```

package/components/distinctui/d-button/d-button.vue

@@ -0,0 +1,385 @@
+<template>
+  <view
+    class="d-button__wrap"
+    :style="{
+      maxWidth: maxWidth,
+      minWidth: minWidth,
+      width: getWidth,
+      height: getHeight,
+      borderRadius: getBorderRadius,
+      margin: getMargin
+    }"
+  >
+    <button
+      class="d-button"
+      :class="{ 'd-button__ellipse': ellipsis }"
+      :loading="loading"
+      :style="{
+        maxWidth: maxWidth,
+        minWidth: minWidth,
+        width: getWidth,
+        height: getHeight,
+        borderRadius: getRadius,
+        backgroundColor: getBackgroundColor,
+        color: getColor,
+        borderColor: getBorderColor,
+        padding: padding,
+        fontSize: getFontSize
+      }"
+      :hover-class="!loading && !disabled && type ? `d-button-hover--${type}` : 'none'"
+      :form-type="formType"
+      :open-type="openType"
+      :app-parameter="appParameter"
+      @getuserinfo="bindGetUserInfo"
+      @getphonenumber="bindGetPhoneNumber"
+      @contact="bindContact"
+      @error="bindError"
+      @opensetting="bindOpenSetting"
+      @chooseavatar="bindChooseAvatar"
+      @launchapp="bindLaunchApp"
+      :disabled="disabled"
+      :scope="scope"
+      @tap.stop="handleTap"
+    >
+      <text v-if="text">{{ text }}</text>
+      <slot></slot>
+    </button>
+    <!-- <view
+      class="d-button_thin-border"
+      :style="{
+        borderRadius: getBorderRadius,
+        borderColor: getBorderColor
+      }"
+    ></view> -->
+  </view>
+</template>
+
+<script>
+const BTN_SIZE = {
+  normal: {
+    height: "80rpx",
+    radius: "50rpx",
+    fontSize: "32rpx"
+  },
+  small: {
+    height: "68rpx",
+    radius: "40rpx",
+    fontSize: "28rpx"
+  },
+  mini: {
+    height: "58rpx",
+    radius: "30rpx",
+    fontSize: "24rpx"
+  }
+};
+const TYPE_STYLE = {
+  // 一级按钮
+  primary: {
+    styles: {
+      borderColor: "#006D83",
+      backgroundColor: "#006D83",
+      color: "#FFFFFF"
+    },
+    disabledStyles: {
+      backgroundColor: "rgba(0,111,131,0.28)",
+      color: "#FFFFFF"
+    }
+  },
+  // 二级按钮
+  secondary: {
+    styles: {
+      borderColor: "#006D83",
+      backgroundColor: "#FFFFFF",
+      color: "#006D83"
+    },
+    disabledStyles: {
+      backgroundColor: "rgba(0,111,131,0.28)",
+      color: "#FFFFFF"
+    }
+  },
+  // 三级按钮
+  tertiary: {
+    styles: {
+      borderColor: "#E1E1E1",
+      backgroundColor: "#FFFFFF",
+      color: "#006D83"
+    },
+    disabledStyles: {
+      borderColor: "#E1E1E1",
+      backgroundColor: "#FFFFFF",
+      color: "#E1E1E1"
+    }
+  },
+  // 警示按钮
+  danger: {
+    styles: {
+      backgroundColor: "#FF5B4C",
+      color: "#FFFFFF"
+    },
+    disabledStyles: {
+      backgroundColor: "rgba(255,91,76,0.28)",
+      color: "#FFFFFF"
+    }
+  }
+};
+export default {
+  name: "d-button",
+  emits: ["click", "getuserinfo", "contact", "getphonenumber", "error", "opensetting"],
+  behaviors: ["uni://form-field"],
+  props: {
+    // 按钮类型：primary，secondary，tertiary，danger
+    type: {
+      type: String,
+      default: "primary"
+    },
+    // 按钮背景色，当传入值时type失效
+    background: {
+      type: String,
+      default: ""
+    },
+    borderColor: {
+      type: String,
+      default: ""
+    },
+    // 按钮显示文本
+    text: {
+      type: String,
+      default: ""
+    },
+    // 按钮字体颜色
+    color: {
+      type: String,
+      default: "#FFFFFF"
+    },
+    // 是否显示加载图标
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 按钮宽度
+    width: {
+      type: String,
+      default: "100%"
+    },
+    // 按钮最大宽度
+    maxWidth: {
+      type: String,
+      default: ""
+    },
+    // 按钮最小宽度
+    minWidth: {
+      type: String,
+      default: ""
+    },
+    // 按钮高度
+    height: {
+      type: String,
+      default: ""
+    },
+    // 圆角大小
+    radius: {
+      type: String,
+      default: "50rpx"
+    },
+    // 外边距
+    margin: {
+      type: String,
+      default: "0"
+    },
+    // 内边距,默认左右间距为16
+    padding: {
+      type: String,
+      default: "0 16rpx"
+    },
+    // 按钮大小，设置height后按钮的size失效
+    size: {
+      type: String,
+      default: "normal"
+    },
+    // 是否超过省略
+    ellipsis: {
+      type: Boolean,
+      default: true
+    },
+    formType: {
+      type: String,
+      default: ""
+    },
+    openType: {
+      type: String,
+      default: ""
+    },
+    appParameter: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    getMargin() {
+      return this.margin || 0;
+    },
+    getTypeStyle() {
+      return TYPE_STYLE[this.type] || {};
+    },
+    getButtonStyle() {
+      const typeStyles = this.getTypeStyle;
+      if (this.disabled) {
+        return typeStyles.disabledStyles || {};
+      } else if (this.loading) {
+        // loading字体颜色需加透明度，这里用16进制实现，34%透明度为0x56
+        return { ...typeStyles.styles, color: `${typeStyles.styles.color}56` };
+      } else {
+        return typeStyles.styles || {};
+      }
+    },
+    getBackgroundColor() {
+      let backgroundColor = this.background || this.getButtonStyle?.backgroundColor;
+      return backgroundColor || "transparent";
+    },
+    getBorderColor() {
+      if (this.background && !this.borderColor) return "transparent";
+      let borderColor = this.borderColor || this.getButtonStyle?.borderColor;
+      return borderColor || "transparent";
+    },
+    getWidth() {
+      let width = this.width;
+      return width;
+    },
+    getHeight() {
+      let height = this.height;
+      if (this.size) {
+        height = BTN_SIZE[this.size].height || height;
+      }
+      return height;
+    },
+    getBorderRadius() {
+      let radius = this.radius || BTN_SIZE[this.size].radius;
+      radius = this.radius || radius;
+      const unitConfig = ["rpx", "px", "%"];
+      unitConfig.some(i => {
+        if (~radius.indexOf(i)) {
+          radius = Number(radius.replace(i, "")) * 2 + i;
+          return true;
+        }
+        return false;
+      });
+      return radius;
+    },
+    getRadius() {
+      const radius = this.radius || BTN_SIZE[this.size].radius;
+      return radius;
+    },
+    getColor() {
+      return this.getButtonStyle?.color || "#FFFFFF";
+    },
+    getFontSize() {
+      const fontSize = this.fontSize || BTN_SIZE[this.size].fontSize;
+      return fontSize;
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleTap() {
+      if (this.disabled) return;
+      this.$emit("click");
+    },
+    bindGetUserInfo({ detail = {} } = {}) {
+      this.$emit("getuserinfo", detail);
+    },
+    bindContact({ detail = {} } = {}) {
+      this.$emit("contact", detail);
+    },
+    bindGetPhoneNumber({ detail = {} } = {}) {
+      this.$emit("getphonenumber", detail);
+    },
+    bindError({ detail = {} } = {}) {
+      this.$emit("error", detail);
+    },
+    bindOpenSetting({ detail = {} } = {}) {
+      this.$emit("opensetting", detail);
+    },
+    bindChooseAvatar({ detail = {} } = {}) {
+      this.$emit("chooseavatar", detail);
+    },
+    bindLaunchApp({ detail = {} } = {}) {
+      this.$emit("launchapp", detail);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.d-button__wrap {
+  position: relative;
+}
+.d-button {
+  border-width: 2rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-style: solid;
+  position: relative;
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+  transform: translateZ(0);
+  user-select: none;
+}
+.d-button_thin-border {
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  transform-origin: 0 0;
+  transform: scale(0.5, 0.5) translateZ(0);
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  border-width: 2rpx;
+  border-radius: 32rpx;
+  border-style: solid;
+  pointer-events: none;
+}
+
+.d-button-hover--primary {
+  background-color: #005667 !important;
+}
+
+.d-button-hover--secondary {
+  background-color: #daecee !important;
+}
+
+.d-button-hover--tertiary {
+  background-color: #e1e1e1 !important;
+}
+
+.d-button-hover--danger {
+  background-color: #e04335 !important;
+}
+
+.d-button__flex-1 {
+  flex: 1;
+  width: 100%;
+}
+
+.d-button::after {
+  border: 0;
+}
+
+.d-button__ellipse {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+</style>

package/components/distinctui/d-dialog/d-dialog.vue

@@ -0,0 +1,242 @@
+<template>
+  <view
+    @tap="maskClose"
+    :style="{ background: maskBackground }"
+    class="d-dialog__wrap"
+    :class="{ 'd-wrap__show': show }"
+    @touchmove.stop.prevent="stop"
+    v-if="visible"
+    ref="d_dialog_ani"
+  >
+    <view class="d-dialog__inner" :style="{ background: background, borderRadius: radius + 'rpx', marginTop: `-${contentTop}px` }" @tap.stop="stop">
+      <slot name="top"></slot>
+      <text class="d-dialog__title" :style="{ color: titleColor }" v-if="title">{{ title }}</text>
+      <view class="d-dialog__body" :class="{ 'd-dialog__mtop': !title }">
+        <text class="d-dialog__desc" :style="{ color: contentColor }" v-if="content">{{ content }}</text>
+        <slot></slot>
+      </view>
+      <view class="d-dialog__footer" :class="{ 'd-dialog__footer--vertical': layout === 'vertical' }">
+        <text
+          v-for="(item, index) in buttons"
+          :key="index"
+          :style="{ color: item.color || '#333333' }"
+          class="d-dialog__btn"
+          :class="{ 'd-dialog__btn--vertical': layout === 'vertical', 'd-dialog__btn-first': index === 0 }"
+          @tap="handleClick(index)"
+        >
+          {{ item.text }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+const animation = uni.createAnimation({
+  duration: 200,
+  timingFunction: "ease-in"
+});
+export default {
+  name: "d-dialog",
+  emits: ["click"],
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    titleColor: {
+      type: String,
+      default: "#333"
+    },
+    content: {
+      type: String,
+      default: ""
+    },
+    contentColor: {
+      type: String,
+      default: "#333"
+    },
+    // 布局；vertical, default
+    layout: {
+      type: String,
+      default: "default"
+    },
+    buttons: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    background: {
+      type: String,
+      default: "#ffffff"
+    },
+    radius: {
+      type: [Number, String],
+      default: "24rpx"
+    },
+    maskBackground: {
+      type: String,
+      default: "rgba(0,0,0,.6)"
+    },
+    // 点击遮罩是否关闭，前提show需要sync
+    maskClosable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      contentTop: 0 // 状态栏加导航栏高度
+    };
+  },
+  mounted() {
+    const systemInfo = uni.getSystemInfoSync();
+    if (!systemInfo) return;
+    this.contentTop = systemInfo.screenHeight - systemInfo.windowHeight; // 屏幕高度 - 可使用高度
+  },
+  watch: {
+    show: {
+      handler(newVal) {
+        if (newVal) {
+          this.open();
+        } else {
+          this.close();
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleClick(index) {
+      this.$emit("click", {
+        index,
+        ...this.buttons[index]
+      });
+    },
+    maskClose() {
+      if (!this.maskClosable) return;
+      this.$emit("update:show", false);
+    },
+    open() {
+      this.visible = true;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this._animation(true);
+        }, 50);
+      });
+    },
+    close(type) {
+      this._animation(false);
+    },
+    _animation(type) {
+      animation.opacity(type ? 1 : 0).step();
+      if (!this.$refs["d_dialog_ani"]) return;
+      this.$refs["d_dialog_ani"].ref.animate(animation.export(), () => {
+        this.visible = type;
+      });
+    },
+    stop() {}
+  }
+};
+</script>
+
+<style scoped>
+.d-dialog__wrap {
+  position: fixed;
+  z-index: 996;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  transition-property: all;
+  transition-timing-function: ease-in;
+  transition-duration: 0.2s;
+  display: flex;
+  transform: scale3d(1, 1, 0);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+}
+
+.d-dialog__inner {
+  width: 680rpx;
+  overflow: hidden;
+  display: flex;
+  max-height: 60%;
+  flex-direction: column;
+}
+
+.d-dialog__title {
+  padding: 40rpx 40rpx 0;
+  font-weight: 700;
+  font-size: 32rpx;
+  text-align: center;
+}
+
+.d-dialog__body {
+  padding: 20rpx 40rpx 40rpx;
+  word-break: break-all;
+  hyphens: auto;
+}
+
+.d-dialog__desc {
+  font-size: 28rpx;
+  font-weight: normal;
+  text-align: left;
+}
+
+.d-dialog__mtop {
+  margin-top: 20rpx;
+}
+
+.d-dialog__footer {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  line-height: 90rpx;
+  border-top: 2rpx solid #f1f1f1;
+}
+
+.d-dialog__footer--vertical {
+  display: flex;
+  flex-direction: column;
+}
+
+.d-dialog__btn {
+  display: block;
+  text-decoration: none;
+  flex: 1;
+  height: 90rpx;
+  line-height: 90rpx;
+  position: relative;
+  font-size: 32rpx;
+  border-left: 2rpx solid #f1f1f1;
+  text-align: center;
+}
+
+.d-dialog__btn--vertical {
+  border-top: 2rpx solid #f1f1f1;
+}
+
+.d-dialog__btn:active {
+  background-color: #e1e1e1;
+}
+
+.d-dialog__btn-first {
+  border-left-width: 0;
+  border-top-width: 0;
+}
+
+.d-wrap__show {
+  opacity: 1;
+  transform: scale3d(1, 1, 1);
+  visibility: visible;
+}
+</style>

package/components/distinctui/d-popup/d-popup.vue

@@ -0,0 +1,108 @@
+<template>
+  <view
+    class="d-popup-wrap"
+    :class="{ 'd-popup__wrap-show': show }"
+    :style="{ zIndex: zIndex, background: maskBackground }"
+    @tap.stop="handleClose"
+    @touchmove.stop.prevent="stop"
+  >
+    <view
+      class="d-popup__popup"
+      :class="{ 'd-popup__popup-show': show }"
+      :style="{ borderTopLeftRadius: radius + 'rpx', borderTopRightRadius: radius + 'rpx', background: background }"
+      @tap.stop="stop"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+/*如果底部有自定义导航栏，可适当设置内容padding-bottom值*/
+export default {
+  name: "d-popup",
+  emits: [],
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //背景颜色
+    background: {
+      type: String,
+      default: "#fff"
+    },
+    //圆角
+    radius: {
+      type: [Number, String],
+      default: 24
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 996
+    },
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    maskBackground: {
+      type: String,
+      default: "rgba(0,0,0,.6)"
+    }
+  },
+  data() {
+    return {
+      iphoneX: false
+    };
+  },
+  methods: {
+    handleClose() {
+      if (!this.maskClosable) return;
+      this.$emit("update:show", false);
+    },
+
+    stop() {}
+  }
+};
+</script>
+
+<style scoped>
+.d-popup-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1001;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: center;
+  transition: all ease-in-out 0.2s;
+  visibility: hidden;
+  border-bottom-width: 0;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.d-popup__wrap-show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.d-popup__popup {
+  width: 100%;
+  transform: translate3d(0, 100%, 0);
+  transition: all 0.3s ease-in-out;
+  min-height: 20rpx;
+  overflow: hidden;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  flex: 1;
+}
+
+.d-popup__popup-show {
+  transform: translate3d(0, 0, 0);
+}
+</style>

package/components/distinctui/d-tabs/d-tabs.vue

@@ -0,0 +1,429 @@
+<template>
+  <scroll-view
+    class="d-tabs__scroll-box"
+    :class="{ 'd-tabs__fixed': isFixed && !isSticky, 'd-tabs__sticky': isSticky }"
+    :scroll-with-animation="true"
+    :scroll-x="scroll"
+    :show-scrollbar="false"
+    :scroll-into-view="scrollInto"
+    :style="{ background: background, zIndex: isFixed || isSticky ? zIndex : 1, top: isFixed || isSticky ? top + 'px' : 'auto' }"
+  >
+    <view class="d-scroll__view" :class="{ 'd-tabs__full': !alignLeft }">
+      <view
+        v-for="(tab, index) in vals"
+        :key="index"
+        class="d-tabs__item"
+        :class="{ 'd-tabs__full': !alignLeft }"
+        :id="tab.d_s_id"
+        @tap="switchTab(index)"
+      >
+        <view
+          class="d-tabs__text-wrap"
+          :class="{ 'd-tabs__wrap-disabled': tab.disabled, 'd-tabs__item-column': itemDirection === 'column' && tab.icon }"
+          :style="{ height: height + 'rpx' }"
+        >
+          <view class="d-tabs__line-wrap" :style="{ bottom: bottom + 'rpx', left: `-${padding}rpx`, right: `-${padding}rpx` }" v-if="isSlider">
+            <view
+              class="d-tabs__ac-line"
+              :class="{ 'd-tabs__line-short': short, 'd-tabs__full': !short }"
+              :style="{
+                height: sliderHeight + 'rpx',
+                background: getSliderBgColor,
+                borderRadius: sliderRadius == -1 ? sliderHeight + 'rpx' : sliderRadius + 'rpx',
+                transform: `scale(${tabIndex === index ? scale : 0})`
+              }"
+            ></view>
+          </view>
+          <image
+            class="d-tabs__icon"
+            :class="{ 'd-tabs__icon-column': direction === 'column' }"
+            :src="tabIndex === index && tab.selectedIcon ? tab.selectedIcon : tab.icon"
+            v-if="tab.icon"
+          ></image>
+          <view
+            class="d-tabs__text"
+            :style="{
+              fontSize: size + 'rpx',
+              color: tabIndex === index ? getSelectedColor : color,
+              fontWeight: tabIndex === index ? selectedFontWeight : fontWeight,
+              transform: `scale(${tabIndex === index ? scale : 1})`
+            }"
+          >
+            {{ tab.name }}
+            <text
+              :class="{ 'd-tabs__badge-color': !getBadgeBgColor, 'd-tabs__badge-dot': isDot, 'd-tabs__badge': !isDot }"
+              :style="{ color: badgeColor, background: getBadgeBgColor }"
+              v-if="tab.badge"
+            >
+              {{ isDot ? "" : tab.badge }}
+            </text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  name: "d-tabs",
+  emits: ["change"],
+  options: {
+    virtualHost: true
+  },
+  props: {
+    // 标签页数据源
+    tabs: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 当前选项卡
+    current: {
+      type: Number,
+      default: 0
+    },
+    // 是否可以滚动
+    scroll: {
+      type: Boolean,
+      default: false
+    },
+    // tab高度 rpx
+    height: {
+      type: [Number, String],
+      default: 100
+    },
+    background: {
+      type: String,
+      default: "#fff"
+    },
+    //字体大小
+    size: {
+      type: [Number, String],
+      default: 28
+    },
+    // 字体颜色
+    color: {
+      type: String,
+      default: "#666666"
+    },
+    //选中前字重
+    fontWeight: {
+      type: [Number, String],
+      default: "normal"
+    },
+    //选中后字体颜色
+    selectedColor: {
+      type: String,
+      default: "#006F83"
+    },
+    //选中后字重
+    selectedFontWeight: {
+      type: [Number, String],
+      default: 500
+    },
+    //选中后字体缩放倍数
+    scale: {
+      type: [Number, String],
+      default: 1.2
+    },
+    badgeColor: {
+      type: String,
+      default: "#fff"
+    },
+    badgeBackground: {
+      type: String,
+      default: ""
+    },
+    isDot: {
+      type: Boolean,
+      default: false
+    },
+    isSlider: {
+      type: Boolean,
+      default: true
+    },
+    //滑块高度
+    sliderHeight: {
+      type: [Number, String],
+      default: 8
+    },
+    // 滑块背景颜色
+    sliderBackground: {
+      type: String,
+      default: "#006F83"
+    },
+    //滑块 radius
+    sliderRadius: {
+      type: [Number, String],
+      default: 178
+    },
+    //滑块左右padding值
+    padding: {
+      type: [Number, String],
+      default: 0
+    },
+    //滑块bottom
+    bottom: {
+      type: [Number, String],
+      default: 0
+    },
+    //滑块是否固定为较短的长度50rpx
+    short: {
+      type: Boolean,
+      default: true
+    },
+    //是否固定
+    isFixed: {
+      type: Boolean,
+      default: false
+    },
+    //吸顶效果，为true时isFixed失效
+    isSticky: {
+      type: Boolean,
+      default: false
+    },
+    //isFixed或isSticky为true时，tabs top值 px
+    top: {
+      type: [Number, String],
+      default: 0
+    },
+    //当数据不满一屏时，item项是否靠左对齐，默认均分铺满
+    alignLeft: {
+      type: Boolean,
+      default: false
+    },
+    //tabs item项排列方式：row、column
+    itemDirection: {
+      type: String,
+      default: "row"
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 996
+    }
+  },
+  watch: {
+    tabs(vals) {
+      this.initData(vals);
+    },
+    current(newVal, oldVal) {
+      this.switchTab(newVal);
+    }
+  },
+  created() {
+    this.initData(this.tabs);
+  },
+  computed: {
+    getSelectedColor() {
+      let color = this.selectedColor;
+      return color;
+    },
+    getSliderBgColor() {
+      let color = this.sliderBackground;
+      return color;
+    },
+    getBadgeBgColor() {
+      let color = this.badgeBackground;
+      return color;
+    }
+  },
+  data() {
+    return {
+      vals: [],
+      scrollInto: "",
+      tabIndex: 0
+    };
+  },
+  methods: {
+    getId() {
+      return `d_${Math.ceil(Math.random() * 10e5).toString(36)}`;
+    },
+    initData(vals) {
+      if (vals && vals.length > 0) {
+        if (typeof vals[0] === "object") {
+          vals.map(item => {
+            const scrollId = this.getId();
+            item.d_s_id = scrollId;
+          });
+        } else {
+          //字符串
+          vals = vals.map(item => {
+            const scrollId = this.getId();
+            return {
+              name: item,
+              d_s_id: scrollId
+            };
+          });
+        }
+        this.vals = vals;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.switchTab(this.current);
+          }, 50);
+        });
+      }
+    },
+    switchTab(index) {
+      const item = {
+        ...this.vals[index]
+      };
+      if (this.tabIndex === index || item.disabled) return;
+      this.tabIndex = index;
+      let scrollIndex = index - 1 < 0 ? 0 : index - 1;
+      this.scrollInto = this.vals[scrollIndex].d_s_id;
+      delete item.d_s_id;
+      this.$emit("change", {
+        index: index,
+        ...item
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.d-tabs__scroll-box {
+  width: 100%;
+  flex: 1;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.d-tabs__fixed {
+  position: fixed;
+  left: 0;
+  right: 0;
+}
+
+.d-tabs__sticky {
+  position: sticky;
+  left: 0;
+  right: 0;
+}
+
+.d-scroll__view {
+  min-width: 100%;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+}
+
+.d-scroll__view::after {
+  content: " ";
+  width: 100%;
+  height: 1px;
+  background: #f1f1f1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+.d-tabs__item {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding-left: 32rpx;
+  padding-right: 32rpx;
+  position: relative;
+}
+
+.d-tabs__full {
+  flex: 1;
+}
+
+.d-tabs__text-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+}
+
+.d-tabs__wrap-disabled {
+  opacity: 0.5;
+}
+
+.d-tabs__icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 12rpx;
+}
+
+.d-tabs__item-column {
+  flex-direction: column !important;
+}
+
+.d-tabs__icon-column {
+  margin-right: 0 !important;
+  margin-bottom: 8rpx;
+}
+
+.d-tabs__text {
+  white-space: nowrap;
+  display: block;
+  transition: transform 0.2s linear;
+  z-index: 3;
+  position: relative;
+}
+
+.d-tabs__badge {
+  height: 36rpx;
+  padding: 0 12rpx;
+  color: #ffffff;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  border-radius: 100px;
+  position: absolute;
+  min-width: 36rpx !important;
+  display: flex;
+  box-sizing: border-box;
+  right: -32rpx;
+  top: -18rpx;
+  z-index: 10;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0.9);
+}
+
+.d-tabs__badge-dot {
+  height: 8px !important;
+  width: 8px !important;
+  position: absolute;
+  display: inline-block;
+  right: -6px;
+  top: -3px;
+  border-radius: 50%;
+  z-index: 10;
+}
+
+.d-tabs__line-wrap {
+  position: absolute;
+  border-radius: 2px;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  left: 0;
+}
+
+.d-tabs__ac-line {
+  transition: transform 0.2s linear;
+}
+
+.d-tabs__line-short {
+  width: 50rpx !important;
+}
+
+.d-tabs__badge-color {
+  background: var(--d-color-danger, #ff2b2b) !important;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "distinctui-uni",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "卓正医疗小程序UI组件库",
   "main": "main.js",
   "files": [

package/components/distinctui/dist-button/dist-button.vue

@@ -1,16 +0,0 @@
-<template>
-  <view>未完成按钮</view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-  computed: {},
-  onLoad() {},
-  methods: {}
-};
-</script>
-
-<style scoped></style>