项目初始化

gaoluyang

4 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-breadcrumb/components/uni-breadcrumb-item/uni-breadcrumb-item.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,121 @@
<template>
   <view class="uni-breadcrumb-item">
      <view :class="{
         'uni-breadcrumb-item--slot': true,
         'uni-breadcrumb-item--slot-link': to && currentPage !== to
         }" @click="navTo">
         <slot />
      </view>
      <i v-if="separatorClass" class="uni-breadcrumb-item--separator" :class="separatorClass" />
      <text v-else class="uni-breadcrumb-item--separator">{{ separator }}</text>
   </view>
</template>
<script>
   /**
    * BreadcrumbItem é¢åŒ…屑导航子组件
    * @property {String/Object} to è·¯ç”±è·³è½¬é¡µé¢è·¯å¾„/对象
    * @property {Boolean} replace åœ¨ä½¿ç”¨ to è¿›è¡Œè·¯ç”±è·³è½¬æ—¶ï¼Œå¯ç”¨ replace å°†ä¸ä¼šå‘ history æ·»åŠ æ–°è®°å½•(仅 h5 æ”¯æŒï¼‰
    */
   export default {
      data() {
         return {
            currentPage: ""
         }
      },
      options: {
         virtualHost: true
      },
      props: {
         to: {
            type: String,
            default: ''
         },
         replace:{
            type: Boolean,
            default: false
         }
      },
      inject: {
         uniBreadcrumb: {
            from: "uniBreadcrumb",
            default: null
         }
      },
      created(){
         const pages = getCurrentPages()
         const page = pages[pages.length-1]

         if(page){
            this.currentPage = `/${page.route}`
         }
      },
      computed: {
         separator() {
            return this.uniBreadcrumb.separator
         },
         separatorClass() {
            return this.uniBreadcrumb.separatorClass
         }
      },
      methods: {
         navTo() {
            const { to } = this

            if (!to || this.currentPage === to){
               return
            }

            if(this.replace){
               uni.redirectTo({
                  url:to
               })
            }else{
               uni.navigateTo({
                  url:to
               })
            }
         }
      }
   }
</script>
<style lang="scss">
   $uni-primary: #2979ff !default;
   $uni-base-color: #6a6a6a !default;
   $uni-main-color: #3a3a3a !default;
   .uni-breadcrumb-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      font-size: 14px;

      &--slot {
         color: $uni-base-color;
         padding: 0 10px;

         &-link {
            color: $uni-main-color;
            font-weight: bold;
            /* #ifndef APP-NVUE */
            cursor: pointer;
            /* #endif */

            &:hover {
               color: $uni-primary;
            }
         }
      }

      &--separator {
         font-size: 12px;
         color: $uni-base-color;
      }

      &:first-child &--slot {
         padding-left: 0;
      }
		
      &:last-child &--separator {
         display: none;
      }
   }
</style>