vue3点击生成二维码

锅盖哒3123

已于 2023-07-28 14:20:28 修改

阅读量907

点赞数 1

文章标签：前端 vue.js

于 2023-07-28 14:19:49 首次发布

本文链接：https://blog.csdn.net/A12536365214/article/details/131978902

版权

🙂博主：锅盖哒
🙂文章核心：vue点击生成二维码

目录大纲

html部分

js部分

css部分

html部分

当点击他的时候触发弹窗

  <div class="tuand_Text">
      <div class="text_OBJ">
          <div><img src="../assets/grzx.png" alt=""></div>
          <div class="wode_Td">推广二维码</div>
      </div>
      
      <div class="tupian_Img">
          <img src="../assets/yjt.png" alt="" @click="er_Wm()">
      </div>
      </div>

触发代码如下用于渲染二维码的html样式

      <!-- 推广二维码 -->
      <!-- style="display: none;" -->
      <div class="xians" v-if="tg_erwm" @click="mmmm">
          <div class="cha_Hao" @click="ha_Cwu()"> <svg t="1679499524000" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15350" width="32" height="32"><path d="M874.020877 874.019125c-199.931835 199.974501-524.106414 199.974501-724.038249 0-199.974501-199.931835-199.974501-524.106414 0-724.03825 199.931835-199.974501 524.106414-199.974501 724.038249 0 199.974501 199.931835 199.974501 524.106414 0 724.03825zM813.691467 210.310285C647.081605 43.700423 376.9219 43.700423 210.312037 210.310285 43.702175 376.920147 43.702175 647.079853 210.312037 813.689715c166.609862 166.609862 436.769567 166.609862 603.37943 0 166.609862-166.609862 166.609862-436.769567 0-603.37943zM726.951941 719.398346l-7.551843 7.551843a37.28989 37.28989 0 0 1-52.777567 0l-154.620779-154.620779-150.86619 150.86619a42.665778 42.665778 0 0 1-60.32941-60.372075l150.86619-150.823525-154.620778-154.620779a37.28989 37.28989 0 0 1 0-52.777567l7.551842-7.551843a37.28989 37.28989 0 0 1 52.777567 0l154.620779 154.620779 150.866191-150.86619a42.665778 42.665778 0 0 1 60.329409 60.32941l-150.86619 150.86619 154.620779 154.620779a37.28989 37.28989 0 0 1 0 52.777567z" fill="#68A5F7" p-id="15351"></path></svg> </div>
      <div  class="img_Ages">
      <canvas id="canvas"></canvas>
      <!-- <img src="../assets/tome.jpg" alt="" class="err" id="err" style="width: 80%;height: 80vh;"> -->
      </div>
  </div>

js部分

将二维码接口套入其中即可

  
  <script setup>
  
//   import { useRouter} from "vue-router";
  import axios from "axios";
  import { ref } from "vue";
  

  const tg_erwm = ref(false);

  const ha_Cwu = () =>{
      tg_erwm.value=false;
  }
  
  const er_Wm = () =>{
      tg_erwm.value=true;
      axios({
    url: "二维码接口", //接口
    method: "get",
    params: {
      userid :36  ,// 用户ID
  scienceid:1 //景区ID
  
  
    }, //参数
  }).then((res) => {
    console.log(res);
  
  var canvas = document.querySelector("canvas");
          var ctx = canvas.getContext("2d");
      //创建图片
          var image = new Image();
          //设置图片地址
          image.src = res.data
      image.onload = function() {
              //2个参数 图片的xy坐标
              // ctx.drawImage(image, 0, 0)
              //4各参数 图片的起始坐标和宽高
              ctx.drawImage(image, 70,70,200,60)
              //参数 408, 81 切片的起始坐标， 147, 182 切片切掉原图的尺寸， 0, 0,切完之后切片的位置400, 400切完之后 切片的大小
              // ctx.drawImage(image, 900, 100, 0, 0, 0, 0, 0, 0)
          }
  
        
  // console.log(er_w_ma.value);
  });
  }//ketixianshoye
  
  
  const mmmm =()=>{
      tg_erwm.value=false;
  }
  
  </script>

css部分


  <style scoped>
  .err{
      margin-left: auto;
      margin-right:auto;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #canvas{
      z-index: 9;
      top: 0%;
      position: fixed;
      width: 90%;
      height: 700px;
      /* height: 200px; */
  }
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  /* auto_text */
  /* 图片 */
  .bjimg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 25vh;
      min-width: 1000px;
      z-index: -10;
      zoom: 1;
      background-color: #fff;
      background-image: url('../assets/yaoxi.jpg') ;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      background-position: center 0;
    }
  .tgxxi{
      width: 100%;
      height: 50px;
  
      display: flex;
      font-size: 20px;
  }
  .tgxxi div{
      width: 40%;
      line-height: 46px;
  }
  .ku_Andu{
      /* text-align: center; */
      margin: auto;
      width: 90%;
  }
  .imgs img{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  }
  .zhen_text{
      /* margin:s 10px 0 0 10px; */
      display: flex;
  }
  .zhen_obj{
      margin: 10px 0 0 10px;
  }
  .hstx{
      font-size: 15px;
      margin: 10px 0 0 0;
  }
  /* 拦截 */
  .lani_Jie{
      margin: 80px 0 0 0;
  }
  .lani_Jie_yi{
      margin: 10px 0 0 0;
  }
  /* 可体现收益 */
  .auto_text{
      text-align: center;
      border-radius:5px ;
      margin: auto;
      background-color: #fff;
      width: 90%;
      height: 140px;
      box-shadow: 0px 0px 0px 0.5px;
  }
  .ti_Xian{
      margin: 15px 0 0 0;
  }
  .ti_Xian div:nth-child(1){
      font-size: 17px;
  }
  .ti_Xian div:nth-child(2){
      font-size: 21px;
      color: #089ADF;
  }
  .text_Tkai_Le{
      margin: 30px 0 20px 0;
      display: flex;
      justify-content: space-around;
  }
  .dai{
      font-size: 10px;
  }
  .qian{
      font-size: 21px;
      color: #089ADF;
  }
  
  
  
  .tuand_Text{
      border-radius: 5px;
      padding: 6px 0 0 0;
      margin-left: 5%;
      margin-top: 20px;
    text-align: center;
  width: 90%;
  height: 50px;
  display: flex;
  background-color: #fff;
   box-shadow: 0px 0px 0px 0.5px;
  }
  .tupian_Img{
      margin: 0 0 0 80%;
      position: absolute;
      /* right: 0; */
      line-height: 60px;
      /* width: 90%; */
  }
  
  .text_OBJ img{
      width: 40px;
      height: 40px;
  }
  .text_OBJ {
      /* line-height: 80px; */
      /* width: 90%; */
      display: flex;
      /* color: #089ADF; */
  
  }
  .wode_Td{
      line-height: 40px;
  }
  
  
  /* 二维码 */
  .xians{
      justify-content: center;
      /* display: none; */
      height: 100vh;
      width: 100%;
      top: 0;
      position: fixed;
      background-color: rgba(0, 0, 0, 0.5);
  }
  .img_Ages img{
      top: 50%;
      /* left: 15%; */
      position: absolute;
      display: flex;
  width: 300px;
  height: 300px;
  }
  #ccc{
      position: fixed;
      width: 95%;
      /* height: 700px; */
      /* border:1px solid red ; */
      /* background-image: url('../img/xiala.gif');
       background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 10; */
  }
  /* img{
  width: auto;
  height: 100px;
  } */
  .cha_Hao{
      /* right: 9%;
      margin: 10%; */
      position: absolute;
  }
  </style>