From c3aa826406d52957d6f98d0ecd4b77413d5ce908 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 29 Aug 2022 18:23:08 +0800 Subject: [PATCH] 统计模块异步加载 --- src/components/mini/mdDetail.vue | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 50 insertions(+), 5 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index 72f4b82..1160808 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -4,6 +4,16 @@ <div class="headertop filter-dot headertop-bar " v-if="coverURL.length>0"> <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}"> </figure> + <div class="countMeta" + v-if="articleFileType==fileType.fileTypeMarkDown_1|| articleFileType==fileType.fileTypeHtml_2"> + <div style="display: flex;justify-content: space-between;padding: 0px 10px;"> + <div style="display: flex;align-items: center;"> <span>发布时间:{{articelMeta.publishDate}}</span></div> + <div style="display: inline-grid;"> + <span style="text-align: end;">字数:{{wordCount}}</span> + <span>预计耗时:{{Math.floor(wordCount/500)}}~{{Math.ceil(wordCount/300)}}分钟</span> + </div> + </div> + </div> </div> <div class="mySecret" v-if="myLock"> @@ -27,11 +37,12 @@ </div> <div v-else> + <div v-if="articleFileType==fileType.fileTypeTalking_9"> <div class="markdown-body articleTitle"> <h4>{{articelMeta.title}}</h4> - <div class="introduceSamll" v-if="introduce.length==0"> + <div class="introduceSamll" v-if="introduce==null||introduce.length==0"> <p>空荡荡的..我好像忘记写点什么了OωO</p> </div> <div class="introduce" v-else> @@ -80,7 +91,7 @@ <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div> </div> </div> - <div class="introduce"> + <div class="introduce" v-if="introduce!=null && introduce.length>0"> <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> {{introduce}} </pre> @@ -91,9 +102,9 @@ <div class="articleTitle"> <h4>{{articelMeta.title}}</h4> </div> - <vue-markdown :source="source" v-if="source.length>0"></vue-markdown> + <vue-markdown :source="source" v-if="source== null || source.length>0"></vue-markdown> - <div class="introduceSamll" v-else-if="introduce.length==0"> + <div class="introduceSamll" v-else-if="introduce==null || introduce.length==0"> <p>空荡荡的..我好像忘记写点什么了OωO</p> </div> @@ -229,6 +240,8 @@ }, options: optionsConfig, img404: myConstant.img404, + + wordCount: 0 } }, created() { @@ -257,6 +270,22 @@ }, }, methods: { + getWordCount() { + var iTotal = 0; + var c; + for (var i = 0; i < this.source.length; i++) { + c = this.source.charAt(i); + //基本汉字 + if (c.match(/[\u4e00-\u9fa5]/)) { + iTotal++; + } + //基本汉字补充 + else if (c.match(/[\u9FA6-\u9fcb]/)) { + iTotal++; + } + } + this.wordCount = iTotal; + }, articleOptionHandle(type) { this.$message.info(type) }, @@ -321,7 +350,11 @@ this.source = res.data; }).catch(() => [ this.$message.error("获取文件好像失败了..", 3) - ]) + ]).finally(() => { + setTimeout(() => { + _this.getWordCount(); + }, 500); + }) } } else if (res.data.articleFileType == this.fileType.fileTypeVideo_3) { if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { @@ -413,6 +446,14 @@ transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); border-radius: 16px; } + } + + .countMeta { + position: absolute; + bottom: 0px; + width: 100%; + background: #f0f2f5; + opacity: 0.6; } .headertop { @@ -557,5 +598,9 @@ max-width: 120px; } } + + .countMeta { + bottom: 10px; + } } </style> -- Gitblit v1.9.1