一键复制查询内容分享给他人链接url打开，他人对应的查询内容给分享者一致

本文链接：https://blog.csdn.net/mzy110_/article/details/129244524

文章描述了一个前端功能实现过程，即根据input输入查询表格内容，并提供分享查询链接的功能。用户可以复制查询参数到剪切板，其他人通过带有参数的链接能直接打开页面并显示相同查询结果。在页面创建时检查URL参数，如果有则加载对应查询的输入值和数据。

摘要由CSDN通过智能技术生成

前言：需求：多个input框，根据input的结果查询表格内容，需要把这个input框的查询内容分享给别人，别人能够轻松打开这个链接，并且表格内容跟老大筛选的一致，总而言之:就是增加分享查询链接按钮
在这里插入图片描述

//首先在utils.js文件中写一个公共复制内容到剪切板函数
function copyToClipboard(textToCopy) {
    if (navigator.clipboard && window.isSecureContext) {
        return navigator.clipboard.writeText(textToCopy);
    }
    const textArea = document.createElement('textarea');
    textArea.value = textToCopy;
    textArea.style.position = 'absolute';
    textArea.style.opacity = 0;
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    return new Promise((res, rej) => {
        document.execCommand('copy') ? res() : rej();
        textArea.remove();
    });
}
//过滤空字符串函数
//query表示查询的参数
 function parseQuery(query) {
    const res = {};
    Object.keys(query).forEach(key => {
        if (query[key] !== '') {
            res[key] = query[key];
        }
    });
    return res;
}

import { objectToQuerystring, copyToClipboard } from ./utils';
import { Message } from '@tencent/ekyrin-ui';
//复制链接公共方法
//params表示参数
function copyLink(params) {
    params = Object.entries(params).reduce((item, [key, val]) => {
        if (Array.isArray(val)) {
            return item;
        }
        return {
            ...item,
            [key]: val,
        };
    }, params);
    //  清理空字符
    Object.keys(params).forEach(key => {
        if (!params[key] && params[key] !== 0) {
            delete params[key];
        }
    });
    const query = objectToQuerystring(params);
    const url = window.location.href.split('?')[0];
    const shareLink = `${url}${query}`;
    copyToClipboard(shareLink)
        .then(() => {
        //复制成功之后的弹框
            Message({
                type: 'success',
                message: '复制成功',
            });
        })
        .catch(event => {
        //复制失败后的弹框
            Message({
                type: 'error',
                message: `复制失败，原因：${event.message}`,
            });
        });
}

上面的操作是把查询内容复制到剪切板上，然后就是需要在分享给别人时，进入页面之前判断url上面是否带有查询参数（在created钩子函数判断），带有的话就赋值给对应的input，并请求数据，否则的话就不做任何处理