项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-fav/components/uni-fav/uni-fav.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,161 @@
<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 lang="scss" >
   $fav-height: 25px;

   .uni-fav {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: $fav-height;
      line-height: $fav-height;
      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: $fav-height;
      line-height: 24px;
      margin-right: 3px;
      align-items: center;
      justify-content: center;
   }

   .uni-fav-text {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      height: $fav-height;
      line-height: $fav-height;
      align-items: center;
      justify-content: center;
      font-size: 12px;
   }
</style>