vue功能开发

🌟vue功能开发

❤ vue功能

1、图片下载

方式一

window.open(URL, name, features, replace)
// 新窗口的 URL、窗口名称、窗口特性

window.open(row.certificateImageUrl,"_blank", "width=500,height=400")
//打开一个新窗口并且指定长宽

参数说明：

URL：要在新窗口中加载的 URL 地址。可以是绝对 URL 或相对 URL。
name：新窗口的名称。可以是一个字符串，也可以是一个已经存在的窗口名称。如果名称已经存在，则新窗口会在该窗口中打开。如果名称为空或未指定，则会在新窗口中打开。

“_blank”：在新窗口或标签页中打开 URL。
“_self”：在当前窗口或标签页中打开 URL。
“_parent”：在父级窗口或标签页中打开 URL。
“_top”：在最顶层的窗口或标签页中打开 URL。

features：一个逗号分隔的字符串，用于指定新窗口的特性，如大小、位置、工具栏等。具体可用的特性取决于浏览器。
replace：一个布尔值，用于指定新窗口是否替换当前浏览器的历史记录。如果为 true，则在新窗口打开后，当前浏览器的历史记录将被替换为新窗口的历史记录。如果为 false 或未指定，则在新窗口打开后，当前浏览器的历史记录将保留。

function toHoutai() {
   window.open('http://trainingadmin.caderm.org', 'new_window');
}

方式二

// 下载图片01
const handleDownLoad = (url, name) => {
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.src = url;
    document.body.appendChild(iframe);
    setTimeout(() => {
        document.body.removeChild(iframe);
    }, 200);
 
    // 下载图片
    downloadByBlob(url, name);
};

// 下载图片03
const download = (href, name) => {
    let eleLink = document.createElement("a");
    eleLink.download = name;
    eleLink.href = href;
    eleLink.click();
    eleLink.remove();
};
 
// 下载图片02
const downloadByBlob = (url, name) => {
    let image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.src = url;
    image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
            let url = URL.createObjectURL(blob);
            download(url, name);
            // 用完释放URL对象
            URL.revokeObjectURL(url);
        });
    };
};

2、网页返回

const toBack = (e) => {
    window.history.back(-1);
};

3、加密解密

① 插件加密

MD5加密（不可逆）
MD5加密是不可逆的，相当于是插件加密，当然你也可以把他的方法抄过来自己实现。

MD5.js是通过前台js加密的方式对用户信息，密码等私密信息进行加密处理的工具，前端用的比较多。

MD5加密的6种方法

1, hex_md5(value)
2, b64_md5(value)
3, any_md5(s, e)
4, hex_hmac_md5(key, data)
5, b64_hmac_md5(key, data)
6, any_hmac_md5(key, data, e)
————————————————

 var str64 = b64_md5(urlInput.value);
     outPut.value = str64;
     console.log('hex_md5加密', hex_md5(urlInput.value));
     console.log('b64_md5加密', b64_md5(urlInput.value));
     console.log('any_md5加密', any_md5('1', urlInput.value));
     console.log('hex_hmac_md5加密', hex_hmac_md5('1', urlInput.value));
————————————————
 

sha1加密（不可逆）

② JS API 加密

var btnEncrypt = document.getElementById('btnEncrypt');
var urlInput = document.getElementById('urlInput');
var outPut = document.getElementById('encryptContent');
var btnDecryption = document.getElementById('btnDecryption');
var decryptionContent = document.getElementById('decryptionContent');

// base 64 加密
btnEncrypt.addEventListener('click', function() {
     var str64 = window.btoa(urlInput.value);
    outPut.value = str64;
})
btnDecryption.addEventListener('click', function() {
     var str = window.atob(outPut.value);
     decryptionContent.value = str;
})
 

前端控制台出现hex_md5 is not defined的错误

报错信息提示：

md5.js这一个文件没有问题
[Vue warn]: Error in v-on handler: “ReferenceError: hex_md5 is not defined”
found in    —> at src/views/admin/user.vue        at src/views/admin.vue        at src/app.vue

warn @ webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620

解决方法

检查index.html，是否有引入md5.js，写法是否正确
写法错误

4、动态数据处理

（1）动态拼接相对路径结尾的svg

错误写法一 ❌

正确写法 🙆

<img :src="require(`@/assets//amazon/svg/homemenu${index}.svg`)" style="height: 20px;display: block;margin: 0 auto;margin-top: 12px;"/>

（2）动态拼接图片背景

第一种方式：推荐

css 样式中
background-size: cover;
background-image:url('~@/assets/amazon/fukuan2.png');

第二种方式：

<div :style="{backgroundImage: 'url(' + require('@/assets/images/fukuan2.png') + ')' }"></div>

第三种方式：

<div :style="{backgroundImage: 'url(' + imgData + ')' }"></div>

import logo from '@/assets/images/logo.png'
data:{
	return:{
		imgData: logo
	}
}

第四种方式- img直接引入图片

① 

<img src="~@/assets/images/logo.png" alt="">

<img src="../../../../assets/images/logo.png" alt="">

②

<img :src="imgData" alt="">

③ 

<img :src="require('../../../../assets/images/logo.png')" alt="">
 

（3） 组件动态传递参数

父组件使用子组件方法并传递参数

_this.$refs.mychild1.getUserAlarmInfoin(row);

子组件向父组件传递参数

this.$parent.getList();

总结： 就一个函数传参，干他完事！

5、图床的使用

 <div :style="{ backgroundImage: 'url(' + require('@/assets/amazon/tuchuang.png') + ')' ,width:'200px',height:'200px',backgroundPositionX: '10px', backgroundPositionY: '10px',float:'left'}"></div>