@ued_fpi/data-visual/dist/es/ipes/src/common/IpesPercentBar.vue.mjs

<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" />

import { openBlock, createElementBlock, Fragment, renderList, normalizeStyle } from 'vue';
import './IpesPercentBar.vue2.mjs';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';

/* 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 (openBlock(), createElementBlock("div", _hoisted_1, [
    (openBlock(true), createElementBlock(Fragment, null, renderList($props.list, (item, idx) => {
      return (openBlock(), createElementBlock("div", {
        key: idx,
        class: "percent-bar__inner",
        style: normalizeStyle({ background: item.background, width: `${(item.value / $options.total) * 100}%` })
      }, null, 4))
    }), 128))
  ]))
}
const IpesPercentBar = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render]]);

export { IpesPercentBar as default };