2024.08.27
1.每行固定只显示2个元素-css
方案1：
.container1 {display: grid;grid-template-columns: repeat(2, 1fr); /* 设置两列，每列宽度相等 */
}
.item1 {background: #0b9f00;
}方案2：
.container2 {display: flex;flex-wrap: wrap;
}
.item2 {width: 50%; /* 每个元素占一半宽度，从而每行显示两个 */
}2. 鼠标悬浮到父元素上，控制子元素的显示
<div class="parent3">Parent Element<div class="child3">Child Element</div>
</div>/*鼠标悬浮到父元素上，控制子元素的显示*/
.parent3 {background: #005fb1;padding: 10px;
}
.child3 {background: white;
}
.parent3:hover .child3 {background: yellow;
}
/*鼠标悬浮到父元素上，控制子元素的显示*/3. 鼠标悬浮到元素上，控制第一个兄弟元素的显示
<div class="parent4">Parent Element<div class="child4">Child Element</div><div class="brother4">brother Element</div>
</div>/*鼠标悬浮到元素上，控制第一个兄弟元素的显示*/
.parent4 {background: #005fb1;padding: 10px;
}
.child4 {background: white;
}
.brother4 {background: palevioletred;
}
.child4:hover +.brother4 {background: yellow;
}
/*鼠标悬浮到元素上，控制第一个兄弟元素的显示*/4.鼠标悬浮到元素上，控制兄弟元素的显示
<div class="parent5">Parent Element<div class="child5">Child Element</div><div class="brother5">brother Element</div><div class="brother1">brother Element</div>
</div>/*鼠标悬浮到元素上，控制兄弟元素的显示*/
.parent5 {background: #005fb1;padding: 10px;
}
.child5 {background: white;
}
.brother5 {background: palevioletred;
}
.brother1 {background: purple;
}
.child5:hover ~ [class*="brother1"] {background: yellow; /* 当子元素被悬浮时，显示具有“brother1”类名的元素 */
}
/*鼠标悬浮到元素上，控制兄弟元素的显示*/5.伪元素::before和::after
<p class="p1">content属性是必需的，用于指定要插入的内容，可以是文本、图像等，若不设置content，伪元素将不会显示任何内容。</p>/*伪元素::before和::after*/
.p1{background: #009f95;
}
.p1::before {content: "前缀：";color: blue;
}
.p1::after {content: " - 后缀";color: green;
}
/*伪元素::before和::after*/6. 伪元素::first-letter和::first-line
<p class="p2">对于::first-letter选择元素内容的第一个字母，可以用于为段落的首字母设置特殊样式;::first-line选择元素内容的第一行，可以用于突出显示段落的第一行</p>/*伪元素::first-letter和::first-line*/
.p2 {background: #009f95;
}
.p2::first-letter {font-size: 2em;
}
.p2::first-line {color: red;
}
/*伪元素::first-letter和::first-line*/2024.08.26
1.监听浏览器页签关闭和浏览器关闭-vue2
方案1：axios请求必须放在beforeDestroy生命周期中
mounted () {window.addEventListener('beforeunload', this.dwellTime)
},
beforeDestroy () {window.removeEventListener('beforeunload', this.dwellTime)
},dwellTime () {dwellTime({ id: this.nowId }).then((res) => {}).catch((err) => {if (err.status) {this.$notification.error({message: '提示',description: err.message,duration: 4})}})
},方案2：fetch请求可放在destroyed生命周期中
mounted () {window.addEventListener('beforeunload', this.dwellTime)},destroyed () {window.removeEventListener('beforeunload', this.dwellTime)},dwellTime () {const port = window.location.host.split(':')[1]const baseUrl = `${window.location.protocol}//${window.location.hostname}:${port}${process.env.VUE_APP_API_BASE_URL}`const url = baseUrl + '/api/xx/update?id=' + this.nowId// 使用axios发送请求，服务端会相应不到fetch(url, {method: 'get',headers: {'Content-Type': 'application/json','Authorization': storage.get(ACCESS_TOKEN)}}).then(response => response.json()).then(result => {console.log(result)}).catch(error => {console.error('Error:', error)})
}, 2024.08.06
1.上传文件额外带请求参数-统一请求方式
上传文件带参数可通过 element-ui中的el-upload中的data属性解决，现在的问题是，有时不需要上传文件，解决思路为：统一请求方式
handleSubmit () {this.$refs.submitForm.validate((flag) => {if (flag) {var formData = new FormData()// 将this.formFields中的属性添加到FormData实例中for (var key in this.formFields) {if (this.formFields.hasOwnProperty(key)) { // 确保属性是对象自身的而不是从原型链继承的formData.append(key, this.formFields[key])}}this.$http({url: this.actionUrl,method: 'post',data: formData,headers: {'Content-Type': 'multipart/form-data'}}).then((res) => {this.$message.success('操作成功！')this.$emit('ok')}).catch((err) => {this.$notification.error({message: '提示',description: err.message,duration: 4})})}})
},
