——-

业务需求：

• 点击微信图标弹出二维码图片，点击GitHub和CSDN图标跳转至外部页面。

功能实现：

1. 弹出页面采用ElementUI中的 el-dialog 实现。
2. 跳转页面基于window.location.href 实现。

代码如下：

<template>

    
    <div class="me-author-tool">
    
	      <i @click="showTool(weixin)"  :title="weixin.title" class="iconfont icon-weixin"></i>
	      <i @click="showTool(github)" :title="github.title" class="iconfont icon-github"></i>
	      <i @click="showTool(csdn)" :title="csdn.title" class="iconfont icon-csdn"></i>
	
	     <el-dialog :visible.sync="showImag" width="30%">
	        <img :src=" '/static/img/weixin.jpg' " width="80%"></img>
	      </el-dialog>

    </div>


</template>

<script>
  export default {
    name: 'CardMe',
    data() {
      return {
        weixin: {
          title: '点击加我微信', message: 'weixin'
        },
        github: {
          title: '点击跳转到码云', message: 'github'
        },
        csdn:{
          title:'点击跳转到CSDN', message: 'csdn'
        },
        //控制是否弹出图片
        showImag: false
      }
    },
    methods: {
      showTool(tool) {

        if(tool.message == "weixin"){
           this.showImag = true;
        }else if(tool.message == "github"){
          window.location.href="https://gitee.com/";
        }else if(tool.message == "csdn"){
          window.location.href="https://blog.csdn.net/qq_41286666";
        }
      }
    }
  }
</script>