下载后端返回的文件流

axios({ 
        method: "get", 
        url: 'http://****', 
        params: { 
          keyword: this.paramsData.keyword, 
          startTime: this.dateFrame[0] ? this.$util.formatDate(this.dateFrame[0], 'yyyy-MM-dd hh:mm:ss') : '', 
          endTime: this.dateFrame[1] ? this.$util.formatDate(this.dateFrame[1], 'yyyy-MM-dd hh:mm:ss') : '' }, 
          responseType: "blob" // ***必填！！！
        }) 
        .then(function (res) { 
          let blob = new Blob([res]); // { type: "application/vnd.ms-excel" } 
          let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象 
          // 创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载 
          let a = document.createElement("a"); 
          a.href = url; 
          a.download = "系统日志.xlsx"; 
          a.click(); // 释放这个临时的对象url 
          window.URL.revokeObjectURL(url); 
        }) 
        .catch(function (res) { console.log("error", res); });

vue项目设置鼠标右键禁止与否

<div @contextmenu="show($event, 1)" ></div>

show (event, disableRightKey) { 
// disableRightKey 是否禁止鼠标右键的标识  此处： 1 是 2 否 
// 使用判断条件控制是否需要阻止右键 
if (disableRightKey == '1') { 
   event.preventDefault() 
  } 
},

针对ie、safari浏览器时间格式化NAN问题解决方法

// 前端获取到的数据为 2018-08-17 16:37:50，需要使用正则表达式将格式改成 2018/08/17 16:37:50
var time = obj.replace(/\-/g, "/");

input标签type为number时去掉后面调整箭头

/** 去除input输入框样式 */ 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  appearance: none; 
  margin: 0;
 } 
 input[type="number"] { 
   -moz-appearance: textfield; 
 }

html2canvas使用

// 生成图片  dom=>img
    downImg () {
      // 想要截取的dom
      const dom = this.$refs.saveImg
      // 创建一个新的canvas
      const Canvas = document.createElement('canvas')
      // 获取dom节点的宽高
      const width = window.getComputedStyle(dom).width.split('px')[0]
      const height = window.getComputedStyle(dom).height.split('px')[0]
      // 获取设备像素比
      // const scale = window.devicePixelRatio
      const scale = 1  // scale取设备像素比 截图不对 需要再研究！！！
      // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
      Canvas.width = width * scale
      Canvas.height = height * scale
      // 设定 canvas css宽高为 DOM 节点宽高
      Canvas.style.width = `${width}px`
      Canvas.style.height = `${height}px`
      console.log('Canvas', Canvas)
      Canvas.getContext('2d').scale(scale, scale)
      html2canvas(dom, {
        canvas: Canvas,
        scale: 1,
        useCORS: true,
        logging: true,
        width: width + 'px',
        hegiht: height + 'px'
      }).then((canvas) => {
        console.log('canvas', canvas)
        const context = canvas.getContext('2d')
        // 关闭抗锯齿形
        context.mozImageSmoothingEnabled = false
        context.webkitImageSmoothingEnabled = false
        context.msImageSmoothingEnabled = false
        context.imageSmoothingEnabled = false
        // canvas转化为图片
        // this.saveImg = this.canvas2Image(canvas, canvas.width, canvas.height)
        this.saveImg = canvas.toDataURL('image/png') // png的话有圆角就会透明
      })
    },

防止浏览器自动填充用户名密码

// 在密码框上面加一行代码
<input type="password" hidden autocomplete="new-password" />// 加这句
<input v-model="form.password" type="password" class="w100" 
placeholder="请输入密码" auto-complete="off" />

回到顶部

mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
methods:{
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
        console.log(scrollTop) //滚动条滑动距离
        // 超过200显示回到顶部按钮
      if (scrollTop >= 200) {
        this.showBackTop = true
      } else {
        this.showBackTop = false
      }
    },
    // 回到顶部
    toTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      })
    },
}

页面变灰代码

*{ filter: grayscale(100%) !important; }

vue3一键复制

// 安装
npm install vue-clipboard3

// 使用
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()

const copyLink = () => {
  toClipboard(dataForm.value.url)
  globalProperties.$message.success('复制成功')
}

滚动条样式

/* 滚动条 */
.customScrollbar {
	&::-webkit-scrollbar {
		width: 5px;
	}

	/* 这是针对缺省样式 (必须的) */
	&::-webkit-scrollbar-track {
		background-color: #ffffff;
	}

	/* 滚动条的滑轨背景颜色 */

	&::-webkit-scrollbar-thumb {
		background-color: #bfbfbf;
		border-radius: 3px;
	}

	/* 滑块颜色 */
	&::-webkit-scrollbar-button {
		display: none;
		background-color: rgba(0, 0, 0, 0);
	}

	/* 滑轨两头的监听按钮颜色 */

	&::-webkit-scrollbar-corner {
		background-color: rgba(0, 0, 0, 0);
	}

	/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
}