vue el-image 怎么封装成可以预览大图的全局指令?

2023-03-24 0 3,942

代码如下,指令v-preview可以正常调用了 但是el-image却无法调出来,出不来正常的效果,寻大神指点

html调用指令

<div class="wb_add_img clearfix">
  <a v-for="(pic, index) in picList" :key="index" v-preview="{srcList: srcList}" class="imgWrap">
       <img alt="图片" :src="pic.fileid" class="img"/>
  </a>
</div>

索引.js

import preview from './children/preview'
Vue.directive('preview', {
    bind(el, binding, vnode) {
        const srcList = (binding.value && binding.value.srcList) || []
        el.addEventListener('click', () => {
            const $preview = new (Vue.extend(preview))({
                propsData: {
                    srcList: srcList
                }
            }).$mount()

            document.body.appendChild($preview.$el)
        })
    }
})

预览.js

<template>
    <div class="perImage">
        <el-image
            style="width: 100px; height: 100px"
            ref="preview"
            class="wqewe"
            :src="url"
            :preview-src-list="srcList"
        </el-image>
    </div>
</template>

<script>
    export default {
        props: {
            srcList: [Array, String],
        },
        data() {
            return {
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                // picList: [
                //     'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                //     'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                // ]
            }
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                this.$nextTick(() => {
                    this.showImgPreview()
                })
            },
            showImgPreview() {
                console.log('url', this.url)
                console.log('srcList', this.srcList)
            },
        },
        computed: {
            // 处理预览图片数据
            // previewSrc() {
                // return this.srcList
            // }
        },
    }
</script>

<style lang="scss" scoped>
    .preview-container {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .preview-container img {
        max-width: 80%;
        max-height: 80%;
    }
</style>
回答:v-preview="{srcList: srcList}"里面的是否组件创建时还是个空数组,创建之后通过请求拿到的数据
我看你的指令没有 这个数据,所以你这个指令好像只能渲染出来一个传入空数组的,不知道是不是这个原因srcListwatchel-image

试了下你的代码,发现了几个报错

preview指令应该触发了关键字,可以考虑换个名字
还有下一段代码不对呀

<el-image
  style="width: 100px; height: 100px"
  ref="preview"
  class="wqewe"
  :src="url"
  :preview-src-list="srcList"
</el-image>

// 应该是
<el-image
  style="width: 100px; height: 100px"
  ref="preview"
  class="wqewe"
  :src="url"
  :preview-src-list="srcList"
>
</el-image>
这样改完我这边是生效了

参考代码

<template>
<div class="wb_add_img clearfix">
  <a v-for="(pic, index) in picList" :key="index" v-xx="{srcList: srcList}" class="imgWrap">
      <img alt="图片" :src="pic.fileid" width="100" class="img"/>
  </a>
</div>
</template>
<script>
import preview from './demo'
import Vue from 'vue'
export default {
  data () {
    return {
      srcList: [
  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',       'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      picList: [
        {
          fileid: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
        },
        { fileid: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' }
      ]
    }
  },
  directives: {
    xx: {
      bind (el, binding, vnode) {
        const srcList = (binding.value && binding.value.srcList) || []
        el.addEventListener('click', () => {
            const $preview = new (Vue.extend(preview))({
                propsData: {
                    srcList: srcList
                }
            }).$mount()

            document.body.appendChild($preview.$el)
        })
      }
    }
  }
}
</script>
演示.vue

<template>
  <div class="perImage">
    <el-image
      style="width: 100px; height: 100px"
      ref="preview"
      class="wqewe"
      :src="url"
      :preview-src-list="srcList"
    />
  </div>
</template>
<script>
// import { Image } from 'element-ui'
export default {
  props: {
    srcList: [Array, String],
  },
  components: {
    // ElImage: Image
  },
  data () {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      // picList: [
      //     'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      //     'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      // ]
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.showImgPreview()
      })
    },
    showImgPreview () {
      console.log('url', this.url)
      console.log('srcList', this.srcList)
    },
  },
  computed: {
    // 处理预览图片数据
    // previewSrc() {
    // return this.srcList
    // }
  },
}
</script>

<style lang="scss" scoped>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
}

.preview-container img {
  max-width: 80%;
  max-height: 80%;
}
</style>

vue el-image 怎么封装成可以预览大图的全局指令?
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 有软官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. 有软官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. 有软团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

有软官网_用软件,找有软 技术分享 vue el-image 怎么封装成可以预览大图的全局指令? https://www.jiaruvip.com/928.html

有软应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务