vue-intro-step/dist/vue-intro-step.esm.js

基于vue2的系统引导步骤组件。

//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
function throttle(fn, delay) {
  let timerId = null;
  let flag = true;
  return function () {
    if (!flag) return;
    flag = false;
    let self = this;
    let args = arguments;
    timerId && clearTimeout(timerId);
    timerId = setTimeout(function () {
      flag = true;
      fn.apply(self, args);
    }, delay || 1000);
  };
}

var script = {
  name: "vueIntroStep",
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    config: {
      type: Object,
      required: true
    }
  },
  model: {
    prop: "show",
    event: "close"
  },

  data() {
    return {
      // 聚焦盒子的信息
      originalBox: {
        left: 250,
        top: 250,
        width: 200,
        height: 100
      },
      // 提示盒子的位置
      tipBoxPosition: 'bottom',
      // 当前显示的提示进度索引
      currentIndex: 0
    };
  },

  watch: {
    config: {
      deep: true,

      handler() {
        // 监听配置变化 重置当前显示的索引
        this.currentIndex = 0;
      },

      immediate: true
    },

    show(val) {
      if (val) {
        this.setBoxInfo();
      } else {
        // 允许页面滚动
        document.body.style.overflow = 'auto';
      }
    }

  },
  computed: {
    // 计算提示盒子的位置
    // eslint-disable-next-line vue/return-in-computed-property
    tipBoxStyle() {
      // 如果提示盒子的位置是right
      if (this.tipBoxPosition === 'right') {
        return {
          left: `${this.originalBox.left + this.originalBox.width}px`,
          top: `${this.originalBox.top}px`
        };
      } else if (this.tipBoxPosition === 'left') {
        return {
          right: `${window.innerWidth - this.originalBox.left}px`,
          top: `${this.originalBox.top}px`
        };
      } else if (this.tipBoxPosition === 'top') {
        return {
          left: `${this.originalBox.left}px`,
          bottom: `${window.innerHeight - this.originalBox.top}px`
        };
      } else if (this.tipBoxPosition === 'bottom') {
        return {
          left: `${this.originalBox.left > window.innerWidth - 300 ? window.innerWidth - 300 : this.originalBox.left}px`,
          top: `${this.originalBox.top + this.originalBox.height}px`
        };
      }
    }

  },

  created() {
    this.init();
  },

  mounted() {
    window.onresize = throttle(() => {
      if (this.show) {
        this.setBoxInfo();
      }
    }, 100);
  },

  beforeDestroy() {
    window.onresize = null;
  },

  methods: {
    async prev() {
      // 判断是否有onPrev 是否可以继续往下走
      let flag = true;

      if (this.config.tips[this.currentIndex] && this.config.tips[this.currentIndex].onPrev) {
        flag = await this.config.tips[this.currentIndex].onPrev();
      } // 如果不能继续往下走


      if (!flag) {
        throw new Error('onPrev 需要 Promise.resolve(true) 才可以继续往下走');
      }

      this.setBoxInfo(this.currentIndex - 1);
    },

    async next() {
      // 判断是否有onNext 是否可以继续往下走
      let flag = true;

      if (this.config.tips[this.currentIndex] && this.config.tips[this.currentIndex].onNext) {
        flag = await this.config.tips[this.currentIndex].onNext();
      } // 如果不能继续往下走


      if (!flag) {
        throw new Error('onNext 需要 Promise.resolve(true) 才可以继续往下走');
      }

      this.setBoxInfo(this.currentIndex + 1);
    },

    done() {
      this.$emit('close', false);
    },

    // 根据标签获取盒子的位置
    async setBoxInfo(index) {
      try {
        if (index === undefined) {
          index = this.currentIndex;
        }

        if (this.show) {
          // 禁止页面滚动
          document.body.style.overflow = 'hidden';
        }

        let el = this.config.tips[index].el;
        let box = document.querySelector(el);

        if (!box) {
          throw new Error('没有找到相应的元素');
        }

        let rect = box.getBoundingClientRect();
        this.originalBox = {
          left: rect.left,
          top: rect.top,
          width: rect.width,
          height: rect.height
        };
        this.tipBoxPosition = this.config.tips[index].tipPosition;
        this.currentIndex = index;
      } catch (e) {
        throw new Error(e.message);
      }
    },

    // 根据配置初始化
    init() {
      // 获取config中的tips数组
      const {
        tips
      } = this.config;
      let timer = null; // 判断tips是否存在 并且tips是否是数组

      if (tips && Array.isArray(tips)) {
        // 如果tips存在 并且tips是数组
        // 判断tips数组是否有数据
        if (tips.length > 0) {
          // 如果tips数组有数据
          // 初始化当前提示进度索引
          this.currentIndex = 0; // 获取第一个盒子

          try {
            let firstBox = document.querySelector(tips[0].el);
            timer = setInterval(() => {
              firstBox = document.querySelector(tips[0].el);

              if (firstBox) {
                // 如果第一个盒子存在
                this.setBoxInfo(0);
                clearInterval(timer);
              }
            }, 0);
          } catch (e) {
            throw new Error(e.message);
          }
        } else {
          throw new Error('tips数组不能为空');
        }
      } else {
        throw new Error('config中的tips不存在或者不是数组');
      }
    }

  }
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
        createInjectorSSR = createInjector;
        createInjector = shadowMode;
        shadowMode = false;
    }
    // Vue.extend constructor export interop.
    const options = typeof script === 'function' ? script.options : script;
    // render functions
    if (template && template.render) {
        options.render = template.render;
        options.staticRenderFns = template.staticRenderFns;
        options._compiled = true;
        // functional template
        if (isFunctionalTemplate) {
            options.functional = true;
        }
    }
    // scopedId
    if (scopeId) {
        options._scopeId = scopeId;
    }
    let hook;
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            const existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}

const isOldIE = typeof navigator !== 'undefined' &&
    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
    return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
    const group = isOldIE ? css.media || 'default' : id;
    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
    if (!style.ids.has(id)) {
        style.ids.add(id);
        let code = css.source;
        if (css.map) {
            // https://developer.chrome.com/devtools/docs/javascript-debugging
            // this makes source maps inside style tags work properly in Chrome
            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
            // http://stackoverflow.com/a/26603875
            code +=
                '\n/*# sourceMappingURL=data:application/json;base64,' +
                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                    ' */';
        }
        if (!style.element) {
            style.element = document.createElement('style');
            style.element.type = 'text/css';
            if (css.media)
                style.element.setAttribute('media', css.media);
            if (HEAD === undefined) {
                HEAD = document.head || document.getElementsByTagName('head')[0];
            }
            HEAD.appendChild(style.element);
        }
        if ('styleSheet' in style.element) {
            style.styles.push(code);
            style.element.styleSheet.cssText = style.styles
                .filter(Boolean)
                .join('\n');
        }
        else {
            const index = style.ids.size - 1;
            const textNode = document.createTextNode(code);
            const nodes = style.element.childNodes;
            if (nodes[index])
                style.element.removeChild(nodes[index]);
            if (nodes.length)
                style.element.insertBefore(textNode, nodes[index]);
            else
                style.element.appendChild(textNode);
        }
    }
}

/* script */
const __vue_script__ = script;
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('transition', {
    attrs: {
      "name": "custom-classes-transition",
      "enter-active-class": "animate__animated animate__fadeIn animate__faster",
      "leave-active-class": "animate__animated animate__fadeOut animate__faster"
    }
  }, [_vm.show ? _c('div', {
    attrs: {
      "id": "intro_box"
    }
  }, [_c('div', {
    staticClass: "top",
    style: {
      height: _vm.originalBox.top + "px",
      backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
    }
  }), _vm._v(" "), _c('div', {
    staticClass: "content",
    style: {
      height: _vm.originalBox.height + "px"
    }
  }, [_c('div', {
    staticClass: "left",
    style: {
      top: _vm.originalBox.top + "px",
      width: _vm.originalBox.left + "px",
      height: _vm.originalBox.height + "px",
      backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
    }
  }), _vm._v(" "), _c('div', {
    staticClass: "original-box",
    style: {
      top: _vm.originalBox.top + "px",
      left: _vm.originalBox.left + "px",
      width: _vm.originalBox.width + "px",
      height: _vm.originalBox.height + "px"
    }
  }, [_c('div', {
    staticClass: "round round-flicker"
  })]), _vm._v(" "), _c('div', {
    staticClass: "tip-box",
    style: _vm.tipBoxStyle
  }, [_c('div', {
    staticClass: "tip-content"
  }, [_vm.config.tips[_vm.currentIndex].title ? _c('div', {
    staticClass: "title",
    style: {
      textAlign: _vm.config.titleStyle ? _vm.config.titleStyle.textAlign ? _vm.config.titleStyle.textAlign : 'center' : 'center',
      fontSize: _vm.config.titleStyle ? _vm.config.titleStyle.fontSize ? _vm.config.titleStyle.fontSize : '19px' : '19px'
    }
  }, [_vm._v("\n            " + _vm._s(_vm.config.tips[_vm.currentIndex].title) + "\n          ")]) : _vm._e(), _vm._v(" "), _c('div', {
    staticClass: "content",
    style: {
      textAlign: _vm.config.contentStyle ? _vm.config.contentStyle.textAlign ? _vm.config.contentStyle.textAlign : 'center' : 'center',
      fontSize: _vm.config.contentStyle ? _vm.config.contentStyle.fontSize ? _vm.config.contentStyle.fontSize : '15px' : '15px'
    }
  }, [_vm._v("\n            " + _vm._s(_vm.config.tips[_vm.currentIndex].content) + "\n          ")]), _vm._v(" "), _c('div', {
    staticClass: "action",
    style: {
      justifyContent: 'center'
    }
  }, [_vm.currentIndex !== 0 ? _vm._t("prev", function () {
    return [_c('div', {
      staticClass: "item prev",
      on: {
        "click": _vm.prev
      }
    }, [_vm._v("上一步")])];
  }, {
    "index": _vm.currentIndex,
    "tipItem": _vm.config.tips[_vm.currentIndex]
  }) : _vm._e(), _vm._v(" "), _vm.currentIndex !== _vm.config.tips.length - 1 ? _vm._t("next", function () {
    return [_c('div', {
      staticClass: "item next",
      on: {
        "click": _vm.next
      }
    }, [_vm._v("下一步")])];
  }, {
    "index": _vm.currentIndex,
    "tipItem": _vm.config.tips[_vm.currentIndex]
  }) : _vm._e(), _vm._v(" "), _vm.currentIndex === _vm.config.tips.length - 1 ? _vm._t("done", function () {
    return [_c('div', {
      staticClass: "item done",
      on: {
        "click": _vm.done
      }
    }, [_vm._v("完成")])];
  }, {
    "index": _vm.currentIndex,
    "tipItem": _vm.config.tips[_vm.currentIndex]
  }) : _vm._t("skip", function () {
    return [_c('div', {
      staticClass: "item skip",
      on: {
        "click": _vm.done
      }
    }, [_vm._v("跳过")])];
  }, {
    "index": _vm.currentIndex,
    "tipItem": _vm.config.tips[_vm.currentIndex]
  })], 2)])]), _vm._v(" "), _c('div', {
    ref: "tip_box",
    staticClass: "right",
    style: {
      top: _vm.originalBox.top + "px",
      left: _vm.originalBox.left + _vm.originalBox.width + "px",
      width: "calc(100% - " + (_vm.originalBox.left + _vm.originalBox.width) + "px)",
      height: _vm.originalBox.height + "px",
      backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
    }
  })]), _vm._v(" "), _c('div', {
    staticClass: "bottom",
    style: {
      height: "calc(100% - " + _vm.originalBox.top + "px - " + _vm.originalBox.height + "px)",
      backgroundColor: "rgba(0, 0, 0, " + (_vm.config.backgroundOpacity ? _vm.config.backgroundOpacity : 0.9) + ")"
    }
  })]) : _vm._e()]);
};

var __vue_staticRenderFns__ = [];
/* style */

const __vue_inject_styles__ = function (inject) {
  if (!inject) return;
  inject("data-v-6e78b694_0", {
    source: "#intro_box[data-v-6e78b694]{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999}#intro_box>.top[data-v-6e78b694]{width:100%}#intro_box>.content[data-v-6e78b694]{width:100%}#intro_box>.content>.left[data-v-6e78b694]{position:absolute;left:0}#intro_box>.content>.original-box[data-v-6e78b694]{position:absolute;background-color:transparent;transition:all .3s cubic-bezier(0,0,.58,1)}#intro_box>.content>.original-box .round[data-v-6e78b694]{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;opacity:.65;background-color:#90f}#intro_box>.content>.original-box .round-flicker[data-v-6e78b694]:after,#intro_box>.content>.original-box .round-flicker[data-v-6e78b694]:before{content:'';width:100%;height:100%;position:absolute;left:-1px;top:-1px;box-shadow:#90f 0 0 2px 2px;border:1px solid rgba(153,0,255,.5);border-radius:50%;animation:warn-data-v-6e78b694 2s linear 0s infinite}@keyframes warn-data-v-6e78b694{0%{transform:scale(.5);opacity:1}25%{transform:scale(1);opacity:.75}50%{transform:scale(1.5);opacity:.5}75%{transform:scale(2);opacity:.25}100%{transform:scale(2.5);opacity:0}}#intro_box>.content>.tip-box[data-v-6e78b694]{position:absolute;width:fit-content;max-width:300px;box-sizing:border-box;height:fit-content;transition:all .3s;z-index:99999;padding:12px;font-size:15px}#intro_box>.content>.tip-box>.tip-content[data-v-6e78b694]{border-radius:10px;overflow:hidden;padding:10px;color:#fff}#intro_box>.content>.tip-box>.tip-content>.title[data-v-6e78b694]{font-weight:700;margin-bottom:10px}#intro_box>.content>.tip-box>.tip-content>.content[data-v-6e78b694]{white-space:normal;overflow-wrap:break-word;line-height:1.5}#intro_box>.content>.tip-box>.tip-content>.action[data-v-6e78b694]{margin-top:15px;width:100%;display:flex}#intro_box>.content>.tip-box>.tip-content>.action>.item[data-v-6e78b694]{display:flex;justify-content:center;align-items:center;text-align:center;border-radius:15px;font-size:12px;cursor:pointer;transition:all .3s;padding:5px 15px;color:#fff;font-weight:700;border:1px solid #ccc;margin:5px}#intro_box>.content>.tip-box>.tip-content>.action>.item.prev[data-v-6e78b694]{color:#ccc}#intro_box>.content>.tip-box>.tip-content>.action>.item.next[data-v-6e78b694]{color:#ccc}#intro_box>.content>.tip-box>.tip-content>.action>.item.done[data-v-6e78b694]{color:#ccc}#intro_box>.content>.tip-box>.tip-content>.action>.item.skip[data-v-6e78b694]{color:#ccc}#intro_box>.content>.right[data-v-6e78b694]{position:absolute;background-color:rgba(0,0,0,.9)}#intro_box>.bottom[data-v-6e78b694]{width:100%;background-color:rgba(0,0,0,.9)}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


const __vue_scope_id__ = "data-v-6e78b694";
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* style inject SSR */

/* style inject shadow dom */

const __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);

var component = __vue_component__;

// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),

var entry_esm = /*#__PURE__*/(() => {
  // Get component instance
  const installable = component; // Attach install function executed by Vue.use()

  installable.install = Vue => {
    Vue.component('VueIntroStep', installable);
  };

  return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;

export { entry_esm as default };