1 line
10 KiB
Plaintext
1 line
10 KiB
Plaintext
{"version":3,"file":"fs-copyable-07963571.mjs","sources":["../src/copyable/components/fs-copyable.vue","../src/copyable/components/fs-copyable.vue"],"sourcesContent":["<template>\n <div class=\"fs-copyable\" :class=\"{ 'show-on-hover': copyButton.showOnHover, inline: inline }\">\n <span v-clipboard=\"modelValue\" v-clipboard:success=\"onSuccess\" v-clipboard:error=\"onError\" class=\"pointer text\">\n <template v-if=\"$slots.default\">\n <slot></slot>\n </template>\n <template v-else>\n {{ modelValue }}\n </template>\n </span>\n\n <div v-if=\"modelValue != null && copyButton.show !== false\" class=\"copy-button\">\n <component\n :is=\"tagName\"\n v-clipboard=\"modelValue\"\n v-clipboard:success=\"onSuccess\"\n v-clipboard:error=\"onError\"\n class=\"pointer text\"\n v-bind=\"copyButton\"\n >\n {{ copyButton.text ?? \"复制\" }}\n </component>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref, Ref } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\nimport { merge } from \"lodash-es\";\n\ninterface CopyButton {\n show: boolean;\n size: string;\n showOnHover: boolean;\n text: string;\n [key: string]: any;\n}\n\n/**\n * fs-copyable\n * 可以点击复制文本\n * 通过默认插槽可以自定义文本主体\n */\nexport default defineComponent({\n name: \"FsCopyable\",\n props: {\n modelValue: {\n type: [String, Number, Boolean],\n default: undefined\n },\n /**\n * 复制按钮\n * show: 是否显示,默认true\n * text: 按钮文字\n * ...其他tag组件参数\n */\n button: {\n type: Object as PropType<CopyButton>,\n default() {\n return {};\n }\n },\n /**\n * 成功信息\n */\n successMessage: {\n type: [Boolean, String],\n default: true\n },\n /**\n * 错误时的信息\n */\n errorMessage: {\n type: [Boolean, String],\n default: true\n },\n\n inline: {\n type: Boolean,\n default: false\n }\n },\n emits: [\n \"update:modelValue\",\n /**\n * 成功事件\n */\n \"success\",\n /**\n * 失败事件\n */\n \"error\"\n ],\n setup(props: any, { emit, slots }) {\n const textInSlot = computed(() => {\n return slots.default != null;\n });\n const { ui } = useUi();\n const tagName: Ref<string> = ref(ui.tag.name);\n\n const copyButton = computed(() => {\n const defaultButton = {\n text: \"复制\",\n size: \"small\",\n [ui.tag.type]: \"success\",\n show: true,\n showOnHover: false\n };\n return merge({}, defaultButton, props.button);\n });\n function onSuccess() {\n emit(\"success\");\n if (props.successMessage) {\n ui.message.success(props.successMessage === true ? \"复制成功\" : props.successMessage);\n }\n }\n function onError() {\n emit(\"error\");\n if (props.errorMessage) {\n ui.message.error(props.errorMessage === true ? \"复制失败\" : props.errorMessage);\n }\n }\n return {\n textInSlot,\n tagName,\n copyButton,\n onSuccess,\n onError\n };\n }\n});\n</script>\n<style lang=\"less\">\n.fs-copyable {\n position: relative;\n display: flex;\n align-items: center;\n &.inline {\n display: inline-flex;\n }\n .pointer {\n cursor: pointer;\n }\n .text {\n white-space: nowrap; /* 确保文本在一行内显示 */\n overflow: hidden; /* 隐藏溢出的内容 */\n text-overflow: ellipsis; /* 使用省略号表示文本溢出 */\n flex: 1;\n }\n .copy-button {\n //position: absolute;\n //right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 10px;\n }\n &.show-on-hover {\n .copy-button {\n display: none;\n }\n &:hover {\n .copy-button {\n display: block;\n }\n }\n }\n}\n</style>\n","<template>\n <div class=\"fs-copyable\" :class=\"{ 'show-on-hover': copyButton.showOnHover, inline: inline }\">\n <span v-clipboard=\"modelValue\" v-clipboard:success=\"onSuccess\" v-clipboard:error=\"onError\" class=\"pointer text\">\n <template v-if=\"$slots.default\">\n <slot></slot>\n </template>\n <template v-else>\n {{ modelValue }}\n </template>\n </span>\n\n <div v-if=\"modelValue != null && copyButton.show !== false\" class=\"copy-button\">\n <component\n :is=\"tagName\"\n v-clipboard=\"modelValue\"\n v-clipboard:success=\"onSuccess\"\n v-clipboard:error=\"onError\"\n class=\"pointer text\"\n v-bind=\"copyButton\"\n >\n {{ copyButton.text ?? \"复制\" }}\n </component>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, PropType, ref, Ref } from \"vue\";\nimport { useUi } from \"@fast-crud/fast-crud\";\nimport { merge } from \"lodash-es\";\n\ninterface CopyButton {\n show: boolean;\n size: string;\n showOnHover: boolean;\n text: string;\n [key: string]: any;\n}\n\n/**\n * fs-copyable\n * 可以点击复制文本\n * 通过默认插槽可以自定义文本主体\n */\nexport default defineComponent({\n name: \"FsCopyable\",\n props: {\n modelValue: {\n type: [String, Number, Boolean],\n default: undefined\n },\n /**\n * 复制按钮\n * show: 是否显示,默认true\n * text: 按钮文字\n * ...其他tag组件参数\n */\n button: {\n type: Object as PropType<CopyButton>,\n default() {\n return {};\n }\n },\n /**\n * 成功信息\n */\n successMessage: {\n type: [Boolean, String],\n default: true\n },\n /**\n * 错误时的信息\n */\n errorMessage: {\n type: [Boolean, String],\n default: true\n },\n\n inline: {\n type: Boolean,\n default: false\n }\n },\n emits: [\n \"update:modelValue\",\n /**\n * 成功事件\n */\n \"success\",\n /**\n * 失败事件\n */\n \"error\"\n ],\n setup(props: any, { emit, slots }) {\n const textInSlot = computed(() => {\n return slots.default != null;\n });\n const { ui } = useUi();\n const tagName: Ref<string> = ref(ui.tag.name);\n\n const copyButton = computed(() => {\n const defaultButton = {\n text: \"复制\",\n size: \"small\",\n [ui.tag.type]: \"success\",\n show: true,\n showOnHover: false\n };\n return merge({}, defaultButton, props.button);\n });\n function onSuccess() {\n emit(\"success\");\n if (props.successMessage) {\n ui.message.success(props.successMessage === true ? \"复制成功\" : props.successMessage);\n }\n }\n function onError() {\n emit(\"error\");\n if (props.errorMessage) {\n ui.message.error(props.errorMessage === true ? \"复制失败\" : props.errorMessage);\n }\n }\n return {\n textInSlot,\n tagName,\n copyButton,\n onSuccess,\n onError\n };\n }\n});\n</script>\n<style lang=\"less\">\n.fs-copyable {\n position: relative;\n display: flex;\n align-items: center;\n &.inline {\n display: inline-flex;\n }\n .pointer {\n cursor: pointer;\n }\n .text {\n white-space: nowrap; /* 确保文本在一行内显示 */\n overflow: hidden; /* 隐藏溢出的内容 */\n text-overflow: ellipsis; /* 使用省略号表示文本溢出 */\n flex: 1;\n }\n .copy-button {\n //position: absolute;\n //right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: 10px;\n }\n &.show-on-hover {\n .copy-button {\n display: none;\n }\n &:hover {\n .copy-button {\n display: block;\n }\n }\n }\n}\n</style>\n"],"names":["_sfc_main","defineComponent","props","emit","slots","textInSlot","computed","ui","useUi","tagName","ref","copyButton","defaultButton","merge","onSuccess","onError","_hoisted_2","_resolveDirective","_normalizeClass","_ctx","_openBlock","_createElementBlock","_hoisted_1","modelValue","_directive_clipboard","_withDirectives","_createBlock","_mergeProps","_withCtx"],"mappings":";;;;AA4CA,MAAAA,IAAeC,EAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,OAAO;AAAA,MAC9B,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AACR,eAAO;MACT;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAgB;AAAA,MACd,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAIA,cAAc;AAAA,MACZ,MAAM,CAAC,SAAS,MAAM;AAAA,MACtB,SAAS;AAAA,IACX;AAAA,IAEA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA,MAAMC,GAAY,EAAE,MAAAC,GAAM,OAAAC,KAAS;AAC3B,UAAAC,IAAaC,EAAS,MACnBF,EAAM,WAAW,IACzB,GACK,EAAE,IAAAG,MAAOC,KACTC,IAAuBC,EAAIH,EAAG,IAAI,IAAI,GAEtCI,IAAaL,EAAS,MAAM;AAChC,YAAMM,IAAgB;AAAA,QACpB,MAAM;AAAA,QACN,MAAM;AAAA,QACN,CAACL,EAAG,IAAI,IAAI,GAAG;AAAA,QACf,MAAM;AAAA,QACN,aAAa;AAAA,MAAA;AAEf,aAAOM,EAAM,CAAI,GAAAD,GAAeV,EAAM,MAAM;AAAA,IAAA,CAC7C;AACD,aAASY,IAAY;AACnB,MAAAX,EAAK,SAAS,GACVD,EAAM,kBACRK,EAAG,QAAQ,QAAQL,EAAM,mBAAmB,KAAO,SAASA,EAAM,cAAc;AAAA,IAEpF;AACA,aAASa,IAAU;AACjB,MAAAZ,EAAK,OAAO,GACRD,EAAM,gBACRK,EAAG,QAAQ,MAAML,EAAM,iBAAiB,KAAO,SAASA,EAAM,YAAY;AAAA,IAE9E;AACO,WAAA;AAAA,MACL,YAAAG;AAAA,MACA,SAAAI;AAAA,MACA,YAAAE;AAAA,MACA,WAAAG;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;qCCxH+DC,IAAM;AAAA,EAAA,KAAA;AAAA;;;YAVpEC,EAsBM,WAAA;;IArBJ,OAAAC,EAAA,CAAA,eAAA,EAAA,iBAOOC,EAPP,WAOO,aAAA,QAAAA,EAAA,OAAA,CAAA,CAAA;AAAA,EAAA,GAAA;AAAA,OALHC,EAAa,GAAAC,EAAA,QAAAC,GAAA;AAAA,MAGVC,EAAAA,OAAAA,UAAAA,EAAAA,EAAAA,QAAAA,WAAAA,EAAAA,KAAAA,EAAAA,CAAAA,KAAAA,KAAAA,EAAAA,GAAAA,EAAAA,KAAAA,KAAAA;AAAAA;;;UAL2ER,EAAP,UAAA;AAAA,MAAA,CAAAS,GAAAL,EAAA,WAAA,SAAA;AAAA,MAShEI,CAAAA,GAAUJ,EAAYR,SAAW,OAAA;AAAA,IAAA,CAAA;AAAA,IAC1CQ,EAAA,cAAA,QAAAA,EAAA,WAAA,SASY,MADmBC,EAAA,GAAAC,EAAA,OAAAL,GAAA;AAAA,MAAAS,GAAAL,EAAA,GAAAM,EAA1Bf,EAAeQ,EAAA,OAAA,GAAAQ,EAAA,EAAA,OAAA,eAAA,GAAAR,EAAA,UAAA,GAAA;AAAA,QAAA,SAAAS,EAAA,MAAA;AAAA;;;;YAJCb,EAAP,UAAA;AAAA,QAAA,CAAAS,GAAAL,EAAA,WAAA,SAAA;AAAA;;;;;;"} |