// 绘制图片
drawImg() {
// 创建图片基本属性
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
let __width = 110 * 4;
let __height = 145 * 4;
canvas.width = __width;
canvas.height = __height;
// 图片背景色
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, __width, __height);
// 加载 第一张图片
var imgCode = new Image();
imgCode.src = document.getElementById('qrcodeImg').querySelector('img').src;
imgCode.onload = function() {
// 绘制 第一张图片
ctx.drawImage(imgCode, __width * 0.25, __height * 0.4, __width * 0.5, __width * 0.5);
// 加载 第二张图片 LOGO
var imgLogo = new Image();
imgLogo.src = imgLogo.src = document.getElementById('logoImg').src;
imgLogo.onload = function() {
// 绘制 第二张图片 LOGO
ctx.drawImage(imgLogo, __width * 0.15, __width * 0.1, __width * 0.7, __width * 0.35);
// 文本绘制
ctx.font = 5 * 4 + "px Arial";
ctx.fillStyle = '#333'; // 文字颜色
ctx.textAlign = 'center'; // 文本水平对齐方式
// ctx.textBaseline='middle'; // 文本垂直方向，基线位置
ctx.fillText(lang.shareUrlImgText, __width * 0.5, __height * 0.9); // 创建文字，控制文件的起始位置
// let imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);
// ctx.putImageData(imgdata, 0, 0);
// 得到图片src数据
let baseImgData = canvas.toDataURL();
// 图片src赋值
document.getElementById('sharePhoto').src = baseImgData;
}
}
}var obj = document.querySelector(cssselecter);
var obj = document.querySelectorAll(cssselecter);
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象，querySelectorAll返回的一个集合(objNodeList )。用过jquery或者是zepto的应该都熟悉css选择器，就不多说了，不会的可以看看这篇：CSS选择器
目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。
/* 外容器 */
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 4999;
background: rgba(0, 0, 0, 0.5);
/* 内容区 */
.cont {
position: fixed;
z-index: 5000;
width: 80%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 5px;
}
}1、使用绝对路径，打包后成了 url(/static/img/logo-index.2f00bf2.png) no-repeat
2、使用相对路径，打包后成了 url(static/img/logo-index.2f00bf2.png) no-repeat
但是CSS资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载，解决办法，打开webpack.prod.conf.js，参考详情说明步骤，添加字段 publicPath:'../../'，
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;//密码强度校验
function checkPassword3(fieldId,tipMsg){
/*
返回密码的强度级别
*/
function checkStrong(sPW) {
if (sPW.length < 8||sPW.length > 20)
return 0; //密码太短或太长
Modes = 0;
for (i = 0; i < sPW.length; i++) {
//测试每一个字符的类别并统计一共有多少种模式.
Modes |= CharMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}
/*
判断字符类型
*/
function CharMode(iN) {
if (iN >= 48 && iN <= 57) //数字
return 1;
if (iN >= 65 && iN <= 90) //大写字母
return 2;
if (iN >= 97 && iN <= 122) //小写
return 4;
else
return 8; //特殊字符
}
/*
统计字符类型
*/
function bitTotal(num) {
modes = 0;
for (i = 0; i < 4; i++) {
if (num & 1) modes++;
num >>>= 1;
}
return modes;
}
/**
* 密码强度等级说明，字符包括：小写字母、大写字母、数字、特殊字符
* 1---密码包含其中之一
* 2---密码包含其中之二
* 3---密码包含其中之三
* 4---密码包含其中之四
*/
var fieldValue=getValue(fieldId);
if(fieldValue!=""&&checkStrong(fieldValue) < 2){
tipMsg='登录密码由8-20位数字+字母组成，字母区分大小写';
errShow(fieldId,tipMsg);
return false;
}
return true;
}1、 首先需要安装依赖 * 出现错误的话，可以试试 cnpm
npm install --save vue-clipboard22、 安装成功之后就可以开始使用了
2.1、template代码：
<span>订单编号：{{orderNumber}}</span>
<el-button class="ml10"
type="text"
size="medium"
v-clipboard:copy="orderNumber"
v-clipboard:success="onCopy"
v-clipboard:error="onError">
点击复制
</el-button>2.2、javascript代码：
// 引入依赖
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);
export default {
data(){
return {
// 复制的内容
orderNumber: 'xxxxxxxxxxxsx'
}
},
methods: {
// 复制成功
onCopy(e){
console.log(e);
},
// 复制失败
onError(e){
alert("失败");
},
}
}//全屏
function fullScreen(){
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
return;
}
//退出全屏
function exitScreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
}
//ie低版本的全屏，退出全屏都这个方法
function iefull(){
var el = document.documentElement;
var rfs = el.msRequestFullScreen;
if(typeof window.ActiveXObject != "undefined") {
//这的方法 模拟f11键，使浏览器全屏
var wscript = new ActiveXObject("WScript.Shell");
if(wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
//注：ie调用ActiveX控件，需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本’ 设置为启用