新增数字动画组件、时间组件、常用函数方法
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 地址===>经纬度
|
* @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
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "picture-cut/picture-cut",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path" : "count-to/count-to",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ //B包
|
{ //B包
|
||||||
|
|
|
||||||
|
|
@ -158,7 +158,7 @@
|
||||||
chooseGridEv(index){
|
chooseGridEv(index){
|
||||||
let urls = [
|
let urls = [
|
||||||
'/pagesB/personal-information/personal-information',
|
'/pagesB/personal-information/personal-information',
|
||||||
'/pagesB/electronic-certificate/electronic-certificate',
|
'/pagesA/picture-cut/picture-cut',
|
||||||
'/pagesB/service-range/service-range',
|
'/pagesB/service-range/service-range',
|
||||||
'/pagesB/i-want-evaluate/i-want-evaluate',
|
'/pagesB/i-want-evaluate/i-want-evaluate',
|
||||||
'/pagesB/my-account/my-account',
|
'/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