@cqmcui/cqmcui/dist/packages/_es/ActionSheet.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { c as createComponent } from "./component-81a4c1d0.js";
import { useSlots, computed, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, normalizeStyle } from "vue";
import { P as Popup, p as popupProps } from "./index-c55ad69e.js";
import { Loading } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
import "./Overlay.js";
const { componentName, create } = createComponent("action-sheet");
const _sfc_main = create({
  components: {
    [Popup.name]: Popup,
    Loading
  },
  props: {
    ...popupProps,
    cancelTxt: {
      type: String,
      default: ""
    },
    optionTag: {
      type: String,
      default: "name"
    },
    optionSubTag: {
      type: String,
      default: "subname"
    },
    chooseTagValue: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#ee0a24"
    },
    description: {
      type: String,
      default: ""
    },
    menuItems: {
      type: Array,
      default: () => []
    },
    closeAbled: {
      type: Boolean,
      default: true
    }
  },
  emits: ["cancel", "close", "choose", "update:visible"],
  setup(props, { emit }) {
    const slotDefault = !!useSlots().default;
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true
      };
    });
    const isHighlight = (item) => {
      return props.chooseTagValue && props.chooseTagValue === item[props.optionTag] ? props.color : "";
    };
    const cancelActionSheet = () => {
      emit("cancel");
      emit("update:visible", false);
    };
    const chooseItem = (item, index2) => {
      if (!item.disable && !item.loading) {
        emit("choose", item, index2);
        emit("update:visible", false);
      }
    };
    const close = (e) => {
      emit("close", e);
      emit("update:visible", false);
    };
    return {
      slotDefault,
      isHighlight,
      cancelActionSheet,
      chooseItem,
      close,
      classes
    };
  }
});
const _hoisted_1 = {
  key: 0,
  class: "cqmc-action-sheet__title"
};
const _hoisted_2 = { key: 1 };
const _hoisted_3 = {
  key: 0,
  class: "cqmc-action-sheet__item cqmc-action-sheet__desc"
};
const _hoisted_4 = {
  key: 1,
  class: "cqmc-action-sheet__menu"
};
const _hoisted_5 = ["onClick"];
const _hoisted_6 = { key: 1 };
const _hoisted_7 = { class: "cqmc-action-sheet__subdesc" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Loading = resolveComponent("Loading");
  const _component_nut_popup = resolveComponent("cqmc-popup");
  return openBlock(), createBlock(_component_nut_popup, {
    visible: _ctx.visible,
    position: "bottom",
    round: "",
    onClickOverlay: _ctx.close,
    closeOnClickOverlay: _ctx.closeAbled
  }, {
    default: withCtx(() => [
      createElementVNode("view", {
        class: normalizeClass(_ctx.classes)
      }, [
        _ctx.title ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
        renderSlot(_ctx.$slots, "default"),
        !_ctx.slotDefault ? (openBlock(), createElementBlock("view", _hoisted_2, [
          _ctx.description ? (openBlock(), createElementBlock("view", _hoisted_3, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true),
          _ctx.menuItems.length ? (openBlock(), createElementBlock("view", _hoisted_4, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, (item, index2) => {
              return openBlock(), createElementBlock("view", {
                class: normalizeClass(["cqmc-action-sheet__item", {
                  "cqmc-action-sheet__item--disabled": item.disable,
                  "cqmc-action-sheet__item--loading": item.loading
                }]),
                style: normalizeStyle({ color: _ctx.isHighlight(item) || item.color }),
                key: index2,
                onClick: ($event) => _ctx.chooseItem(item, index2)
              }, [
                item.loading ? (openBlock(), createBlock(_component_Loading, {
                  key: 0,
                  name: "loading"
                })) : (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(item[_ctx.optionTag]), 1)),
                createElementVNode("view", _hoisted_7, toDisplayString(item[_ctx.optionSubTag]), 1)
              ], 14, _hoisted_5);
            }), 128))
          ])) : createCommentVNode("", true),
          _ctx.cancelTxt ? (openBlock(), createElementBlock("view", {
            key: 2,
            class: "cqmc-action-sheet__cancel",
            onClick: _cache[0] || (_cache[0] = (...args) => _ctx.cancelActionSheet && _ctx.cancelActionSheet(...args))
          }, toDisplayString(_ctx.cancelTxt), 1)) : createCommentVNode("", true)
        ])) : createCommentVNode("", true)
      ], 2)
    ]),
    _: 3
  }, 8, ["visible", "onClickOverlay", "closeOnClickOverlay"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};