vue随笔记录

原创已于 2023-07-06 16:02:27 修改 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-05-29 11:34:46 首次发布

vue 刷新当前页面的方法：

mounted() {
if (location.href.indexOf("#reloaded") == -1) {
location.href = location.href + “#reloaded”;
location.reload();
}
},

vue 图片下载功能实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    var imgSrc = 'https://profile.csdnimg.cn/2/C/7/3_wangbadandzy'
    var name = "测试图片"

    function downloadPicture(imgSrc, name) {
        const image = new Image()
            // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = () => {
            const canvas = document.createElement('canvas')
            canvas.width = image.width
            canvas.height = image.height
            const context = canvas.getContext('2d')
            context.drawImage(image, 0, 0, image.width, image.height)
            canvas.toBlob((blob) => {
                const url = URL.createObjectURL(blob)
                const a = document.createElement('a')
                a.download = name || 'photo'
                a.href = url
                a.click()
                a.remove()
                URL.revokeObjectURL(url)
            })
        }
        image.src = imgSrc
    }
    downloadPicture(imgSrc, name)
</script>

</html>

vue doc pdf文件下载

安装FileSaver.js库：

npm install file-saver --save

导入FileSaver.js库：

import { saveAs } from 'file-saver';


axios({
  url: 'http://your-download-url.com',
  method: 'GET',
  responseType: 'blob', // 设置响应类型为 blob
}).then(response => {
  // 处理响应数据
  saveAs(response.data, 'file-name'); // 使用FileSaver.js保存文件
}).catch(error => {
  console.log(error);
});

vue 如何在插值语法中保留数字后三位小数

<div class="text primary-text">
  <span>合计：</span>
  <span class="money">￥{{totalMoney | numFilter }}</span>
</div>

// 定义过滤器函数

filters: {
    numFilter(value) {
      let realVal = parseFloat(value).toFixed(3);
      return realVal;
    },
  },

vue清空对象

//首先引入Vue 否则无法使用
import Vue from 'vue'
 
data(){
    return{
        obj:{
            name:'cc',
            age:12,
            gender:'famle'
        }
    }
}
 
for(let k of Object.keys(this.obj)){
    Vue.delete(this.obj,k);
}