@ued_fpi/data-visual/dist/lib/ipes/src/common/IpesPercentBar.vue.js

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');
require('./IpesPercentBar.vue2.js');
const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');

/* unplugin-vue-components disabled */
const _sfc_main = {
    name: 'IpesPercentBar',
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },
    computed: {
        total() {
            return this.list.reduce((total, item) => {
                return total + item.value
            }, 0)
        },
    },
};

const _hoisted_1 = { class: "dv-ipes-percent-bar" };

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.list, (item, idx) => {
      return (vue.openBlock(), vue.createElementBlock("div", {
        key: idx,
        class: "percent-bar__inner",
        style: vue.normalizeStyle({ background: item.background, width: `${(item.value / $options.total) * 100}%` })
      }, null, 4))
    }), 128))
  ]))
}
const IpesPercentBar = /*#__PURE__*/_pluginVue_exportHelper.default(_sfc_main, [['render',_sfc_render]]);

exports.default = IpesPercentBar;