air-bubble-cloud
Version:
气泡词云，通过传入数据，自动生成动态移动的气泡词云
472 lines (439 loc) • 14.7 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["air-bubble-cloud"] = factory(require("vue"));
else
root["air-bubble-cloud"] = factory(root["Vue"]);
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__203__) {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 203:
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__203__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ !function() {
/******/ __webpack_require__.p = "";
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
!function() {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ entry_lib; }
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
var currentScript = window.document.currentScript
if (false) { var getCurrentScript; }
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
if (src) {
__webpack_require__.p = src[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(203);
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/airBubbleCloud/index.vue?vue&type=script&lang=js&
const __default__ = {
name: "AirBubbleCloud",
props: {
data: {
type: Array,
default: () => {
return [{
name: '工程车',
value: 120,
textStyle: {
color: '#fff',
background: 'rgb(8,68,69)'
}
}, {
name: '推土车',
value: 100,
textStyle: {
color: '#6100fe',
backgroundImage: 'linear-gradient(to left bottom, #000, #fff)'
}
}, {
name: '杰克琼斯',
value: 82,
textStyle: {
color: '#fff',
backgroundImage: 'radial-gradient(rgb(8,68,69),#fff)'
}
}, {
name: '项目方',
value: 60
}, {
name: '交付中心',
value: 5
}, {
name: '交付中心',
value: 5
}, {
name: '交付中心',
value: 5
}, {
name: '交付中心',
value: 5
}, {
name: '交付中心',
value: 5
}, {
name: '交付中心',
value: 5
}];
}
},
baseSize: {
type: Number,
default: 100
},
baseFont: {
type: Number,
default: 20
},
boxWidth: {
type: Number,
default: 300
},
boxHeight: {
type: Number,
default: 200
}
},
data() {
return {
timer: null
};
},
mounted() {
this.circleMove();
},
beforeDestroy() {
//销毁组件之前清空定时器
this.data.forEach((item, index) => {
this.circleMove(index, 'in');
});
},
methods: {
getRandomColor() {
return `rgb(${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)})`;
},
getItemSize(item, index) {
const firstSize = this.data[0] && this.data[0].value;
if (firstSize === 0) return {
'font-size': 0,
width: 0,
height: 0
};
if (index === 0) return {
'font-size': this.baseFont + 'px',
width: this.baseSize + 'px',
height: this.baseSize + 'px'
};
const sizes = item.value * this.baseSize / firstSize;
let w = sizes;
let f = sizes * this.baseFont / this.baseSize;
if (sizes <= 40) {
w = 40;
f = 11;
}
return {
'font-size': f + 'px',
width: w + 'px',
height: w + 'px'
};
},
circleMove(index = -1, type) {
const domList = document.querySelectorAll('.air-circle');
//鼠标移入，清除定时器
if (type === 'in') {
clearInterval(domList[index].timer);
return;
} else if (type === 'out') {
//鼠标移出，恢复定时器
const items = domList[index];
const lefts = items.offsetLeft;
const tops = items.offsetTop;
this.setTimer(domList[index], index, tops, lefts);
return;
}
domList.forEach((item, index) => {
let top = Math.random() * this.boxHeight;
let left = Math.random() * this.boxWidth;
item.style.top = top + 'px';
item.style.left = left + 'px';
item.co = index % 4; //符号
item.step = Math.random() + 0.2;
this.setTimer(item, index, top, left);
});
},
setTimer(item, index, top, left) {
item.timer = setInterval(() => {
const co = item.co;
const step = item.step;
if (co === 0) {
top += step;
left -= step;
if (top >= this.boxHeight || left <= 0) {
item.co = 1;
}
} else if (co === 1) {
top -= step;
left += step;
if (top <= 0 || left >= this.boxWidth) {
item.co = 0;
}
} else if (co === 2) {
top += step;
left += step;
if (top >= this.boxHeight || left >= this.boxWidth) {
item.co = 3;
}
} else {
top -= step;
left -= step;
if (top <= 0 || left < 0) {
item.co = 2;
}
}
item.style.top = top + 'px';
item.style.left = left + 'px';
}, 30);
},
handleClick(item, index) {
this.$emit('click', item, index);
}
},
render(createElement, context) {
const h = arguments[0];
return h("div", {
"attrs": {
"id": "airBubbleCloud"
},
"class": "air-bubble-cloud"
}, [this.data.map((item, index) => {
return h("div", {
"class": "air-circle",
"key": index,
"style": {
...this.getItemSize(item, index),
'z-index': 999 - index,
'background': item.textStyle && item.textStyle.background || this.getRandomColor(),
'background-image': item.textStyle && item.textStyle.backgroundImage || '',
'color': item.textStyle && item.textStyle.color || '#fff'
},
"on": {
"mouseover": () => this.circleMove(index, 'in'),
"mouseleave": () => this.circleMove(index, 'out'),
"click": () => this.handleClick(item, index)
}
}, [item.name]);
})]);
}
};
const __injectCSSVars__ = () => {
(0,external_commonjs_vue_commonjs2_vue_root_Vue_.useCssVars)((_vm, _setup) => ({
"6eb2cd2e": _vm.boxWidth + 'px',
"29e21144": _vm.boxHeight + 'px',
"732097e0": _vm.baseSize + 'px',
"80205ca4": _vm.baseFont + 'px'
}));
};
const __setup__ = __default__.setup;
__default__.setup = __setup__ ? (props, ctx) => {
__injectCSSVars__();
return __setup__(props, ctx);
} : __injectCSSVars__;
/* harmony default export */ var airBubbleCloudvue_type_script_lang_js_ = (__default__);
;// CONCATENATED MODULE: ./src/package/airBubbleCloud/index.vue?vue&type=script&lang=js&
/* harmony default export */ var package_airBubbleCloudvue_type_script_lang_js_ = (airBubbleCloudvue_type_script_lang_js_);
;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/airBubbleCloud/index.vue?vue&type=style&index=0&id=75094756&prod&lang=css&
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/package/airBubbleCloud/index.vue?vue&type=style&index=0&id=75094756&prod&lang=css&
;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent(
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */,
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options =
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var 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 (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
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 (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection(h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
;// CONCATENATED MODULE: ./src/package/airBubbleCloud/index.vue
var render, staticRenderFns
;
;
/* normalize component */
var component = normalizeComponent(
package_airBubbleCloudvue_type_script_lang_js_,
render,
staticRenderFns,
false,
null,
null,
null
)
/* harmony default export */ var airBubbleCloud = (component.exports);
;// CONCATENATED MODULE: ./src/package/index.js
/* harmony default export */ var src_package = ({
install: Vue => {
Vue.component('AirBubbleCloud', airBubbleCloud);
}
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
/* harmony default export */ var entry_lib = (src_package);
}();
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=air-bubble-cloud.umd.js.map