前端常见问题

本文章主要记录工作中遇到比较棘手的问题方便以后查看使用

v-html 富文本

注意：富文本样式正常修改可能会修改不了，需要穿透修改  /deep/ 或 >>> 

图片问题

1、图片宽度超出屏幕
	/deep/ img{
		max-width:100%
	}
2、图片上下拼接有空白
	/deep/ img{
		display:block
	}

文字问题

1、文字宽度超出屏幕 不换行
	/deep/ p{
		max-width:100%;
		word-break: break-all;
	}

表格

1、表格无线条
	/deep/ table {
		border-collapse: collapse;
		border-spacing: 0;
		border-left: 1px solid #888;
		border-top: 1px solid #888;
	}
	/deep/ table th,
	/deep/ table td {
		border-right: 1px solid #888;
		border-bottom: 1px solid #888;
		padding: 5px 15px;
	}
	/deep/ table th {
		font-weight: bold;
		background: #ccc;
	}

前端 “一键换肤“ 的 N 种方案

https://mp.weixin.qq.com/s/M7Av6vJTnSpjSB7vnifEdQ

时间戳转换

//第一种：时间格式为 2020-08-09
timestampToTime(shijian) {
      var date = new Date(shijian)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ''
      return Y + M + D
    },
 
//第二种：时间格式为 2020-08-09 06:05:04
    detailTime(shijian) {
      var date = new Date(shijian)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },