《Vue.js实战》第7章答案

出差比较闲，先是把红宝书过了一遍，又看了尚硅谷的一揽子js,vue相关课程，大致对promise,axios,nodejs，ajax,原型链，模块化这些内容有了大概的了解，之前那些陌生而令人生畏的术语vite,vuecli,nodeman,liveserver,npm，fetch,json-server这些都显得简单了起来，归根到底只是一些js实现的工具包或是一些构建工具，甚至于vue本身都并不怎么难，只要潜心学习都很简单，难的是对js的理解和开发的经验，或者对初学者来说代码量的积累。初学者很容易纠结于选择哪种语言，先学哪个知识，甚至于纠结使用哪个编辑器，其实这是一种逃避，一种害怕失败而不停地纠结于选择的过程，如果不能克服这种情绪沉下心写代码就很难进步，做任何事情都是这样。闲言少叙，虽然现在已经使用vue3了，但解决问题的思路都是一样的，我把之前的题目翻出来看一下，觉得很简单，解决之余站在初学者角度跟大家分享一下思路，共同学习，老手勿喷，思路如果看不懂可以看尚硅谷禹神的课，语法觉得陌生自己多敲一敲js代码，Vue实例就是一个功能完备的js类,正如vue就是一个js文件一样。
第7章练习。给pane组件新增一个prop:closable的布尔值，来支持是否可以关闭这个pane.这道题目首先有点坑，要知道，一般都使用components注册子组件但这里使用了slot,这就很容易混淆,这里pane组件的 $p a re n t 是 t ab s, 但组件标签上的数据要写在 roo t 组件。但没关系，把 c l os ab l e 定义在 roo t 组件里即可，再在 t ab s 遍历时使用实例中的方法获取子组件 c l os ab l e 的值，获取子组件的值如果使用 co m p o n e n t s 的话可以用 p ro p s, 也可以$ emit,还可以全局事件总线或者消息订阅，这里直接用$children组件遍历即可。

接下来就是实现这个按钮的功能，这里有个坑，题目要求使用destroy方法，但这里的文本是使用slot嵌套的，如果把pane组件破坏了，“标签一的内容”文本就会残留，没法管理。refs的语法懒得去看了，官方是不推荐直接操作dom的，建议使用v-if,那这里只好将就一下了，不然用v-if又要传来传去了。

练习2的要求更简单了，可以直接用css3的动画效果，不过要手动编写切换class的代码，也可以在基础上用vue封装的，这里用vue的。完整代码如下。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签页组件</title>
	<style type="text/css">
		[v-cloak]{
			display: none;
		}
		.tabs{
			font-size: 14px;
			color: #657180;
		}
		.tabs-bar:after{
			content: '';
			display: block;
			width: 100%;
			height: 1px;
			background: #d7dde4;
			margin-top: -1px;
		}
		.tabs-tab{
			display: inline-block;
			padding: 4px 16px;
			margin-right: 6px;
			background: #fff;
			border: 1px solid #d7dde4;
			cursor: pointer;
			position: relative;
		}
		.tabs-tab-active{
			color: #3399ff;
			border-top: 1px solid #3399ff;
			border-bottom: 1px solid #fff;
		}
		.tabs-tab-active:before{
			content: '';
			display: block;
			height: 1px;
			background: #3399ff;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}
		.tabs-content{
			padding: 8px 0;
		}
		.v-enter-active{
			animation: atguigu 1s;
		}
		.v-leave-active{
			animation: atguigu 1s reverse;
		}
		@keyframes atguigu{
			from{
				transform: translateX(-100%);
			}
			to{
				transform: translateX(0px);
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<tabs v-model="activeKey">
			<pane label="标签一" name="1" :closable="closable">
				<div id="article1">标签一的内容</div>
			</pane>
			<pane label="标签二" name="2" :closable="closable">
				<div id="article2">标签二的内容</div>
			</pane>
			<pane label="标签三" name="3" :closable="closable">
				<div id="article3">标签三的内容</div>
			</pane>
		</tabs>
	</div>
	<script src="vue.js"></script>
	<script>

		Vue.component('pane',{
			name:'pane',
			template:'\
						\
						',
			props:{
				name:{
					type:String
				},
				label:{
					type:String,
					default:''
				},
				closable:{
					type:Boolean
				}
			},
			methods:{
				updateNav(){
					this.$parent.updateNav()
				},
				bye(){
					this.$destroy()
				}
			},
			watch:{
				label(){
					this.updateNav();
				}
			},
			mounted(){
				this.updateNav();
			},
			beforeDestroy(){
				let refName;
				refName="article"+this.name;
				document.getElementById(refName).innerHTML='';			
			},
			data:function(){
				return {
					show:true,
				}
			},
		});
		Vue.component('tabs',{
			template:'\
			\
				{{item.label}}\
				\
			\
			\
				\
				\
			\
		
',
			data:function(){
				return {
					//用于渲染tabs的标题
					currentValue:this.value,
					navList:[],
				}
			},
			props:{
				value:{
					type:[String,Number]
				}
			},
			methods:{
				destroyPane(name){

					this.getTabs().forEach((pane)=>{
						if(pane.name===name){

							pane.bye()
						}
					});
					this.updateNav()
				},
				getClosable(name){
					var tabs=this.getTabs();
					for(tab of tabs){
						if(tab.name===name){
							return tab.closable;
						}
					}
				},
				tabCls:function(item){
					return [
					'tabs-tab',{
						'tabs-tab-active':item.name===this.currentValue
					}
					]
				},
				getTabs(){
					//通过遍历子组件，得到所有的pane组件
					return this.$children.filter(function(item){
						return item.$options.name==='pane';
					});
				},
				updateNav(){
					this.navList=[];
					//设置对this的引用，在function回调里，this指向的
					//并不是Vue实例
					var _this=this;
					this.getTabs().forEach(function(pane,index){
						_this.navList.push({
							label:pane.label,
							name:pane.name||index,
						});
						//如果没有给pane设置name,默认设置它的索引
						if(!pane.name) pane.name=index;
						//设置当前选中的tab的索引
						if(index===0){
							if(!_this.currentValue){
								_this.currentValue=pane.name||index;
							}
						}
					});
					this.updateStatus();
				},
				updateStatus(){
					var tabs=this.getTabs();
					var _this=this;
					tabs.forEach(function(tab){
						return tab.show=tab.name===_this.currentValue;
					});
				},
				handleChange:function(index){
					var nav=this.navList[index];
					var name=nav.name;
					this.currentValue=name;
					//这里是为了统一数据，没有实际作用this.$emit('input',name);
					//这里是为了提示方法的使用，没有实际作用this.$emit('on-click',name);
				}
			},
			watch:{
					value:function(val){
						this.currentValue=val;
					},
					currentValue:function(){
						this.updateStatus();
						//在更新前使用现有标签飞出的动画即可
					}

			}
		});
		var app=new Vue({
			el:'#app',
			data:{
				activeKey:'1',
				closable:true,
			}
		});

	</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241

相关阅读:
软件测试——功能性测试（1）
JUC系列(六) 线程池
cola架构：一种扩展点的实现思路浅析
【爬虫系列】Python爬虫实战--招聘网站的职位信息爬取
字符串函数
基于springboot实现民宿管理平台项目【项目源码+论文说明】计算机毕业设计
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java宿舍管理系统65x02
第七章块为结构建模 P2｜系统建模语言SysML实用指南学习
APP备案，平台上架APP必备，Android反编译工具下载
easyexcel读取文件

原文地址：https://blog.csdn.net/returnadsss/article/details/126431714