el-image实现，点击其他按钮调起图片预览

路光.

于 2023-11-20 10:25:34 发布

阅读量1.6k

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_41429765/article/details/134501744

版权

  <div class="about">
     <el-image src="https://img0.baidu.com/it/u=2358333219,3637066380&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" :preview-src-list='[previewList]' style="width:100px;height:100px;" ref="cFImg"></el-image>
    <div @click="otherBtn" class="btnBn">
      按钮
    </div>
  </div>

<script>
  export default{
    data(){
      return{
        previewList:"https://img0.baidu.com/it/u=2358333219,3637066380&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"
      }
    },
    methods:{
      otherBtn(){
        //根据ref调起el-image组件的预览功能
        this.$refs.cFImg.clickHandler();
      },
      showImage(){

      }
    }
  }
</script>

<style>
  .btnBn{
    width: 200px;
    margin: 50px auto;
    border-radius: 100px;
    background: linear-gradient(45deg, #ffb0b0, #2196F3);
    color: #fff;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }
</style>