bytev-charts
Version:
基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;
318 lines (261 loc) • 26.9 kB
JavaScript
import _Reflect$construct from "@babel/runtime-corejs2/core-js/reflect/construct";
import "core-js/modules/es.object.to-string.js";
import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs2/helpers/createClass";
import _assertThisInitialized from "@babel/runtime-corejs2/helpers/assertThisInitialized";
import _get from "@babel/runtime-corejs2/helpers/get";
import _inherits from "@babel/runtime-corejs2/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime-corejs2/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs2/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime-corejs2/helpers/defineProperty";
import _JSON$stringify from "@babel/runtime-corejs2/core-js/json/stringify";
import _Object$assign from "@babel/runtime-corejs2/core-js/object/assign";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.replace.js";
import "core-js/modules/es.string.split.js";
import "core-js/modules/es.number.constructor.js";
import "core-js/modules/es.number.to-fixed.js";
import "core-js/modules/web.timers.js";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
/*
* 电子屏数字翻牌器、电子屏数字滚动轴
* */
import OtherComponent from '../../../OtherComponent.class.js';
import CssUtil from "../../../../../util/CssUtil.class.js";
import style from "./DigitalRollerElectronic.css.js";
import Util from "../../../../../util/Util.class.js";
var DigitalRollerElectronic = /*#__PURE__*/function (_OtherComponent) {
_inherits(DigitalRollerElectronic, _OtherComponent);
var _super = _createSuper(DigitalRollerElectronic);
function DigitalRollerElectronic(element, option) {
var _this;
_classCallCheck(this, DigitalRollerElectronic);
_this = _super.call(this, element, option); //加载style字符串
_defineProperty(_assertThisInitialized(_this), "name", 'DigitalRollerElectronic');
CssUtil.loadStyleString(new style().styleText);
return _this;
}
_createClass(DigitalRollerElectronic, [{
key: "buildByteVModel",
value: function buildByteVModel() {
_get(_getPrototypeOf(DigitalRollerElectronic.prototype), "buildByteVModel", this).call(this); //如果是第一次build则设置默认字体样式,
// 后续setTheme触发的build则不再设置字体样式(防止覆盖用户自定义的样式)
if (!this.buildedByteVModel) {
this.byteVModel = {
id: this.byteVModel.id,
name: this.byteVModel.name,
color: this.theme.color,
textStyle: {
value: {
'font-size': '40px',
'color': '#DBDBDB'
},
unit: {
'color': '#DBDBDB',
'font-style': 'normal',
'writing-mode': 'initial',
'font-size': '30px',
'height': '90px',
'line-height': '90px',
'padding': '10px',
'box-sizing': 'border-box'
}
}
};
this.buildedByteVModel = true;
}
this.byteVModel.color = this.theme.color;
}
}, {
key: "setComponentContainerStyle",
value: function setComponentContainerStyle() {
if (this.componentContainer) {
var topBg = "rgba(".concat(this.theme.firstColorRgbaArr[0] / 3, ", ").concat(this.theme.firstColorRgbaArr[1] / 3, ", ").concat(this.theme.firstColorRgbaArr[2] / 3, ", 1)");
var a = this.componentContainer.getElementsByClassName('BTV-number-item');
for (var i = 0; i < a.length; i++) {
a[i].style['border-color'] = this.theme.color[0];
}
var b = this.componentContainer.getElementsByClassName('BTV-textTopBack-box');
for (var _i = 0; _i < b.length; _i++) {
b[_i].style['box-shadow'] = "0px 0px 2px 1px ".concat(this.theme.color[0], "eb");
b[_i].style['border-color'] = this.theme.color[0];
b[_i].style['background'] = topBg;
} // let c = this.componentContainer.getElementsByTagName('span')
var c = this.componentContainer.getElementsByClassName('BTV-number-item-span');
for (var _i2 = 0; _i2 < c.length; _i2++) {
c[_i2].style['background-image'] = "linear-gradient(to bottom, ".concat(topBg, ", ").concat(this.theme.color[0], "85, ").concat(this.theme.color[0], "70)");
c[_i2].style['box-shadow'] = "0 3px 2px 1px ".concat(this.theme.color[0]);
} //数字的样式
this.byteVModel.textStyle.value['font-size'] = this.byteVModel.textStyle.value['font-size']; // || '40px'
var size = (this.byteVModel.textStyle.value['font-size'].replace('px', '') - 0) * .018;
this.digitalRollerContainer.style.transform = "scale(".concat(size, ", ").concat(size, ")"); //单位的样式
CssUtil.css(this.unitSpan, this.byteVModel.textStyle.unit);
this.byteVModel.textStyle.unit['font-size'] = this.byteVModel.textStyle.unit['font-size']; // || '30px'
var unitSize = (this.byteVModel.textStyle.unit['font-size'].replace('px', '') - 0) * 1.8;
CssUtil.css(this.unitSpan, {
'font-size': unitSize + 'px'
});
}
}
}, {
key: "init",
value: function init(element, option) {
_get(_getPrototypeOf(DigitalRollerElectronic.prototype), "init", this).call(this, element, option);
if (this.componentContainer) this.createContainer(this.componentContainer);
this.createNumberItem();
this.setData(this.data || '0.00');
this.setComponentContainerStyle();
} //创建翻牌器的各个数字元素
}, {
key: "createNumberItem",
value: function createNumberItem() {
// this.componentContainer.firstChild.innerHTML = ''
this.digitalRollerContainer.innerHTML = '';
for (var n = 0; n < 20; n++) {
var li = document.createElement('li');
li.className = "BTV-number-item";
var back = document.createElement('li');
back.className = "BTV-textTopBack-box";
li.appendChild(back);
var span = document.createElement('span');
span.className = 'BTV-number-item-span';
var i = document.createElement('i');
i.className = "BTV-item"; // i.innerHTML = '0123456789,.'
i.innerHTML = "\n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"".concat(this.byteVModel.textStyle.value.color, "\" d=\"M305.52383 887.325414l-78.41355 69.088695-23.620396-24.583707c-11.945062-13.833152-19.266228-27.627772-20.499267-41.460923-0.385325-4.585362 0.577987-10.750555 0.192662-15.297385l27.396577-300.938487 65.351047-59.879438L333.382797 574.133606 305.52383 887.325414zM344.133352 451.330666l-68.202448 62.962034-54.639024-62.962034 22.695617-267.10699c3.005532-18.457047 3.583518-29.16907 4.585362-35.334263 1.849558-13.79462 8.592738-24.583707 21.462578-35.29573l41.306794-36.837029 59.609711 67.547397L344.133352 451.330666zM627.578104 901.158566l66.314358 73.674057-34.139757 30.7489c-14.141412 13.756087-30.633303 18.418514-59.802373 18.418514L329.760746 1024.000039c-29.16907 0-46.58574-6.165193-58.415204-18.418514l-27.280979-30.7489 82.613587-73.674057L627.578104 901.158566zM393.686092 122.841472 329.568083 56.835374l29.554394-30.7489C377.463927 7.667959 395.22739 0 418.231266 0l280.940142 0c21.501111 0 42.385702 10.750555 56.026192 26.086473l24.044253 29.207602-80.070445 67.547397L393.686092 122.841472zM680.329037 574.133606l68.279513-61.382204 54.523426 61.382204-22.811214 265.604224c-1.310104 19.959813-3.313791 32.251666-2.928467 36.875561-1.849558 13.756087-8.746868 23.003877-23.003877 35.257198l-44.504988 35.29573-56.026192-61.382204L680.329037 574.133606zM719.478013 144.304051 799.394329 75.215356l18.765306 21.501111c13.64049 15.335918 20.961656 29.16907 22.310292 44.504988 0.539454 6.165193 1.078909 12.291854 0.077065 18.418514l-25.123162 291.690698-69.859344 61.459269-52.982128-61.459269L719.478013 144.304051z\" />\n </svg>\n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M416.116778 121.565204 358.155952 66.84561 426.75564 0l220.289268 0L513.315556 121.565204 416.116778 121.565204zM496.194233 568.168615l64.977136-56.24488L617.759438 568.168615 582.410961 963.217398l-66.082967 60.782602L460.883889 963.217398 496.194233 568.168615zM533.563713 144.330081l132.280331-120.001787L628.360168 446.641543l-67.188799 65.320325-54.338274-65.320325L533.563713 144.330081z\" />\n </svg>\n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M309.935797 885.784114 177.499744 1004.040223l32.482861-365.364754c0.770649-9.209257 1.502766-18.457047 3.891778-26.125006 2.427545-7.667959 4.932154-13.794619 9.132192-18.457047 0 0 8.554205-7.667959 22.657085-21.501111l41.037066-39.881093 50.747245 53.714245L309.935797 885.784114zM656.650842 901.158564l56.064724 61.420736-66.776747 61.420736L194.569622 1024.000036l138.17739-122.841472L656.650842 901.158564zM690.636469 552.671026c-16.954281 16.877216-30.363576 21.501111-65.659306 21.501111L360.95277 574.172137 305.042175 514.292699l43.695806-44.504987c5.625739-6.126661 12.869841-10.750555 20.268072-13.833152 7.398232-3.044064 13.409295-4.585362 21.077254-4.585362l24.583707 0 265.604224 0 55.872062 59.91797L690.636469 552.671026zM382.877738 122.841472 326.967143 62.923502 392.048462 0l313.191808 0c30.671835 0 45.198572 7.667959 62.26845 27.627771l20.576332 24.583707-78.259419 70.629993L382.877738 122.841472zM725.431277 142.762752l79.762185-70.629993 27.242447 30.710368c3.352324 3.082597 7.089972 10.750555 11.097348 21.501111 1.926623 4.623895 2.35048 9.24779 2.735804 13.833152 0.539454 6.126661-0.038532 16.877216-0.385325 30.710368l-21.578176 227.187364c-2.19635 27.666304-7.359699 38.416859-27.126849 58.338139l-42.578365 39.919625-55.756465-58.338139L725.431277 142.762752z\" />\n </svg>\n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M606.286201 901.158566l63.000567 70.629993-32.636991 30.710368c-17.069878 15.297385-36.490237 21.501111-71.785967 21.501111L265.505153 1024.000039 209.594558 964.120601l77.373173-62.962034L606.286201 901.158566zM645.242515 451.330666l58.993191 59.91797L634.491959 574.133606 316.714788 574.133606l-60.804217-62.923502 71.51624-59.91797L645.242515 451.292134zM355.516972 122.841472l-57.413361-59.91797L366.267528 0l302.441253 0c13.833152 0 23.158007 1.502766 26.240603 1.502766 10.904685 1.541298 27.203914 12.291854 40.805872 27.704836l20.576332 24.545175-81.457614 69.088695L355.516972 122.841472zM652.987538 592.55212l69.589617-64.4648 27.011252 27.627772c15.297385 16.877216 20.961656 29.16907 22.464422 46.084818 0.693584 7.667959 1.348636 15.297385 0.462389 23.003877l-22.002033 239.517751c-2.19635 27.627772-8.7854 39.919625-30.093849 59.879438l-35.681055 30.710368-57.952815-66.044631L652.987538 592.55212zM693.215423 139.680156l80.031913-67.547397 20.306605 21.501111c11.983594 13.833152 19.304761 27.666304 20.653397 43.002222 0.539454 6.126661-0.038532 16.877216-1.541298 35.29573l-20.422202 222.602003c-2.04222 29.16907-7.244102 39.919625-24.198383 56.796841l-45.352702 42.963689-57.336296-58.33814L693.215423 139.680156z\" />\n </svg>\n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M323.634639 438.182194l-63.990551 60.248634L231.371831 468.306511c-14.854274-15.04326-23.849993-31.636203-25.172892-46.679463-0.52916-5.971947 0.037797-16.555145 0.226783-31.636203L236.625633 63.234608 303.375374 0l53.70973 63.234608L323.634639 438.182194zM647.064729 451.713569l55.108224 61.76052-73.175255 58.736749L380.557126 572.210837c-13.569172 0-22.602687 0-27.251735-1.511885-13.531375 0-30.766868-7.52163-38.968847-15.04326l-38.175107-40.631921 68.261627-63.272405L647.064729 451.751366zM738.533798 963.751366l-65.502436 60.248634-54.957035-60.248634 33.563856-373.511295 64.255131-57.224863 56.204341 57.224863L738.533798 963.751366zM784.41952 438.182194l-65.502436 60.248634-53.596338-61.76052 32.20316-371.923815L764.160256 0l53.860918 64.746493L784.41952 438.182194z\" />\n </svg>\n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M344.615008 435.956216l-65.543709 58.33814-28.899343-32.213134c-15.181788-15.335918-22.657085-30.710368-24.121318-47.549052-0.539454-6.165193-1.194506-13.833152-0.462389-23.080942l33.369108-373.032714 111.782657 119.720343L344.615008 435.956216zM627.828565 901.158566l64.541865 70.629993-31.249822 29.16907c-18.341449 18.418514-34.833341 23.042409-70.129071 23.042409L293.174178 1024.000039l-57.413361-59.879438 68.163916-62.962034L627.828565 901.158566zM395.477851 122.841472 281.884168 0l449.789368 0 57.798685 64.503333-68.549241 58.33814L395.477851 122.841472zM634.571745 451.330666c36.837029 0 41.730651 3.044064 68.818968 32.290199l27.12685 29.16907L657.575622 574.133606 408.887146 574.133606c-47.587584 0-58.761997-4.585362-84.077821-30.710368l-27.12685-29.16907 71.246513-62.962034L634.571745 451.292134zM678.88407 589.508056l68.433643-59.879438 30.325043 30.710368c11.829464 12.253321 19.535956 30.710368 20.768994 44.504988 0.655052 7.667959 0.192662 19.959813-0.115597 33.792965l-18.726774 207.227552c-2.928467 36.837029-11.790932 58.376672-26.047941 70.629993l-42.693962 38.378327-57.837218-64.503333L678.88407 589.508056z\" />\n </svg>\n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M326.20594 885.784116l-75.562148 66.006098-27.280979-30.710368c-11.945062-13.756087-17.493735-24.545175-18.572644-36.837029-0.539454-6.165193 0.038532-16.877216 0.770649-26.125006l23.119474-262.521628 70.976785-66.006098 52.558271 56.796841L326.20594 885.784116zM366.703552 435.956216l-65.505177 58.33814-57.336296-58.33814 22.541487-268.648289c3.467921-30.710368 8.515673-43.002222 29.939719-61.420736l37.068223-32.251666 59.378516 64.503333L366.703552 435.956216zM649.955642 901.158566l63.116164 72.171292-25.624084 23.003877c-25.624084 23.042409-39.033379 27.666304-82.0356 27.666304L372.059564 1024.000039c-50.670181 0-58.607867-3.082597-80.686964-27.666304l-21.9635-23.003877 79.646588-72.171292L649.955642 901.158566zM659.742886 451.330666c30.710368 0 40.15082 3.044064 60.611554 26.125006l29.16907 35.334263L679.664166 574.133606 377.222913 574.133606l-57.56749-61.382204 68.318046-61.459269L659.742886 451.292134zM414.522331 122.841472 352.061219 58.33814l35.411328-33.754432C407.393827 6.126661 422.19029 0 459.027319 0l293.231996 0 60.495957 59.879438-71.246513 62.962034L414.522331 122.841472zM700.972615 589.508056l65.659306-56.796841 35.44986 36.837029c11.829464 12.253321 15.567113 19.959813 16.761619 33.754432 0.809182 9.209257 0.886247 27.666304-0.732117 44.504988l-17.5708 202.64219c-4.469765 36.875561-10.789088 52.211479-32.097536 72.171292l-35.411328 33.792965-59.648243-67.585929L700.972615 589.508056z\" />\n </svg> \n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M303.741413 121.565204 247.305873 66.84561 314.380275 0l445.116258 0L624.28003 121.565204 303.741413 121.565204zM607.158707 568.168615l67.989573-56.24488 53.537499 56.24488-35.462873 393.485365-64.443286 62.307887L571.695834 961.692113 607.158707 568.168615zM644.528186 144.330081l132.165934-121.565204-37.369479 423.838534-64.176361 65.320325-57.350711-65.320325L644.528186 144.330081z\" />\n </svg> \n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M303.95 890.37l-75.717 64.503-29.169-35.334c-8.477-9.21-14.18-21.502-15.374-35.296-0.54-6.165 0.346-13.795 1.194-21.501l19.652-231.812c2.735-21.5 8.9-38.416 21.655-50.631l52.52-49.13 52.288 53.715-27.05 305.485z m40.227-452.872l-64.118 56.796-30.44-32.213c-13.525-13.794-22.773-32.251-24.006-46.046-0.655-7.668 0.077-16.877 0.655-27.666l18.573-208.77c2.042-29.168 8.63-41.422 29.785-62.923l37.993-39.92 57.953 66.007-26.395 294.735z m289.263 463.66l61.614 72.172-31.366 27.628c-21.27 19.96-30.248 23.042-70.129 23.042H337.164c-38.378 0-54.138-4.624-69.55-23.042l-23.775-26.125 82.613-73.674H633.44z m40.46-449.827l56.18 62.962-68.434 59.84H356.122l-57.452-59.879 68.203-62.962h307.026zM393.421 122.84l-60.92-64.503 30.941-32.252C381.67 6.126 394.963 0 421.05 0h277.858c24.584 0 38.918 6.127 54.485 26.086l28.822 30.75-80.224 66.005H393.422z m285.294 471.252l68.318-61.382 33.793 35.296c10.134 10.75 15.952 24.545 17.301 39.92 0.81 9.17 0.077 18.418-0.54 29.169l-20.036 227.187c-0.463 12.292-2.736 21.501-3.892 26.086-2.273 9.21-7.707 16.916-23.39 30.71l-38.378 35.335-59.494-66.045 26.318-296.276z m40.228-452.872l78.683-66.006 25.547 29.17c10.288 12.291 15.953 24.583 17.032 36.836 0.655 7.668-0.193 15.336-0.925 24.584L820.515 389.91c-4.315 38.378-12.06 55.294-33.446 73.713l-36.952 33.754-57.452-59.88 26.279-296.276z\" />\n </svg> \n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M323.039165 434.45345 258.921157 491.250291l-36.875561-35.334263c-11.829464-12.214789-15.721242-21.462578-16.800151-33.754432-0.924779-10.712023-1.001844-29.16907 0.577987-46.046286l17.5708-202.64219c4.469765-36.837029 10.789088-52.172946 32.097536-72.171292l35.411328-33.754432 59.609711 67.547397L323.039165 434.45345zM609.489449 901.158566l61.035412 66.006098-34.024159 32.251666c-19.76715 19.959813-34.717744 24.583707-71.554772 24.583707L271.752465 1024.000039l-60.495957-59.879438 71.246513-62.962034L609.489449 901.158566zM364.423024 574.133606c-30.710368 0-40.343482-4.585362-60.765684-27.627772l-29.16907-35.29573 69.974941-59.91797 302.441253 0 57.451893 59.91797L636.153909 574.133606 364.423024 574.133606zM374.056138 122.841472 311.055571 52.172946l25.508486-24.583707C362.149609 4.585362 374.056138 0 418.561125 0l233.352558 0c50.631648 0 58.607867 3.044064 80.686964 27.627772l22.11763 24.583707-79.800718 70.629993L374.056138 122.841472zM657.423825 589.508056l68.279513-61.420736 54.523426 61.420736-22.695617 267.145523c-3.313791 32.213134-8.515673 42.963689-29.901186 61.382204l-36.952626 33.792965-59.494113-66.006098L657.423825 589.508056zM697.767307 138.17739l75.562148-66.044631 27.396577 32.251666c11.829464 12.291854 17.493735 24.583707 18.418514 35.29573 0.693584 7.706491-0.15413 15.37445-0.770649 26.125006l-23.350669 259.400499-70.591461 70.629993-52.712401-58.33814L697.767307 138.17739z\" />\n </svg> \n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: translate(30%,40%);\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M488.57088 403.06688h108.544l-64.512 236.544h-77.824l33.792-236.544z\" />\n </svg> \n \n <svg class=\"icon\" width=\"48px\" height=\"48px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: translate(30%,0);\">\n <path fill=\"").concat(this.byteVModel.textStyle.value.color, "\" d=\"M444.324 1001.412h135.529v-135.53H444.323z\" />\n </svg> \n ");
span.appendChild(i);
li.appendChild(span); // this.componentContainer.firstChild.append(li)
this.digitalRollerContainer.append(li);
} //创建单位
this.unitSpan = document.createElement('span');
this.unitSpan.className = 'BTV-number-unitSpan';
this.digitalRollerContainer.append(this.unitSpan);
} //创建翻牌器的容器
}, {
key: "createContainer",
value: function createContainer(componentContainer) {
CssUtil.css(componentContainer, {
//display: 'flex',
//'justify-content': 'center',
padding: '10px',
'box-sizing': 'border-box',
overflow: 'inherit'
});
var div = document.createElement('i');
div.className = 'BTV-digitalRoller-container';
componentContainer.innerHTML = '';
componentContainer.appendChild(div);
CssUtil.css(div, {
height: '90px',
'list-style': 'none',
'writing-mode': 'vertical-lr',
'text-orientation': 'upright',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none',
'-khtml-user-select': 'none',
'user-select': 'none',
'transform-origin': 'left top'
});
this.digitalRollerContainer = div;
}
/*
* data - 数据 (支持对象和纯数字及字符串数字)
* {
* value: 9527,
* unit: '万元'
* }
* 或 纯数字'9527'
* decoratorCallBack - 装饰回调函数,子类继承的方法中使用了
* */
}, {
key: "setData",
value: function setData(data, decoratorCallBack) {
var _this2 = this;
//如果两次数据相等,为了让翻牌器仍然有变化,
if (_JSON$stringify(this.data) == _JSON$stringify(data)) {
//如果是对象
var value = data instanceof Object ? data.value : data;
var unit = data instanceof Object ? data.unit : ''; //取小数位
var fot = String(value).split('.');
fot = fot[1] != undefined ? fot[1] : ''; //该值向上取整的10倍数作为最大值
var max = Util.number2TenMultiples(value, null, true, true); //该值1的10倍数作为最小值
var min = Number('1' + String(max).substr(1)); //生成该范围内的随机数(含小数位)
value = Math.random() * (value - 0 - min + 1) + min || 0;
value = value.toFixed(fot.length); //顶掉翻牌css
CssUtil.loadStyleString(".BTV-number-item span i{\n transition: none;\n }");
this.setData({
value: value,
unit: unit
}, decoratorCallBack); //重新设置该值
setTimeout(function () {
CssUtil.loadStyleString(".BTV-number-item span i{ transition: transform 1s ease-in-out; }");
_this2.setData(data, decoratorCallBack);
}, 1);
return;
}
_get(_getPrototypeOf(DigitalRollerElectronic.prototype), "setData", this).call(this, data);
var num = data; //如果是对象
if (data instanceof Object) {
num = data.value || 0;
this.unitSpan.innerHTML = data.unit || this.unitSpan.innerHTML;
}
num = (num + '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,'); //转换千分位
var arr = num.split(''); // 将其便变成数据
var numberItems = this.componentContainer.getElementsByClassName('BTV-item');
var obj = {
',': 10,
'，': 10,
'.': 11,
'·': 11,
'。': 11
};
for (var i = 0; i < numberItems.length; i++) {
var elem = numberItems[i];
var m = elem.closest('.BTV-number-item');
m.style.width = obj.hasOwnProperty(arr[i]) ? '20px' : '50px';
arr[i] = obj[arr[i]] || arr[i];
m.style.overflow = 'inherit';
m.style.margin = '0 4px';
decoratorCallBack === null || decoratorCallBack === void 0 ? void 0 : decoratorCallBack(m);
if (arr[i] == undefined) {
m.style.width = 0;
m.style.margin = 0;
m.style.overflow = 'hidden';
}
var per = isNaN(arr[i] * (100 / 12)) ? 0 : arr[i] * (100 / 12);
elem.style.transform = 'translate(-50%, -' + per + '%)';
}
}
/*
* notMerge - 是否合并option
* */
}, {
key: "setOption",
value: function setOption() {
var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.byteVModel;
var notMerge = arguments.length > 1 ? arguments[1] : undefined;
if (notMerge) {
_get(_getPrototypeOf(DigitalRollerElectronic.prototype), "setOption", this).call(this, option, notMerge);
} else {
assign(this.byteVModel, option);
}
this.createNumberItem();
this.setComponentContainerStyle();
this.setData(this.data);
function assign(a, b) {
for (var k in b) {
if (a[k] instanceof Object) {
assign(a[k], b[k]);
} else {
_Object$assign(a, b);
}
}
}
}
}]);
return DigitalRollerElectronic;
}(OtherComponent);
export { DigitalRollerElectronic as default };