cione-comp-lib/es/packages/co-Button-std/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, toRef, computed, toRefs, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createCommentVNode } from "vue";
import { handleEventCallback } from "../tools.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoButtonStd",
  props: {
    type: {
      type: String,
      default: "primary"
    },
    plain: {
      type: String
    },
    txt: {
      type: String
    },
    round: {
      type: String
    },
    disabled: {
      type: String
    },
    icon: {
      type: String
    },
    fontSize: {
      type: Number
    },
    borderRadius: {
      type: Number
    },
    color: {
      type: String
    },
    backgroundColor: {
      type: String
    },
    border: {
      type: String
    },
    borderColor: {
      type: String
    },
    imgWidth: {
      type: String
    },
    imgHeight: {
      type: String
    },
    imgBorderRadius: {
      type: Number
    },
    order: {
      type: Boolean
    },
    inlineBlock: {
      type: Boolean
    },
    imgMarginL: {
      type: Number
    },
    imgMarginR: {
      type: Number
    },
    list: {
      type: Array,
      default: []
    },
    margin: {
      type: Number,
      default: 5
    },
    __dataSource: {
      type: Object
    }
  },
  setup(props) {
    const check = ref();
    const orders = [0, 1];
    const list = toRef(props, "list");
    const cpStyle = computed(() => {
      let textlen = 0;
      if (list.value.length) {
        list.value.forEach((item) => {
          if (item.title.length > textlen)
            textlen = item.title.length;
        });
      } else {
        textlen = props.txt.length;
      }
      return {
        "--color": `${props.color}`,
        "--border": `${props.border}px`,
        "--fontSize": `${props.fontSize}px`,
        "--borderColor": `${props.borderColor}`,
        "--borderRadius": `${props.borderRadius}px`,
        "--backgroundColor": `${props.backgroundColor}`,
        "--imgWidth": `${props.imgWidth}px`,
        "--imgHeight": `${props.imgHeight}px`,
        "--imgMarginL": `${props.imgMarginL}px`,
        "--imgMarginR": `${props.imgMarginR}px`,
        "--imgBorderRadius": `${props.imgBorderRadius}px`,
        "--order1": `${props.order ? orders[1] : orders[0]}`,
        "--order2": `${props.order ? orders[0] : orders[1]}`,
        "--inlineBlock": `${props.inlineBlock ? "100%" : props.fontSize * textlen + "px"}`,
        "--margin": `${list.value.length ? props.margin : 0}px`
      };
    });
    const btnClick = (item, index) => {
      if (item) {
        check.value = index;
        handleEventCallback(props.__dataSource, "onclick", {
          item,
          index
        });
        return;
      }
      handleEventCallback(props.__dataSource, "onclick");
    };
    return {
      ...toRefs(props),
      list,
      check,
      cpStyle,
      btnClick
    };
  }
});
const _hoisted_1 = {
  key: 0,
  class: "buttonList"
};
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "txt" };
const _hoisted_4 = {
  key: 0,
  class: "img"
};
const _hoisted_5 = ["src"];
const _hoisted_6 = {
  key: 1,
  class: "buttons"
};
const _hoisted_7 = { class: "txt" };
const _hoisted_8 = {
  key: 0,
  class: "img"
};
const _hoisted_9 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-button-std",
    style: normalizeStyle(_ctx.cpStyle)
  }, [
    _ctx.list.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
        return openBlock(), createElementBlock("div", {
          class: normalizeClass(["button", {
            btnMarginL: index == 0,
            btnMarginR: index == _ctx.list.length - 1,
            buttonHover: index == _ctx.check
          }]),
          onClick: ($event) => _ctx.btnClick(item, index)
        }, [
          createElementVNode("div", _hoisted_3, toDisplayString(item.title), 1),
          item.imgSrc ? (openBlock(), createElementBlock("div", _hoisted_4, [
            createElementVNode("img", {
              src: item.imgSrc
            }, null, 8, _hoisted_5)
          ])) : createCommentVNode("", true)
        ], 10, _hoisted_2);
      }), 256))
    ])) : createCommentVNode("", true),
    !_ctx.list.length ? (openBlock(), createElementBlock("div", _hoisted_6, [
      createElementVNode("div", {
        class: "button",
        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.btnClick())
      }, [
        createElementVNode("div", _hoisted_7, toDisplayString(_ctx.txt), 1),
        _ctx.icon ? (openBlock(), createElementBlock("div", _hoisted_8, [
          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_9)
        ])) : createCommentVNode("", true)
      ])
    ])) : createCommentVNode("", true)
  ], 4);
}
var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c57f2534"]]);
export { Button as default };