@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-fab/cv-fab.vue

@@ -0,0 +1,465 @@
+<template>
+  <view class="uni-cursor-point">
+    <view
+      v-if="popMenu && (leftBottom || rightBottom || leftTop || rightTop) && content.length > 0"
+      :class="{
+        'uni-fab--leftBottom': leftBottom,
+        'uni-fab--rightBottom': rightBottom,
+        'uni-fab--leftTop': leftTop,
+        'uni-fab--rightTop': rightTop
+      }"
+      class="uni-fab"
+    >
+      <view
+        :class="{
+          'uni-fab__content--left': horizontal === 'left',
+          'uni-fab__content--right': horizontal === 'right',
+          'uni-fab__content--flexDirection': direction === 'vertical',
+          'uni-fab__content--flexDirectionStart': flexDirectionStart,
+          'uni-fab__content--flexDirectionEnd': flexDirectionEnd,
+          'uni-fab__content--other-platform': !isAndroidNvue
+        }"
+        :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }"
+        class="uni-fab__content"
+        elevation="5"
+      >
+        <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" />
+        <view
+          v-for="(item, index) in content"
+          :key="index"
+          :class="{ 'uni-fab__item--active': isShow }"
+          class="uni-fab__item"
+          @click="_onItemClick(index, item)"
+        >
+          <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" mode="widthFix" />
+          <text class="uni-fab__item-text" :style="{ color: item.active ? styles.selectedColor : styles.color }">
+            {{ item.text }}
+          </text>
+        </view>
+        <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" />
+      </view>
+    </view>
+    <view
+      :class="{
+        'uni-fab__circle--leftBottom': leftBottom,
+        'uni-fab__circle--rightBottom': rightBottom,
+        'uni-fab__circle--leftTop': leftTop,
+        'uni-fab__circle--rightTop': rightTop,
+        'uni-fab__content--other-platform': !isAndroidNvue
+      }"
+      class="uni-fab__circle uni-fab__plus"
+      :style="{ 'background-color': styles.buttonColor }"
+      @click="_onClick"
+    >
+      <view class="fab-circle-v" :class="{ 'uni-fab__plus--active': isShow && content.length > 0 }"></view>
+      <view class="fab-circle-h" :class="{ 'uni-fab__plus--active': isShow && content.length > 0 }"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+let platform = 'other';
+// #ifdef APP-NVUE
+platform = uni.getSystemInfoSync().platform;
+// #endif
+
+/**
+ * Fab 悬浮按钮
+ * @description 点击可展开一个图形按钮菜单
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=144
+ * @property {Object} pattern 可选样式配置项
+ * @property {Object} horizontal = [left | right] 水平对齐方式
+ * 	@value left 左对齐
+ * 	@value right 右对齐
+ * @property {Object} vertical = [bottom | top] 垂直对齐方式
+ * 	@value bottom 下对齐
+ * 	@value top 上对齐
+ * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式
+ * 	@value horizontal 水平显示
+ * 	@value vertical 垂直显示
+ * @property {Array} content 展开菜单内容配置项
+ * @property {Boolean} popMenu 是否使用弹出菜单
+ * @event {Function} trigger 展开菜单点击事件，返回点击信息
+ * @event {Function} fabClick 悬浮按钮点击事件
+ */
+export default {
+  name: 'cvFab',
+  emits: ['fabClick', 'trigger'],
+  props: {
+    pattern: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    horizontal: {
+      type: String,
+      default: 'left'
+    },
+    vertical: {
+      type: String,
+      default: 'bottom'
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    content: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    popMenu: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      fabShow: false,
+      isShow: false,
+      isAndroidNvue: platform === 'android',
+      styles: {
+        color: '#3c3e49',
+        selectedColor: '#007AFF',
+        backgroundColor: '#fff',
+        buttonColor: '#007AFF'
+      }
+    };
+  },
+  computed: {
+    contentWidth(e) {
+      return (this.content.length + 1) * 55 + 10 + 'px';
+    },
+    contentWidthMin() {
+      return 55 + 'px';
+    },
+    // 动态计算宽度
+    boxWidth() {
+      return this.getPosition(3, 'horizontal');
+    },
+    // 动态计算高度
+    boxHeight() {
+      return this.getPosition(3, 'vertical');
+    },
+    // 计算左下位置
+    leftBottom() {
+      return this.getPosition(0, 'left', 'bottom');
+    },
+    // 计算右下位置
+    rightBottom() {
+      return this.getPosition(0, 'right', 'bottom');
+    },
+    // 计算左上位置
+    leftTop() {
+      return this.getPosition(0, 'left', 'top');
+    },
+    rightTop() {
+      return this.getPosition(0, 'right', 'top');
+    },
+    flexDirectionStart() {
+      return this.getPosition(1, 'vertical', 'top');
+    },
+    flexDirectionEnd() {
+      return this.getPosition(1, 'vertical', 'bottom');
+    },
+    horizontalLeft() {
+      return this.getPosition(2, 'horizontal', 'left');
+    },
+    horizontalRight() {
+      return this.getPosition(2, 'horizontal', 'right');
+    }
+  },
+  watch: {
+    pattern(newValue, oldValue) {
+      //console.log(JSON.stringify(newValue))
+      this.styles = Object.assign({}, this.styles, newValue);
+    }
+  },
+  created() {
+    this.isShow = this.show;
+    if (this.top === 0) {
+      this.fabShow = true;
+    }
+    // 初始化样式
+    this.styles = Object.assign({}, this.styles, this.pattern);
+  },
+  methods: {
+    _onClick() {
+      this.$emit('fabClick');
+      if (!this.popMenu) {
+        return;
+      }
+      this.isShow = !this.isShow;
+    },
+    open() {
+      this.isShow = true;
+    },
+    close() {
+      this.isShow = false;
+    },
+    /**
+     * 按钮点击事件
+     */
+    _onItemClick(index, item) {
+      this.$emit('trigger', {
+        index,
+        item
+      });
+    },
+    /**
+     * 获取 位置信息
+     */
+    getPosition(types, paramA, paramB) {
+      if (types === 0) {
+        return this.horizontal === paramA && this.vertical === paramB;
+      } else if (types === 1) {
+        return this.direction === paramA && this.vertical === paramB;
+      } else if (types === 2) {
+        return this.direction === paramA && this.horizontal === paramB;
+      } else {
+        return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-fab {
+  position: fixed;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.uni-cursor-point {
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-fab--active {
+  opacity: 1;
+}
+
+.uni-fab--leftBottom {
+  left: 5px;
+  bottom: 20px;
+  /* #ifdef H5 */
+  left: calc(5px + var(--window-left));
+  bottom: calc(20px + var(--window-bottom));
+  /* #endif */
+  padding: 10px;
+}
+
+.uni-fab--leftTop {
+  left: 5px;
+  top: 30px;
+  /* #ifdef H5 */
+  left: calc(5px + var(--window-left));
+  top: calc(30px + var(--window-top));
+  /* #endif */
+  padding: 10px;
+}
+
+.uni-fab--rightBottom {
+  right: 5px;
+  bottom: 20px;
+  /* #ifdef H5 */
+  right: calc(5px + var(--window-right));
+  bottom: calc(20px + var(--window-bottom));
+  /* #endif */
+  padding: 10px;
+}
+
+.uni-fab--rightTop {
+  right: 5px;
+  top: 30px;
+  /* #ifdef H5 */
+  right: calc(5px + var(--window-right));
+  top: calc(30px + var(--window-top));
+  /* #endif */
+  padding: 10px;
+}
+
+.uni-fab__circle {
+  position: fixed;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+  background-color: #3c3e49;
+  border-radius: 55px;
+  z-index: 11;
+}
+
+.uni-fab__circle--leftBottom {
+  left: 15px;
+  bottom: 30px;
+  /* #ifdef H5 */
+  left: calc(15px + var(--window-left));
+  bottom: calc(30px + var(--window-bottom));
+  /* #endif */
+}
+
+.uni-fab__circle--leftTop {
+  left: 15px;
+  top: 40px;
+  /* #ifdef H5 */
+  left: calc(15px + var(--window-left));
+  top: calc(40px + var(--window-top));
+  /* #endif */
+}
+
+.uni-fab__circle--rightBottom {
+  right: 15px;
+  bottom: 30px;
+  /* #ifdef H5 */
+  right: calc(15px + var(--window-right));
+  bottom: calc(30px + var(--window-bottom));
+  /* #endif */
+}
+
+.uni-fab__circle--rightTop {
+  right: 15px;
+  top: 40px;
+  /* #ifdef H5 */
+  right: calc(15px + var(--window-right));
+  top: calc(40px + var(--window-top));
+  /* #endif */
+}
+
+.uni-fab__circle--left {
+  left: 0;
+}
+
+.uni-fab__circle--right {
+  right: 0;
+}
+
+.uni-fab__circle--top {
+  top: 0;
+}
+
+.uni-fab__circle--bottom {
+  bottom: 0;
+}
+
+.uni-fab__plus {
+  font-weight: bold;
+}
+
+.fab-circle-v {
+  position: absolute;
+  width: 3px;
+  height: 31px;
+  left: 26px;
+  top: 12px;
+  background-color: white;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+}
+
+.fab-circle-h {
+  position: absolute;
+  width: 31px;
+  height: 3px;
+  left: 12px;
+  top: 26px;
+  background-color: white;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+}
+
+.uni-fab__plus--active {
+  transform: rotate(135deg);
+}
+
+.uni-fab__content {
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  border-radius: 55px;
+  overflow: hidden;
+  transition-property: width, height;
+  transition-duration: 0.2s;
+  width: 55px;
+  border-color: #dddddd;
+  border-width: 1rpx;
+  border-style: solid;
+}
+
+.uni-fab__content--other-platform {
+  border-width: 0px;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
+}
+
+.uni-fab__content--left {
+  justify-content: flex-start;
+}
+
+.uni-fab__content--right {
+  justify-content: flex-end;
+}
+
+.uni-fab__content--flexDirection {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.uni-fab__content--flexDirectionStart {
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.uni-fab__content--flexDirectionEnd {
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.uni-fab__item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 55px;
+  height: 55px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.uni-fab__item--active {
+  opacity: 1;
+}
+
+.uni-fab__item-image {
+  width: 25px;
+  height: 25px;
+  margin-bottom: 3px;
+}
+
+.uni-fab__item-text {
+  color: #ffffff;
+  font-size: 12px;
+}
+
+.uni-fab__item--first {
+  width: 55px;
+}
+</style>

package/ui-cv/cv-fab/{uni-fab.vue.bak → cv-fab.vue.bak}

@@ -38,11 +38,11 @@
 </template>
 
 <script>
-	import uniIcons from "../uni-icons/uni-icons.vue";
+	import cvIcon2 from "../cv-icon2/cv-icon2.vue";
 	export default {
 		name: 'UniFab',
 		components: {
-			uniIcons
+			cvIcon2
 		},
 		props: {
 			pattern: {

package/ui-cv/cv-fav/cv-fav.vue

@@ -0,0 +1,150 @@
+<template>
+  <view
+    :class="[circle === true || circle === 'true' ? 'uni-fav--circle' : '']"
+    :style="[{ backgroundColor: checked ? bgColorChecked : bgColor }]"
+    @click="onClick"
+    class="uni-fav"
+  >
+    <!-- #ifdef MP-ALIPAY -->
+    <view class="uni-fav-star" v-if="!checked && (star === true || star === 'true')">
+      <cv-icon2 :color="fgColor" :style="{ color: checked ? fgColorChecked : fgColor }" size="14" type="star-filled" />
+    </view>
+    <!-- #endif -->
+    <!-- #ifndef MP-ALIPAY -->
+    <cv-icon2
+      :color="fgColor"
+      :style="{ color: checked ? fgColorChecked : fgColor }"
+      class="uni-fav-star"
+      size="14"
+      type="star-filled"
+      v-if="!checked && (star === true || star === 'true')"
+    />
+    <!-- #endif -->
+    <text :style="{ color: checked ? fgColorChecked : fgColor }" class="uni-fav-text">
+      {{ checked ? contentText.contentFav : contentText.contentDefault }}
+    </text>
+  </view>
+</template>
+
+<script>
+/**
+ * Fav 收藏按钮
+ * @description 用于收藏功能，可点击切换选中、不选中的状态
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=864
+ * @property {Boolean} star = [true|false] 按钮是否带星星
+ * @property {String} bgColor 未收藏时的背景色
+ * @property {String} bgColorChecked 已收藏时的背景色
+ * @property {String} fgColor 未收藏时的文字颜色
+ * @property {String} fgColorChecked 已收藏时的文字颜色
+ * @property {Boolean} circle = [true|false] 是否为圆角
+ * @property {Boolean} checked = [true|false] 是否为已收藏
+ * @property {Object} contentText = [true|false] 收藏按钮文字
+ * @event {Function} click 点击 fav按钮触发事件
+ * @example <uni-fav :checked="true"/>
+ */
+export default {
+  name: 'cvFav',
+  // TODO 兼容 vue3，需要注册事件
+  emits: ['click'],
+  props: {
+    star: {
+      type: [Boolean, String],
+      default: true
+    },
+    bgColor: {
+      type: String,
+      default: '#eeeeee'
+    },
+    fgColor: {
+      type: String,
+      default: '#666666'
+    },
+    bgColorChecked: {
+      type: String,
+      default: '#007aff'
+    },
+    fgColorChecked: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    circle: {
+      type: [Boolean, String],
+      default: false
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    contentText: {
+      type: Object,
+      default() {
+        return {
+          contentDefault: '收藏',
+          contentFav: '已收藏'
+        };
+      }
+    }
+  },
+  watch: {
+    checked() {
+      if (uni.report) {
+        if (this.checked) {
+          uni.report('收藏', '收藏');
+        } else {
+          uni.report('取消收藏', '取消收藏');
+        }
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-fav {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 25px;
+  line-height: 25px;
+  text-align: center;
+  border-radius: 3px;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-fav--circle {
+  border-radius: 30px;
+}
+
+.uni-fav-star {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  height: 25px;
+  line-height: 24px;
+  margin-right: 3px;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-fav-text {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  height: 25px;
+  line-height: 25px;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+</style>