数字常用计算操作

数字常用计算操作
downloadFile：base64数据导出文件，文件下载

  2. function downloadFile(filename, data) {
  3.     let DownloadLink = document.createElement('a');
  4.     if (DownloadLink) {
  5.         document.body.appendChild(DownloadLink);
  6.         DownloadLink.style = 'display: none';
  7.         DownloadLink.download = filename;
  8.         DownloadLink.href = data;
  9.         if (document.createEvent) {
  10.             let DownloadEvt = document.createEvent('MouseEvents');
  11.             DownloadEvt.initEvent('click', true, false);
  12.             DownloadLink.dispatchEvent(DownloadEvt);
  13.         } else if (document.createEventObject) {
  14.             DownloadLink.fireEvent('onclick');
  15.         } else if (typeof DownloadLink.onclick == 'function') {
  16.             DownloadLink.onclick();
  17.         }
  18.         document.body.removeChild(DownloadLink);
  19.     }
  20. }

基于atob和btoa的base64编码和解码

  1. function utf8_to_b64( str ) {
  2.   return window.btoa(unescape(encodeURIComponent( str )));
  3. }
  5. function b64_to_utf8( str ) {
  6.   return decodeURIComponent(escape(window.atob( str )));
  7. }
  9. utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
  10. b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

浏览器相关

禁止选择和复制

  1. ['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
  2.     document.addEventListener(ev, function(ev){
  3.         ev.preventDefault();
  4.         ev.returnValue = false;
  5.     })
  6. });
  1. body {
  2.     -moz-user-select: none;
  3.     -webkit-user-select: none;
  4.     -ms-user-select: none;
  5.     -khtml-user-select: none;
  6.     user-select: none;
  7. }


toFullScreen：全屏

  1. function toFullScreen() {
  2.     let elem = document.body;
  3.     elem.webkitRequestFullScreen
  4.     ? elem.webkitRequestFullScreen()
  5.     : elem.mozRequestFullScreen
  6.     ? elem.mozRequestFullScreen()
  7.     : elem.msRequestFullscreen
  8.     ? elem.msRequestFullscreen()
  9.     : elem.requestFullScreen
  10.     ? elem.requestFullScreen()
  11.     : alert("浏览器不支持全屏");
  12. }

exitFullscreen：退出全屏

  1. function exitFullscreen() {
  2.     let elem = parent.document;
  3.     elem.webkitCancelFullScreen
  4.     ? elem.webkitCancelFullScreen()
  5.     : elem.mozCancelFullScreen
  6.     ? elem.mozCancelFullScreen()
  7.     : elem.cancelFullScreen
  8.     ? elem.cancelFullScreen()
  9.     : elem.msExitFullscreen
  10.     ? elem.msExitFullscreen()
  11.     : elem.exitFullscreen
  12.     ? elem.exitFullscreen()
  13.     : alert("切换失败,可尝试Esc退出");
  14. }

复制到剪贴板

https://www.zhangxinxu.com/wordpress/2021/10/js-copy-paste-clipboard/
https://gitee.com/zhangxinxu/copy-text

  1. const copyToClipboard = (text) =>
  2.   navigator.clipboard?.writeText && navigator.clipboard.writeText（text）。
  3. // 测试
  4. copyToClipboard("Hello World!")。
  1. // 只能赋值在setup中使用
  3. import { message } from 'ant-design-vue'
  4. import { useI18n } from '@/hooks'
  6. export default function useCopyText() {
  7.   const { $t } = useI18n()
  9.   return (text: string) => {
  10.     try {
  11.       const data = text
  12.       const newInput = document.createElement('textarea')
  13.       newInput.value = data
  14.       document.body.appendChild(newInput)
  15.       newInput.select()
  16.       document.execCommand('Copy')
  17.       newInput.remove()
  18.       message.success($t('message.copySuccess'))
  19.     } catch (e) {
  20.       console.log(e)
  21.       message.success($t('message.copyFailed'))
  22.     }
  23.   }
  24. }

检测黑暗模式

  1. const isDarkMode = () =>
  2.   window.matchMedia &&
  3.   window.matchMedia("(prefers-color-scheme: dark)").matches。
  4. // 测试
  5. console.log(isDarkMode())。

元素滚动到顶部 / 底部

  1. const scrollToTop = (element) =>
  2.   element.scrollIntoView({ behavior: "smooth", block: "start" })
  4. const scrollToBottom = (element) =>
  5.   element.scrollIntoView({ behavior: "smooth", block: "end" })

生成随机颜色

  1. const generateRandomHexColor = () =>
  2.   \`#${Math.floor(Math.random() \* 0xffffff) .toString(16)}\`;