Skip to content

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

新增图片预览器

上级 79065188
显示空白字符变更
内嵌 并排
正在显示 包含 64 行增加 和 10 行删除
package-lock.json
浏览文件 @ c9ef32ae
......@@ -1710,7 +1710,7 @@
"dependencies": {
"debug": {
"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=",
"dev": true,
"requires": {
......@@ -4379,7 +4379,7 @@
"dependencies": {
"debug": {
"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=",
"dev": true,
"requires": {
......@@ -5670,7 +5670,7 @@
},
"html-tags": {
"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="
},
"html-webpack-plugin": {
......@@ -6633,7 +6633,7 @@
},
"lodash.kebabcase": {
"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="
},
"loglevel": {
......@@ -9931,7 +9931,7 @@
},
"svg-tags": {
"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="
},
"swiper": {
......@@ -10658,6 +10658,11 @@
"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": {
"version": "0.2.3",
"resolved": "https://registry.npm.taobao.org/vlq/download/vlq-0.2.3.tgz",
......@@ -10987,7 +10992,7 @@
},
"eslint-scope": {
"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=",
"dev": true,
"requires": {
......
package.json
浏览文件 @ c9ef32ae
......@@ -85,6 +85,7 @@
"lodash": "^4.17.20",
"qrcode.vue": "^1.7.0",
"swiper": "^6.3.5",
"viewerjs": "^1.9.0",
"vue": "^2.6.12",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.22.2",
......
src/pages/my/application/preview.vue
浏览文件 @ c9ef32ae
......@@ -75,7 +75,7 @@
<template v-if="material.attachments">
<ul class="attachments">
<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">
<template #error>
<i class="el-icon-document"></i>
......@@ -85,7 +85,7 @@
<div v-if="item.status_desc">
<el-tag size="mini">{{ item.status_desc }}</el-tag>
</div>
</a>
</div>
<el-button-group v-if="hasButton" style="margin-left: 40px">
<el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)"
>删除</el-button
......@@ -114,9 +114,12 @@
</div>
</div>
</template>
<img :src="previewImageUrl" :alt="previewImageTitle" id="image" style="display: none" />
</div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs'
import * as api from '@/api/my'
// 行业类别
......@@ -177,6 +180,9 @@ export default {
data() {
return {
loading: false,
previewImageUrl: '',
previewImageTitle: '',
viewer: null,
material: {},
progress: {},
options: [
......@@ -338,10 +344,10 @@ export default {
computed: {
right() {
const { right = '' } = this.$route.query
return right
return right.toUpperCase()
},
hasButton() {
return this.right.includes('x')
return this.right.includes('X')
}
},
methods: {
......@@ -378,15 +384,53 @@ export default {
api.changeFileStatus(this.material.user_id, data.id, status).then(response => {
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() {
this.getApplication()
},
mounted() {
this.createViewer()
document.body.style = 'background-color:#eee;'
},
destroyed() {
this.viewer && this.viewer.destroy()
document.body.style = ''
}
}
......@@ -494,6 +538,7 @@ export default {
display: flex;
align-items: center;
color: #222;
cursor: pointer;
}
.pic {
width: 40px;
......@@ -519,4 +564,7 @@ export default {
border-top: 1px solid #ebeef5;
}
}
.viewer-toolbar > ul {
margin-bottom: 20px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论