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
})
})
}
})
},