mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-09 07:22:44 +08:00
119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<template>
|
||
<el-dialog title="代码预览" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||
:center=true>
|
||
<pre style="max-height: 60vh;">
|
||
<code v-html="formatCode"></code>
|
||
</pre>
|
||
<div>
|
||
<center style="color: #666; font-size: 12px;">使用代码前请确认相应的组件库已集成至项目</center>
|
||
</div>
|
||
<span slot="footer">
|
||
|
||
<el-tooltip effect="dark" content="拷贝" placement="left">
|
||
<img class="round-icon" :src="iconCopy" alt="" @click="copyCheck">
|
||
</el-tooltip>
|
||
<el-tooltip effect="dark" content="下载" placement="right">
|
||
<img class="round-icon" :src="iconDownload" alt="" @click="download">
|
||
</el-tooltip>
|
||
|
||
</span>
|
||
</el-dialog>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import './prism.css'
|
||
import Prism from "prismjs";
|
||
import prettier from "prettier/standalone";
|
||
import parserHtml from "prettier/parser-html";
|
||
import copy from 'copy-to-clipboard';
|
||
import { saveAs } from "file-saver";
|
||
|
||
export default {
|
||
props: ['rawCode', 'codeDialogVisible'],
|
||
|
||
data() {
|
||
return {
|
||
// 在此自动生成
|
||
|
||
iconCopy: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/copy-outline.svg"),
|
||
iconDownload: ("https://static.imonkey.xueersi.com/download/vcc-resource/icon/code-download-outline.svg"),
|
||
};
|
||
},
|
||
beforeCreate() { },
|
||
created() { },
|
||
beforeMount() { },
|
||
mounted() { },
|
||
beforeUpdate() { },
|
||
updated() { },
|
||
destoryed() { },
|
||
methods: {
|
||
// 在此自动生成
|
||
request() {
|
||
// 网络请求，可选
|
||
},
|
||
handleClose() {
|
||
this.$emit("update:codeDialogVisible", false);
|
||
},
|
||
copyCheck() {
|
||
this.copy();
|
||
},
|
||
copy() {
|
||
if (copy(this.prettyCode)) {
|
||
this.$message.success("代码已复制到剪贴板");
|
||
} else {
|
||
this.$message.error("代码复制有点问题?");
|
||
}
|
||
},
|
||
download() {
|
||
let blob = new Blob([this.prettyCode], {
|
||
type: "text/plain;charset=utf-8",
|
||
});
|
||
saveAs(blob, "VueComponent.vue");
|
||
},
|
||
|
||
},
|
||
watch: {
|
||
codeDialogVisible(newValue) {
|
||
if (newValue) {
|
||
|
||
} else {
|
||
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
prettyCode() {
|
||
return prettier.format(this.rawCode, {
|
||
parser: "html",
|
||
plugins: [parserHtml],
|
||
vueIndentScriptAndStyle: true,
|
||
});
|
||
},
|
||
|
||
formatCode() {
|
||
// 代码格式化工具需要赓续为支持Vue的，当前prettier对js代码不够友好
|
||
return Prism.highlight(this.prettyCode, Prism.languages.markup, "html");
|
||
}
|
||
},
|
||
fillter: {},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 在此自动生成 */
|
||
|
||
::v-deep .el-dialog__body {
|
||
padding: 0 30px !important;
|
||
}
|
||
|
||
.round-icon {
|
||
background: #4dba87;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
padding: 10px;
|
||
margin-left: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
</style> |