122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="抽取于 Element 的图片预览组件进行改造，实现函数式调用组件，无需基于图片进行点击预览。"
|
|
type="info"
|
|
style="margin-bottom: 20px;"
|
|
/>
|
|
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="有底图预览。"
|
|
type="info"
|
|
style="margin-bottom: 20px;"
|
|
/>
|
|
<div class="img-wrap">
|
|
<div
|
|
v-for="(item, $index) in imgList"
|
|
:key="item"
|
|
class="img-item"
|
|
@click="showHasImg($index)"
|
|
>
|
|
<img :src="item" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="无底图预览。"
|
|
type="info"
|
|
style="margin-bottom: 20px; margin-top: 20px;"
|
|
/>
|
|
<el-button type="primary" @click="showNoImg">点击预览</el-button>
|
|
|
|
<el-alert
|
|
effect="dark"
|
|
:closable="false"
|
|
title="点击事件，包含图片点击事件以及关闭事件。。"
|
|
type="info"
|
|
style="margin-bottom: 20px; margin-top: 20px;"
|
|
/>
|
|
<el-button type="primary" @click="showImg">点击预览</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
import { createImgPreview } from '_c/Preview/functional'
|
|
import { Message } from '_c/Message'
|
|
export default defineComponent({
|
|
// name: 'PreviewDemo',
|
|
setup() {
|
|
const imgList = ref<string[]>([
|
|
'http://dn-p-tystore.qbox.me/p/chapter/attachment/e_bTeg-weA/EgfWEtftEBfs4BfuEg6uelu_JHH3HUD6I7HMet148BDq5uyiKgem4C2.jpg',
|
|
'http://www.jf258.com/uploads/2014-09-29/012939994.jpg',
|
|
'http://pic1.win4000.com/wallpaper/3/58f4672ad3c5c.jpg'
|
|
])
|
|
|
|
function showHasImg(i: number): void {
|
|
createImgPreview({
|
|
imageList: [
|
|
imgList.value[i]
|
|
],
|
|
show: true,
|
|
index: 0
|
|
})
|
|
}
|
|
|
|
function showNoImg():void {
|
|
createImgPreview({
|
|
imageList: imgList.value,
|
|
show: true,
|
|
index: 0
|
|
})
|
|
}
|
|
|
|
function showImg():void {
|
|
createImgPreview({
|
|
imageList: imgList.value,
|
|
show: true,
|
|
index: 0,
|
|
onSelect: (i: number) => {
|
|
Message.info('当前点击的图片索引：' + i)
|
|
},
|
|
onClose: (i: number) => {
|
|
Message.info('关闭之后的图片索引：' + i)
|
|
}
|
|
})
|
|
}
|
|
|
|
return {
|
|
imgList,
|
|
showHasImg, showNoImg, showImg
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.img-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
.img-item {
|
|
width: 400px;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|