[前端开发工程师]工作小记——JS事件传参 && 动态设置浏览器标题和图标

JS事件绑定函数传参

以click事件为例

//............JS事件传参............

<div @click="handleClick1">传入事件对象</div>

<div @click="handleClick2(target)">自定义传参</div>

<div @click="handleClick3($event,target)">同时传入自定义参数和事件对象</div>

//.................................

methods:{
        handleClick1(event){
            //返回的是点击对象
        } 
        handleClick2(target){
            //返回自定义传参对象
        } 
        handleClick3(event,target){

        } 
}

动态设置浏览器页签标题和图标

标题

document.title = '自定义标题'；

图标

压缩包内替换图标

Vue项目默认页签图标是favicon.ico,可在前端包内直接替换图标，新图标命名必须为favicon.ico

程序替换图标

            //----------图标位置（一般在client.html文件中）----------

            <link rel="icon" href="data:image/ico;base64,aWNv">
            //icon必须设置默认href
            //data:image/ico;base64,aWNv是一个空白的base64图片

            //---------替换页签图标--------

            setLinkIcon(linkHref){
                let link = document.querySelector("link[rel*='icon']") ||document.createElement("link");
                link.type = "image/x-icon";
                link.rel = "shortcut icon";
                link.href = linkHref;  //icon图标路径
                document.getElementsByTagName("head")[0].appendChild(link);//将图标插入head中
            },