cbvirtua 1.0.35 → 1.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ske.txt

@@ -0,0 +1,76 @@
+/**
+ * 网页空闲检测
+ * @param {() => void} callback 空闲时执行，即一定时长无操作时触发
+ * @param {number} [timeout=15] 时长，默认15s，单位：秒
+ * @param {boolean} [immediate=false] 是否立即开始，默认 false
+ * @returns
+ */
+const onIdleDetection = (callback, timeout = 15, immediate = false) => {
+  let pageTimer;
+  let beginTime = 0;
+  const onClearTimer = () => {
+    pageTimer && clearTimeout(pageTimer);
+    pageTimer = undefined;
+  };
+  const onStartTimer = () => {
+    const currentTime = Date.now();
+    if (pageTimer && currentTime - beginTime < 100) {
+      return;
+    }
+
+    onClearTimer();
+    beginTime = currentTime;
+    pageTimer = setTimeout(() => {
+      callback();
+    }, timeout * 1000);
+  };
+
+  const onPageVisibility = () => {
+     // 页面显示状态改变时，移除延时器
+     onClearTimer();
+
+     if (document.visibilityState === 'visible') {
+       const currentTime = Date.now();
+       // 页面显示时，计算时间，如果超出限制时间则直接执行回调函数
+       if (currentTime - beginTime >= timeout * 1000) {
+         callback();
+         return;
+       }
+       // 继续计时
+       pageTimer = setTimeout(() => {
+         callback();
+       }, timeout * 1000 - (currentTime - beginTime));
+     }
+  };
+
+  const startDetection = () => {
+    onStartTimer();
+    document.addEventListener('keydown', onStartTimer);
+    document.addEventListener('mousemove', onStartTimer);
+    document.addEventListener('visibilitychange', onPageVisibility);
+  };
+
+  const stopDetection = () => {
+    onClearTimer();
+    document.removeEventListener('keydown', onStartTimer);
+    document.removeEventListener('mousemove', onStartTimer);
+    document.removeEventListener('visibilitychange', onPageVisibility);
+  };
+  
+  const restartDetection = () => {
+      onClearTimer();
+      onStartTimer();
+  };
+
+  if (immediate) {
+    startDetection();
+  }
+
+  return {
+    startDetection,
+    stopDetection,
+    restartDetection
+  };
+};
+
+

package/src/dom.js

@@ -0,0 +1,227 @@
+/* istanbul ignore next */
+
+import Vue from 'vue';
+
+const isServer = Vue.prototype.$isServer;
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+const ieVersion = isServer ? 0 : Number(document.documentMode);
+
+/* istanbul ignore next */
+const trim = function(string) {
+  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
+};
+/* istanbul ignore next */
+const camelCase = function(name) {
+  return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+    return offset ? letter.toUpperCase() : letter;
+  }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+};
+
+/* istanbul ignore next */
+export const on = (function() {
+  if (!isServer && document.addEventListener) {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event && handler) {
+        element.attachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const off = (function() {
+  if (!isServer && document.removeEventListener) {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.removeEventListener(event, handler, false);
+      }
+    };
+  } else {
+    return function(element, event, handler) {
+      if (element && event) {
+        element.detachEvent('on' + event, handler);
+      }
+    };
+  }
+})();
+
+/* istanbul ignore next */
+export const once = function(el, event, fn) {
+  var listener = function() {
+    if (fn) {
+      fn.apply(this, arguments);
+    }
+    off(el, event, listener);
+  };
+  on(el, event, listener);
+};
+
+/* istanbul ignore next */
+export function hasClass(el, cls) {
+  if (!el || !cls) return false;
+  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
+  if (el.classList) {
+    return el.classList.contains(cls);
+  } else {
+    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+};
+
+/* istanbul ignore next */
+export function addClass(el, cls) {
+  if (!el) return;
+  var curClass = el.className;
+  var classes = (cls || '').split(' ');
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.add(clsName);
+    } else if (!hasClass(el, clsName)) {
+      curClass += ' ' + clsName;
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', curClass);
+  }
+};
+
+/* istanbul ignore next */
+export function removeClass(el, cls) {
+  if (!el || !cls) return;
+  var classes = cls.split(' ');
+  var curClass = ' ' + el.className + ' ';
+
+  for (var i = 0, j = classes.length; i < j; i++) {
+    var clsName = classes[i];
+    if (!clsName) continue;
+
+    if (el.classList) {
+      el.classList.remove(clsName);
+    } else if (hasClass(el, clsName)) {
+      curClass = curClass.replace(' ' + clsName + ' ', ' ');
+    }
+  }
+  if (!el.classList) {
+    el.setAttribute('class', trim(curClass));
+  }
+};
+
+/* istanbul ignore next */
+export const getStyle = ieVersion < 9 ? function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'styleFloat';
+  }
+  try {
+    switch (styleName) {
+      case 'opacity':
+        try {
+          return element.filters.item('alpha').opacity / 100;
+        } catch (e) {
+          return 1.0;
+        }
+      default:
+        return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
+    }
+  } catch (e) {
+    return element.style[styleName];
+  }
+} : function(element, styleName) {
+  if (isServer) return;
+  if (!element || !styleName) return null;
+  styleName = camelCase(styleName);
+  if (styleName === 'float') {
+    styleName = 'cssFloat';
+  }
+  try {
+    var computed = document.defaultView.getComputedStyle(element, '');
+    return element.style[styleName] || computed ? computed[styleName] : null;
+  } catch (e) {
+    return element.style[styleName];
+  }
+};
+
+/* istanbul ignore next */
+export function setStyle(element, styleName, value) {
+  if (!element || !styleName) return;
+
+  if (typeof styleName === 'object') {
+    for (var prop in styleName) {
+      if (styleName.hasOwnProperty(prop)) {
+        setStyle(element, prop, styleName[prop]);
+      }
+    }
+  } else {
+    styleName = camelCase(styleName);
+    if (styleName === 'opacity' && ieVersion < 9) {
+      element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
+    } else {
+      element.style[styleName] = value;
+    }
+  }
+};
+
+export const isScroll = (el, vertical) => {
+  if (isServer) return;
+
+  const determinedDirection = vertical !== null && vertical !== undefined;
+  const overflow = determinedDirection
+    ? vertical
+      ? getStyle(el, 'overflow-y')
+      : getStyle(el, 'overflow-x')
+    : getStyle(el, 'overflow');
+
+  return overflow.match(/(scroll|auto|overlay)/);
+};
+
+export const getScrollContainer = (el, vertical) => {
+  if (isServer) return;
+
+  let parent = el;
+  while (parent) {
+    if ([window, document, document.documentElement].includes(parent)) {
+      return window;
+    }
+    if (isScroll(parent, vertical)) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+
+  return parent;
+};
+
+export const isInContainer = (el, container) => {
+  if (isServer || !el || !container) return false;
+
+  const elRect = el.getBoundingClientRect();
+  let containerRect;
+
+  if ([window, document, document.documentElement, null, undefined].includes(container)) {
+    containerRect = {
+      top: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+      left: 0
+    };
+  } else {
+    containerRect = container.getBoundingClientRect();
+  }
+
+  return elRect.top < containerRect.bottom &&
+    elRect.bottom > containerRect.top &&
+    elRect.right > containerRect.left &&
+    elRect.left < containerRect.right;
+};

package/src/index.js

@@ -0,0 +1,106 @@
+import Vue from 'vue';
+import loadingVue from './loading.vue';
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import afterLeave from 'element-ui/src/utils/after-leave';
+import merge from 'element-ui/src/utils/merge';
+
+const LoadingConstructor = Vue.extend(loadingVue);
+
+const defaults = {
+  text: null,
+  fullscreen: true,
+  body: false,
+  lock: false,
+  customClass: ''
+};
+
+let fullscreenLoading;
+
+LoadingConstructor.prototype.originalPosition = '';
+LoadingConstructor.prototype.originalOverflow = '';
+
+LoadingConstructor.prototype.close = function() {
+  if (this.fullscreen) {
+    fullscreenLoading = undefined;
+  }
+  afterLeave(this, _ => {
+    const target = this.fullscreen || this.body
+      ? document.body
+      : this.target;
+    removeClass(target, 'el-loading-parent--relative');
+    removeClass(target, 'el-loading-parent--hidden');
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    this.$destroy();
+  }, 300);
+  this.visible = false;
+};
+
+const addStyle = (options, parent, instance) => {
+  let maskStyle = {};
+  if (options.fullscreen) {
+    instance.originalPosition = getStyle(document.body, 'position');
+    instance.originalOverflow = getStyle(document.body, 'overflow');
+    maskStyle.zIndex = PopupManager.nextZIndex();
+  } else if (options.body) {
+    instance.originalPosition = getStyle(document.body, 'position');
+    ['top', 'left'].forEach(property => {
+      let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+      maskStyle[property] = options.target.getBoundingClientRect()[property] +
+        document.body[scroll] +
+        document.documentElement[scroll] +
+        'px';
+    });
+    ['height', 'width'].forEach(property => {
+      maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
+    });
+  } else {
+    instance.originalPosition = getStyle(parent, 'position');
+  }
+  Object.keys(maskStyle).forEach(property => {
+    instance.$el.style[property] = maskStyle[property];
+  });
+};
+
+const Loading = (options = {}) => {
+  if (Vue.prototype.$isServer) return;
+  options = merge({}, defaults, options);
+  if (typeof options.target === 'string') {
+    options.target = document.querySelector(options.target);
+  }
+  options.target = options.target || document.body;
+  if (options.target !== document.body) {
+    options.fullscreen = false;
+  } else {
+    options.body = true;
+  }
+  if (options.fullscreen && fullscreenLoading) {
+    return fullscreenLoading;
+  }
+
+  let parent = options.body ? document.body : options.target;
+  let instance = new LoadingConstructor({
+    el: document.createElement('div'),
+    data: options
+  });
+
+  addStyle(options, parent, instance);
+  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed' && instance.originalPosition !== 'sticky') {
+    addClass(parent, 'el-loading-parent--relative');
+  }
+  if (options.fullscreen && options.lock) {
+    addClass(parent, 'el-loading-parent--hidden');
+  }
+  parent.appendChild(instance.$el);
+  Vue.nextTick(() => {
+    instance.visible = true;
+  });
+  if (options.fullscreen) {
+    fullscreenLoading = instance;
+  }
+  return instance;
+};
+
+export default Loading;

package/src//346/226/260/345/273/272 /346/226/207/346/234/254/346/226/207/346/241/243.txt"

@@ -0,0 +1,125 @@
+<template>
+  <div class="recommendPage">
+    <swiper :options="swiperOption" ref="mySwiper">
+      <swiper-slide>I'm Slide 1</swiper-slide>
+      <swiper-slide>I'm Slide 2</swiper-slide>
+      <swiper-slide>I'm Slide 3</swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+      <div class="swiper-button-prev" slot="button-prev"></div>
+      <div class="swiper-button-next" slot="button-next"></div>
+    </swiper>
+  </div>
+</template>
+
+<script>
+// 引入插件
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+
+export default {
+  components: {
+    swiper,
+    swiperSlide
+  },
+  data() {
+    return {
+      swiperOption: {
+        loop: true,
+        autoplay: {
+          delay: 3000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false
+        },
+        // 显示分页
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true //允许分页点击跳转
+        },
+        // 设置点击箭头
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev"
+        }
+      }
+    };
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
+  mounted() {
+    // current swiper instance
+    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
+    console.log("this is current swiper instance object", this.swiper);
+    // this.swiper.slideTo(3, 1000, false);
+  }
+};
+</script>
+<style scoped >
+.recommendPage .swiper-container{
+  position: relative;
+  width: 100%;
+  height: 200px;
+  background: pink;
+}  
+.recommendPage .swiper-container .swiper-slide{
+  width: 100%;
+  line-height: 200px;
+  background: yellowgreen;
+  color: #000;
+  font-size: 16px;
+  text-align: center;
+}
+</style>
+
+
+//index.js
+import myLoading from './loading.vue';
+export default {
+    /* 
+    * Vue:Vue 构造器
+    * options:可选插件参数
+    */
+    install(Vue, options) {
+        /*
+        *Vue.extend： https://cn.vuejs.org/v2/api/#Vue-extend
+        *使用基础 Vue.extend 构造器，创建一个“子类” (Loading)。参数是一个包含组件选项的对象(myLoading)。 
+        *然后 创建一个 Loading 的实例 Profile 挂载到一个HTMLElement实例上
+        */
+        const Loading = Vue.extend(myLoading);
+        const Profile = new Loading({
+            el: document.createElement('div')
+        });
+		
+        /*
+        *el： https://cn.vuejs.org/v2/api/#el
+        *loading.vue中的template模板内容将会替换挂载的元素。挂载元素的内容都将被忽略。 *所以Profile.$el最终是template里面的内容
+        */
+        
+        //插入到 document.body 
+        document.body.appendChild(Profile.$el);
+		
+        //这里插件接收三个值 icon progressColor 如果注册的时候传入这些值则赋值给组件内默认值。
+        if(options){
+            if(options.icon)
+                Profile.icon = options.icon;
+            if(options.progressColor)
+                Profile.progressColor = options.progressColor;
+        }
+        //定义显示隐藏的方法  open 会传入一个text 字符串。如果有则赋值给组件内默认值。
+        const myLoadingMethod = {
+            open(text) {
+                Profile.show = true;
+                if(text){
+                    Profile.text = text;
+                }
+            },
+            hide() {
+                Profile.show = false;
+            }
+        };
+        //添加实例方法 把自定义方法挂载到Vue构造器的上,这样每个实例都可以调用。
+        Vue.prototype.$myLoading = myLoadingMethod;
+    }
+}

package/src/App.vue

@@ -1,38 +0,0 @@
-<template>
-  <div id="app">
-    <div @click="show = !show" style="border:1px solid #f0f;">测试</div>
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-    <vCahe v-if="show">
-      <HelloWorld msg="Welcome to Your Vue.js App" />
-    </vCahe>
-  </div>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-import vCahe from './components/cache.vue'
-
-export default {
-  name: 'App',
-  data() {
-    return {
-      show: true
-    }
-  },
-  components: {
-    HelloWorld,
-    vCahe
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

package/src/components/HelloWorld.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="hello">
-    <input type="text" v-model="name">
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data() {
-    return {
-      name: 123
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>

package/src/components/cache.js

@@ -1 +0,0 @@
-export default {}

package/src/components/cache.vue

@@ -1,70 +0,0 @@
-<script>
-function getComponentName(opts) {
-    return opts && (opts.Ctor.options.name || opts.tag)
-}
-
-function isDef(v) {
-    return v !== undefined && v !== null
-}
-
-function isAsyncPlaceholder(node) {
-    return node.isComment && node.asyncFactory
-}
-
-function getFirstComponentChild(children) {
-    if (Array.isArray(children)) {
-        for (let i = 0; i < children.length; i++) {
-            const c = children[i]
-            if (isDef(c) && (isDef(c.componentOptions) || isAsyncPlaceholder(c))) {
-                return c
-            }
-        }
-    }
-}
-import cache from './cache'
-export default {
-    name: 'v-cache',
-    abstract: true,
-
-    props: {
-        cacheKey: {
-            type: String,
-            required: true
-        }
-    },
-
-    data() {
-        return {
-        }
-    },
-
-    render() {
-        const slot = this.$slots.default
-        const vnode = getFirstComponentChild(slot)
-        const componentOptions = vnode && vnode.componentOptions
-
-        if (componentOptions) {
-            const name = getComponentName(componentOptions)
-            const { cacheKey } = this
-            const key = name + cacheKey
-
-            vnode.key = key
-
-            if (cache[key]) {
-                vnode.componentInstance = cache[key].componentInstance
-            } else {
-                cache[key] = vnode
-            }
-
-            vnode.data.keepAlive = true
-        }
-        return vnode || (slot && slot[0])
-    },
-
-    destroyed() {
-        // Object.values(cache).forEach(vnode => {
-        //     vnode.componentInstance.$destroy()
-        // })
-    }
-}
-</script>

package/src/main.js

@@ -1,8 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')