村农

莫笑农家腊酒浑,丰年留客足鸡豚。


vue 开发中的小问题总结

冬冬

1、 vue数据初始化

// 重置data数据
Object.assign(this.$data, this.$options.data())

2、Vue中document.documentElement.scrollTop的值总为零的解决办法 碰到的是在手机上有问题,在 pc电脑上,是好的,所以觉得和浏览器有关。

let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

3、charles 使用记录 无法抓安卓手机包问题 没有信任证书 ios 可以设置 安卓必须应用信任

4、文字渐变色

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2> 
///与HTML相对应的CSS代码如下:

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    position: relative; 
}  

.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

5、移动端滚动(事件穿透)

document.body.style.cssText = “overflow-y:hidden;” //移动端不能阻止滚动

6、环境依赖python2.7

    npm install --python=python2.7

7、H5长按保存图片 在浏览器中,H5长按就有保存图片功能。

8、html页面生成canvas 可以使用html2canvas库(https://html2canvas.hertzen.com), 让html转变成canvas。 示例代码,如下:

<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
html2canvas(document.querySelector("body"),{background:'#fff',width:100,useCORS:true}).then(canvas => {
        // document.body.appendChild(canvas);
        // var this_canvas = document.querySelector('canvas');
        // console.log(this_canvas);
        var img_data = canvas.toDataURL('image/jpg');
        var img = document.querySelector('.canvas_img');
        img.crossOrigin = 'anonymous';
        img.src = img_data;
    });

注: 1、官方文档在参数配置中,给的背景颜色字段为backgroundColor,然而并没有用。background生效。 2、如果canvas中要加如片,然后使用toDataURL将canvas生成图片,必须要求图片和代码同源,否则会报错“Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.”