标签：公用 购物车 编辑 &# components 组件 fullPath 图标

head头部导航

左边后退图标：图标是iconfont v-if来控制该标签的显示和隐藏 因为在某些组件中（如购物车组件 首页组件） 不使用该图标 监听该图标的点击 点击后返回上一页

<span class="go-back" v-if="goBack" @click="funGoBack()">
	<i class="iconfont">&#xe61c;</i>
</span>
<script>
	funGoBack() {   //返回上一页（不怎么懂）
		//$route.fullPath: string 完成解析后的URL，包含查询参数和hash的完整路径。
    	if (this.$route.fullPath.indexOf('/store') !== -1) {
			this.$router.push({path: '/index'})// 返回首页
    	} else {
			this.$router.go(-1);// 如果是从商家详情页跳转过来的 则后退
		}
	}
</script>

中间展示标题：由父组件传入

<span class="title">{{title}}</span>

右边可能啥也没有 可能是… 可能是编辑/取消编辑购物车：使用v-if控制…的展示与隐藏 插槽来控制编辑/取消编辑购物车

<!--
在商家详情页组件中 右上角会有... 点击展示更多信息 此处只是展示了... 并没有实现点击展示更多的功能
该标签用来展示... ...也是iconfont v-if来控制该标签的显示和隐藏 因为也就在店家详情页组件会用到他
-->
<span class="more" v-if="more"><i class="iconfont">&#xe602;</i></span>
<!--下面是三个插槽-->
<slot name="save-address"></slot>
<!--下面两个用于购物车组件中 展示右上角编辑、取消编辑-->
<slot name="edit-cart"></slot>
<slot name="cancel-edit-cart"></slot>

bottom底部导航

标签：公用,购物车,编辑,&#,components,组件,fullPath,图标
来源： https://blog.csdn.net/CaraYQ/article/details/122008832

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。