From eeef9f3413151bea79690aac4abb737aff0cb6c8 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 23 Aug 2022 18:55:22 +0800
Subject: [PATCH] 图片demo
---
src/components/group/platformGroup.vue | 223 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 190 insertions(+), 33 deletions(-)
diff --git a/src/components/group/platformGroup.vue b/src/components/group/platformGroup.vue
index 6e1af1b..9b39852 100644
--- a/src/components/group/platformGroup.vue
+++ b/src/components/group/platformGroup.vue
@@ -1,49 +1,206 @@
<template>
- <div>
- <button type="button" class="button" @click="previewURL">URL Array</button>
- <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
+
+ <div class="gridClass">
+ <div class="entry-preview" v-for="item in data">
+ <div class="thumbnail_box">
+
+ <div class="thumbnail" @click="show(item.coverFileURL)">
+ <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy">
+ </div>
+
+ </div>
+ <div class="entry-post">
+ <div class="entry-header">
+ <h5 class="entry-title">
+ <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
+ {{item.title}}
+ </router-link>
+ <!-- {{item.title}} -->
+ </h5>
+ <div class="post_content">
+ {{item.introduce}}
+ </div>
+ </div>
+ <div class="entry-meta">
+ <div class="post-categories">
+ <span class="tag vcard">
+ <a-icon type="customer-service" />
+ <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
+ </span>
+ <!-- <span class="tag-list">
+ <a href="#" rel="tag">影评</a>
+ <a href="#" rel="tag">电影</a>
+ <a href="#" rel="tag">蜘蛛侠</a>
+ </span> -->
+ </div>
+ <div class="post-on">
+ <span class="entry-date">
+ <a-icon type="calendar" />
+ <a href="#" rel="bookmark">
+ {{item.publishDate}}
+ </a>
+ </span>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
</div>
+
</template>
<script>
- import 'viewerjs/dist/viewer.css'
import {
api as viewerApi
} from "v-viewer"
export default {
data() {
return {
- sourceImageURLs: [
- 'https://picsum.photos/200/200?random=1',
- 'https://picsum.photos/200/200?random=2',
- ],
- sourceImageObjects: [{
- 'src': 'https://picsum.photos/200/200?random=3',
- 'data-source': 'https://picsum.photos/800/800?random=3'
- },
- {
- 'src': 'https://picsum.photos/200/200?random=4',
- 'data-source': 'https://picsum.photos/800/800?random=4'
- }
- ]
+ options: {
+ 'inline': false, // 是否启用inline模式
+ 'button': true, // 是否显示右上角关闭按钮
+ 'navbar': true, // 是否显示缩略图底部导航栏
+ 'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
+ 'toolbar': false, // 是否显示工具栏
+ 'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
+ 'fullscreen': true, // 播放时是否全屏，默认true
+ 'loading': true, // 加载图片时是否显示loading图标，默认true
+ 'loop': true, // 是否可以循环查看图片，默认true
+ 'movable': true, // 是否可以拖得图片，默认true
+ 'zoomable': true, // 是否可以缩放图片，默认true
+ 'rotatable': true, // 是否可以旋转图片，默认true
+ 'scalable': true, // 是否可以翻转图片，默认true
+ 'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
+ 'transition': true, // 使用 CSS3 过度，默认true
+ 'keyboard': true, // 是否支持键盘，默认true
+ 'zoomRatio': 0.2, // 鼠标滚动时的缩放比例，默认0.1
+ 'minZoomRatio': 0.5, // 最小缩放比例，默认0.01
+ 'maxZoomRatio': 2.0, // 最大缩放比例，默认100
+ // 'url': 'data-source' // 设置大图片的 url
+ },
+ data: [{
+ "id": "1560643564944228354",
+ "title": "把他们全部驱逐出去,一只不剩!",
+ "articleFileURL": null,
+ "coverFileURL": "http://t.inleft.com/blog//cover/1560643556949884929.jpg",
+ "articleFileType": 3,
+ "articleTypeId": "10",
+ "articleTypeName": "前方高能",
+ "introduce": "出处：进击的巨人第一季第25集\r\n时间点：10分左右",
+ "lastEditorDate": null,
+ "publishDate": "2022-08-19",
+ "updateDate": "2022-08-19",
+ "isTop": 0,
+ "authStatus": 1,
+ "isAllowedComment": 1,
+ "isAnyUpdate": 0,
+ "jumpURL": null,
+ "previousRecord": null,
+ "nextRecord": null
+ }, {
+ "id": "1560637549020446722",
+ "title": "名场面之兵长砍猴",
+ "articleFileURL": null,
+ "coverFileURL": "http://t.inleft.com/blog//cover/1560637517290536962.jpg",
+ "articleFileType": 3,
+ "articleTypeId": "10",
+ "articleTypeName": "前方高能",
+ "introduce": "出处：进击的巨人第三季第17集\r\n时间点：5分左右",
+ "lastEditorDate": null,
+ "publishDate": "2022-08-19",
+ "updateDate": "2022-08-19",
+ "isTop": 0,
+ "authStatus": 1,
+ "isAllowedComment": 1,
+ "isAnyUpdate": 0,
+ "jumpURL": null,
+ "previousRecord": null,
+ "nextRecord": null
+ }, {
+ "id": "1560251661752991748",
+ "title": "艾尔文团长的冲锋",
+ "articleFileURL": null,
+ "coverFileURL": "http://t.inleft.com/blog//cover/1560331526686638082.jpg",
+ "articleFileType": 3,
+ "articleTypeId": "10",
+ "articleTypeName": "前方高能",
+ "introduce": "出处：进击的巨人第三季第16集\r\n时间点：21分左右",
+ "lastEditorDate": null,
+ "publishDate": "2022-08-18",
+ "updateDate": "2022-08-18",
+ "isTop": 0,
+ "authStatus": 1,
+ "isAllowedComment": 1,
+ "isAnyUpdate": 0,
+ "jumpURL": null,
+ "previousRecord": null,
+ "nextRecord": null
+ }, {
+ "id": "1560251661752991747",
+ "title": "我今日就要带她走,我睇下边个敢拦胆我!",
+ "articleFileURL": null,
+ "coverFileURL": "http://t.inleft.com/blog//cover/1560332612973625346.jpg",
+ "articleFileType": 3,
+ "articleTypeId": "10",
+ "articleTypeName": "前方高能",
+ "introduce": "出处：刺客伍六七第一季第9集\r\n时间点：13分左右",
+ "lastEditorDate": null,
+ "publishDate": "2022-08-18",
+ "updateDate": "2022-08-18",
+ "isTop": 0,
+ "authStatus": 1,
+ "isAllowedComment": 1,
+ "isAnyUpdate": 0,
+ "jumpURL": null,
+ "previousRecord": null,
+ "nextRecord": null
+ }, {
+ "id": "1560251661752991746",
+ "title": "Death Note",
+ "articleFileURL": null,
+ "coverFileURL": "http://t.inleft.com/blog//cover/1560251636746551298.jpg",
+ "articleFileType": 3,
+ "articleTypeId": "10",
+ "articleTypeName": "前方高能",
+ "introduce": "出处：Death Note7集\r\n时间点：12分左右",
+ "lastEditorDate": null,
+ "publishDate": "2022-08-18",
+ "updateDate": "2022-08-18",
+ "isTop": 0,
+ "authStatus": 1,
+ "isAllowedComment": 1,
+ "isAnyUpdate": 0,
+ "jumpURL": null,
+ "previousRecord": null,
+ "nextRecord": null
+ }, {
+ "id": "1560239309611597825",
+ "title": "罪恶王冠·王的黑化",
+ "articleFileURL": null,
+ "coverFileURL": "http://t.inleft.com/blog//cover/1560241671403208705.jpg",
+ "articleFileType": 3,
+ "articleTypeId": "10",
+ "articleTypeName": "前方高能",
+ "introduce": "出处：罪恶王冠15集\r\n时间点：16分左右\r\n",
+ "lastEditorDate": null,
+ "publishDate": "2022-08-18",
+ "updateDate": "2022-08-18",
+ "isTop": 0,
+ "authStatus": 1,
+ "isAllowedComment": 1,
+ "isAnyUpdate": 0,
+ "jumpURL": null,
+ "previousRecord": null,
+ "nextRecord": null
+ }]
}
},
methods: {
- previewURL() {
- // 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
- const $viewer = this.$viewerApi({
- images: this.sourceImageURLs
- })
- },
- previewImgObject() {
- // 或者你可以单独引入api然后执行它
- const $viewer = viewerApi({
- options: {
- inline:true,
- toolbar: true,
- url: 'data-source',
- initialViewIndex: 1
- },
- images: this.sourceImageObjects
+ show(param) {
+ console.log(111);
+ viewerApi({
+ options: this.options,
+ image: param
})
}
}
--
Gitblit v1.9.1