@oiij/naive-ui
Version:
Some Composable Functions And Components for Vue 3
50 lines (48 loc) • 1.72 kB
JavaScript
import MageCopyFill_default from "../icons/MageCopyFill.js";
import { useClipboard } from "@vueuse/core";
import { createBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
import { NButton, NTooltip } from "naive-ui";
//#region src/components/copy-button/CopyButton.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "CopyButton",
props: {
value: {},
config: {},
tooltipProps: {},
buttonProps: {}
},
emits: ["copied"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const { copied, copy } = useClipboard({
source: __props.value,
...__props.config
});
watch(copied, () => {
if (copied.value) emit("copied", __props.value);
});
function onClick(ev) {
ev.preventDefault();
copy();
}
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(NTooltip), normalizeProps(guardReactiveProps(__props.tooltipProps)), {
trigger: withCtx(() => [createElementVNode("div", {
style: { cursor: "pointer" },
onClick
}, [renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(NButton), mergeProps({
quaternary: "",
size: "tiny"
}, __props.buttonProps), {
icon: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(MageCopyFill_default)])]),
_: 3
}, 16)])])]),
default: withCtx(() => [renderSlot(_ctx.$slots, "tooltip", {}, () => [createTextVNode(toDisplayString(unref(copied) ? "复制成功" : "复制"), 1)])]),
_: 3
}, 16);
};
}
});
var CopyButton_default = _sfc_main;
//#endregion
export { CopyButton_default as default };