新增数字动画组件、时间组件、常用函数方法
parent
e189cff64e
commit
752b59fcc4
|
|
@ -0,0 +1,46 @@
|
|||
let lastTime = 0
|
||||
const prefixes = 'webkit moz ms o'.split(' ') // 各浏览器前缀
|
||||
|
||||
let requestAnimationFrame
|
||||
let cancelAnimationFrame
|
||||
|
||||
const isServer = typeof window === 'undefined'
|
||||
if (isServer) {
|
||||
requestAnimationFrame = function() {
|
||||
return
|
||||
}
|
||||
cancelAnimationFrame = function() {
|
||||
return
|
||||
}
|
||||
} else {
|
||||
requestAnimationFrame = window.requestAnimationFrame
|
||||
cancelAnimationFrame = window.cancelAnimationFrame
|
||||
let prefix
|
||||
// 通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
|
||||
for (let i = 0; i < prefixes.length; i++) {
|
||||
if (requestAnimationFrame && cancelAnimationFrame) { break }
|
||||
prefix = prefixes[i]
|
||||
requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']
|
||||
cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || window[prefix + 'CancelRequestAnimationFrame']
|
||||
}
|
||||
|
||||
// 如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
|
||||
if (!requestAnimationFrame || !cancelAnimationFrame) {
|
||||
requestAnimationFrame = function(callback) {
|
||||
const currTime = new Date().getTime()
|
||||
// 为了使setTimteout的尽可能的接近每秒60帧的效果
|
||||
const timeToCall = Math.max(0, 16 - (currTime - lastTime))
|
||||
const id = window.setTimeout(() => {
|
||||
callback(currTime + timeToCall)
|
||||
}, timeToCall)
|
||||
lastTime = currTime + timeToCall
|
||||
return id
|
||||
}
|
||||
|
||||
cancelAnimationFrame = function(id) {
|
||||
window.clearTimeout(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { requestAnimationFrame, cancelAnimationFrame }
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<span>
|
||||
{{displayValue}}
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import { requestAnimationFrame, cancelAnimationFrame } from './requestAnimationFrame.js'
|
||||
export default {
|
||||
props: {
|
||||
startVal: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
endVal: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 2017
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 3000
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
decimals: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0,
|
||||
validator(value) {
|
||||
return value >= 0
|
||||
}
|
||||
},
|
||||
decimal: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '.'
|
||||
},
|
||||
separator: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ','
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
useEasing: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
easingFn: {
|
||||
type: Function,
|
||||
default(t, b, c, d) {
|
||||
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localStartVal: this.startVal,
|
||||
displayValue: this.formatNumber(this.startVal),
|
||||
printVal: null,
|
||||
paused: false,
|
||||
localDuration: this.duration,
|
||||
startTime: null,
|
||||
timestamp: null,
|
||||
remaining: null,
|
||||
rAF: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
countDown() {
|
||||
return this.startVal > this.endVal
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startVal() {
|
||||
if (this.autoplay) {
|
||||
this.start();
|
||||
}
|
||||
},
|
||||
endVal() {
|
||||
if (this.autoplay) {
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.autoplay) {
|
||||
this.start();
|
||||
}
|
||||
this.$emit('mountedCallback')
|
||||
},
|
||||
methods: {
|
||||
start() {
|
||||
this.localStartVal = this.startVal;
|
||||
this.startTime = null;
|
||||
this.localDuration = this.duration;
|
||||
this.paused = false;
|
||||
this.rAF = requestAnimationFrame(this.count);
|
||||
},
|
||||
pauseResume() {
|
||||
if (this.paused) {
|
||||
this.resume();
|
||||
this.paused = false;
|
||||
} else {
|
||||
this.pause();
|
||||
this.paused = true;
|
||||
}
|
||||
},
|
||||
pause() {
|
||||
cancelAnimationFrame(this.rAF);
|
||||
},
|
||||
resume() {
|
||||
this.startTime = null;
|
||||
this.localDuration = +this.remaining;
|
||||
this.localStartVal = +this.printVal;
|
||||
requestAnimationFrame(this.count);
|
||||
},
|
||||
reset() {
|
||||
this.startTime = null;
|
||||
cancelAnimationFrame(this.rAF);
|
||||
this.displayValue = this.formatNumber(this.startVal);
|
||||
},
|
||||
count(timestamp) {
|
||||
if (!this.startTime) this.startTime = timestamp;
|
||||
this.timestamp = timestamp;
|
||||
const progress = timestamp - this.startTime;
|
||||
this.remaining = this.localDuration - progress;
|
||||
|
||||
if (this.useEasing) {
|
||||
if (this.countDown) {
|
||||
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
|
||||
} else {
|
||||
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration);
|
||||
}
|
||||
} else {
|
||||
if (this.countDown) {
|
||||
this.printVal = this.localStartVal - ((this.localStartVal - this.endVal) * (progress / this.localDuration));
|
||||
} else {
|
||||
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration);
|
||||
}
|
||||
}
|
||||
if (this.countDown) {
|
||||
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal;
|
||||
} else {
|
||||
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal;
|
||||
}
|
||||
|
||||
this.displayValue = this.formatNumber(this.printVal)
|
||||
if (progress < this.localDuration) {
|
||||
this.rAF = requestAnimationFrame(this.count);
|
||||
} else {
|
||||
this.$emit('callback');
|
||||
}
|
||||
},
|
||||
isNumber(val) {
|
||||
return !isNaN(parseFloat(val))
|
||||
},
|
||||
formatNumber(num) {
|
||||
num = num.toFixed(this.decimals);
|
||||
num += '';
|
||||
const x = num.split('.');
|
||||
let x1 = x[0];
|
||||
const x2 = x.length > 1 ? this.decimal + x[1] : '';
|
||||
const rgx = /(\d+)(\d{3})/;
|
||||
if (this.separator && !this.isNumber(this.separator)) {
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + this.separator + '$2');
|
||||
}
|
||||
}
|
||||
return this.prefix + x1 + x2 + this.suffix;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
cancelAnimationFrame(this.rAF)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<section :class="{'preview': !all, 'all': all}">
|
||||
<code class="language-html">
|
||||
<slot name="body"></slot>
|
||||
</code>
|
||||
<div class="show" @click="() => all = !all">{{ msg }}</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
all: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
msg () {
|
||||
return !this.all ? 'unfold' : 'fold'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
section code.language-html {
|
||||
padding: 10px 20px;
|
||||
margin: 10px 0px;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
|
||||
border-radius: 5px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.all{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.show {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
const Exif = {};
|
||||
|
||||
Exif.getData = (img) => new Promise((reslove, reject) => {
|
||||
let obj = {};
|
||||
getImageData(img).then(data => {
|
||||
obj.arrayBuffer = data;
|
||||
obj.orientation = getOrientation(data);
|
||||
reslove(obj)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
|
||||
// 这里的获取exif要将图片转ArrayBuffer对象，这里假设获取了图片的baes64
|
||||
// 步骤一
|
||||
// base64转ArrayBuffer对象
|
||||
function getImageData(img) {
|
||||
let data = null;
|
||||
return new Promise((reslove, reject) => {
|
||||
if (img.src) {
|
||||
if (/^data\:/i.test(img.src)) { // Data URI
|
||||
data = base64ToArrayBuffer(img.src);
|
||||
reslove(data)
|
||||
} else if (/^blob\:/i.test(img.src)) { // Object URL
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onload = function (e) {
|
||||
data = e.target.result;
|
||||
reslove(data)
|
||||
};
|
||||
objectURLToBlob(img.src, function (blob) {
|
||||
fileReader.readAsArrayBuffer(blob);
|
||||
});
|
||||
} else {
|
||||
var http = new XMLHttpRequest();
|
||||
http.onload = function () {
|
||||
if (this.status == 200 || this.status === 0) {
|
||||
data = http.response
|
||||
reslove(data)
|
||||
} else {
|
||||
throw "Could not load image";
|
||||
}
|
||||
http = null;
|
||||
};
|
||||
http.open("GET", img.src, true);
|
||||
http.responseType = "arraybuffer";
|
||||
http.send(null);
|
||||
}
|
||||
} else {
|
||||
reject('img error')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function objectURLToBlob(url, callback) {
|
||||
var http = new XMLHttpRequest();
|
||||
http.open("GET", url, true);
|
||||
http.responseType = "blob";
|
||||
http.onload = function (e) {
|
||||
if (this.status == 200 || this.status === 0) {
|
||||
callback(this.response);
|
||||
}
|
||||
};
|
||||
http.send();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function base64ToArrayBuffer(base64) {
|
||||
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
|
||||
var binary = atob(base64);
|
||||
var len = binary.length;
|
||||
var buffer = new ArrayBuffer(len);
|
||||
var view = new Uint8Array(buffer);
|
||||
for (var i = 0; i < len; i++) {
|
||||
view[i] = binary.charCodeAt(i);
|
||||
}
|
||||
return buffer;
|
||||
}
|
||||
// 步骤二，Unicode码转字符串
|
||||
// ArrayBuffer对象 Unicode码转字符串
|
||||
function getStringFromCharCode(dataView, start, length) {
|
||||
var str = '';
|
||||
var i;
|
||||
for (i = start, length += start; i < length; i++) {
|
||||
str += String.fromCharCode(dataView.getUint8(i));
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
// 步骤三，获取jpg图片的exif的角度（在ios体现最明显）
|
||||
function getOrientation(arrayBuffer) {
|
||||
var dataView = new DataView(arrayBuffer);
|
||||
var length = dataView.byteLength;
|
||||
var orientation;
|
||||
var exifIDCode;
|
||||
var tiffOffset;
|
||||
var firstIFDOffset;
|
||||
var littleEndian;
|
||||
var endianness;
|
||||
var app1Start;
|
||||
var ifdStart;
|
||||
var offset;
|
||||
var i;
|
||||
// Only handle JPEG image (start by 0xFFD8)
|
||||
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
|
||||
offset = 2;
|
||||
while (offset < length) {
|
||||
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
|
||||
app1Start = offset;
|
||||
break;
|
||||
}
|
||||
offset++;
|
||||
}
|
||||
}
|
||||
if (app1Start) {
|
||||
exifIDCode = app1Start + 4;
|
||||
tiffOffset = app1Start + 10;
|
||||
if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
|
||||
endianness = dataView.getUint16(tiffOffset);
|
||||
littleEndian = endianness === 0x4949;
|
||||
|
||||
if (littleEndian || endianness === 0x4D4D /* bigEndian */) {
|
||||
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
|
||||
firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
|
||||
|
||||
if (firstIFDOffset >= 0x00000008) {
|
||||
ifdStart = tiffOffset + firstIFDOffset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (ifdStart) {
|
||||
length = dataView.getUint16(ifdStart, littleEndian);
|
||||
|
||||
for (i = 0; i < length; i++) {
|
||||
offset = ifdStart + i * 12 + 2;
|
||||
if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) {
|
||||
|
||||
// 8 is the offset of the current tag's value
|
||||
offset += 8;
|
||||
|
||||
// Get the original orientation value
|
||||
orientation = dataView.getUint16(offset, littleEndian);
|
||||
|
||||
// Override the orientation with its default value for Safari (#120)
|
||||
// if (IS_SAFARI_OR_UIWEBVIEW) {
|
||||
// dataView.setUint16(offset, 1, littleEndian);
|
||||
// }
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return orientation;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Exif
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import VueCropper from './vue-cropper'
|
||||
|
||||
const install = function(Vue) {
|
||||
Vue.component('VueCropper', VueCropper);
|
||||
}
|
||||
|
||||
/* istanbul ignore if */
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
export { VueCropper }
|
||||
|
||||
export default {
|
||||
version: '0.5.8',
|
||||
install,
|
||||
VueCropper,
|
||||
vueCropper: VueCropper
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,94 @@
|
|||
export const Base64 = {
|
||||
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
|
||||
// Base64编码
|
||||
encode: function(e) {
|
||||
let t = "";
|
||||
let n, r, i, s, o, u, a;
|
||||
let f = 0;
|
||||
e = Base64._utf8_encode(e);
|
||||
while (f < e.length) {
|
||||
n = e.charCodeAt(f++);
|
||||
r = e.charCodeAt(f++);
|
||||
i = e.charCodeAt(f++);
|
||||
s = n >> 2;
|
||||
o = (n & 3) << 4 | r >> 4;
|
||||
u = (r & 15) << 2 | i >> 6;
|
||||
a = i & 63;
|
||||
if (isNaN(r)) {
|
||||
u = a = 64
|
||||
} else if (isNaN(i)) {
|
||||
a = 64
|
||||
}
|
||||
t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
|
||||
}
|
||||
return t
|
||||
},
|
||||
// Base64解码
|
||||
decode: function(e) {
|
||||
let t = "";
|
||||
let n, r, i;
|
||||
let s, o, u, a;
|
||||
let f = 0;
|
||||
e=e.replace(/[^A-Za-z0-9+/=]/g,"");
|
||||
while (f < e.length) {
|
||||
s = this._keyStr.indexOf(e.charAt(f++));
|
||||
o = this._keyStr.indexOf(e.charAt(f++));
|
||||
u = this._keyStr.indexOf(e.charAt(f++));
|
||||
a = this._keyStr.indexOf(e.charAt(f++));
|
||||
n = s << 2 | o >> 4;
|
||||
r = (o & 15) << 4 | u >> 2;
|
||||
i = (u & 3) << 6 | a;
|
||||
t = t + String.fromCharCode(n);
|
||||
if (u != 64) {
|
||||
t = t + String.fromCharCode(r)
|
||||
}
|
||||
if (a != 64) {
|
||||
t = t + String.fromCharCode(i)
|
||||
}
|
||||
}
|
||||
t = Base64._utf8_decode(t);
|
||||
return t
|
||||
},
|
||||
_utf8_encode: function(e) {
|
||||
e = e.replace(/rn/g, "n");
|
||||
let t = "";
|
||||
for (let n = 0; n < e.length; n++) {
|
||||
let r = e.charCodeAt(n);
|
||||
if (r < 128) {
|
||||
t += String.fromCharCode(r)
|
||||
} else if (r > 127 && r < 2048) {
|
||||
t += String.fromCharCode(r >> 6 | 192);
|
||||
t += String.fromCharCode(r & 63 | 128)
|
||||
} else {
|
||||
t += String.fromCharCode(r >> 12 | 224);
|
||||
t += String.fromCharCode(r >> 6 & 63 | 128);
|
||||
t += String.fromCharCode(r & 63 | 128)
|
||||
}
|
||||
}
|
||||
return t
|
||||
},
|
||||
_utf8_decode: function(e) {
|
||||
let t = "";
|
||||
let n = 0;
|
||||
let r = c1 = c2 = 0;
|
||||
while (n < e.length) {
|
||||
r = e.charCodeAt(n);
|
||||
if (r < 128) {
|
||||
t += String.fromCharCode(r);
|
||||
n++
|
||||
} else if (r > 191 && r < 224) {
|
||||
c2 = e.charCodeAt(n + 1);
|
||||
t += String.fromCharCode((r & 31) << 6 | c2 & 63);
|
||||
n += 2
|
||||
} else {
|
||||
c2 = e.charCodeAt(n + 1);
|
||||
c3 = e.charCodeAt(n + 2);
|
||||
t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
|
||||
n += 3
|
||||
}
|
||||
}
|
||||
return t
|
||||
}
|
||||
};
|
||||
|
||||
export default Base64;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
const CookieUtil = (function () {
|
||||
return {
|
||||
set (name, value, attributes) {
|
||||
let expires, path;
|
||||
if (attributes) {
|
||||
expires = attributes.expires || 0;
|
||||
path = attributes.path || '/';
|
||||
}
|
||||
let date = Date.now() + expires * 24 * 60 * 60 * 1000; // cookie过期时间
|
||||
date = new Date(date).toUTCString();
|
||||
document.cookie = name + "=" + encodeURIComponent(value) + ((!expires)?"":( "; expires=" + date)) + ";path=" + path + ";";
|
||||
}, // 设置cookie
|
||||
setCookies (obj){
|
||||
for(let i = 0;i < obj.length;i++){
|
||||
this.set(obj[i][0],obj[i][1],obj[i][2]);
|
||||
}
|
||||
}, // 批量设置cookie
|
||||
get (name) {
|
||||
if (document.cookie.length > 0) {
|
||||
let start = document.cookie.indexOf(name + '=');
|
||||
if (start !== -1) {
|
||||
start = start + name.length + 1;
|
||||
let end = document.cookie.indexOf(';', start);
|
||||
if (end === -1) {
|
||||
end = document.cookie.length;
|
||||
}
|
||||
return decodeURIComponent(document.cookie.substring(start, end))/* 获取解码后的cookie值 */
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else return null;
|
||||
}, // 获取cookie
|
||||
remove (name) {
|
||||
this.set(name, '', -1);
|
||||
}, // 清除特定cookie
|
||||
clearCookies (obj) {
|
||||
for (let i = obj.length - 1; i >= 0; i--) {
|
||||
this.remove(obj[i]);
|
||||
}
|
||||
this.set(name, '', -1);
|
||||
}, // 批量清除cookie
|
||||
clearAllCookie: function () {
|
||||
let keys = document.cookie.match(/[^ =;]+(?=\=)/g);
|
||||
if (keys) {
|
||||
for (let i = keys.length; i--;) {
|
||||
document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString();
|
||||
}
|
||||
}
|
||||
},// 清除所有cookie
|
||||
setCacheData (name, val, cacheDay) {
|
||||
// 判断是否支持或开启localStorage
|
||||
// 无痕模式下和ie安全模式下localStorage会被禁用
|
||||
if (localStorage) {
|
||||
localStorage.setItem(name, val);
|
||||
} else {
|
||||
this.set(name, val, cacheDay || 1000);
|
||||
}
|
||||
}, // 设置缓存
|
||||
getCacheData (name) {
|
||||
if (localStorage) {
|
||||
return localStorage.getItem(name);
|
||||
} else {
|
||||
return this.get(name);
|
||||
}
|
||||
}, // 获取缓存
|
||||
removeCacheData (name) {
|
||||
if (localStorage) {
|
||||
localStorage.removeItem(name);
|
||||
} else {
|
||||
this.remove(name);
|
||||
}
|
||||
} // 清除缓存
|
||||
}
|
||||
});
|
||||
export const Cookie = new CookieUtil();
|
||||
export default Cookie;
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
// 获取URL参数
|
||||
const getUrlParam = function (name) {
|
||||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||||
let r = window.location.search.substr(1).match(reg); //匹配目标参数
|
||||
if (r != null)
|
||||
return decodeURIComponent(r[2]);
|
||||
return null; //返回参数值
|
||||
};
|
||||
|
||||
// 判断ie浏览器版本
|
||||
const IEVersion = function () {
|
||||
let userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
|
||||
let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
|
||||
let isEdge = userAgent.indexOf("Edge") > -1 && !isIE; // 判断是否IE的Edge浏览器
|
||||
let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
|
||||
if(isIE) {
|
||||
let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
||||
reIE.test(userAgent);
|
||||
let fIEVersion = parseFloat(RegExp["$1"]);
|
||||
if(fIEVersion == 7) {
|
||||
return 7;
|
||||
} else if(fIEVersion == 8) {
|
||||
return 8;
|
||||
} else if(fIEVersion == 9) {
|
||||
return 9;
|
||||
} else if(fIEVersion == 10) {
|
||||
return 10;
|
||||
} else {
|
||||
return 6;//IE版本<=7
|
||||
}
|
||||
} else if(isEdge) {
|
||||
return 'edge';//edge
|
||||
} else if(isIE11) {
|
||||
return 11; //IE11
|
||||
} else {
|
||||
return false;//不是ie浏览器
|
||||
}
|
||||
};
|
||||
|
||||
// 浏览器滚动到底部时执行fn函数
|
||||
const ScrollBottom = function (fn) {
|
||||
let $elem = document.documentElement;
|
||||
let $body = document.body;
|
||||
let scroll = $elem.scrollTop || $body.scrollTop; // 滚动条滚动的距离
|
||||
let clientH = $elem.clientHeight || $body.clientHeight; // 可视窗口总高度
|
||||
let scrollH = $elem.scrollHeight || $body.scrollHeight; // 窗口总高度
|
||||
let stayBottom = fn() || function () {};
|
||||
if (scroll >= scrollH - clientH) {
|
||||
stayBottom();
|
||||
}
|
||||
};
|
||||
|
||||
const explorerType = function () {
|
||||
const u = navigator.userAgent;
|
||||
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
|
||||
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||||
const isWeixin = u.indexOf('MicroMessenger') > -1;
|
||||
const isQQ = u.match(/\sQQ/i) == " QQ";
|
||||
|
||||
return {
|
||||
isAndroid, isiOS, isWeixin, isQQ
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToTop = function () {
|
||||
let height = document.documentElement.scrollTop;
|
||||
clearInterval(window.timer);
|
||||
window.timer = null;
|
||||
let target = 0;
|
||||
window.timer = setInterval(function () {
|
||||
target = document.documentElement.scrollTop;
|
||||
target -= Math.ceil(target/10); // 做减速运动
|
||||
window.scrollTo(0, target);
|
||||
if (target == 0) {
|
||||
clearInterval(timer);
|
||||
window.timer = null;
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
// 判断设备是否有网
|
||||
const validInternet = function() {
|
||||
return window.navigator.onLine;
|
||||
};
|
||||
|
||||
export const Explorer = {
|
||||
getUrlParam, IEVersion, ScrollBottom, explorerType, scrollToTop, validInternet
|
||||
};
|
||||
|
||||
export default Explorer;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/** 使用方法
|
||||
*
|
||||
* 在页面引入该js
|
||||
* import ev from @/jsFile/check-tool/check-tool.js;
|
||||
*
|
||||
* 使用：
|
||||
* console.log(ev.isPhone('1736692108'));//false
|
||||
*/
|
||||
|
||||
// 大陆手机号判断
|
||||
const isPhone = (val)=>{
|
||||
return /^1[3456789]\d{9}$/.test(val);
|
||||
};
|
||||
|
||||
/*
|
||||
* 全中文校验
|
||||
* */
|
||||
function ChineseWordValid (val) {
|
||||
return /^[\u4E00-\u9FA5]+$/.test(val);
|
||||
}
|
||||
|
||||
// 英文和数字校验
|
||||
function wordNumValid(val) {
|
||||
return /^[0-9A-Za-z]+$/.test(val);
|
||||
}
|
||||
|
||||
// emoji表情校验
|
||||
function emojiValid(val) {
|
||||
const regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
|
||||
return (regStr.test(val))
|
||||
}
|
||||
|
||||
// 邮箱校验
|
||||
function emailValid (val) {
|
||||
return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(val);
|
||||
}
|
||||
|
||||
/*
|
||||
* 大陆身份证校验
|
||||
* */
|
||||
const IdentityCodeValid = function (code) {
|
||||
let city = {
|
||||
11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",
|
||||
33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",
|
||||
50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",
|
||||
71:"台湾",81:"香港",82:"澳门",91:"国外 "
|
||||
};
|
||||
let tip = '';
|
||||
let pass = true;
|
||||
|
||||
if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
|
||||
tip = "身份证号格式错误";
|
||||
pass = false
|
||||
} else if(!city[code.substr(0,2)]){
|
||||
tip = "地址编码错误";
|
||||
pass = false
|
||||
} else{
|
||||
// 18位身份证需要验证最后一位校验位
|
||||
if(code.length == 18){
|
||||
code = code.split('')
|
||||
// ∑(ai×Wi)(mod 11)
|
||||
// 加权因子
|
||||
let factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ]
|
||||
// 校验位
|
||||
let parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ]
|
||||
let sum = 0
|
||||
let ai = 0
|
||||
let wi = 0
|
||||
for (let i = 0; i < 17; i++)
|
||||
{
|
||||
ai = code[i]
|
||||
wi = factor[i]
|
||||
sum += ai * wi
|
||||
}
|
||||
let last = parity[sum % 11];
|
||||
if(parity[sum % 11] != code[17]){
|
||||
tip = "校验位错误"
|
||||
pass = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return pass;
|
||||
};
|
||||
|
||||
export default {
|
||||
isPhone, ChineseWordValid, wordNumValid, emojiValid, emailValid, IdentityCodeValid
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -299,7 +299,7 @@ const yayaMap = {
|
|||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 地址===>经纬度
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,214 @@
|
|||
/** Md5加密
|
||||
* 使用方法在页面引入
|
||||
* import {Md5} from '@/jsFile/md5.js';
|
||||
*
|
||||
* 使用
|
||||
* console.log(Md5("999999"));
|
||||
*/
|
||||
|
||||
|
||||
export const Md5 = function(string) {
|
||||
function md5_RotateLeft(lValue, iShiftBits) {
|
||||
return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
|
||||
}
|
||||
function md5_AddUnsigned(lX, lY) {
|
||||
var lX4, lY4, lX8, lY8, lResult;
|
||||
lX8 = (lX & 0x80000000);
|
||||
lY8 = (lY & 0x80000000);
|
||||
lX4 = (lX & 0x40000000);
|
||||
lY4 = (lY & 0x40000000);
|
||||
lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
|
||||
if (lX4 & lY4) {
|
||||
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
|
||||
}
|
||||
if (lX4 | lY4) {
|
||||
if (lResult & 0x40000000) {
|
||||
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
|
||||
} else {
|
||||
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
|
||||
}
|
||||
} else {
|
||||
return (lResult ^ lX8 ^ lY8);
|
||||
}
|
||||
}
|
||||
function md5_F(x, y, z) {
|
||||
return (x & y) | ((~x) & z);
|
||||
}
|
||||
function md5_G(x, y, z) {
|
||||
return (x & z) | (y & (~z));
|
||||
}
|
||||
function md5_H(x, y, z) {
|
||||
return (x ^ y ^ z);
|
||||
}
|
||||
function md5_I(x, y, z) {
|
||||
return (y ^ (x | (~z)));
|
||||
}
|
||||
function md5_FF(a, b, c, d, x, s, ac) {
|
||||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_F(b, c, d), x), ac));
|
||||
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
|
||||
};
|
||||
function md5_GG(a, b, c, d, x, s, ac) {
|
||||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_G(b, c, d), x), ac));
|
||||
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
|
||||
};
|
||||
function md5_HH(a, b, c, d, x, s, ac) {
|
||||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_H(b, c, d), x), ac));
|
||||
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
|
||||
};
|
||||
function md5_II(a, b, c, d, x, s, ac) {
|
||||
a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_I(b, c, d), x), ac));
|
||||
return md5_AddUnsigned(md5_RotateLeft(a, s), b);
|
||||
};
|
||||
function md5_ConvertToWordArray(string) {
|
||||
var lWordCount;
|
||||
var lMessageLength = string.length;
|
||||
var lNumberOfWords_temp1 = lMessageLength + 8;
|
||||
var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
|
||||
var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
|
||||
var lWordArray = Array(lNumberOfWords - 1);
|
||||
var lBytePosition = 0;
|
||||
var lByteCount = 0;
|
||||
while (lByteCount < lMessageLength) {
|
||||
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
|
||||
lBytePosition = (lByteCount % 4) * 8;
|
||||
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
|
||||
lByteCount++;
|
||||
}
|
||||
lWordCount = (lByteCount - (lByteCount % 4)) / 4;
|
||||
lBytePosition = (lByteCount % 4) * 8;
|
||||
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
|
||||
lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
|
||||
lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
|
||||
return lWordArray;
|
||||
};
|
||||
function md5_WordToHex(lValue) {
|
||||
var WordToHexValue = "",
|
||||
WordToHexValue_temp = "",
|
||||
lByte, lCount;
|
||||
for (lCount = 0; lCount <= 3; lCount++) {
|
||||
lByte = (lValue >>> (lCount * 8)) & 255;
|
||||
WordToHexValue_temp = "0" + lByte.toString(16);
|
||||
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
|
||||
}
|
||||
return WordToHexValue;
|
||||
};
|
||||
function md5_Utf8Encode(string) {
|
||||
string = string.replace(/\r\n/g, "\n");
|
||||
var utftext = "";
|
||||
for (var n = 0; n < string.length; n++) {
|
||||
var c = string.charCodeAt(n);
|
||||
if (c < 128) {
|
||||
utftext += String.fromCharCode(c);
|
||||
} else if ((c > 127) && (c < 2048)) {
|
||||
utftext += String.fromCharCode((c >> 6) | 192);
|
||||
utftext += String.fromCharCode((c & 63) | 128);
|
||||
} else {
|
||||
utftext += String.fromCharCode((c >> 12) | 224);
|
||||
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
|
||||
utftext += String.fromCharCode((c & 63) | 128);
|
||||
}
|
||||
}
|
||||
return utftext;
|
||||
};
|
||||
var x = Array();
|
||||
var k, AA, BB, CC, DD, a, b, c, d;
|
||||
var S11 = 7,
|
||||
S12 = 12,
|
||||
S13 = 17,
|
||||
S14 = 22;
|
||||
var S21 = 5,
|
||||
S22 = 9,
|
||||
S23 = 14,
|
||||
S24 = 20;
|
||||
var S31 = 4,
|
||||
S32 = 11,
|
||||
S33 = 16,
|
||||
S34 = 23;
|
||||
var S41 = 6,
|
||||
S42 = 10,
|
||||
S43 = 15,
|
||||
S44 = 21;
|
||||
string = md5_Utf8Encode(string);
|
||||
x = md5_ConvertToWordArray(string);
|
||||
a = 0x67452301;
|
||||
b = 0xEFCDAB89;
|
||||
c = 0x98BADCFE;
|
||||
d = 0x10325476;
|
||||
for (k = 0; k < x.length; k += 16) {
|
||||
AA = a;
|
||||
BB = b;
|
||||
CC = c;
|
||||
DD = d;
|
||||
a = md5_FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
|
||||
d = md5_FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
|
||||
c = md5_FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
|
||||
b = md5_FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
|
||||
a = md5_FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
|
||||
d = md5_FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
|
||||
c = md5_FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
|
||||
b = md5_FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
|
||||
a = md5_FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
|
||||
d = md5_FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
|
||||
c = md5_FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
|
||||
b = md5_FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
|
||||
a = md5_FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
|
||||
d = md5_FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
|
||||
c = md5_FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
|
||||
b = md5_FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
|
||||
a = md5_GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
|
||||
d = md5_GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
|
||||
c = md5_GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
|
||||
b = md5_GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
|
||||
a = md5_GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
|
||||
d = md5_GG(d, a, b, c, x[k + 10], S22, 0x2441453);
|
||||
c = md5_GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
|
||||
b = md5_GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
|
||||
a = md5_GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
|
||||
d = md5_GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
|
||||
c = md5_GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
|
||||
b = md5_GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
|
||||
a = md5_GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
|
||||
d = md5_GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);
|
||||
c = md5_GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);
|
||||
b = md5_GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);
|
||||
a = md5_HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);
|
||||
d = md5_HH(d, a, b, c, x[k + 8], S32, 0x8771F681);
|
||||
c = md5_HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);
|
||||
b = md5_HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);
|
||||
a = md5_HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);
|
||||
d = md5_HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);
|
||||
c = md5_HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);
|
||||
b = md5_HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);
|
||||
a = md5_HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);
|
||||
d = md5_HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);
|
||||
c = md5_HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);
|
||||
b = md5_HH(b, c, d, a, x[k + 6], S34, 0x4881D05);
|
||||
a = md5_HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);
|
||||
d = md5_HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);
|
||||
c = md5_HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);
|
||||
b = md5_HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);
|
||||
a = md5_II(a, b, c, d, x[k + 0], S41, 0xF4292244);
|
||||
d = md5_II(d, a, b, c, x[k + 7], S42, 0x432AFF97);
|
||||
c = md5_II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);
|
||||
b = md5_II(b, c, d, a, x[k + 5], S44, 0xFC93A039);
|
||||
a = md5_II(a, b, c, d, x[k + 12], S41, 0x655B59C3);
|
||||
d = md5_II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);
|
||||
c = md5_II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);
|
||||
b = md5_II(b, c, d, a, x[k + 1], S44, 0x85845DD1);
|
||||
a = md5_II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);
|
||||
d = md5_II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);
|
||||
c = md5_II(c, d, a, b, x[k + 6], S43, 0xA3014314);
|
||||
b = md5_II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);
|
||||
a = md5_II(a, b, c, d, x[k + 4], S41, 0xF7537E82);
|
||||
d = md5_II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);
|
||||
c = md5_II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);
|
||||
b = md5_II(b, c, d, a, x[k + 9], S44, 0xEB86D391);
|
||||
a = md5_AddUnsigned(a, AA);
|
||||
b = md5_AddUnsigned(b, BB);
|
||||
c = md5_AddUnsigned(c, CC);
|
||||
d = md5_AddUnsigned(d, DD);
|
||||
}
|
||||
return (md5_WordToHex(a) + md5_WordToHex(b) + md5_WordToHex(c) + md5_WordToHex(d)).toLowerCase();
|
||||
}
|
||||
|
||||
export default Md5;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,489 @@
|
|||
/** 常用方法
|
||||
* 使用方法在页面引入
|
||||
* import ev from '@/jsFile/tools/index.js';
|
||||
*
|
||||
* 使用
|
||||
* console.log(ev.splitNum(200));
|
||||
*/
|
||||
|
||||
// 百度SEO
|
||||
const seo = function() {
|
||||
let bp = document.createElement('script');
|
||||
let curProtocol = window.location.protocol.split(':')[0];
|
||||
if (curProtocol === 'https') {
|
||||
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
|
||||
}
|
||||
else {
|
||||
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
|
||||
}
|
||||
let s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(bp, s);
|
||||
};
|
||||
|
||||
// 函数节流
|
||||
const throttle = function(method, context) {
|
||||
clearTimeout(method.tId);
|
||||
method.tId = setTimeout(function () {
|
||||
method.call(context);
|
||||
}.bind(this), context?context:1000);
|
||||
};
|
||||
|
||||
// 生成随机字符串
|
||||
function getRandomStr(){
|
||||
return Math.random().toString(36).substring(2)
|
||||
}
|
||||
|
||||
// base64位码转blob对象
|
||||
const dataURLtoBlob = (dataurl)=>{
|
||||
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
||||
while(n--){
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new Blob([u8arr], {type:mime});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 将base64/dataurl转成File
|
||||
* @param dataurl
|
||||
* @param filename
|
||||
* @returns {File}
|
||||
*/
|
||||
function dataURLtoFile(dataurl, filename) {
|
||||
let arr = dataurl.split(','),
|
||||
mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]),
|
||||
n = bstr.length,
|
||||
u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime });
|
||||
}
|
||||
|
||||
// 获取File 对象或 Blob 对象的临时路径
|
||||
function getObjectURL(file) {
|
||||
let url = null;
|
||||
if (window.createObjectURL) {
|
||||
// basic
|
||||
url = window.createObjectURL(file);
|
||||
} else if (window.URL) {
|
||||
// mozilla(firefox)
|
||||
url = window.URL.createObjectURL(file);
|
||||
} else if (window.webkitURL) {
|
||||
// webkit or chrome
|
||||
url = window.webkitURL.createObjectURL(file);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
// 获取n-m的随机整数
|
||||
const getRandomNum = (n, m)=> {
|
||||
return Math.ceil(Math.random()*(m-n), n);
|
||||
};
|
||||
|
||||
// 将数字转成3位分隔符
|
||||
const splitNum = function (num) {
|
||||
if (num === null || num === undefined) {
|
||||
return null;
|
||||
}
|
||||
if (typeof num === "number") {
|
||||
num = num.toString()
|
||||
}
|
||||
return num.replace(/\B(?=(?:\d{3})+\b)/g, ',')
|
||||
};
|
||||
|
||||
// 字符串/数字数组去重
|
||||
function unique(arr) {
|
||||
return Array.from(new Set(arr));
|
||||
}
|
||||
|
||||
// 生成uuid
|
||||
function getUuid() {
|
||||
let s = [];
|
||||
let hexDigits = "0123456789abcdef";
|
||||
for (let i = 0; i < 36; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
||||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
||||
s[8] = s[13] = s[18] = s[23] = "-";
|
||||
|
||||
return s.join("");
|
||||
}
|
||||
|
||||
// 过滤掉某个字符串中的中文字符
|
||||
function filterChineseWord(str) {
|
||||
return str.replace(/[\u4E00-\u9FA5]/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* nodejs获取本地ip
|
||||
* @param os node.js os模块
|
||||
* @returns {*}
|
||||
*/
|
||||
function getIPAddress(os) {
|
||||
if (!os) return '';
|
||||
let interfaces = os.networkInterfaces();
|
||||
for (let devName in interfaces) {
|
||||
let iface = interfaces[devName];
|
||||
for (let i = 0; i < iface.length; i++) {
|
||||
let alias = iface[i];
|
||||
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
|
||||
return alias.address;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取元素实际样式值
|
||||
* @param el dom元素
|
||||
* @param styleName 样式名
|
||||
*/
|
||||
function getStyle(el, styleName) {
|
||||
if (el.currentStyle) return el.currentStyle[styleName];
|
||||
if (getComputedStyle) return window.getComputedStyle(el, null)[styleName];
|
||||
return el.style[styleName];
|
||||
}
|
||||
|
||||
// 优雅降级requestAnimationFrame
|
||||
const requestAnimationF = (function () {
|
||||
return window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.oRequestAnimationFrame ||
|
||||
// if all else fails, use setTimeout
|
||||
function (callback) {
|
||||
return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
|
||||
};
|
||||
})();
|
||||
|
||||
// 优雅降级cancelAnimationFrame
|
||||
const cancelAnimationF = (function () {
|
||||
return window.cancelAnimationFrame ||
|
||||
window.webkitCancelAnimationFrame ||
|
||||
window.mozCancelAnimationFrame ||
|
||||
window.oCancelAnimationFrame ||
|
||||
function (id) {
|
||||
window.clearTimeout(id);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
/**
|
||||
* 获取元素实际高度
|
||||
* @param el dom元素
|
||||
* @returns {number} 元素高度
|
||||
*/
|
||||
function getHeight(el) {
|
||||
let height;
|
||||
// 已隐藏的元素
|
||||
if (getStyle(el, "display") === "none") {
|
||||
el.style.position = "absolute";
|
||||
el.style.visibility = "hidden";
|
||||
el.style.display = "block";
|
||||
height = getStyle(el, "height");
|
||||
el.style.position = "";
|
||||
el.style.visibility = "";
|
||||
el.style.display = "";
|
||||
return parseFloat(height);
|
||||
}
|
||||
return parseFloat(getStyle(el, "height"));
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取已隐藏元素的css值
|
||||
* @param el
|
||||
* @param styleName
|
||||
* @returns {*}
|
||||
*/
|
||||
function getCurrentStyle(el, styleName) {
|
||||
let styleValue;
|
||||
// 已隐藏的元素
|
||||
if (getStyle(el, "display") === "none") {
|
||||
el.style.position = "absolute";
|
||||
el.style.visibility = "hidden";
|
||||
el.style.display = "block";
|
||||
styleValue = getStyle(el, styleName);
|
||||
el.style.position = "";
|
||||
el.style.visibility = "";
|
||||
el.style.display = "";
|
||||
return (styleValue);
|
||||
}
|
||||
return (getStyle(el, styleName));
|
||||
}
|
||||
|
||||
/**
|
||||
* 优化实现sildeToggle效果
|
||||
* @param el dom元素
|
||||
* @param time 动画时长，单位ms，默认值300
|
||||
* @param fn 回调函数
|
||||
*/
|
||||
function slideToggle(el, time, fn) {
|
||||
if (!el) return false;
|
||||
time = time || 300;
|
||||
if (el.dataUid) return false; // 如该dom元素已有动画未处理完，则必须等到动画结束才执行
|
||||
|
||||
cancelAnimationF(el.dataUid);
|
||||
|
||||
// 已隐藏的元素，下拉
|
||||
if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
|
||||
down(el, time, fn);
|
||||
} else {
|
||||
up(el, time, fn)
|
||||
}
|
||||
}
|
||||
|
||||
function down(el, time, fn) {
|
||||
let aniSplitTime = Date.now();
|
||||
|
||||
let height = 0, paddingTop = 0, paddingBottom = 0;
|
||||
let totalHeight = parseFloat(getCurrentStyle(el, "height"));
|
||||
let totalPaddingTop = parseFloat(getCurrentStyle(el, "paddingTop"));
|
||||
let totalPaddingBottom = parseFloat(getCurrentStyle(el, "paddingBottom"));
|
||||
|
||||
let basePaddingBottom = totalPaddingBottom/time;
|
||||
let basePaddingTop = totalPaddingBottom/time;
|
||||
let baseHeight = totalHeight/time;
|
||||
|
||||
el.style.overflow = "hidden";
|
||||
el.style.display = "block";
|
||||
|
||||
el.dataUid = requestAnimationF(function go(){
|
||||
let aniTime = Date.now();
|
||||
let splitTime = aniTime - aniSplitTime;
|
||||
aniSplitTime = aniTime;
|
||||
let splitPaddingBottom = basePaddingBottom*splitTime;
|
||||
let splitPaddingTop = basePaddingTop*splitTime;
|
||||
let splitHeight = baseHeight*splitTime;
|
||||
|
||||
if (height >= totalHeight){
|
||||
el.style.overflow = "";
|
||||
el.style.height = "";
|
||||
el.style.paddingTop = "";
|
||||
el.style.paddingBottom = "";
|
||||
|
||||
if (fn && typeof fn === "function") fn();
|
||||
cancelAnimationF(el.dataUid);
|
||||
el.dataUid = null;
|
||||
delete el.dataUid;
|
||||
} else {
|
||||
el.style.height = height + "px";
|
||||
el.style.paddingTop = paddingTop + "px";
|
||||
el.style.paddingBottom = paddingBottom + "px";
|
||||
el.dataUid = requestAnimationF(go);
|
||||
}
|
||||
height = height + splitHeight;
|
||||
paddingTop = paddingTop + splitPaddingTop;
|
||||
paddingBottom = paddingBottom + splitPaddingBottom;
|
||||
});
|
||||
}
|
||||
|
||||
function up(el, time, fn) {
|
||||
// 上拉
|
||||
let aniSplitTime = Date.now();
|
||||
let height = getHeight(el);
|
||||
let paddingTop = parseFloat(getStyle(el, "paddingTop"));
|
||||
let paddingBottom = parseFloat(getStyle(el, "paddingBottom"));
|
||||
el.style.overflow = "hidden";
|
||||
|
||||
let basePaddingBottom = paddingBottom/time;
|
||||
let basePaddingTop = paddingTop/time;
|
||||
let baseHeight = height/time;
|
||||
|
||||
el.dataUid = requestAnimationF(function go(){
|
||||
let aniTime = Date.now();
|
||||
let splitTime = aniTime - aniSplitTime;
|
||||
aniSplitTime = aniTime;
|
||||
let splitPaddingBottom = basePaddingBottom*splitTime;
|
||||
let splitPaddingTop = basePaddingTop*splitTime;
|
||||
let splitHeight = baseHeight*splitTime;
|
||||
|
||||
if (height <= 0) {
|
||||
el.style.height = 0;
|
||||
el.style.paddingTop = 0;
|
||||
el.style.paddingBottom = 0;
|
||||
|
||||
setTimeout(()=>{
|
||||
el.style.height = "";
|
||||
el.style.overflow = "";
|
||||
el.style.paddingTop = "";
|
||||
el.style.paddingBottom = "";
|
||||
el.style.display = "none";
|
||||
},0);
|
||||
|
||||
if (fn && typeof fn === "function") fn();
|
||||
cancelAnimationF(el.dataUid);
|
||||
el.dataUid = null;
|
||||
delete el.dataUid;
|
||||
} else {
|
||||
el.style.height = height + "px";
|
||||
el.style.paddingTop = paddingTop + "px";
|
||||
el.style.paddingBottom = paddingBottom + "px";
|
||||
el.dataUid = requestAnimationF(go);
|
||||
}
|
||||
|
||||
height = height - splitHeight;
|
||||
paddingBottom = paddingBottom - splitPaddingBottom;
|
||||
paddingTop = paddingTop - splitPaddingTop;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 优化实现jquery slideDown效果
|
||||
* @param el dom元素
|
||||
* @param time 动画时长，单位ms，默认值300
|
||||
* @param fn 回调函数
|
||||
*/
|
||||
function slideDown(el, time, fn) {
|
||||
if (!el) return false;
|
||||
time = time || 300;
|
||||
if (el.dataUid) return false; // 如该dom元素已有动画未处理完，则必须等到动画结束才执行
|
||||
|
||||
cancelAnimationF(el.dataUid);
|
||||
if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
|
||||
down(el, time, fn);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 优化实现jquery slideUp效果
|
||||
* @param el dom元素
|
||||
* @param time 动画时长，单位ms，默认值300
|
||||
* @param fn 回调函数
|
||||
*/
|
||||
function slideUp(el, time, fn) {
|
||||
if (!el) return false;
|
||||
time = time || 300;
|
||||
if (el.dataUid) return false; // 如该dom元素已有动画未处理完，则必须等到动画结束才执行
|
||||
|
||||
cancelAnimationF(el.dataUid);
|
||||
|
||||
if (getStyle(el, "display") === "none" || getHeight(el) === 0) {
|
||||
|
||||
} else {
|
||||
up(el, time, fn);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当天的23:59:59的Date对象（当天最后1ms的Date对象）
|
||||
* @param date （默认值new Date()）
|
||||
* @returns {Date}
|
||||
*/
|
||||
function getDayLastMsDate(date = new Date()) {
|
||||
if (!date instanceof Date) {
|
||||
throw new Error("function params type error");
|
||||
}
|
||||
return new Date(new Date(date.toLocaleDateString()).getTime()+24*60*60*1000-1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当天的00:00的Date对象（当天最开始1ms的Date对象）
|
||||
* @param date （默认值new Date()）
|
||||
* @returns {Date}
|
||||
*/
|
||||
function getDayFirstMsDate(date = new Date()) {
|
||||
if (!date instanceof Date) {
|
||||
throw new Error("function params type error");
|
||||
}
|
||||
return new Date(date.toLocaleDateString())
|
||||
}
|
||||
|
||||
/*
|
||||
压缩图片
|
||||
dataUrl： dataUrl，
|
||||
obj：{ height, width } 压缩之后的图片宽高
|
||||
type：压缩完之后的图片类型
|
||||
*/
|
||||
function photoCompress(dataUrl, obj, type = "image/png"){
|
||||
return new Promise((resolve, reject) => {
|
||||
let img = new Image();
|
||||
img.src = dataUrl;
|
||||
img.onload = function(){
|
||||
let that = this;
|
||||
// 默认按比例压缩
|
||||
let w = that.width,
|
||||
h = that.height,
|
||||
scale = w / h;
|
||||
if (h >= obj.height) {
|
||||
h = obj.height;
|
||||
}
|
||||
w = (h * scale);
|
||||
|
||||
let quality = 1; // 默认图片质量为1
|
||||
//生成canvas
|
||||
let canvas = document.createElement('canvas');
|
||||
let ctx = canvas.getContext('2d');
|
||||
// 创建属性节点
|
||||
let anw = document.createAttribute("width");
|
||||
anw.nodeValue = w;
|
||||
let anh = document.createAttribute("height");
|
||||
anh.nodeValue = h;
|
||||
canvas.setAttributeNode(anw);
|
||||
canvas.setAttributeNode(anh);
|
||||
ctx.drawImage(that, 0, 0, w, h);
|
||||
// 图像质量
|
||||
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
|
||||
quality = obj.quality;
|
||||
}
|
||||
// quality值越小，所绘制出的图像越模糊
|
||||
let base64 = canvas.toDataURL(type, quality);
|
||||
// 回调函数返回base64的值
|
||||
resolve(base64);
|
||||
};
|
||||
img.onerror = ()=>{
|
||||
reject();
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// 获取文件格式(后缀)
|
||||
function getFileType(fileName = '') {
|
||||
let index = fileName.lastIndexOf(".");
|
||||
if (index >= 0) return fileName.substring(index + 1);
|
||||
return "";
|
||||
}
|
||||
|
||||
// 重排数组（洗牌算法）
|
||||
function arrayShuffle(input) {
|
||||
for (var i = input.length-1; i >=0; i--) {
|
||||
var randomIndex = Math.floor(Math.random()*(i+1));
|
||||
var itemAtIndex = input[randomIndex];
|
||||
input[randomIndex] = input[i];
|
||||
input[i] = itemAtIndex;
|
||||
}
|
||||
return input;
|
||||
}
|
||||
|
||||
export const Common = {
|
||||
seo,
|
||||
throttle,
|
||||
dataURLtoBlob,
|
||||
getRandomNum,
|
||||
splitNum,
|
||||
getUuid,
|
||||
getRandomStr,
|
||||
unique,
|
||||
filterChineseWord,
|
||||
getIPAddress,
|
||||
getStyle,
|
||||
getCurrentStyle,
|
||||
slideToggle,
|
||||
slideUp,
|
||||
slideDown,
|
||||
getObjectURL,
|
||||
dataURLtoFile,
|
||||
getDayLastMsDate,
|
||||
getDayFirstMsDate,
|
||||
photoCompress,
|
||||
getFileType,
|
||||
arrayShuffle
|
||||
};
|
||||
|
||||
export default Common;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
/** 使用方法
|
||||
* 页面引入
|
||||
* import Utils from '@/jsFile/tools/observer.js';
|
||||
*
|
||||
* 使用
|
||||
* // 订阅消息
|
||||
* Utils.subscribe('test', function (e) {
|
||||
* console.log(e);
|
||||
* });
|
||||
* setTimeout(()=>{
|
||||
* // 发布消息
|
||||
* Utils.publish('test', {
|
||||
* msg: '参数'
|
||||
* });
|
||||
* },3000)
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* 发布-订阅模式（观察者模式）
|
||||
* */
|
||||
|
||||
export const Observer = (function() {
|
||||
let messages = {}; // 消息队列
|
||||
|
||||
return {
|
||||
// 订阅消息
|
||||
subscribe(type, fn) {
|
||||
// 消息不存在，创建消息执行队列
|
||||
if (typeof messages[type] === 'undefined') {
|
||||
messages[type] = [fn];
|
||||
}
|
||||
// 消息存在，将执行动作推进消息执行队列
|
||||
else {
|
||||
messages[type].push(fn);
|
||||
}
|
||||
},
|
||||
// 发布消息
|
||||
publish(type, args) {
|
||||
// 如果消息未被注册，返回false
|
||||
if (!messages[type]) return false;
|
||||
// 定义消息信息
|
||||
let events = {
|
||||
type: type, // 消息类型
|
||||
args: args || {} // 消息携带数据
|
||||
};
|
||||
for (let i = 0; i < messages[type].length; i++) {
|
||||
// 执行动作
|
||||
messages[type][i].call(this, events)
|
||||
}
|
||||
},
|
||||
// 删除消息
|
||||
remove(type, fn) {
|
||||
// 消息队列存在
|
||||
if (messages[type] instanceof Array) {
|
||||
// 从最后一个消息动作遍历
|
||||
let i = messages[type].length - 1;
|
||||
for (; i >= 0; i++) {
|
||||
// 存在该消息动作，则移除
|
||||
messages[type][i] === fn && messages[type].splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
export default Observer;
|
||||
18
pages.json
18
pages.json
|
|
@ -88,6 +88,24 @@
|
|||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
,{
|
||||
"path" : "picture-cut/picture-cut",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "count-to/count-to",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{ //B包
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
chooseGridEv(index){
|
||||
let urls = [
|
||||
'/pagesB/personal-information/personal-information',
|
||||
'/pagesB/electronic-certificate/electronic-certificate',
|
||||
'/pagesA/picture-cut/picture-cut',
|
||||
'/pagesB/service-range/service-range',
|
||||
'/pagesB/i-want-evaluate/i-want-evaluate',
|
||||
'/pagesB/my-account/my-account',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<vueCountTo ref='example1' :start-val="startVal1" :end-val="endVal1" :duration="4000"></vueCountTo>
|
||||
<view @click='start1'>start</view>
|
||||
<view @click='changeExampleEndVal'>change end-val</view>
|
||||
<view @click='incrementalUpdate'>incremental update</view>
|
||||
</view>
|
||||
<view>
|
||||
<vueCountTo ref="example2" :start-val="2017" :end-val="0" :duration="8000"></vueCountTo>
|
||||
<view @click="start2">start</view>
|
||||
</view>
|
||||
<view>
|
||||
<vueCountTo ref="example3" :start-val="_startVal" :end-val="_endVal" :duration="_duration"
|
||||
:decimals="_decimals" :separator="_separator" :prefix="_prefix" :suffix="_suffix" :autoplay="false">
|
||||
</vueCountTo>
|
||||
<view>
|
||||
<label for="startValInput">startVal: <input type="number" v-model.number='setStartVal'
|
||||
name='startValInput' /></label>
|
||||
<label for="endValInput">endVal: <input type="number" v-model.number='setEndVal'
|
||||
name='endVaInput' /></label>
|
||||
<label for="durationInput">duration: <input type="number" v-model.number='setDuration'
|
||||
name='durationInput' /></label>
|
||||
<view @click='start3'>start</view>
|
||||
<view @click='pauseResume'>pause/resume</view>
|
||||
<label for="decimalsInput">decimals: <input type="number" v-model.number='setDecimals' name='decimalsInput' /></label>
|
||||
<label for="separatorInput">separator: <input v-model='setSeparator' name='separatorInput' /></label>
|
||||
<label for="prefixInput">prefix: <input v-model='setPrefix' name='prefixInput' /></label>
|
||||
<label for="suffixInput">suffix: <input v-model='setSuffix' name='suffixInput' /></label>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueCountTo from '@/components/count-animate/count-one/vue-countTo.vue';
|
||||
export default {
|
||||
components: {
|
||||
vueCountTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
setStartVal: 0,
|
||||
setEndVal: 2017,
|
||||
setDuration: 4000,
|
||||
setDecimals: 0,
|
||||
setSeparator: ',',
|
||||
setSuffix: ' rmb',
|
||||
setPrefix: '¥ ',
|
||||
startVal1: 0,
|
||||
endVal1: 2017
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
_startVal() {
|
||||
if (this.setStartVal) {
|
||||
return this.setStartVal
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
_endVal() {
|
||||
if (this.setEndVal) {
|
||||
return this.setEndVal
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
_duration() {
|
||||
if (this.setDuration) {
|
||||
return this.setDuration
|
||||
} else {
|
||||
return 100
|
||||
}
|
||||
},
|
||||
_decimals() {
|
||||
if (this.setDecimals) {
|
||||
if (this.setDecimals < 0 || this.setDecimals > 20) {
|
||||
alert('digits argument must be between 0 and 20')
|
||||
return 0
|
||||
}
|
||||
return this.setDecimals
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
_separator() {
|
||||
return this.setSeparator
|
||||
},
|
||||
_suffix() {
|
||||
return this.setSuffix
|
||||
},
|
||||
_prefix() {
|
||||
return this.setPrefix
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeExampleEndVal() {
|
||||
this.endVal1 = this.endVal1 + 1000
|
||||
},
|
||||
incrementalUpdate() {
|
||||
this.startVal1 = this.endVal1
|
||||
this.endVal1 = this.endVal1 + 1000
|
||||
},
|
||||
callback() {
|
||||
console.log('callback')
|
||||
},
|
||||
start1() {
|
||||
this.$refs.example1.start();
|
||||
},
|
||||
start2() {
|
||||
this.$refs.example2.start();
|
||||
},
|
||||
start3() {
|
||||
this.$refs.example3.start();
|
||||
},
|
||||
pauseResume() {
|
||||
this.$refs.example3.pauseResume();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,806 @@
|
|||
<template>
|
||||
<view class="wrapper">
|
||||
<view class="model" v-show="model">
|
||||
<view class="model-show" @click="model = false">
|
||||
<img :src="modelSrc" alt="" @click="model = false">
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<h1><a class="title" href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a></h1>
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=xyxiao001&repo=vue-cropper&type=star&count=true&size=large"
|
||||
frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
|
||||
<view class="show-info">
|
||||
<h2>install</h2>
|
||||
<codes>
|
||||
<view slot="body">{{ code0 }}</view>
|
||||
</codes>
|
||||
</view>
|
||||
<view class="show-info">
|
||||
<h2>example1 基本例子 无限制</h2>
|
||||
<view class="test test1">
|
||||
<vueCropper ref="cropper" :img="option.img" :outputSize="option.size"
|
||||
:outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove"
|
||||
:canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original"
|
||||
:autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
|
||||
:autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high"
|
||||
:infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" @realTime="realTime"
|
||||
@imgLoad="imgLoad" @cropMoving="cropMoving" :enlarge="option.enlarge" :mode="option.mode"
|
||||
:limitMinSize="option.limitMinSize"></vueCropper>
|
||||
</view>
|
||||
<view class="test-button">
|
||||
<button @click="changeImg" class="btn">changeImg</button>
|
||||
<label class="btn" for="uploads">upload</label>
|
||||
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);"
|
||||
accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)"
|
||||
ref="uploadImg">
|
||||
<button @click="startCrop" v-if="!crap" class="btn">start</button>
|
||||
<button @click="stopCrop" v-else class="btn">stop</button>
|
||||
<button @click="clearCrop" class="btn">clear</button>
|
||||
<button @click="refreshCrop" class="btn">refresh</button>
|
||||
<button @click="changeScale(1)" class="btn">+</button>
|
||||
<button @click="changeScale(-1)" class="btn">-</button>
|
||||
<button @click="rotateLeft" class="btn">rotateLeft</button>
|
||||
<button @click="rotateRight" class="btn">rotateRight</button>
|
||||
<button @click="finish('base64')" class="btn">preview(base64)</button>
|
||||
<button @click="finish('blob')" class="btn">preview(blob)</button>
|
||||
<button @click="() => option.img = ''" class="btn">清除图片</button>
|
||||
<a @click="down('base64')" class="btn">download(base64)</a>
|
||||
<a @click="down('blob')" class="btn">download(blob)</a>
|
||||
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
|
||||
</view>
|
||||
|
||||
<view class="pre">
|
||||
<!-- <section class="pre-item">
|
||||
<p>固定大小 固定宽度100px</p>
|
||||
<section v-html="previews.html"></section>
|
||||
</section> -->
|
||||
|
||||
<section class="pre-item">
|
||||
<p>截图框大小</p>
|
||||
<view class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
|
||||
'margin': '5px'}">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<section class="pre-item">
|
||||
<p>中等大小</p>
|
||||
<view :style="previewStyle1">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<section class="pre-item">
|
||||
<p>迷你大小</p>
|
||||
<view :style="previewStyle2">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<section class="pre-item" title="zoom: (100 / previews.w)">
|
||||
<p>固定为100宽度</p>
|
||||
<view :style="previewStyle3">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="pre-item" title="zoom: (100 / previews.h)">
|
||||
<p>固定为100高度</p>
|
||||
<view :style="previewStyle4">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
</view>
|
||||
|
||||
|
||||
<view style="display:block; width: 100%;">
|
||||
<label class="c-item">
|
||||
<span>图片默认渲染方式</span>
|
||||
<select v-model="option.mode">
|
||||
<option value="contain">contain</option>
|
||||
<option value="cover">cover</option>
|
||||
<option value="400px auto">400px auto</option>
|
||||
<option value="auto 400px">auto 400px</option>
|
||||
<option value="50%">50%</option>
|
||||
<option value="auto 50%">auto 50%</option>
|
||||
</select>
|
||||
<section>
|
||||
类似css background属性设置 设置不符合规范不生效， 参照文档说明
|
||||
</section>
|
||||
</label>
|
||||
<!-- <label class="c-item">
|
||||
<span>截图框最小限制 </span>
|
||||
<input type="text" v-model="option.limitMinSize">
|
||||
</label> -->
|
||||
<label class="c-item">
|
||||
<span>上传时图片最大大小(默认会压缩尺寸到这个大小)</span>
|
||||
<input type="nubmer" v-model="option.maxImgSize">
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
|
||||
<input type="checkbox" v-model="option.original">
|
||||
<span>original: {{ option.original}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否根据dpr生成适合屏幕的高清图片</span>
|
||||
<input type="checkbox" v-model="option.high">
|
||||
<span>high: {{ option.high}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否输出原图比例的截图</span>
|
||||
<input type="checkbox" v-model="option.full">
|
||||
<span>full: {{ option.full}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图信息展示是否是真实的输出宽高</span>
|
||||
<input type="checkbox" v-model="option.infoTrue">
|
||||
<span>infoTrue: {{ option.infoTrue}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动图片</span>
|
||||
<input type="checkbox" v-model="option.canMove">
|
||||
<span>canMove: {{ option.canMove}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动截图框</span>
|
||||
<input type="checkbox" v-model="option.canMoveBox">
|
||||
<span>canMoveBox: {{ option.canMoveBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框固定大小</span>
|
||||
<input type="checkbox" v-model="option.fixedBox">
|
||||
<span>fixedBox: {{ option.fixedBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否自动生成截图框</span>
|
||||
<input type="checkbox" v-model="option.autoCrop">
|
||||
<span>autoCrop: {{ option.autoCrop}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>自动生成截图框的宽高</span>
|
||||
<span>宽度: </span><input type="number" v-model="option.autoCropWidth">
|
||||
<span>高度: </span><input type="number" v-model="option.autoCropHeight">
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
|
||||
<input type="checkbox" v-model="option.centerBox">
|
||||
<span>centerBox: {{ option.centerBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否按照截图框比例输出 默认为1 </span>
|
||||
<input type="number" v-model="option.enlarge">
|
||||
</label>
|
||||
<p>输出图片格式</p>
|
||||
<label class="c-item">
|
||||
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
|
||||
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
|
||||
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
|
||||
</label>
|
||||
</view>
|
||||
|
||||
<codes>
|
||||
<view slot="body">{{ code1 }}</view>
|
||||
</codes>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VueCropper from "@/components/picture-cut/vue-cropper/vue-cropper.vue";
|
||||
// import { VueCropper } from '../test'
|
||||
|
||||
import codes from "@/components/picture-cut/code.vue";
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
model: false,
|
||||
modelSrc: "",
|
||||
crap: false,
|
||||
previews: {},
|
||||
lists: [
|
||||
// {
|
||||
// img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
|
||||
// },
|
||||
{
|
||||
img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
|
||||
},
|
||||
{
|
||||
img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
|
||||
},
|
||||
{
|
||||
img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
|
||||
},
|
||||
{
|
||||
img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
|
||||
},
|
||||
{
|
||||
img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
|
||||
},
|
||||
{
|
||||
img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
|
||||
},
|
||||
{
|
||||
img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
|
||||
}
|
||||
],
|
||||
option: {
|
||||
img: "",
|
||||
size: 1,
|
||||
full: false,
|
||||
outputType: "png",
|
||||
canMove: true,
|
||||
fixedBox: false,
|
||||
original: false,
|
||||
canMoveBox: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 150,
|
||||
centerBox: false,
|
||||
high: false,
|
||||
cropData: {},
|
||||
enlarge: 1,
|
||||
mode: 'contain',
|
||||
maxImgSize: 3000,
|
||||
limitMinSize: [100, 120]
|
||||
},
|
||||
example2: {
|
||||
img: "http://cdn.xyxiao.cn/Landscape_2.jpg",
|
||||
info: true,
|
||||
size: 1,
|
||||
outputType: "jpeg",
|
||||
canScale: true,
|
||||
autoCrop: true,
|
||||
// 只有自动截图开启 宽度高度才生效
|
||||
autoCropWidth: 300,
|
||||
autoCropHeight: 250,
|
||||
fixed: true,
|
||||
// 真实的输出宽高
|
||||
infoTrue: true,
|
||||
fixedNumber: [4, 3]
|
||||
},
|
||||
example3: {
|
||||
img: "http://cdn.xyxiao.cn/Landscape_1.jpg",
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
fixedBox: true
|
||||
},
|
||||
downImg: "#",
|
||||
previewStyle1: {},
|
||||
previewStyle2: {},
|
||||
previewStyle3: {},
|
||||
previewStyle4: {},
|
||||
code0: '',
|
||||
code1: '',
|
||||
code2: '',
|
||||
code3: '',
|
||||
preview3: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeImg() {
|
||||
this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
|
||||
},
|
||||
startCrop() {
|
||||
// start
|
||||
this.crap = true;
|
||||
this.$refs.cropper.startCrop();
|
||||
},
|
||||
stopCrop() {
|
||||
// stop
|
||||
this.crap = false;
|
||||
this.$refs.cropper.stopCrop();
|
||||
},
|
||||
clearCrop() {
|
||||
// clear
|
||||
this.$refs.cropper.clearCrop();
|
||||
},
|
||||
refreshCrop() {
|
||||
// clear
|
||||
this.$refs.cropper.refresh();
|
||||
},
|
||||
changeScale(num) {
|
||||
num = num || 1;
|
||||
this.$refs.cropper.changeScale(num);
|
||||
},
|
||||
rotateLeft() {
|
||||
this.$refs.cropper.rotateLeft();
|
||||
},
|
||||
rotateRight() {
|
||||
this.$refs.cropper.rotateRight();
|
||||
},
|
||||
finish(type) {
|
||||
// 输出
|
||||
// var test = window.open('about:blank')
|
||||
// test.document.body.innerHTML = '图片生成中..'
|
||||
if (type === "blob") {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
var img = window.URL.createObjectURL(data);
|
||||
this.model = true;
|
||||
this.modelSrc = img;
|
||||
});
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
// 实时预览函数
|
||||
realTime(data) {
|
||||
var previews = data;
|
||||
var h = 0.5;
|
||||
var w = 0.2;
|
||||
|
||||
this.previewStyle1 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: h
|
||||
};
|
||||
|
||||
this.previewStyle2 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: w
|
||||
};
|
||||
|
||||
this.previewStyle3 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: (100 / previews.w)
|
||||
};
|
||||
|
||||
this.previewStyle4 = {
|
||||
width: previews.w + "px",
|
||||
height: previews.h + "px",
|
||||
overflow: "hidden",
|
||||
margin: "0",
|
||||
zoom: (100 / previews.h)
|
||||
};
|
||||
|
||||
this.previews = data;
|
||||
},
|
||||
|
||||
finish2(type) {
|
||||
this.$refs.cropper2.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
},
|
||||
finish3(type) {
|
||||
this.$refs.cropper3.getCropData(data => {
|
||||
this.model = true;
|
||||
this.modelSrc = data;
|
||||
});
|
||||
},
|
||||
down(type) {
|
||||
// event.preventDefault()
|
||||
// 输出
|
||||
if (type === "blob") {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
this.downImg = window.URL.createObjectURL(data);
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data]);
|
||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click();
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$refs.cropper.getCropData(data => {
|
||||
this.downImg = data;
|
||||
if (window.navigator.msSaveBlob) {
|
||||
var blobObject = new Blob([data]);
|
||||
window.navigator.msSaveBlob(blobObject, "demo.png");
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.downloadDom.click();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
uploadImg(e, num) {
|
||||
//上传图片
|
||||
// this.option.img
|
||||
var file = e.target.files[0];
|
||||
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
|
||||
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
|
||||
return false;
|
||||
}
|
||||
var reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
let data;
|
||||
if (typeof e.target.result === "object") {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data = e.target.result;
|
||||
}
|
||||
if (num === 1) {
|
||||
this.option.img = data;
|
||||
} else if (num === 2) {
|
||||
this.example2.img = data;
|
||||
}
|
||||
this.$refs.uploadImg.value = ''
|
||||
};
|
||||
// 转化为base64
|
||||
// reader.readAsDataURL(file)
|
||||
// 转化为blob
|
||||
reader.readAsArrayBuffer(file);
|
||||
},
|
||||
imgLoad(msg) {
|
||||
console.log(msg);
|
||||
},
|
||||
|
||||
cropMoving(data) {
|
||||
this.option.cropData = data;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VueCropper,
|
||||
codes
|
||||
},
|
||||
mounted() {
|
||||
this.changeImg();
|
||||
// hljs.configure({useBR: true})
|
||||
var list = [].slice.call(document.querySelectorAll("pre code"));
|
||||
list.forEach((val, index) => {
|
||||
hljs.highlightBlock(val);
|
||||
});
|
||||
// console.log(this.$refs.cropper)
|
||||
this.code0 = `
|
||||
npm install vue-cropper
|
||||
// 组件内使用
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
components: {
|
||||
VueCropper,
|
||||
},
|
||||
|
||||
// main.js里面使用
|
||||
import VueCropper from 'vue-cropper'
|
||||
|
||||
Vue.use(VueCropper)
|
||||
|
||||
// cdn方式使用
|
||||
<script src="vuecropper.js">\<\/script>
|
||||
Vue.use(window['vue-cropper'])
|
||||
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
></vueCropper>
|
||||
`
|
||||
this.code1 = `
|
||||
<view class="show-info">
|
||||
<h2>example1 基本例子 无限制</h2>
|
||||
<view class="test test1">
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:outputSize="option.size"
|
||||
:outputType="option.outputType"
|
||||
:info="true"
|
||||
:full="option.full"
|
||||
:canMove="option.canMove"
|
||||
:canMoveBox="option.canMoveBox"
|
||||
:fixedBox="option.fixedBox"
|
||||
:original="option.original"
|
||||
:autoCrop="option.autoCrop"
|
||||
:autoCropWidth="option.autoCropWidth"
|
||||
:autoCropHeight="option.autoCropHeight"
|
||||
:centerBox="option.centerBox"
|
||||
:high="option.high"
|
||||
:infoTrue="option.infoTrue"
|
||||
@realTime="realTime"
|
||||
@imgLoad="imgLoad"
|
||||
@cropMoving="cropMoving"
|
||||
:enlarge="option.enlarge"
|
||||
></vueCropper>
|
||||
</view>
|
||||
<view class="test-button">
|
||||
<button @click="changeImg" class="btn">changeImg</button>
|
||||
<label class="btn" for="uploads">upload</label>
|
||||
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
|
||||
<button @click="startCrop" v-if="!crap" class="btn">start</button>
|
||||
<button @click="stopCrop" v-else class="btn">stop</button>
|
||||
<button @click="clearCrop" class="btn">clear</button>
|
||||
<button @click="refreshCrop" class="btn">refresh</button>
|
||||
<button @click="changeScale(1)" class="btn">+</button>
|
||||
<button @click="changeScale(-1)" class="btn">-</button>
|
||||
<button @click="rotateLeft" class="btn">rotateLeft</button>
|
||||
<button @click="rotateRight" class="btn">rotateRight</button>
|
||||
<button @click="finish('base64')" class="btn">preview(base64)</button>
|
||||
<button @click="finish('blob')" class="btn">preview(blob)</button>
|
||||
<a @click="down('base64')" class="btn">download(base64)</a>
|
||||
<a @click="down('blob')" class="btn">download(blob)</a>
|
||||
<a :href="downImg" download="demo.png" ref="downloadDom"></a>
|
||||
</view>
|
||||
|
||||
<p>截图框大小</p>
|
||||
<view class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
|
||||
'margin': '5px'}">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<p>中等大小</p>
|
||||
<view :style="previewStyle1">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<p>迷你大小</p>
|
||||
<view :style="previewStyle2">
|
||||
<view :style="previews.view">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view style="display:block; width: 100%;">
|
||||
<label class="c-item">
|
||||
<span>上传图片是否显示原始宽高 (针对大图 可以铺满)</span>
|
||||
<input type="checkbox" v-model="option.original">
|
||||
<span>original: {{ option.original}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否根据dpr生成适合屏幕的高清图片</span>
|
||||
<input type="checkbox" v-model="option.high">
|
||||
<span>high: {{ option.high}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否输出原图比例的截图</span>
|
||||
<input type="checkbox" v-model="option.full">
|
||||
<span>full: {{ option.full}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图信息展示是否是真实的输出宽高</span>
|
||||
<input type="checkbox" v-model="option.infoTrue">
|
||||
<span>infoTrue: {{ option.infoTrue}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动图片</span>
|
||||
<input type="checkbox" v-model="option.canMove">
|
||||
<span>canMove: {{ option.canMove}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>能否拖动截图框</span>
|
||||
<input type="checkbox" v-model="option.canMoveBox">
|
||||
<span>canMoveBox: {{ option.canMoveBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框固定大小</span>
|
||||
<input type="checkbox" v-model="option.fixedBox">
|
||||
<span>fixedBox: {{ option.fixedBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否自动生成截图框</span>
|
||||
<input type="checkbox" v-model="option.autoCrop">
|
||||
<span>autoCrop: {{ option.autoCrop}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>截图框是否限制在图片里(只有在自动生成截图框时才能生效)</span>
|
||||
<input type="checkbox" v-model="option.centerBox">
|
||||
<span>centerBox: {{ option.centerBox}}</span>
|
||||
</label>
|
||||
<label class="c-item">
|
||||
<span>是否按照截图框比例输出 默认为1 </span>
|
||||
<input type="number" v-model="option.enlarge">
|
||||
</label>
|
||||
<p>输出图片格式</p>
|
||||
<label class="c-item">
|
||||
<label>jpg <input type="radio" name="type" value="jpeg" v-model="option.outputType"></label>
|
||||
<label>png <input type="radio" name="type" value="png" v-model="option.outputType"></label>
|
||||
<label>webp <input type="radio" name="type" value="webp" v-model="option.outputType"></label>
|
||||
</label>
|
||||
</view>
|
||||
|
||||
<codes>
|
||||
<view slot="body">{{ code1 }}</view>
|
||||
</codes>
|
||||
</view>
|
||||
`
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.test-button {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border: 1px solid #c0ccda;
|
||||
color: #1f2d3d;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 20px 10px 0px 0px;
|
||||
padding: 9px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
background-color: #50bfff;
|
||||
border-color: #50bfff;
|
||||
transition: all 0.2s ease;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.des {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
code.language-html {
|
||||
padding: 10px 20px;
|
||||
margin: 10px 0px;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
|
||||
Lucida, Sans, Type, Writer, Ubuntu, Mono;
|
||||
border-radius: 5px;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.show-info {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.show-info h2 {
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
/*.title, .title:hover, .title-focus, .title:visited {
|
||||
color: black;
|
||||
}*/
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0px;
|
||||
background-image: -webkit-linear-gradient(left,
|
||||
#3498db,
|
||||
#f47920 10%,
|
||||
#d71345 20%,
|
||||
#f7acbc 30%,
|
||||
#ffd400 40%,
|
||||
#3498db 50%,
|
||||
#f47920 60%,
|
||||
#d71345 70%,
|
||||
#f7acbc 80%,
|
||||
#ffd400 90%,
|
||||
#3498db);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-size: 200% 100%;
|
||||
animation: slide 5s infinite linear;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.test {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.model {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.model-show {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.model img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 80%;
|
||||
width: auto;
|
||||
user-select: none;
|
||||
background-position: 0px 0px, 10px 10px;
|
||||
background-size: 20px 20px;
|
||||
background-image: linear-gradient(45deg,
|
||||
#eee 25%,
|
||||
transparent 25%,
|
||||
transparent 75%,
|
||||
#eee 75%,
|
||||
#eee 100%),
|
||||
linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
|
||||
}
|
||||
|
||||
.c-item {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pre {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pre-item {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.content {
|
||||
max-width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.test {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue