Vue3 局部组件实现选项卡（引入JavaScript文件方式）

李昊哲小课

已于 2022-09-23 14:28:49 修改

阅读量10w+

点赞数

分类专栏：前端 JavaScript 文章标签： javascript 前端 vue.js

于 2022-09-23 13:57:47 首次发布

本文链接：https://blog.csdn.net/qq_24330181/article/details/127009396

版权

前端同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

Vue3 选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>李昊哲-小课</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			.detail {
				position: relative;
				top: 30px;
				left: 30px;
			}

			.ETtab {
				width: 990px;
				border: 1px solid #eee;
				border-bottom: 1px solid #e4393c;
				position: absolute;
				background: #f7f7f7;
				color: #666;

			}

			ul>li {
				list-style: none;
				float: left;
				font-size: 14px;
				width: 160px;
				height: 38px;
				line-height: 38px;
				text-align: center;
				cursor: pointer;

			}

			.current {
				background-color: #e4393c;
				color: #fff;
				cursor: default;
			}

			.extra {
				text-align: center;
				background-color: #df3033;
				color: #fff;
				cursor: pointer;
				width: 94px;
				height: 32px;
				line-height: 32px;
				position: absolute;
				right: 15px;
				top: 3px;
			}

			.tab-con {
				color: #666;
				background: #fff;
				position: absolute;
				top: 40px;
				padding: 30px;
				font-size: 66px;
			}

			.hidden {
				display: none;
			}

			.show {
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="detail">
				<span v-is='"ETtab"' @change-tab="tabChange"></span>
				<span v-is='"tab-con"' :resindex="index"></span>
			</div>
		</div>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		// import { createApp } from 'vue'

		Vue.createApp({
			data() {
				return {
					index: 0
				}
			},
			methods: {
				tabChange(index) {
					this.index = index
				}
			},
			components: {
				ETtab: {
					data() {
						return {
							lis: [{
								'title': '商品介绍',
								'classList': ['current'],
							}, {
								'title': '规格包装',
								'classList': [],
							}, {
								'title': '售后保障',
								'classList': [],
							}, {
								'title': '商品评价(66)',
								'classList': [],
							}, {
								'title': '手机社区',
								'classList': [],
							}],
						}
					},
					methods: {
						change(index) {
							let lis = this.lis;
							for (let i = 0; i < lis.length; i++) {
								lis[i].classList = [];
								if (i == index) {
									lis[i].classList = ['current'];
								}
							}
							this.$emit('changeTab', index)
						}
					},
					"template": `<div class="ETtab">
									<ul>
										<li v-for="(li,index) in lis" v-text="li.title" v-bind:index="index" :class="li.classList" @click="change(index)"></li>
									</ul>
									<div class="extra">
										加入购物车
									</div>
								</div>`
				},
				'tab-con': {
					data() {
						return {
							contents: [{
								'title': '商品介绍',
								'classList': ['show'],
							}, {
								'title': '规格包装',
								'classList': ['hidden'],
							}, {
								'title': '售后保障',
								'classList': ['hidden'],
							}, {
								'title': '商品评价(66)',
								'classList': ['hidden'],
							}, {
								'title': '手机社区',
								'classList': ['hidden'],
							}],
						}
					},
					props: {
						resindex: {
							type: Number,
							default: 0
						}
					},
					watch: {
						resindex(newValue, oldValue) {
							console.log(newValue);
							this.contents[oldValue].classList = ['hidden'];
							this.contents[newValue].classList = ['show'];
						}
					},
					"template": `<div class="tab-con">
									<div v-for="(content,index) in contents" v-text="content.title" v-bind:index="index" :class='content.classList'></div>
								</div>`
				}
			},
		}).mount('#app');
	</script>
</html>