@10yun/cv-mobile-ui 0.5.20 → 0.5.22

package/uni-ui/lib/uni-fav/uni-fav.vue

@@ -1 +1,123 @@
-<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')">
      <uni-icons :color="fgColor" :style="{ color: checked ? fgColorChecked : fgColor }" size="14" type="star-filled" />
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-ALIPAY -->
    <uni-icons
      :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 ? contentFav : contentDefault }}
    </text>
  </view>
 * 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] 收藏按钮文字
 * @property {Boolean} stat 是否开启统计功能
 * @event {Function} click 点击 fav按钮触发事件
 * @example <uni-fav :checked="true"/>
 */
  name: 'UniFav',
  // 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: ''
        };
      }
    },
    stat: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    contentDefault() {
      return this.contentText.contentDefault || t('uni-fav.collect');
    },
    contentFav() {
      return this.contentText.contentFav || t('uni-fav.collected');
    }
  },
  watch: {
    checked() {
      if (uni.report && this.stat) {
        if (this.checked) {
          uni.report('收藏', '收藏');
        } else {
          uni.report('取消收藏', '取消收藏');
        }
      }
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
+<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')">
+      <uni-icons :color="fgColor" :style="{ color: checked ? fgColorChecked : fgColor }" size="14" type="star-filled" />
+    </view>
+    <!-- #endif -->
+    <!-- #ifndef MP-ALIPAY -->
+    <uni-icons
+      :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 ? contentFav : 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] 收藏按钮文字
+ * @property {Boolean} stat 是否开启统计功能
+ * @event {Function} click 点击 fav按钮触发事件
+ * @example <uni-fav :checked="true"/>
+ */
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import messages from './i18n/index.js';
+const { t } = initVueI18n(messages);
+export default {
+  name: 'UniFav',
+  // 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: ''
+        };
+      }
+    },
+    stat: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    contentDefault() {
+      return this.contentText.contentDefault || t('uni-fav.collect');
+    },
+    contentFav() {
+      return this.contentText.contentFav || t('uni-fav.collected');
+    }
+  },
+  watch: {
+    checked() {
+      if (uni.report && this.stat) {
+        if (this.checked) {
+          uni.report('收藏', '收藏');
+        } else {
+          uni.report('取消收藏', '取消收藏');
+        }
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>