免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
Vue 點擊圖片放大顯示功能

1 方式一:列表中感應(yīng)鼠標顯示大圖

我管理后臺使用的是 element , 列表使用的是 el-tabe

  <el-table-column    prop="identifImg"    header-align="center"    align="center"    label="證件照"    width="100">    <template slot-scope="scope">      <el-popover        placement="top-start"        trigger="hover">        <div class="row_reserve"><img class="big-img" :src="scope.row.identifImg"/></div>        <div slot="reference"><img class="td-img" :src="scope.row.identifImg"/></div>      </el-popover>    </template>  </el-table-column>

在列表中實現(xiàn)放大圖片使用的是 el-popover 

2 方式二:自定義通用組件實現(xiàn)

首先是自定義大圖顯示的通用組件:big-img.vue

<template>  <div v-show="visible" @click="closeClick" class="showPhoto">    <img class="img" :src="url" alt="圖片加載失敗" />  </div></template>
<script> export default { props: { url: { type: String, default: "", }, visible: { type: Boolean, default: false, }, }, methods: { closeClick() { //子組件可以使用 $emit 觸發(fā)父組件的自定義事件 this.$emit("closeClick"); }, }, };</script><style lang="css" scoped> .showPhoto { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.showPhoto .img { display: block; margin: auto 0; max-width: 20%; text-align: center; }</style>

然后在使用到文件中 引入組件并注冊組件

<script>
import BigImg from "../components/big-img"
export default { data() { return { photoVisible: false, bigImgUrl: "" }; }, components:{ BigImg }, methods: { showBigImage(e) {//點擊圖片函數(shù),點擊后,把photoVisible設(shè)置成true if (e != "") { this.photoVisible = true; this.bigImgUrl = e; } }, };</script>

然后在圖片 img 處使用

<template>  <div>  <!-- imgBaseUrl為圖片URL-->  <img v-if="imgBaseUrl"        style="width:100%"        :src="imgBaseUrl"          @click.self="showBigImage(imgBaseUrl)">
<img @click.self="showBigImage($event)" src="~@/assets/img/liaojiewt/202141.png" alt="" /> <!--顯示放大圖片的組件--> <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></BigImg> </div></template>
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
kbone 高級 - 使用小程序內(nèi)置組件(二)
Vue2.0史上最全入坑教程(下)
一起學(xué)Vue自定義組件之拼圖小游戲
Vue中 props 這些知識點,可以在來復(fù)習(xí)一下!
vue.js的項目實戰(zhàn)
成功vue一個頁面引用另個頁面
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服