<template>
|
<div>
|
<div class="v-json-box">
|
<CodeEditor :value="editorJson" ref="myEditor" :mode="MODE.JSON" />
|
</div>
|
<div class="copy-btn-box">
|
<a-button
|
@click="handleCopyJson"
|
type="primary"
|
class="copy-btn"
|
data-clipboard-action="copy"
|
:data-clipboard-text="editorJson"
|
>
|
复制数据
|
</a-button>
|
<a-button @click="handleExportJson" type="primary">导出代码</a-button>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { defineComponent, reactive, toRefs, unref } from 'vue';
|
import { CodeEditor, MODE } from '/@/components/CodeEditor';
|
|
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
import { useMessage } from '/@/hooks/web/useMessage';
|
export default defineComponent({
|
name: 'PreviewCode',
|
components: {
|
CodeEditor,
|
},
|
props: {
|
fileFormat: {
|
type: String,
|
default: 'json',
|
},
|
editorJson: {
|
type: String,
|
default: '',
|
},
|
},
|
setup(props) {
|
const state = reactive({
|
visible: false,
|
});
|
|
const exportData = (data: string, fileName = `file.${props.fileFormat}`) => {
|
let content = 'data:text/csv;charset=utf-8,';
|
content += data;
|
const encodedUri = encodeURI(content);
|
const actions = document.createElement('a');
|
actions.setAttribute('href', encodedUri);
|
actions.setAttribute('download', fileName);
|
actions.click();
|
};
|
|
const handleExportJson = () => {
|
exportData(props.editorJson);
|
};
|
const { clipboardRef, copiedRef } = useCopyToClipboard();
|
const { createMessage } = useMessage();
|
|
const handleCopyJson = () => {
|
// 复制数据
|
const value = props.editorJson;
|
if (!value) {
|
createMessage.warning('代码为空！');
|
return;
|
}
|
clipboardRef.value = value;
|
if (unref(copiedRef)) {
|
createMessage.warning('复制成功！');
|
}
|
};
|
|
return {
|
...toRefs(state),
|
exportData,
|
handleCopyJson,
|
handleExportJson,
|
MODE,
|
};
|
},
|
});
|
</script>
|
|
<style lang="less" scoped>
|
// modal复制按钮样式
|
.copy-btn-box {
|
padding-top: 8px;
|
text-align: center;
|
|
.copy-btn {
|
margin-right: 8px;
|
}
|
}
|
</style>
|
