|
|
@ -6,60 +6,37 @@ |
|
|
|
<el-button @click="copy">复制</el-button> |
|
|
|
</div> |
|
|
|
<el-tabs v-model="activeName"> |
|
|
|
<el-tab-pane :label="key" :name="key" v-for="(item, key) in previewCode" :key="key"> |
|
|
|
<div class="tab-info" :id="key"></div> |
|
|
|
<el-tab-pane v-for="(item, key) in previewCode" :key="key" :label="key" :name="key"> |
|
|
|
<div :id="key" class="tab-info" /> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import marked from "marked"; |
|
|
|
import hljs from "highlight.js"; |
|
|
|
import marked from 'marked' |
|
|
|
import hljs from 'highlight.js' |
|
|
|
// import 'highlight.js/styles/atelier-cave-light.css'; |
|
|
|
import "highlight.js/styles/atelier-plateau-light.css"; |
|
|
|
import 'highlight.js/styles/atelier-plateau-light.css' |
|
|
|
export default { |
|
|
|
props: { |
|
|
|
previewCode: { |
|
|
|
type: Object, |
|
|
|
default() { |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeName: "", |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
selectText() { |
|
|
|
const element = document.getElementById(this.activeName); |
|
|
|
if (document.body.createTextRange) { |
|
|
|
let range = document.body.createTextRange(); |
|
|
|
range.moveToElementText(element); |
|
|
|
range.select(); |
|
|
|
} else if (window.getSelection) { |
|
|
|
let selection = window.getSelection(); |
|
|
|
let range = document.createRange(); |
|
|
|
range.selectNodeContents(element); |
|
|
|
selection.removeAllRanges(); |
|
|
|
selection.addRange(range); |
|
|
|
} else { |
|
|
|
alert("none"); |
|
|
|
} |
|
|
|
}, |
|
|
|
copy() { |
|
|
|
this.selectText(); |
|
|
|
document.execCommand("copy"); |
|
|
|
this.$message.success("复制成功"); |
|
|
|
}, |
|
|
|
activeName: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
marked.setOptions({ |
|
|
|
renderer: new marked.Renderer(), |
|
|
|
highlight: function (code) { |
|
|
|
return hljs.highlightAuto(code).value; |
|
|
|
highlight: function(code) { |
|
|
|
return hljs.highlightAuto(code).value |
|
|
|
}, |
|
|
|
pedantic: false, |
|
|
|
gfm: true, |
|
|
@ -68,16 +45,39 @@ export default { |
|
|
|
sanitize: false, |
|
|
|
smartLists: true, |
|
|
|
smartypants: false, |
|
|
|
xhtml: false, |
|
|
|
}); |
|
|
|
xhtml: false |
|
|
|
}) |
|
|
|
for (const key in this.previewCode) { |
|
|
|
if (this.activeName == "") { |
|
|
|
this.activeName = key; |
|
|
|
if (this.activeName === '') { |
|
|
|
this.activeName = key |
|
|
|
} |
|
|
|
document.getElementById(key).innerHTML = marked(this.previewCode[key]); |
|
|
|
document.getElementById(key).innerHTML = marked(this.previewCode[key]) |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
methods: { |
|
|
|
selectText() { |
|
|
|
const element = document.getElementById(this.activeName) |
|
|
|
if (document.body.createTextRange) { |
|
|
|
const range = document.body.createTextRange() |
|
|
|
range.moveToElementText(element) |
|
|
|
range.select() |
|
|
|
} else if (window.getSelection) { |
|
|
|
const selection = window.getSelection() |
|
|
|
const range = document.createRange() |
|
|
|
range.selectNodeContents(element) |
|
|
|
selection.removeAllRanges() |
|
|
|
selection.addRange(range) |
|
|
|
} else { |
|
|
|
alert('none') |
|
|
|
} |
|
|
|
}, |
|
|
|
copy() { |
|
|
|
this.selectText() |
|
|
|
document.execCommand('copy') |
|
|
|
this.$message.success('复制成功') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|