点击二维码扩大后缩小

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

前言

由于项目的需求（生成二维码后点击，让二维码扩大，再次点击缩小），此需求需要我使用到vue-qr 生成二维码组件，官网里有这个组件的使用方法及属性

npm install vue-qr --save

​​

现在的重点是 在 el-table 表格中 实现点击功能，若点击功能实现了，那岂不是离扩大缩小功能近了

我之前 还想着 直接在 el-table-column 属性里 添加点击事件，奈何不生效，后找到了方法，

很简单，

重点代码

 <el-table-column
                    prop="connectorQrCodeUrl"
                    label="二维码"
                    width="180px"
                    align="center"
                  >
                    <template slot-scope="scope" >
                      <el-link @click="qrcodeClick">
                        <vue-qr ref="Qrcode"
                                :text="scope.row.connectorQrCodeUrl"
                                :callback="test" qid="scope.row.connectorId"
                                :width="qrWidth"
                        />
                      </el-link>
                    </template>
                  </el-table-column>                                 

总代码 

<template>
  <div class="app-container">
         <el-table :data="connectorList" style="width: 100%">
                  <el-table-column
                    prop="pileConnectorCode"
                    label="编号"
                    width="180px"
                    align="center"
                  />
                  <el-table-column
                    prop="connectorQrCodeUrl"
                    label="二维码"
                    width="180px"
                    align="center"
                  >
                    <template slot-scope="scope" >
<!--                      <el-link @click="qrcodeClick(scope.row)" v-if="scope.row.connectorQrCodeUrl == 0">-->
<!--                        <vue-qr ref="Qrcode"-->
<!--                                :text="scope.row.connectorQrCodeUrl"-->
<!--                                :callback="test" qid="scope.row.connectorId"-->
<!--                                :width="qrWidth"-->

<!--                        />-->
<!--                      </el-link>-->
                      <el-link @click="qrcodeClick(scope.row)">
                        <vue-qr ref="Qrcode"
                                :text="scope.row.connectorQrCodeUrl"
                                :callback="test" qid="scope.row.connectorId"
                                :width="qrWidth"
                        />
                      </el-link>
                    </template>
                  </el-table-column>                                        
                </el-table>
  </div>
</template>

<script>
// 二维码组件
import VueQr from 'vue-qr'

export default {
  components: { VueQr },
  data() {
    return {   
      qrWidth:60,
      flag:true
    };
  },


  methods: {
    //点击二维码事件
    qrcodeClick(row){
      if (this.flag) {
        this.flag = false
        this.qrWidth = 150
      } else {
        this.flag = true
        this.qrWidth = 60
      }
    },
  
  },
};
</script>

<style scoped lang="scss">
.advContent {
  background: #fff;
  border-radius: 5px 5px 0px 0px;
}
.sideNav {
  padding: 30px 0 12px;
}
#qrcodeArea img {
  height: 80px;
  width: 80px;
}
</style>

​