@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-divider/u-divider.vue

@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  name: 'fuiDivider',
+  name: 'tuiDivider',
   props: {
     //divider占据高度
     height: {
@@ -62,7 +62,7 @@ export default {
     //渐变色值，to right ，提供两个色值即可，由浅至深
     gradualColor: {
       type: Array,
-      default: () => {
+      default: function () {
         return ['#eee', '#ccc'];
       }
     }
@@ -102,7 +102,7 @@ export default {
 
 .up-divider-line {
   position: absolute;
-  height: 1rpx;
+  height: 1px;
   top: 50%;
   left: 50%;
   -webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);

package/ui-fireui/components/u-drawer/u-drawer.vue

@@ -1,12 +1,17 @@
 <template>
-  <view @touchmove.stop.prevent>
-    <view v-if="mask" class="up-drawer-mask" :class="{ 'up-drawer-mask_show': visible }" @tap="handleMaskClick"></view>
+  <!-- @touchmove.stop.prevent -->
+  <view>
+    <view
+      v-if="mask"
+      class="up-drawer-mask"
+      :class="{ 'up-drawer-mask_show': visible }"
+      :style="{ zIndex: maskZIndex }"
+      @tap="handleMaskClick"
+    ></view>
     <view
       class="up-drawer-container"
-      :class="[
-        mode == 'left' ? 'up-drawer-container_left' : 'up-drawer-container_right',
-        visible ? 'up-drawer-container_show' : ''
-      ]"
+      :class="[`up-drawer-container_${mode}`, visible ? `up-drawer-${mode}__show` : '']"
+      :style="{ zIndex: zIndex, backgroundColor: backgroundColor }"
     >
       <slot></slot>
     </view>
@@ -18,7 +23,8 @@
  * 超过一屏时插槽使用scroll-view
  **/
 export default {
-  name: 'fuiDrawer',
+  name: 'tuiDrawer',
+  emits: ['close'],
   props: {
     visible: {
       type: Boolean,
@@ -32,9 +38,24 @@ export default {
       type: Boolean,
       default: true
     },
+    // left right bottom top
     mode: {
       type: String,
-      default: 'left' // left right
+      default: 'right'
+    },
+    //drawer z-index
+    zIndex: {
+      type: [Number, String],
+      default: 990
+    },
+    //mask z-index
+    maskZIndex: {
+      type: [Number, String],
+      default: 980
+    },
+    backgroundColor: {
+      type: String,
+      default: '#fff'
     }
   },
   methods: {
@@ -57,7 +78,6 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 8888;
   background-color: rgba(0, 0, 0, 0.6);
   transition: all 0.3s ease-in-out;
 }
@@ -75,10 +95,8 @@ export default {
   transform: translate3d(-50%, -50%, 0);
   transform-origin: center;
   transition: all 0.3s ease-in-out;
-  z-index: 99999;
   opacity: 0;
   overflow-y: scroll;
-  background-color: #fff;
   -webkit-overflow-scrolling: touch;
   -ms-touch-action: pan-y cross-slide-y;
   -ms-scroll-chaining: none;
@@ -96,8 +114,33 @@ export default {
   left: auto;
   transform: translate3d(100%, -50%, 0);
 }
-.up-drawer-container_show {
+
+.up-drawer-container_bottom,
+.up-drawer-container_top {
+  width: 100%;
+  height: auto !important;
+  min-height: 20rpx;
+  left: 0;
+  right: 0;
+  transform-origin: center;
+  transition: all 0.3s ease-in-out;
+}
+.up-drawer-container_bottom {
+  bottom: 0;
+  top: auto;
+  transform: translate3d(0, 100%, 0);
+}
+.up-drawer-container_top {
+  transform: translate3d(0, -100%, 0);
+}
+.up-drawer-left__show,
+.up-drawer-right__show {
   opacity: 1;
   transform: translate3d(0, -50%, 0);
 }
+.up-drawer-top__show,
+.up-drawer-bottom__show {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
 </style>

package/ui-fireui/components/u-dropdown-list/u-dropdown-list.vue

@@ -0,0 +1,103 @@
+<template>
+  <view>
+    <view class="up-selected-class up-dropdown-list" :style="{ height: selectHeight ? selectHeight + 'rpx' : 'auto' }">
+      <slot name="selectionbox"></slot>
+      <view
+        class="up-dropdown-view"
+        :class="[show ? 'up-dropdownlist-show' : '']"
+        :style="{ backgroundColor: backgroundColor, height: show ? height + 'rpx' : 0, top: top + 'rpx' }"
+      >
+        <slot name="dropdownbox"></slot>
+      </view>
+    </view>
+    <view
+      class="up-dropdown__mask"
+      :style="{ backgroundColor: maskBackground }"
+      v-if="isMask && show"
+      @tap.stop="maskClick"
+    ></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tuiDropdownList',
+  emits: ['close'],
+  props: {
+    //控制显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    //top  rpx
+    top: {
+      type: Number,
+      default: 0
+    },
+    //下拉框高度 rpx
+    height: {
+      type: Number,
+      default: 0
+    },
+    //选择框高度 单位rpx
+    selectHeight: {
+      type: Number,
+      default: 0
+    },
+    isMask: {
+      type: Boolean,
+      default: false
+    },
+    maskBackground: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  methods: {
+    maskClick() {
+      this.$emit('close', {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.up-dropdown-list {
+  position: relative;
+  z-index: 12;
+}
+
+.up-dropdown-view {
+  width: 100%;
+  overflow: hidden;
+  position: absolute;
+  z-index: -99;
+  left: 0;
+  opacity: 0;
+  /* visibility: hidden; */
+  transition: all 0.2s ease-in-out;
+}
+
+.up-dropdownlist-show {
+  opacity: 1;
+  z-index: 996;
+  /* visibility: visible; */
+}
+
+.up-dropdown__mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: 5;
+}
+</style>

package/ui-fireui/components/u-fab/u-fab.vue

@@ -0,0 +1,344 @@
+<template>
+  <view>
+    <view
+      class="up-fab-box"
+      :class="{
+        'up-fab-right': left == 0 || (left && right),
+        'up-fab__box-bottom': bottom && top == 0,
+        'up-fab__box-top': !(bottom && top == 0)
+      }"
+      :style="getStyles"
+    >
+      <view class="up-fab-btn" :class="{ 'up-visible': isOpen, 'up-fab-hidden': isHidden }">
+        <view
+          class="up-fab-item-box"
+          :class="{
+            'up-fab-item-left': left && right == 0 && item[imgField],
+            'up-fab__pb40': bottom && top == 0,
+            'up-fab__pt40': !(bottom && top == 0)
+          }"
+          v-for="(item, index) in btnList"
+          :key="index"
+          @tap.stop="handleClick(index)"
+        >
+          <view
+            :class="[left && right == 0 ? 'up-text-left' : 'up-text-right']"
+            v-if="item[imgField]"
+            :style="{ fontSize: (item.fontSize || size) + 'rpx', color: item.color }"
+          >
+            {{ item[textField] || '' }}
+          </view>
+          <view
+            class="up-fab-item"
+            :style="{
+              width: width + 'rpx',
+              height: height + 'rpx',
+              background: item.bgColor || getBgColor,
+              borderRadius: radius
+            }"
+          >
+            <view
+              class="up-fab-title"
+              v-if="!item[imgField]"
+              :style="{ fontSize: (item.fontSize || size) + 'rpx', color: item.color }"
+            >
+              {{ item[textField] || '' }}
+            </view>
+            <image
+              :src="item[imgField]"
+              class="up-fab-img"
+              v-else
+              :style="{ width: (item.imgWidth || 64) + 'rpx', height: (item.imgHeight || 64) + 'rpx' }"
+            ></image>
+          </view>
+        </view>
+      </view>
+      <view
+        class="up-fab-item"
+        :class="{ 'up-active': isOpen }"
+        :style="{ width: width + 'rpx', height: height + 'rpx', borderRadius: radius, background: getBgColor, color: color }"
+        @tap.stop="handleClick(-1)"
+      >
+        <text class="up-fab-icon up-icon-plus" v-if="!custom"></text>
+        <slot></slot>
+      </view>
+    </view>
+    <view class="up-fab-mask" :style="getZIndex" :class="{ 'up-visible': isOpen }" @tap="handleClickCancel"></view>
+  </view>
+</template>
+
+<script>
+//拓展出来的按钮不应多于6个，否则违反了作为悬浮按钮的快速、高效的原则
+export default {
+  name: 'tuiFab',
+  emits: ['click'],
+  props: {
+    //rpx 为0时值为auto
+    left: {
+      type: [Number, String],
+      default: 0
+    },
+    //rpx 当为0时且left不为0，值为auto
+    right: {
+      type: [Number, String],
+      default: 80
+    },
+    //rpx bottom值
+    bottom: {
+      type: [Number, String],
+      default: 100
+    },
+    //rpx top值
+    top: {
+      type: [Number, String],
+      default: 0
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 997
+    },
+    //默认按钮 宽度 rpx
+    width: {
+      type: [Number, String],
+      default: 108
+    },
+    //默认按钮 高度 rpx
+    height: {
+      type: [Number, String],
+      default: 108
+    },
+    //圆角值
+    radius: {
+      type: String,
+      default: '50%'
+    },
+    //默认按钮自定义内容[替换加号]
+    custom: {
+      type: Boolean,
+      default: false
+    },
+    //默认按钮背景颜色
+    bgColor: {
+      type: String,
+      default: ''
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    btnList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    textField: {
+      type: String,
+      default: 'text'
+    },
+    imgField: {
+      type: String,
+      default: 'imgUrl'
+    },
+    size: {
+      type: [Number, String],
+      default: 28
+    },
+    //点击遮罩 是否可关闭
+    maskClosable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getBgColor() {
+      return this.bgColor || (uni && uni.$tui && uni.$tui.color.primary) || '#5677fc';
+    },
+    getStyles() {
+      let style = `z-index:${this.zIndex};`;
+      if (this.left && this.right == 0) {
+        style += `left:${this.left}rpx;`;
+      } else {
+        style += `right:${this.right}rpx;`;
+      }
+
+      if (this.bottom && this.top == 0) {
+        style += `bottom:${this.bottom}rpx;`;
+      } else {
+        style += `top:${this.top}rpx;`;
+      }
+      return style;
+    },
+    getZIndex() {
+      return Number(this.zIndex) - 2;
+    }
+  },
+  data() {
+    return {
+      isOpen: false,
+      isHidden: true,
+      timer: null
+    };
+  },
+  // #ifndef VUE3
+  beforeDestroy() {
+    clearTimeout(this.timer);
+    this.timer = null;
+  },
+  // #endif
+  // #ifdef VUE3
+  beforeUnmount() {
+    clearTimeout(this.timer);
+    this.timer = null;
+  },
+  // #endif
+  methods: {
+    handleClick: function (index) {
+      this.isHidden = false;
+      clearTimeout(this.timer);
+      if (index == -1 && this.btnList.length) {
+        this.isOpen = !this.isOpen;
+      } else {
+        this.$emit('click', {
+          index: index
+        });
+        this.isOpen = false;
+      }
+      if (!this.isOpen) {
+        this.timer = setTimeout(() => {
+          this.isHidden = true;
+        }, 200);
+      }
+    },
+    handleClickCancel: function () {
+      if (!this.maskClosable) return;
+      this.isOpen = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'tuifab';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAREAA0AAAAABnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEKAAAABoAAAAciPExJUdERUYAAAQIAAAAHgAAAB4AKQAKT1MvMgAAAaAAAABCAAAAVjyBSAVjbWFwAAAB9AAAAD4AAAFCAA/pvmdhc3AAAAQAAAAACAAAAAj//wADZ2x5ZgAAAkAAAABRAAAAYFkYQQNoZWFkAAABMAAAADAAAAA2Fm5OF2hoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAAPAAAAEAwAAANsb2NhAAACNAAAAAoAAAAKADAAAG1heHAAAAGAAAAAHwAAACABDwAobmFtZQAAApQAAAFJAAACiCnmEVVwb3N0AAAD4AAAAB8AAAAx2XRuznjaY2BkYGAAYtGolt54fpuvDNwsDCBwc1krH5xm/t/I/J+5FsjlYGACiQIAGAEKZHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBhkGEA0QwMTEDMBYQMDP/BfAYAC4kBOAB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PhJ8JMzf8b2CIYW5gaAAKM4LkAN21DAEAAHjaY2GAABYIZgYAAIMAEAB42mNgYGBmgGAZBkYGELAB8hjBfBYGBSDNAoRA/jPh//8hpOQHqEoGRjYGGJOBkQlIMDGgAkaGYQ8AUSIHswAAAAAAAAAAAAAAMAAAeNpjYGRg/t/I/J+5lkGagYFRUVCPUYmNXVCRj1FETFxRUI7RyMxcUNGO0USN+fS/HEY5XTnGfznicnLijFPAHMYpYnJyjFvBlBgWBQBNJxKpAAAAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMCiTIxMbFmZiRmJ+QALXAKKAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAMAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPTNZa18MBoAPbcFzgAA)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.up-fab-icon {
+  font-family: 'tuifab' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 10rpx;
+}
+
+.up-icon-plus:before {
+  content: '\e613';
+}
+
+.up-fab-box {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+}
+
+.up-fab__box-bottom {
+  flex-direction: column;
+}
+
+.up-fab__box-top {
+  flex-direction: column-reverse;
+}
+
+.up-fab-right {
+  align-items: flex-end;
+}
+
+.up-fab-btn {
+  transform: scale(0);
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.up-fab-hidden {
+  height: 0;
+  width: 0;
+}
+
+.up-fab-item-box {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.up-fab__pb40 {
+  padding-bottom: 40rpx;
+}
+
+.up-fab__pt40 {
+  padding-top: 40rpx;
+}
+
+.up-fab-item-left {
+  flex-flow: row-reverse;
+}
+
+.up-fab-title {
+  width: 90%;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.up-text-left {
+  padding-left: 28rpx;
+}
+
+.up-text-right {
+  padding-right: 28rpx;
+}
+
+.up-fab-img {
+  display: block;
+}
+
+.up-fab-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s linear;
+}
+
+.up-radius {
+  border-radius: 50%;
+}
+
+.up-active {
+  transform: rotate(135deg);
+}
+
+.up-fab-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.up-visible {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+}
+</style>