Skip to content

P
project-online-old
提交 c9ef32ae authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

新增图片预览器

上级 79065188
隐藏空白字符变更
内嵌 并排
正在显示 包含 64 行增加 和 10 行删除
package-lock.json
浏览文件 @ c9ef32ae
...@@ -1710,7 +1710,7 @@ ...@@ -1710,7 +1710,7 @@
"dependencies": { "dependencies": {
"debug": { "debug": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502873540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz", "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=", "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"dev": true, "dev": true,
"requires": { "requires": {
...@@ -4379,7 +4379,7 @@ ...@@ -4379,7 +4379,7 @@
"dependencies": { "dependencies": {
"debug": { "debug": {
"version": "2.6.9", "version": "2.6.9",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502873540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz", "resolved": "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=", "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"dev": true, "dev": true,
"requires": { "requires": {
...@@ -5670,7 +5670,7 @@ ...@@ -5670,7 +5670,7 @@
}, },
"html-tags": { "html-tags": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz", "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=" "integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos="
}, },
"html-webpack-plugin": { "html-webpack-plugin": {
...@@ -6633,7 +6633,7 @@ ...@@ -6633,7 +6633,7 @@
}, },
"lodash.kebabcase": { "lodash.kebabcase": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", "resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=" "integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
}, },
"loglevel": { "loglevel": {
...@@ -9931,7 +9931,7 @@ ...@@ -9931,7 +9931,7 @@
}, },
"svg-tags": { "svg-tags": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=" "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
}, },
"swiper": { "swiper": {
...@@ -10658,6 +10658,11 @@ ...@@ -10658,6 +10658,11 @@
"extsprintf": "^1.2.0" "extsprintf": "^1.2.0"
} }
}, },
"viewerjs": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.9.0.tgz",
"integrity": "sha512-2D1OdGatb5aCZbZvaCdbJYuoDObjD9ITe7GZp0SoG7rgw3arOIZoIO1ygmfG+I4+RvEuDo+aZ75kNgwmYS9j3w=="
},
"vlq": { "vlq": {
"version": "0.2.3", "version": "0.2.3",
"resolved": "https://registry.npm.taobao.org/vlq/download/vlq-0.2.3.tgz", "resolved": "https://registry.npm.taobao.org/vlq/download/vlq-0.2.3.tgz",
...@@ -10987,7 +10992,7 @@ ...@@ -10987,7 +10992,7 @@
}, },
"eslint-scope": { "eslint-scope": {
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npm.taobao.org/eslint-scope/download/eslint-scope-4.0.3.tgz?cache=0&sync_timestamp=1599933677754&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-scope%2Fdownload%2Feslint-scope-4.0.3.tgz", "resolved": "https://registry.npm.taobao.org/eslint-scope/download/eslint-scope-4.0.3.tgz",
"integrity": "sha1-ygODMxD2iJoyZHgaqC5j65z+eEg=", "integrity": "sha1-ygODMxD2iJoyZHgaqC5j65z+eEg=",
"dev": true, "dev": true,
"requires": { "requires": {
......
package.json
浏览文件 @ c9ef32ae
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
"lodash": "^4.17.20", "lodash": "^4.17.20",
"qrcode.vue": "^1.7.0", "qrcode.vue": "^1.7.0",
"swiper": "^6.3.5", "swiper": "^6.3.5",
"viewerjs": "^1.9.0",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.22.2", "vue-i18n": "^8.22.2",
......
src/pages/my/application/preview.vue
浏览文件 @ c9ef32ae
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<template v-if="material.attachments"> <template v-if="material.attachments">
<ul class="attachments"> <ul class="attachments">
<li class="attachments-item" v-for="(item, index) in material.attachments" :key="index"> <li class="attachments-item" v-for="(item, index) in material.attachments" :key="index">
<a class="inner" :href="item.oss_sign_url" target="_blank"> <div class="inner" @click="handlePreview(item)">
<el-image :src="item.oss_sign_url" class="pic"> <el-image :src="item.oss_sign_url" class="pic">
<template #error> <template #error>
<i class="el-icon-document"></i> <i class="el-icon-document"></i>
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
<div v-if="item.status_desc"> <div v-if="item.status_desc">
<el-tag size="mini">{{ item.status_desc }}</el-tag> <el-tag size="mini">{{ item.status_desc }}</el-tag>
</div> </div>
</a> </div>
<el-button-group v-if="hasButton" style="margin-left: 40px"> <el-button-group v-if="hasButton" style="margin-left: 40px">
<el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)" <el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)"
>删除</el-button >删除</el-button
...@@ -114,9 +114,12 @@ ...@@ -114,9 +114,12 @@
</div> </div>
</div> </div>
</template> </template>
<img :src="previewImageUrl" :alt="previewImageTitle" id="image" style="display: none" />
</div> </div>
</template> </template>
<script> <script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs'
import * as api from '@/api/my' import * as api from '@/api/my'
// 行业类别 // 行业类别
...@@ -177,6 +180,9 @@ export default { ...@@ -177,6 +180,9 @@ export default {
data() { data() {
return { return {
loading: false, loading: false,
previewImageUrl: '',
previewImageTitle: '',
viewer: null,
material: {}, material: {},
progress: {}, progress: {},
options: [ options: [
...@@ -338,10 +344,10 @@ export default { ...@@ -338,10 +344,10 @@ export default {
computed: { computed: {
right() { right() {
const { right = '' } = this.$route.query const { right = '' } = this.$route.query
return right return right.toUpperCase()
}, },
hasButton() { hasButton() {
return this.right.includes('x') return this.right.includes('X')
} }
}, },
methods: { methods: {
...@@ -378,15 +384,53 @@ export default { ...@@ -378,15 +384,53 @@ export default {
api.changeFileStatus(this.material.user_id, data.id, status).then(response => { api.changeFileStatus(this.material.user_id, data.id, status).then(response => {
this.getApplication() this.getApplication()
}) })
},
// 预览
handlePreview(file) {
let url = file.oss_sign_url
if (!url) {
this.$message({ type: 'warning', message: '无法查看' })
return
}
url = url.includes('?') ? url.split('?').shift() : url
const names = ['jpg', 'jpeg', 'png', 'gif']
const name = url.split('.').pop() || ''
if (names.includes(name.toLocaleLowerCase())) {
this.previewImageUrl = file.oss_sign_url
this.previewImageTitle = file.file_type_label
this.$nextTick(() => {
this.viewer.update()
this.viewer.show(true)
})
} else {
this.newWindowPreview(file.oss_sign_url)
}
},
// 新窗口预览
newWindowPreview(url) {
const a = document.createElement('a')
a.href = url
a.target = '_blank'
document.body.appendChild(a)
a.click()
a.remove()
},
createViewer() {
this.viewer = new Viewer(document.getElementById('image'), {
navbar: false,
toolbar: { zoomIn: true, zoomOut: true, rotateLeft: true, rotateRight: true }
})
} }
}, },
beforeMount() { beforeMount() {
this.getApplication() this.getApplication()
}, },
mounted() { mounted() {
this.createViewer()
document.body.style = 'background-color:#eee;' document.body.style = 'background-color:#eee;'
}, },
destroyed() { destroyed() {
this.viewer && this.viewer.destroy()
document.body.style = '' document.body.style = ''
} }
} }
...@@ -494,6 +538,7 @@ export default { ...@@ -494,6 +538,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
color: #222; color: #222;
cursor: pointer;
} }
.pic { .pic {
width: 40px; width: 40px;
...@@ -519,4 +564,7 @@ export default { ...@@ -519,4 +564,7 @@ export default {
border-top: 1px solid #ebeef5; border-top: 1px solid #ebeef5;
} }
} }
.viewer-toolbar > ul {
margin-bottom: 20px;
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论