日常积累史2

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