Vue、Js、Scss，如生成快照、下载图片

原创已于 2024-09-02 15:07:57 修改 · 862 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #html5 #js #vue #css

于 2021-05-25 11:47:43 首次发布

scss 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Vue和JS在实际应用中的技巧，包括Webpack中的require.context，JS的时间戳转换和事件监听，特别是移动端滑动事件的处理。在Vue部分，讨论了Vue组件的交互，如解决逆向轮播问题，以及滤镜和Flex布局中的样式调整。同时，文章也涵盖了数据存储、对象合并和函数调用方法。

生成二维码

//版本"qrcodejs2": "0.0.2",
<div class="qrcode">
    <div ref="qrcode" style="margin:0 auto;"></div>
    <input type="text" id="text" v-model="text" @keyup.enter="generateQRCode" />
    <button @click="generateQRCode"></button>
</div>
share() {
            new QRCode(this.$refs.qrcode, {
                width: 200,
                 height: 200,
                text: "https://www.baidu.com/"
             })
 },

.qrcode {
    z-index: 999;
    position: absolute;
    left: 0;
    width: 1.56rem;
    height: 1.56rem;

    img {
        display: block;
        max-width: 100% !important;
        height: 100%;
    }

    div {
        position: absolute;
        width: 1.56rem;
        height: 1.56rem;
    }

    input[type=text] {
        opacity: 0;
        pointer-events: none;
    }

    button {
        padding: 12px 20px;
        background: white;
        opacity: 0;
        pointer-events: none;
    }
}

html2canvas

// 版本"html2canvas": "^1.4.1",
传dom元素如 this.convertToImage(this.refs.*)，元素如果有设置scale将会导致图片显示异常，创建一个相同元素，设置opacity:0;pointer-events: none;即可。
convertToImage(container) {
            // 设置放大倍数
            const scale = window.devicePixelRatio;
            // 传入节点原始宽高
            let width  = container.offsetWidth;
            let height= container.offsetHeight;
            // html2canvas配置项
            const ops = {
                scale,
                width,
                height,
                useCORS: true,
                allowTaint: false,
            };
            return html2canvas(container, ops).then((canvas) => {
            	// 调用下载图片
                this.download(canvas.toDataURL("image/png"), 'share');
                // 返回图片的二进制数据
                return canvas.toDataURL("image/png");
       });
   },
   // 下载图片
download(url, fileName) {
            var link = document.createElement('a');
            link.style.display = 'none';
            document.body.appendChild(link);
            link.href = url;
            link.download = fileName;
            link.click();
            document.body.removeChild(link);
 },

html特殊字符转义

function filter(str) {
  str += ''; // 隐式转换
  str = str.replace(/%/g, '%25');
  str = str.replace(/\+/g, '%2B');
  str = str.replace(/ /g, '%20');
  str = str.replace(/\//g, '%2F');
  str = str.replace(/\?/g, '%3F');
  str = str.replace(/&/g, '%26');
  str = str.replace(/\=/g, '%3D');
  str = str.replace(/#/g, '%23');
  return str;
}

转化rem

function setRootFontSize() {
		var conf = document.body;
		var baseWidth = conf.getAttribute("base-width");
		var baseHeight = conf.getAttribute("base-height");

		var ratioW, ratioH;
		// 使用 viewport 的大小 http://weizhifeng.net/viewports.html
		// https://github.com/jquery/jquery/blob/master/src/dimensions.js
		if (baseWidth) {
			ratioW = document.documentElement.clientWidth / baseWidth;
		}
		if (baseHeight) {
			ratioH = document.documentElement.clientHeight / baseHeight;
		}
		var MAX_RATIO = 1.5;
		if (ratioW || ratioH) {
			var ratio = Math.min(ratioW || MAX_RATIO, ratioH || MAX_RATIO);
			if (ratio > MAX_RATIO) {
				ratio = MAX_RATIO;
			}
			var html = document.getElementsByTagName("html")[0];
			html.style.fontSize = (100 * ratio) + "px";
			// html.style.setProperty("font-size", fontsize + "px", "important");
		}
	}
	window.addEventListener("resize", setRootFontSize);
  setRootFontSize();

设置页面信息

export const setDocumentTitle = (title) => {
  document.title = title;
}

// Set Meta Description or Keywords
export const setMeta = (name, content) => {
  const meta = document.createElement('meta');
  meta.name = name;
  meta.content = content;
  document.getElementsByTagName('head')[0].appendChild(meta);
}

对象转换成url参数

function 
formateObjToParamStr(paramObj) {
  const sdata = [];
  for (let attr in paramObj) {
    sdata.push(`${attr}=${filter(paramObj[attr])}`);
  }
  return sdata.join('&');
};

获取url参数

function getParam(name) {
  let reg = new RegExp("[?&]" + name + "=([^&#]+)"),
    param = window.location.href.match(reg);
  return param ? decodeURIComponent(param[1]) : null;
}

webpack中require.context

require.context(directory, useSubdirectories, regExp)
directory: 要查找的文件路径
useSubdirectories: 是否查找子目录
regExp: 要匹配文件的正则

时间戳转换

export const timestampToTime = function (timestamp) {
  let date = new Date(timestamp * 1000 || 0);
  let Y = date.getFullYear() + '-';
  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  let D = (date.getDate()< 10 ? '0' + date.getDate():date.getDate()) + ' ';
  let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
  let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
  return Y + M + D + h + m + s;
}

jquery请求模板


document.getElementsByTagName('body')[0].style.overflow = 'hidden';
// JQUERY请求
export const request = function (e, f, g) {
  let requestData;
  $.ajax({
    type: "POST",
    // dataType: "json",
    xhrFields: { withCredentials: true, },// 是否携带cookie
    data: JSON.stringify() // new FormData()),
    processData: false,  // 告诉jQuery不要去处理发送的数据
    async: true,	// 同步或异步
    contentType: 'application/x-www-form-urlencoded', 
    url: ``,
    success: function (data) {
      requestData = data;
    }
  })
  return requestData;
};

一键copy

copyText(text) {
  var textarea = document.createElement("input");//创建input对象
  var currentFocus = document.activeElement;//当前获得焦点的元素
  document.body.appendChild(textarea);//添加元素
  textarea.value = text;
  textarea.focus();
  if(textarea.setSelectionRange)
  textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置
  else
  textarea.select();
  try {
    var flag = document.execCommand("copy");//执行复制
  } catch(eo) {
    var flag = false;
  }
  document.body.removeChild(textarea);//删除元素
  currentFocus.focus();
  return flag;
}

进行监听实时滑动

$(window).scroll(function () {
  let documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
  // 元素顶端到可见区域（网页）顶端的距离
  // let htmlElementClientTop = document.querySelector("class").getBoundingClientRect().top;
  // // 网页指定元素进入可视区域
  // if (documentClientHeight >= htmlElementClientTop) {
  //   if (!document.querySelector("class").className.includes("animeTopDownLeftCenter")) {
  //     $("class").addClass(" newClass");
  //   } else {
  //     return;s
  //   }
  // }
});

// 动画移动 let documentClientHeight = document.documentElement.clientHeight || window.innerHeight;
export let animalDetail = function (documentClientHeight, css, anime) {
  document.querySelectorAll(css).forEach((dom) => {
    if (documentClientHeight === 0) {
      if (!dom.className.includes(anime)) {
        dom.className = dom.className + anime;
      }
    } else {
      const scaleClientTop = dom.getBoundingClientRect().top;
      if (documentClientHeight >= scaleClientTop) {
        if (!dom.className.includes(anime)) {
          dom.className = dom.className + anime;
        }
      }
    }
  });
};

手机端滑动

touchstart 触摸屏幕时触发。
touchmove 滑动时触发。
touchend 移开时触发。
默认参数event：
　　touches：表示当前跟踪的触摸操作的touch对象的数组。
　　targetTouches：特定于事件目标的Touch对象的数组。
　　changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性：
　　clientX：在视口中的x坐标。
　　clientY：在视口中的y坐标。
　　identifier：标识触摸的唯一ID。
　　pageX：在页面中的x坐标。
　　pageY：在页面中的y坐标。
　　screenX：在屏幕中的x坐标。
　　screenY：在屏幕中的y坐标。
　　target：DOM节点。
onTouch—–>onTouchEvent—>onclick

let abody = document.getElementsByTagName('body')[0];
    let startX, startY, endX, endY, X, Y;   
    // 开始
    abody.addEventListener('touchstart', function(e) {
      e.preventDefault && e.preventDefault();
      // 获取初始位置
      startX = e.touches[0].pageX;
      startY = e.touches[0].pageY;
    }, false);
    // 滑动时触发
    abody.addEventListener('touchmove', function(e) {
      e.preventDefault && e.preventDefault();
      endX = e.changedTouches[0].pageX; endY = e.changedTouches[0].pageY;
      X = endX - startX; Y = endY - startY;
      if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
        alert("right");
      } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
        alert("left");
      } else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
        alert("down");
      } else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
        alert("top");
      } else{
        alert("no");
      }
    });

fb分享

第 1 步： 在页面上添加一次 JavaScript SDK，最好是置于起始 body 标签之后。
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v14.0" nonce="PCKqjYqh"></script>
第 2 步： 把代码放在显示插件的页面位置。
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">分享</a></div>

href data-href 待分享页面的绝对网址。 XFBML 和 HTML5 版本默认为当前网址。

lazy data-lazy true 表示您可通过设置 loading=“lazy” iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视区附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 true 或 false 其中一个（默认）。 false

layout data-layout 从插件可用的几种布局中选择一种。可以是 box_count、button_count 或 button 中的一个。 icon_link

size data-size 此按钮有两种尺寸，即 large 和 small。 small

Object.assign()

call、apply、bind

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘**’, … ,‘string’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘**’, …, ‘string’ ])。

bind 除了返回是函数以外，它的参数和 call 一样。

本地存储

localStorage.getItem(key)获取指定key本地存储的值
localStorage.setItem(key,value)将value存储到key字段
sessionStorage.removeItem(key)
sessionStorage.clear()

VUE

this.$parent 可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }

图片拼接更改

.style.backgroundImage = "url("+require("../imgs/1.png")+")";
.style.backgroundImage = "url("+require(`../imgs/${a}.png`)+")";

解决逆向轮播第一页到最后一页点击事件失效

switchRole(ev) {
      if(ev.target.className.includes('avast')) {
        let id = ev.target.getAttribute('data-avastid');
        this.111 = id;
        document.querySelectorAll("#avastSwiper .avast").forEach((dom, index) => {
            dom.className = dom.className.substring(0,13);
        })
        document.querySelectorAll(`.avast.avast${id}`).forEach(dom => {
          dom.className = dom.className + ' active';
        })
      }
   }

// 二 添加新属性及属性值
:data-id="*"
$nextTick(() => {
      $(".sildes[data-id='*']").on("click", function(){
      });
 });