zm/sociology_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20240517

Browse Source
This commit is contained in:
始于初见
2024-05-17 18:02:49 +08:00
parent 8407d51fb6
commit b5264dc222
4056 changed files with 308094 additions and 41932 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
pages/component/commonComponents/richDetail.vue
View File

@@ -1,25 +1,21 @@
<template>
<view class="richDetail">
<!-- 公共组件-每个页面必须引入 -->
<view class="richDetail">
<!-- 公共组件-每个页面必须引入 -->
<view class="detail_title" v-if="detailInfo.title">{{ detailInfo.title }}</view>
<slot name="richHeadImg"></slot>
<view class="rich_box" v-if="detailInfo.content">
<rich-text :nodes="detailInfo.content" @click.stop="showPreview"
:data-nodes="detailInfo.content"></rich-text>
</view>
<!-- <view>{{ detailInfo.content }}</view> -->
<view class="detail_title" v-if="detailInfo.title">{{
detailInfo.title
}}</view>
<slot name="richHeadImg"></slot>
<view class="rich_box" v-if="detailInfo.content">
<rich-text
:nodes="detailInfo.content | formatRichText"
@click.stop="showPreview"
:data-nodes="detailInfo.content"
></rich-text>
</view>
<!-- <view>{{ detailInfo.content }}</view> -->
</view>
</template>
<script>
@@ -49,9 +45,65 @@ export default {
},
computed: {
...mapState(['userInfo']),
},
}, filters: {
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性：max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
formatRichText(html) { //控制小程序中图片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
// 时间格式化
formatDate(date) {
console.log(date)
let newDate = new Date(date);
let year = newDate.getFullYear();
let month = newDate.getMonth().toString().padStart(2, 0);
let day = newDate.getDay().toString().padStart(2, 0);
return year + '-' + month + '-' + day;
}
},
methods: {
formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
// return match;
// });
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
return newContent;
},
showPreview(e) {
console.log('e at line 56:', e)
@@ -63,12 +115,12 @@ export default {
for (var j = 0; j < imgs.length; j++) {
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
imgList.push(capture)
})
}
console.log('imgList.push at line 64:', imgList)
//最后一步就是所有图片放在预览的方法previewImage中就可以了
// uni.previewImage({
// current: imgList,
@@ -102,7 +154,7 @@ export default {
// getSearch() {
// $http.request({
// url: "book/prescript/searchPrescript",
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
// data: {
// loadAnimate: 'none', // 请求加载动画
// 'keywords': this.searchValue,
@@ -120,7 +172,7 @@ export default {
// this.searchList = []
// }
// }).catch(e => {
// // this.dataList = []
// // this.dataList = []
// this.searchList = []
// console.log(e)
// })
@@ -193,49 +245,55 @@ export default {
<style lang="scss" scoped>
.commonPageBox {
padding: 40rpx 0;
padding: 40rpx 0;
}
.contentBox {
.headImage {
margin-bottom: 20rpx;
}
.detail_title {
padding: 20rpx 40rpx 0;
font-size: 38rpx;
line-height: 64rpx;
font-weight: bold;
text-align: center;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.headImage {
margin-bottom: 20rpx;
.rich_box {
padding: 20rpx;
box-sizing: border-box;
::v-deep img {
width: 100%;
}
.detail_title {
padding: 20rpx 40rpx 0;
font-size: 38rpx;
line-height: 64rpx;
font-weight: bold;
text-align: center;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.rich_box {
padding: 20rpx;
box-sizing: border-box;
::v-deep img{
width: 100%;
}
p {
display: block;
text-indent: 2em;
letter-spacing: 2px !important;
line-height: 46rpx;
img {
// margin-left: -2em;
}
}
p {
display: block;
// text-indent: 2em;
letter-spacing: 2px ;
line-height: 46rpx;
img {
// margin-left: -2em;
}
}
}
}
.richDetail {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
</style>
.ql-size-small{
font-size:20rpx !important;
}
.ql-size-large{
font-size:36rpx !important;
}
.ql-size-huge{
font-size:64rpx !important;
}
</style>