添加图片预览功能

This commit is contained in:
yi-ge 2020-07-19 20:13:07 +08:00
parent befa2e1679
commit 4030b22f41
7 changed files with 31 additions and 5 deletions

View File

@ -13,6 +13,7 @@
"nuxtjs", "nuxtjs",
"styl", "styl",
"vditor", "vditor",
"viewerjs",
"vmodal", "vmodal",
"wangeditor" "wangeditor"
] ]

View File

@ -87,7 +87,7 @@ footer
position fixed position fixed
right 8px right 8px
bottom 8px bottom 8px
z-index 999 z-index 998
padding 4px padding 4px
i i
@ -510,7 +510,7 @@ input:-moz-placeholder
@media (max-width 768px) @media (max-width 768px)
.header .header
position fixed position fixed
z-index 999999 z-index 99999
width 100% width 100%
display block display block
box-sizing border-box box-sizing border-box

View File

@ -83,7 +83,8 @@ module.exports = {
ssr: false ssr: false
}, },
{ src: '~/plugins/vue-js-modal', mode: 'client' }, { src: '~/plugins/vue-js-modal', mode: 'client' },
{ src: '~/plugins/vue-toasted', mode: 'client' } { src: '~/plugins/vue-toasted', mode: 'client' },
{ src: '~/plugins/v-viewer', mode: 'client' }
], ],
/* /*

View File

@ -24,6 +24,7 @@
"koa": "^2.11.0", "koa": "^2.11.0",
"moment": "^2.27.0", "moment": "^2.27.0",
"nuxt": "^2.12.2", "nuxt": "^2.12.2",
"v-viewer": "^1.5.1",
"vditor": "^3.3.8", "vditor": "^3.3.8",
"vue-js-modal": "^2.0.0-rc.3", "vue-js-modal": "^2.0.0-rc.3",
"vue-toasted": "^1.1.28" "vue-toasted": "^1.1.28"

View File

@ -19,7 +19,7 @@
#articelToc.articelToc(v-if="articels.post_toc_show") #articelToc.articelToc(v-if="articels.post_toc_show")
.articelTitle 目录 .articelTitle 目录
.articelTocList(v-html="articels.post_toc") .articelTocList(v-html="articels.post_toc")
.articelContent(v-html='articels.post_content') .articelContent(v-html='articels.post_content', v-viewer)
.tools .tools
.reward(@click="reward") 打赏 .reward(@click="reward") 打赏
.comment(id="comment") .comment(id="comment")
@ -31,7 +31,7 @@
.comment-area .comment-area
.comment-author {{ item.comment_author }} .comment-author {{ item.comment_author }}
span(class="comment-status", v-if="item.comment_approved === '0'")   此内容正在审核中... span(class="comment-status", v-if="item.comment_approved === '0'")   此内容正在审核中...
.comment-content(v-html="item.comment_content_html") .comment-content(v-html="item.comment_content_html", v-viewer)
.comment-info {{ item.comment_date }} .comment-info {{ item.comment_date }}
span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复 span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复
span.reply(@click="reply(item.comment_ID, null)" v-else) 回复 span.reply(@click="reply(item.comment_ID, null)" v-else) 回复

5
plugins/v-viewer.js Normal file
View File

@ -0,0 +1,5 @@
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

View File

@ -8367,6 +8367,11 @@ thread-loader@^2.1.3:
loader-utils "^1.1.0" loader-utils "^1.1.0"
neo-async "^2.6.0" neo-async "^2.6.0"
throttle-debounce@^2.0.1:
version "2.2.1"
resolved "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-2.2.1.tgz?cache=0&sync_timestamp=1591627153757&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-2.2.1.tgz#fbd933ae6793448816f7d5b3cae259d464c98137"
integrity sha1-+9kzrmeTRIgW99WzyuJZ1GTJgTc=
through2@^2.0.0: through2@^2.0.0:
version "2.0.5" version "2.0.5"
resolved "https://mirrors.huaweicloud.com/repository/npm/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd" resolved "https://mirrors.huaweicloud.com/repository/npm/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@ -8815,6 +8820,14 @@ uuid@^3.3.2:
resolved "https://mirrors.huaweicloud.com/repository/npm/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" resolved "https://mirrors.huaweicloud.com/repository/npm/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
v-viewer@^1.5.1:
version "1.5.1"
resolved "https://registry.npm.taobao.org/v-viewer/download/v-viewer-1.5.1.tgz#94804d83814cca566e691339fe1e64793486f200"
integrity sha1-lIBNg4FMylZuaRM5/h5keTSG8gA=
dependencies:
throttle-debounce "^2.0.1"
viewerjs "^1.5.0"
v8-compile-cache@^2.0.3: v8-compile-cache@^2.0.3:
version "2.1.0" version "2.1.0"
resolved "https://mirrors.huaweicloud.com/repository/npm/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e" resolved "https://mirrors.huaweicloud.com/repository/npm/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
@ -8845,6 +8858,11 @@ vendors@^1.0.0:
resolved "https://mirrors.huaweicloud.com/repository/npm/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e" resolved "https://mirrors.huaweicloud.com/repository/npm/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w== integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
viewerjs@^1.5.0:
version "1.6.1"
resolved "https://registry.npm.taobao.org/viewerjs/download/viewerjs-1.6.1.tgz#719719898cbf7b63dd41763a0b4dabfa927ddfcf"
integrity sha1-cZcZiYy/e2PdQXY6C02r+pJ9388=
vm-browserify@^1.0.1: vm-browserify@^1.0.1:
version "1.1.2" version "1.1.2"
resolved "https://mirrors.huaweicloud.com/repository/npm/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" resolved "https://mirrors.huaweicloud.com/repository/npm/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"