mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-10-31 03:22:08 +08:00 
			
		
		
		
	
		
			
				
	
	
		
			63 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			63 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <router-link
 | |
|     v-if="item.path"
 | |
|     :class="{ active }"
 | |
|     :to="path"
 | |
|     v-html="itemName"
 | |
|   />
 | |
|   <a v-else-if="item.link" :href="item.link" v-html="itemName" />
 | |
|   <a v-else v-html="itemName" />
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| export default {
 | |
|   name: 'VanDocNavLink',
 | |
| 
 | |
|   props: {
 | |
|     base: String,
 | |
|     item: Object,
 | |
|   },
 | |
| 
 | |
|   computed: {
 | |
|     itemName() {
 | |
|       const name = (this.item.title || this.item.name).split(' ');
 | |
|       return `${name[0]} <span>${name.slice(1).join(' ')}</span>`;
 | |
|     },
 | |
| 
 | |
|     path() {
 | |
|       return `${this.base}${this.item.path}`;
 | |
|     },
 | |
| 
 | |
|     active() {
 | |
|       if (this.$route.path === this.path) {
 | |
|         return true;
 | |
|       }
 | |
| 
 | |
|       if (this.item.path === 'home') {
 | |
|         return this.$route.path === this.base;
 | |
|       }
 | |
| 
 | |
|       return false;
 | |
|     },
 | |
|   },
 | |
| 
 | |
|   watch: {
 | |
|     active() {
 | |
|       this.scrollIntoView();
 | |
|     },
 | |
|   },
 | |
| 
 | |
|   mounted() {
 | |
|     this.scrollIntoView();
 | |
|   },
 | |
| 
 | |
|   methods: {
 | |
|     scrollIntoView() {
 | |
|       if (this.active && this.$el && this.$el.scrollIntoViewIfNeeded) {
 | |
|         this.$el.scrollIntoViewIfNeeded();
 | |
|       }
 | |
|     },
 | |
|   },
 | |
| };
 | |
| </script>
 |