@10yun/cv-mobile-ui 0.5.29 → 0.5.30

package/ui-fireui/fui-bottom-navigation/fui-bottom-navigation.vue

@@ -0,0 +1,390 @@
+<template>
+  <view @touchmove.stop.prevent="stop">
+    <view class="fui-bottom-navigation" :class="{ 'fui-navigation-fixed': isFixed, 'fui-remove-splitLine': unlined }">
+      <view
+        class="fui-navigation-item"
+        :class="{ 'fui-item-after_height': splitLineScale, 'fui-last-item': index == itemList.length - 1 }"
+        :style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
+        v-for="(item, index) in itemList"
+        :key="index"
+      >
+        <view class="fui-item-inner" @tap="menuClick(index, item.parameter, item.type)">
+          <image
+            :src="current | getIcon(index, item)"
+            class="fui-navigation-img"
+            v-if="item.iconPath || (current == index && item.selectedIconPath && item.type == 1)"
+          ></image>
+          <text
+            class="fui-navigation-text"
+            :style="{
+              color: isDarkMode ? '#fff' : current == index && item.type == 1 ? selectedColor : item.color || color,
+              fontWeight: current == index && bold && item.type == 1 ? 'bold' : 'normal',
+              fontSize: fontSize
+            }"
+          >
+            {{ item.text }}
+          </text>
+        </view>
+        <view
+          class="fui-navigation-popup"
+          :class="{ 'fui-navigation-popup_show': showMenuIndex == index }"
+          :style="{ backgroundColor: isDarkMode ? '#4c4c4c' : subMenuBgColor, left: item.popupLeft || '50%' }"
+          v-if="item.itemList"
+        >
+          <view
+            class="fui-popup-cell"
+            :class="{ 'fui-first-cell': subIndex === 0, 'fui-last-cell': subIndex === item.itemList.length - 1 }"
+            :hover-class="subMenuHover ? (isDarkMode ? 'fui-item-dark_hover' : 'fui-item-hover') : ''"
+            :hover-stay-time="150"
+            v-for="(subItem, subIndex) in item.itemList || []"
+            :key="subIndex"
+            @tap="subMenuClick(index, item.type, subIndex, subItem.parameter)"
+          >
+            <text
+              class="fui-ellipsis"
+              :style="{ color: isDarkMode ? '#fff' : subMenuColor, fontSize: subMenufontSize, lineHeight: subMenufontSize }"
+            >
+              {{ subItem.text }}
+            </text>
+          </view>
+          <view class="fui-popup-triangle" :style="{ borderTopColor: isDarkMode ? '#4c4c4c' : subMenuBgColor }"></view>
+        </view>
+      </view>
+    </view>
+    <view class="fui-navigation-mask" :class="{ 'fui-navigation-mask_show': showMenuIndex != -1 }" @tap="handleClose"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiBottomNavigation',
+  props: {
+    //当前索引
+    current: {
+      type: Number,
+      default: 0
+    },
+    /**
+		 * {
+				text: 'ThorUI',
+				iconPath: '/static/images/common/icon_menu_gray.png',
+				selectedIconPath: '/static/images/common/icon_menu_gray.png',
+				color: '#666',
+				//1-选中切换，2-跳转、请求、其他操作，3-菜单
+				type: 3,
+				//自定义参数，类型自定义
+				parameter: null,
+				//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
+				popupLeft: '',
+				itemList: [
+					{
+						//不建议超过6个字，请自行控制
+						text: '自定义参',
+						//自定义参数，类型自定义
+						parameter: null
+					},
+					{
+						text: '自定义参数',
+						//自定义参数，类型自定义
+						parameter: null
+					}
+				]
+			}
+		 * 
+		 * */
+    itemList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    //颜色
+    color: {
+      type: String,
+      default: '#666'
+    },
+    //选中颜色
+    selectedColor: {
+      type: String,
+      default: '#5677fc'
+    },
+    fontSize: {
+      type: String,
+      default: '28rpx'
+    },
+    //选中后字体是否加粗
+    bold: {
+      type: Boolean,
+      default: true
+    },
+    //导航条背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#F8F8F8'
+    },
+    //item分割线高度是否缩小
+    splitLineScale: {
+      type: Boolean,
+      default: true
+    },
+    //二级菜单字体颜色
+    subMenuColor: {
+      type: String,
+      default: '#333'
+    },
+    //二级菜单字体大小
+    subMenufontSize: {
+      type: String,
+      default: '28rpx'
+    },
+    //二级菜单背景色  深色：#4c4c4c
+    subMenuBgColor: {
+      type: String,
+      default: '#fff'
+    },
+    //二级菜单是否有点击效果
+    subMenuHover: {
+      type: Boolean,
+      default: true
+    },
+    //是否固定在底部
+    isFixed: {
+      type: Boolean,
+      default: true
+    },
+    //去除导航栏顶部的线条
+    unlined: {
+      type: Boolean,
+      default: false
+    },
+    //是否暗黑模式 (true：所有设置颜色失效)
+    isDarkMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  filters: {
+    getIcon(current, index, item) {
+      let url = item.iconPath;
+      if (item.type == 1) {
+        url = current == index ? item.selectedIconPath || item.iconPath : item.iconPath;
+      }
+      return url;
+    }
+  },
+  data() {
+    return {
+      showMenuIndex: -1 //显示的菜单index
+    };
+  },
+  methods: {
+    stop() {
+      return false;
+    },
+    handleClose() {
+      this.showMenuIndex = -1;
+    },
+    menuClick(index, parameter, type) {
+      //type：1-选中切换，2-跳转、请求、其他操作，3-菜单
+      if (type == 3) {
+        this.showMenuIndex = this.showMenuIndex == index ? -1 : index;
+      } else {
+        this.showMenuIndex = -1;
+        this.$emit('click', {
+          menu: 'main', //main,sub 主菜单，子菜单
+          type: type,
+          index: index,
+          parameter: parameter || ''
+        });
+      }
+    },
+    subMenuClick(index, type, subIndex, parameter) {
+      this.showMenuIndex = -1;
+      this.$emit('click', {
+        menu: 'sub', //main,sub 主菜单，子菜单
+        type: type,
+        index: index,
+        subIndex: subIndex,
+        parameter: parameter || ''
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-bottom-navigation {
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  z-index: 999;
+}
+
+.fui-navigation-fixed {
+  position: fixed !important;
+  left: 0;
+  bottom: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.fui-bottom-navigation::after {
+  content: '';
+  width: 100%;
+  border-top: 1rpx solid #bfbfbf;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 0;
+  z-index: 1000;
+}
+.fui-remove-splitLine::before {
+  border-top: 0 !important;
+}
+
+.fui-navigation-item {
+  flex: 1;
+  height: 100rpx;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.fui-item-inner {
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-navigation-item::after {
+  height: 100%;
+  content: '';
+  position: absolute;
+  border-right: 1rpx solid #bfbfbf;
+  transform: scaleX(0.5) translateZ(0);
+  right: 0;
+  top: 0;
+}
+
+.fui-item-after_height::after {
+  height: 40% !important;
+  top: 30% !important;
+}
+
+.fui-last-item::after {
+  border-right: 0 !important;
+}
+
+.fui-navigation-img {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 8rpx;
+}
+
+.fui-navigation-popup {
+  max-width: 160%;
+  width: auto;
+  position: absolute;
+  border-radius: 8rpx;
+  visibility: hidden;
+  opacity: 0;
+  transform: translate3d(-50%, 0, 0);
+  transform-origin: center;
+  transition: all 0.12s ease-in-out;
+  bottom: 0;
+  z-index: -1;
+}
+
+.fui-navigation-popup_show {
+  transform: translate3d(-50%, -124rpx, 0);
+  visibility: visible;
+  opacity: 1;
+}
+
+.fui-popup-triangle {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 9rpx solid transparent;
+  border-right: 9rpx solid transparent;
+  border-top: 18rpx solid;
+  left: 50%;
+  bottom: -18rpx;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  z-index: 997;
+}
+
+.fui-popup-cell {
+  width: 100%;
+  padding: 32rpx 20rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  position: relative;
+}
+
+.fui-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.fui-popup-cell::after {
+  content: '';
+  position: absolute;
+  border-bottom: 1rpx solid #eaeef1;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  bottom: 0;
+  right: 24rpx;
+  left: 24rpx;
+}
+
+.fui-item-hover {
+  background-color: #f1f1f1;
+}
+
+.fui-item-dark_hover {
+  background-color: #555;
+}
+
+.fui-first-cell {
+  border-top-left-radius: 8rpx;
+  border-top-right-radius: 8rpx;
+}
+
+.fui-last-cell {
+  border-bottom-left-radius: 8rpx;
+  border-bottom-right-radius: 8rpx;
+}
+
+.fui-last-cell::after {
+  border-bottom: 0 !important;
+}
+
+.fui-navigation-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 995;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.fui-navigation-mask_show {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

package/ui-fireui/fui-bottom-popup/fui-bottom-popup.vue

@@ -0,0 +1,100 @@
+<template>
+  <view @touchmove.stop.prevent>
+    <view
+      class="fui-popup-class fui-bottom-popup"
+      :class="{ 'fui-popup-show': show, 'fui-popup-radius': radius }"
+      :style="{ backgroundColor: backgroundColor, height: height ? height + 'rpx' : 'auto' }"
+    >
+      <slot></slot>
+    </view>
+    <view class="fui-popup-mask" :class="[show ? 'fui-mask-show' : '']" v-if="mask" @tap="handleClose"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiBottomPopup',
+  props: {
+    //是否需要mask
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    //控制显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
+    //高度 rpx
+    height: {
+      type: Number,
+      default: 0
+    },
+    //设置圆角
+    radius: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    handleClose() {
+      if (!this.show) {
+        return;
+      }
+      this.$emit('close', {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-bottom-popup {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 997;
+  /* visibility: hidden; */
+  opacity: 0;
+  transform: translate3d(0, 100%, 0);
+  transform-origin: center;
+  transition: all 0.3s ease-in-out;
+  min-height: 20rpx;
+}
+.fui-popup-radius {
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  padding-bottom: env(safe-area-inset-bottom);
+  overflow: hidden;
+}
+
+.fui-popup-show {
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+  /* visibility: visible; */
+}
+
+.fui-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 996;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-mask-show {
+  opacity: 1;
+  visibility: visible;
+}
+</style>

package/ui-fireui/fui-bubble-popup/fui-bubble-popup.vue

@@ -0,0 +1,236 @@
+<template>
+  <view :class="{ 'fui-flex-end': flexEnd }">
+    <view
+      class="fui-popup-list"
+      :class="{ 'fui-popup-show': show, 'fui-z_index': show && position != 'relative' }"
+      :style="{
+        width: width,
+        backgroundColor: backgroundColor,
+        borderRadius: radius,
+        color: color,
+        position: position,
+        left: left,
+        right: right,
+        bottom: bottom,
+        top: top,
+        transform: `translate(${translateX},${translateY})`
+      }"
+    >
+      <view
+        class="fui-triangle"
+        :style="{
+          borderWidth: borderWidth,
+          borderColor: `transparent transparent ${backgroundColor} transparent`,
+          left: triangleLeft,
+          right: triangleRight,
+          top: triangleTop,
+          bottom: triangleBottom
+        }"
+        v-if="direction == 'top'"
+      ></view>
+      <view
+        class="fui-triangle"
+        :style="{
+          borderWidth: borderWidth,
+          borderColor: `${backgroundColor}  transparent transparent transparent`,
+          left: triangleLeft,
+          right: triangleRight,
+          top: triangleTop,
+          bottom: triangleBottom
+        }"
+        v-if="direction == 'bottom'"
+      ></view>
+      <view
+        class="fui-triangle"
+        :style="{
+          borderWidth: borderWidth,
+          borderColor: `transparent  ${backgroundColor} transparent transparent`,
+          left: triangleLeft,
+          right: triangleRight,
+          top: triangleTop,
+          bottom: triangleBottom
+        }"
+        v-if="direction == 'left'"
+      ></view>
+      <view
+        class="fui-triangle"
+        :style="{
+          borderWidth: borderWidth,
+          borderColor: `transparent transparent  transparent ${backgroundColor}`,
+          left: triangleLeft,
+          right: triangleRight,
+          top: triangleTop,
+          bottom: triangleBottom
+        }"
+        v-if="direction == 'right'"
+      ></view>
+      <slot />
+    </view>
+    <view
+      @touchmove.stop.prevent="stop"
+      class="fui-popup-mask"
+      :class="{ 'fui-popup-show': show }"
+      :style="{ backgroundColor: maskBgColor }"
+      v-if="mask"
+      @tap="handleClose"
+    ></view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'fuiBubblePopup',
+  props: {
+    //宽度
+    width: {
+      type: String,
+      default: '300rpx'
+    },
+    //popup圆角
+    radius: {
+      type: String,
+      default: '8rpx'
+    },
+    //popup 定位 left right top bottom值
+    left: {
+      type: String,
+      default: 'auto'
+    },
+    right: {
+      type: String,
+      default: 'auto'
+    },
+    top: {
+      type: String,
+      default: 'auto'
+    },
+    bottom: {
+      type: String,
+      default: 'auto'
+    },
+    translateX: {
+      type: String,
+      default: '0'
+    },
+    translateY: {
+      type: String,
+      default: '0'
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#4c4c4c'
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    //三角border-width
+    borderWidth: {
+      type: String,
+      default: '12rpx'
+    },
+    //三角形方向 top left right bottom
+    direction: {
+      type: String,
+      default: 'top'
+    },
+    //定位 left right top bottom值
+    triangleLeft: {
+      type: String,
+      default: 'auto'
+    },
+    triangleRight: {
+      type: String,
+      default: 'auto'
+    },
+    triangleTop: {
+      type: String,
+      default: 'auto'
+    },
+    triangleBottom: {
+      type: String,
+      default: 'auto'
+    },
+    //定位 relative absolute  fixed
+    position: {
+      type: String,
+      default: 'fixed'
+    },
+    //flex-end
+    flexEnd: {
+      type: Boolean,
+      default: false
+    },
+    //是否需要mask
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    maskBgColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0.4)'
+    },
+    //控制显示
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClose() {
+      if (!this.show) {
+        return;
+      }
+      this.$emit('close', {});
+    },
+    stop() {
+      return false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-popup-list {
+  z-index: 1;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-flex-end {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fui-triangle {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  z-index: 997;
+}
+
+.fui-popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 995;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-popup-show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.fui-z_index {
+  z-index: 996;
+}
+</style>