Vue组件递归

• 教程：https://www.bilibili.com/video/BV1D5411t7YG?from=search&seid=12630771510066238454
• 源码： ```vue

<a name="Zmtxw"></a>
# Echarts封装Vue组件
- 文章：[https://juejin.cn/post/6844903581259137031](https://juejin.cn/post/6844903581259137031)
```vue
<template>
  <div :id="id" :style="style"></div>
</template>
<script>
import echarts from "echarts";
import "@/util/echartsColor.js";
export default {
  name: "Chart",
  data() {
    return {
      // echarts实例
      chart: "",
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    option: {
      type: Object,
      default: () => {
        return {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        };
      },
    },
  },
  watch: {
    // 观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal);
          } else {
            this.chart.setOption(oldVal);
          }
        } else {
          this.init();
        }
      },
      deep: true,
    },
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height,
      };
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    // 让图表跟随屏幕自适应
    selfAdaption(chart) {
      window.addEventListener("resize", function () {
        chart.resize();
      });
    },
    init() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById(this.id), "shine");
      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option);
      // 让图表跟随屏幕自适应
      this.selfAdaption(this.myChart);
    },
  },
};
</script>
<style scoped lang="scss"></style>

禁止查看网页源码

// 禁止查看源码
(function () {
  // 设置 body 中的 html
  function setBodyHtml(html) {
    document.getElementsByTagName("body")[0].innerHTML = html;
  }
  window.onload = function () {
    //屏蔽键盘事件
    document.onkeydown = function () {
      var e = window.event || arguments[0];
      //F12
      if (e.keyCode == 123) {
        setBodyHtml("<h1>禁止查看源码？</h1>");
        return false;
        //Ctrl+Shift+I
      } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        setBodyHtml("<h1>禁止查看源码？</h1>");
        return false;
        //Shift+F10
      } else if (e.shiftKey && e.keyCode == 121) {
        setBodyHtml("<h1>禁止查看源码？</h1>");
        return false;
        //Ctrl+U
      } else if (e.ctrlKey && e.keyCode == 85) {
        setBodyHtml("<h1>禁止查看源码？</h1>");
        return false;
      }
    };
    //屏蔽鼠标右键
    document.oncontextmenu = function () {
      return false;
    };
  };
});

前端分页

// 分页
paging(page = 1, limit = 10) {
  page = Number(page);
  limit = Number(limit);
  // 默认从第1页开始，显示10条
  // 每页默认显示10条
  this.tableData = this.tableDataCopy.slice(
    page * limit - limit + 0,
    page * limit - limit + limit
  );
},

前端实现html转成pdf并下载

var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
//未生成pdf的html页面高度
var leftHeight = contentHeight;
//页面偏移
var position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 592.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
  pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
} else {
  while(leftHeight > 0) {
    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
    leftHeight -= pageHeight;
    position -= 841.89;
    //避免添加空白页
    if(leftHeight > 0) {
      pdf.addPage();
    }
  }
}
pdf.save('content.pdf');

网址：https://blog.csdn.net/weixin_43720095/article/details/87358705

设置图片验证码

// 显示验证码图片
createMiniQrcode(blob) {
  let img = document.createElement("img");
  img.onload = function () {
    // 元素的onload 事件触发后将销毁URL对象, 释放内存。
    window.URL.revokeObjectURL(img.src);
  };
  // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
  // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
  // img.src = window.URL.createObjectURL(blob);
  img.src = blob;
  document.querySelector("#imgQrCode").innerHTML = "";
  document.querySelector("#imgQrCode").appendChild(img);
  document.querySelector("#imgQrCode img").style.width = "100%";
  document.querySelector("#imgQrCode img").style.height = "100%";
}
/* 开始对按钮进行倒计时 */
startCountdownTimer() {
  if(typeof this.countdownTime != 'number'){
    this.countdownTime = 60;
    this.countdownTimer = setInterval(() => {
      if (this.countdownTime <= 1) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
      this.countdownTime--;
    }, 1000);
  }
}

Vue登录、退出、路由守卫、headers设置token

// 存储token
localStorage.setItem('access_token', res.data.data.access_token)
// 清空token
localStorage.setItem("access_token", "");
// 导航守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('access_token')
  if (to.fullPath != '/login') {
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    if (token) {
      next('/')
    } else {
      next()
    }
  }
})

h5复制文本（原生代码）

function copyWx(wx) {
  var input = document.createElement("input");
  input.value = wx;
  input.id = "input";
  document.body.append(input);
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  input.style.display = "none";
  document.getElementById("wxBgBox").style.display = 'block';
}

h5调起微信（应用）

 function openWx() {
   window.location.href = "weixin://";
 }