路由问题:
1.路由组件无法缓存的问题。
这个问题有点傻,因为是通过给nav添加router-link标签来切换子页面的,当时想的就是router-link怎么实现缓存。有天晚上睡不着忽然想到了,router-link与router-view肯定是配套使用的,直接给父组件的router-view标签加一个keep-alive就行了。
<template>
<div class="wrapper">
<main-header/>
<doctor-sidebar/>
<div class="content-wrapper">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</div>
</template>
样式:
2.显示数组的多个对象,鼠标移入和点击有且只有一个对象的样式会变。问题:新的对象改变样式时原来的不会消失。
关于如何给选中的对象添加样式,我是用了动态绑定样式,给每个对象设一个布尔值属性,选中时就设置该对象布尔值为true,上述问题解决是在设置true的代码前用一个数组循环forEach。
// 为数组中的每个对象绑定单机函数chosen(),i参数index为当前对象的索引号
chosen (index) {
this.arr.forEach (element => {
element.ischosen = false
})
this.$set(arr[index], 'ischosen', true)
}
3.样式改了谷歌浏览器一直刷新却没有效果
解决:尝试ctrl+F5,清除浏览器缓存。具体原因还不知道为什么,猜想是浏览器缓存太多跟人一样被麻木了,需要浇盆水清醒一下。
浏览器报错:
4.vuex报错:TypeError: WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a constructor.
解决:在store入口函数中,new Vuex.Store ,store中的s要大写
5.[Vue warn]: Computed property “xxxx” was assigned to but it has no setter.
解决:从store获取之后的xxxx数据,在组件代码中被修改了,所以需要在计算属性中重写其get和set方法。
computed:{
...mapState(['xxxx']),
xxxx:{
get() {
return this.$store.state.xxxx
},
set()val {
this.$store.state.xxxx = val
}
}
}
其他:
6.通过clear清除浮动解决外边距重叠问题,为什么在被清除浮动元素尾部加span元素没有用?
敲了一下代码发现只有块元素才起到清除浮动的作用,说明clear只对块元素有效。
7.自定义消息弹出框AlertTip,如用于显示是否确定删除、更新成功等消息。下面就以“确定删除”为例,构造一个提示框。
主要思路:定义一个块元素,里面包含一个p标签用于描述提示文字,两个按钮“确定”和“取消;因为提示框一般都在页面居中位置,所以设置该块元素水平和垂直方向居中,这里用的是绝对定位;块元素的出现与否由一个布尔值决定,再给“确定”和“取消添加相应的函数。
如何开启:给删除的按钮添加函数,设置上面的布尔值为true
<!--结构-->
<div v-show="isDeling" class="alertTip">
<p>确定删除{{xxx}}吗</p> // 如果要显示具体的删除哪一项xxx,可从data里读取。
<input type="button" value="确定" @click="del" >
<input type="button" value="取消" @click="cancelDel" >
<div>
/*样式,以下仅为主要代码*/
.alertTip{
position:absolute; /*前提将其父元素(一般就是最外层)设置为相对定位*/
width:300px;
height:200px
top:50%;
left:50%;
margin-top:-100px; /* height/2 */
margin-left:-150px; /* width/2 */
}
.alertTip p, .alertTip input{
position:absolute;
}
// 行为
del(nowIndex) {
this.arr.splice(nowIndex, 1)
this.isDeling = false
},
cancelDel() {
this.isDeling = false
}
8.带有页数的表格显示,并且表格的数据来自于数组arr,用v-for循环显示。
主要思路:在data里定义一个空数组nowData,用于存放当前显示的n行数据;页数的自动计算由watch监视的数组arr实现。
<!--主要结构代码-->
<table>
<thead>...</thead>
<tbody>
<tr v-for="(index, item) in nowData" :key="index">
<td>{{item.xx}}</td>
<td>{{item.yy}}</td>
</tr>
</tbody>
</table>
<ul>
<li @click="previousPage">上一页</li>
<li v-for="(index, item) in pages" :key="index" @click="choosePage(index)"
:class={active:item.chosen}>{{item.id}}</li>
<li @click="nextPage">下一页</li>
</ul>
// 主要js代码
// arr:原数组
// nowN:每一页显示的行数
// nowData:当前页显示的数据,是原数组的一部分
// pageNum:总页数
// pages:页数数组,比如有3页它就有3个对象,每个对象有两个属性:id,chosen,后者表示当前页是否被选中,默认为false
// 可能会疑问 pageNum = pages.length,为何要多此一举?因为pageNum 是根据arr和nowN来计算的,pages长度是由pageNum决定的,可以说它是pages的父亲,要省也只能省成pageNum = Math.seil(val.length/this.nowN)
// nowPage:当前页数,如当前第1页,则其值为1
mouted() {
// 初始化计算页数和显示
this.pageNum = Math.seil(val.length/this.nowN)
for(let i = 1; i <= pageNum ; i++){
this.pages.push({id: i, chosen: false})
}
this.nowPage = 0
this.$set(this.pages[this.nowPage], 'chosen', true)
this.nowData = this.arr.slice(0, this.nowN)
},
watch:{
// 如果在页面上有对原数组的增删操作,可以对其进行监视
arr(val) {
let temp = Math.ceil(val.length/this.nowN)
if(temp > this.pageNum) {
this.pages.push({id: temp, chosen: false})
}else if(temp < this.pageNum) {
this.pages.pop()
}
this.pageNum = temp
},
nowPage(val){
this.pages.forEach(element =>{
element.chosen = false
})
this.$set(this.pages[val], 'chosen', true)
this.nowData = this.arr.slice(val*this.nowN, (val+1)*this.nowN)
}
},
methods:{
previousPage() {
if(this.nowPage <= 0) {
return
}
this.nowPage -= 1
// 其余工作由nowPage的监视完成,下面同理
},
choosenPage(index) {
this.pageNum = index
},
nextPage() {
if(this.nowPage >= this.pageNum ){
return
}
this.nowPage +=1
}
}
以上是写项目过程中遇到的部分问题及优化的地方,纯手打( •̀ ω •́ )y,有什么错误或者有更好的解决方法,欢迎各位老大不吝赐教~
ps:这个代码片都是一样颜色的么,明明已经设置了…