查找密钥地址
网页判断PC端还是移动端
块作用域
凡是左右花括弧包含的区域都是一个独立的作用域。该作用域里的变量只在该作用域内有效。
移动端适配
下载npm install postcss-pxtorem -D(我一般用5.1.1的版本)
在根目录下新建一个postcss.config.js的文件,
在src下面新建一个设置rem的文件
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 10;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
滑块验证简单实现
这是一个简单的前端实现(没有调用接口,只是一个效果),第 3 方的很好用,比如 GEETEST 的拼图验证,但要引入 >SDK 跟后台配合,还有接口交互
vue中的代码
<template>
<div>
<Vcode :show="isShow" @success="onSuccess" @close="onClose" />
<button @click="submit">开始验证</button>
</div>
</template>
<script>
import Vcode from "vue-puzzle-vcode";
export default {
data() {
return {
isShow: false,
};
},
components: {
Vcode,
},
methods: {
submit() {
this.isShow = true;
},
onSuccess(msg) {
this.isShow = false; // 通过验证后,需要手动关闭模态框
},
onClose() {
this.isShow = false;
},
},
};
</script>
<style></style>