@gyenno/nutui-taro
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
234 lines (233 loc) • 7.01 kB
JavaScript
import { ref, onMounted, watch, computed, resolveComponent, openBlock, createBlock, normalizeStyle, withCtx, createElementVNode, normalizeClass, createElementBlock, renderSlot, Fragment, createTextVNode, toDisplayString, createCommentVNode, resolveDynamicComponent } from "vue";
import { e as isPromise, c as createComponent } from "./component-25dcca32.js";
import { P as Popup, p as popupProps } from "./index.taro-72b18dbf.js";
import Button from "./Button.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
import "./Overlay.js";
import "@nutui/icons-vue-taro";
import "@tarojs/taro";
const { componentName, create, translate } = createComponent("dialog");
const _sfc_main = create({
inheritAttrs: false,
components: {
[Popup.name]: Popup,
[Button.name]: Button
},
props: {
...popupProps,
closeOnClickOverlay: {
type: Boolean,
default: false
},
title: {
type: String,
default: ""
},
content: {
type: [String, Object],
default: ""
},
noFooter: {
type: Boolean,
default: false
},
noOkBtn: {
type: Boolean,
default: false
},
noCancelBtn: {
type: Boolean,
default: false
},
cancelText: {
type: String,
default: ""
},
okText: {
type: String,
default: ""
},
cancelAutoClose: {
type: Boolean,
default: true
},
textAlign: {
type: String,
default: "center"
},
closeOnPopstate: {
type: Boolean,
default: false
},
footerDirection: {
type: String,
default: "horizontal"
//vertical
},
customClass: {
type: String,
default: ""
},
popStyle: {
type: Object
},
beforeClose: {
type: Function
}
},
emits: ["update", "update:visible", "ok", "cancel", "opened", "closed"],
setup(props, { emit }) {
const showPopup = ref(props.visible);
onMounted(() => {
if (props.closeOnPopstate) {
window.addEventListener("popstate", function() {
closed("page");
});
}
});
watch(
() => props.visible,
(value) => {
showPopup.value = value;
if (value) {
emit("opened");
}
}
);
const classes = computed(() => {
return {
[componentName]: true,
[props.customClass]: true
};
});
const update = (val) => {
emit("update", val);
emit("update:visible", val);
};
const closed = (action) => {
if (props.beforeClose) {
const result = props.beforeClose(action);
if (isPromise(result)) {
result.then((bool) => {
if (bool) {
update(false);
emit("closed");
}
});
}
} else {
update(false);
emit("closed");
}
};
const onCancel = () => {
emit("cancel");
if (props.cancelAutoClose) {
closed("cancel");
}
};
const onOk = () => {
closed("ok");
emit("ok");
};
const contentStyle = computed(() => {
return {
textAlign: props.textAlign
};
});
return {
closed,
classes,
onCancel,
onOk,
showPopup,
contentStyle,
translate
};
}
});
const _hoisted_1 = {
key: 0,
class: "nut-dialog__header"
};
const _hoisted_2 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_nut_button = resolveComponent("nut-button");
const _component_nut_popup = resolveComponent("nut-popup");
return openBlock(), createBlock(_component_nut_popup, {
teleport: _ctx.teleport,
visible: _ctx.showPopup,
"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = $event),
"close-on-click-overlay": _ctx.closeOnClickOverlay,
"lock-scroll": _ctx.lockScroll,
"pop-class": _ctx.popClass,
"overlay-class": _ctx.overlayClass,
"overlay-style": _ctx.overlayStyle,
style: normalizeStyle(_ctx.popStyle),
round: "",
onClickOverlay: _ctx.closed,
onClickCloseIcon: _ctx.closed
}, {
default: withCtx(() => [
createElementVNode("view", {
class: normalizeClass(_ctx.classes)
}, [
_ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("view", _hoisted_1, [
_ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString(_ctx.title), 1)
], 64))
])) : createCommentVNode("", true),
createTextVNode(),
createElementVNode("view", {
class: "nut-dialog__content",
style: normalizeStyle(_ctx.contentStyle)
}, [
_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : typeof _ctx.content === "string" ? (openBlock(), createElementBlock("view", {
key: 1,
innerHTML: _ctx.content
}, null, 8, _hoisted_2)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.content), { key: 2 }))
], 4),
createTextVNode(),
!_ctx.noFooter ? (openBlock(), createElementBlock("view", {
key: 1,
class: normalizeClass(["nut-dialog__footer", { [_ctx.footerDirection]: _ctx.footerDirection }])
}, [
_ctx.$slots.footer ? renderSlot(_ctx.$slots, "footer", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
!_ctx.noCancelBtn ? (openBlock(), createBlock(_component_nut_button, {
key: 0,
size: "small",
plain: "",
type: "primary",
class: "nut-dialog__footer-cancel",
onClick: _ctx.onCancel
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true),
createTextVNode(),
!_ctx.noOkBtn ? (openBlock(), createBlock(_component_nut_button, {
key: 1,
size: "small",
type: "primary",
class: "nut-dialog__footer-ok",
onClick: _ctx.onOk
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
]),
_: 1
}, 8, ["onClick"])) : createCommentVNode("", true)
], 64))
], 2)) : createCommentVNode("", true)
], 2)
]),
_: 3
}, 8, ["teleport", "visible", "close-on-click-overlay", "lock-scroll", "pop-class", "overlay-class", "overlay-style", "style", "onClickOverlay", "onClickCloseIcon"]);
}
const index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index_taro as default
};