captain-ui/es/wgw-nav/src/main.js

有赞vue wap业务组件库

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-wgw-nav"
    }, [_c('img', {
      staticClass: "cap-wgw-nav__bg",
      attrs: {
        "src": _vm.bgImage,
        "alt": "图片"
      }
    }), _c('ul', {
      staticClass: "cap-wgw-nav__list",
      style: {
        top: _vm.top
      }
    }, _vm._l(_vm.navLinks, function (link, index) {
      return _c('li', {
        key: index,
        class: ['cap-wgw-nav__item cap-wgw-nav__item-' + index, {
          'done': _vm.isDone
        }]
      }, [_c('a', {
        attrs: {
          "href": link.link
        }
      }, [_vm._v("\n        " + _vm._s(link.title) + "\n      ")])]);
    }), 0)]);
  },
  name: 'cap-wgw-nav',
  props: {
    bgImage: {
      type: String,
      default: 'https://b.yzcdn.cn/v2/image/tpl_weixin.jpg'
    },
    top: {
      type: String,
      default: '50%'
    },
    navLinks: Array
  },
  data: function data() {
    return {
      isDone: false
    };
  },
  mounted: function mounted() {
    var _this = this;

    var img = new Image();
    img.src = this.bgImage;

    img.onload = function () {
      // 背景图片加载完毕后动画
      _this.isDone = 'true';
    };
  }
};