提交 cfa11223 编写于 作者: F Frans

Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

......@@ -83,7 +83,7 @@ function createdFile(output, sorce, ishasCode) {
var bufs = `<template><div @click="dsCode">
<div v-if="content" class="layer">
<pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
</div>`+ res + `</div></template><script>import root from '../root.js';
</div>`+ res + `<nut-backtop></nut-backtop></div></template><script>import root from '../root.js';
export default {
mixins:[root]
}</script>`;
......
......@@ -4,8 +4,9 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router';
import copy from 'clipboard';
import backtop from './compents/backtop/backtop.js';
import './compents/backtop/backtop.css';
backtop.install(Vue);
import 'highlight.js/styles/github.css';
......
/*! NutUI2(2.0.2) - backtop.css, 4d177b46df0af221d246, 2019-01-25T10:47:27+08:00 */
.nut-backtop {
display: none;
line-height: 0;
position: fixed;
cursor: pointer;
bottom: 20px;
right: 10px;
z-index: 1111; }
.nut-backtop.show {
display: block; }
.nut-backtop-main {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
width: 38px;
height: 38px;
background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
border-radius: 50%;
border: 2px solid rgba(180, 180, 180, 0.5);
box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, 0.1); }
.nut-backtop i {
color: #fff;
font-size: 24px;
padding: 8px 12px;
line-height: 0; }
/*# sourceMappingURL=backtop.css.map*/
\ No newline at end of file
{"version":3,"sources":["webpack://[name]/./src/packages/backtop/backtop.scss"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yDAAyD;AACzD;AACA;AACA;AACA;AACA,mBAAmB","file":"backtop/backtop.css","sourcesContent":[".nut-backtop {\n display: none;\n line-height: 0;\n position: fixed;\n cursor: pointer;\n bottom: 20px;\n right: 10px;\n z-index: 1111; }\n .nut-backtop.show {\n display: block; }\n .nut-backtop-main {\n -webkit-transition: all .2s ease-in-out;\n transition: all .2s ease-in-out;\n width: 38px;\n height: 38px;\n background: #FFF url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E\") no-repeat center;\n background-size: 20px 20px;\n border-radius: 50%;\n border: 2px solid rgba(180, 180, 180, 0.5);\n box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, 0.1); }\n .nut-backtop i {\n color: #fff;\n font-size: 24px;\n padding: 8px 12px;\n line-height: 0; }\n"],"sourceRoot":""}
\ No newline at end of file
此差异已折叠。
此差异已折叠。
.nut-backtop {
display: none;
line-height: 0;
position: fixed;
cursor: pointer;
bottom: 20px;
right: 10px;
z-index: 1111;
&.show {
display: block;
}
&-main {
transition: all .2s ease-in-out;
width: 38px;
height: 38px;
background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 39'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M1.41 0C.63 0 0 .672 0 1.5S.63 3 1.41 3h28.18C30.37 3 31 2.328 31 1.5S30.369 0 29.59 0H1.41zM17 7.5a1.5 1.5 0 0 0-3 0v30a1.5 1.5 0 1 0 3 0v-30zM8.44 12.44l-8 8a1.5 1.5 0 1 0 2.12 2.12l8-8a1.5 1.5 0 1 0-2.12-2.12z'/%3E%3Cpath d='M16.56 6.44l14 14a1.5 1.5 0 1 1-2.12 2.12l-14-14a1.5 1.5 0 1 1 2.12-2.12z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center;
background-size: 20px 20px;
border-radius: 50%;
border: 2px solid rgba(180,180,180,.5);
box-shadow: 0px 0px 2px 3px rgba(220, 220, 220, .1)
}
i {
color: #fff;
font-size: 24px;
padding: 8px 12px;
line-height: 0;
}
}
\ No newline at end of file
<template>
<div :class="['nut-backtop', {'show': backTop}]" :style="styles" @click="goto">
<slot>
<div class="nut-backtop-main"></div>
</slot>
</div>
</template>
<script>
export default {
name: "nut-backtop",
props: {
distance: {
type: Number,
default: 200
},
bottom: {
type: Number,
default: 20
},
right: {
type: Number,
default: 10
},
duration: {
type: Number,
default: 1000
},
zIndex: {
type: Number,
default: 1111
}
},
data() {
return {
backTop: false
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll, false);
window.addEventListener("resize", this.handleScroll, false);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll, false);
window.removeEventListener("resize", this.handleScroll, false);
},
computed: {
styles() {
return {
bottom: `${this.bottom}px`,
right: `${this.right}px`,
"z-index": this.zIndex
};
}
},
methods: {
handleScroll() {
this.backTop = window.pageYOffset >= this.distance;
},
goto() {
const sTop =
document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTop(window, sTop, 0, this.duration);
this.$emit("click");
},
scrollTop(el, from = 0, to, duration = 500, endCallback) {
this.el = el;
let lastTime = 0;
let vendors = ["webkit", "moz"];
for (
let x = 0;
x < vendors.length && !window.requestAnimationFrame;
++x
) {
window.requestAnimationFrame =
window[vendors[x] + "RequestAnimationFrame"];
window.cancelAnimationFrame =
window[vendors[x] + "CancelAnimationFrame"] ||
window[vendors[x] + "CancelRequestAnimationFrame"];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
let currTime = new Date().getTime();
let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
let id = window.setTimeout(function() {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
const difference = Math.abs(from - to);
const step = Math.ceil((difference / duration) * 50);
this.scroll(from, to, step, endCallback);
},
scroll(start, end, step, endCallback) {
if (start === end) {
endCallback && endCallback();
return;
}
let d = start + step > end ? end : start + step;
if (start > end) {
d = start - step < end ? end : start - step;
}
if (this.el === window) {
window.scrollTo(d, d);
} else {
this.el.scrollTop = d;
}
window.requestAnimationFrame(() => this.scroll(d, end, step));
}
}
};
</script>
\ No newline at end of file
import BackTop from './backtop.vue';
import './backtop.scss';
BackTop.install = function(Vue) {
Vue.component(BackTop.name, BackTop);
};
export default BackTop
\ No newline at end of file
var myMixin ={
data(){
return {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册