mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-18 10:59:10 +08:00
feat(docs): add copy feat for demo (#1398)
This commit is contained in:
Ryan2128
GitHub
parent
e94483a1d2
commit
11d40fa791
@ -56,6 +56,7 @@
|
||||
"babel-plugin-module-resolver": "^4.0.0",
|
||||
"babel-preset-vue": "^2.0.2",
|
||||
"chalk": "^4.1.0",
|
||||
"clipboard-copy": "^4.0.1",
|
||||
"cp-cli": "^2.0.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^4.2.2",
|
||||
|
||||
@ -28,25 +28,38 @@
|
||||
<transition name="text-slide">
|
||||
<span v-show="hovering">{{ controlText }}</span>
|
||||
</transition>
|
||||
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
|
||||
<transition name="text-slide">
|
||||
<el-button
|
||||
v-show="hovering || isExpanded"
|
||||
size="small"
|
||||
type="text"
|
||||
class="control-button"
|
||||
@click.stop="goCodepen"
|
||||
>
|
||||
{{ langConfig['button-text'] }}
|
||||
</el-button>
|
||||
</transition>
|
||||
</el-tooltip>
|
||||
<div class="control-button-container">
|
||||
<el-button
|
||||
v-show="hovering || isExpanded"
|
||||
ref="copyButton"
|
||||
size="small"
|
||||
type="text"
|
||||
class="control-button copy-button"
|
||||
@click.stop="copy"
|
||||
>
|
||||
{{ langConfig['copy-button-text'] }}
|
||||
</el-button>
|
||||
<el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
|
||||
<transition name="text-slide">
|
||||
<el-button
|
||||
v-show="hovering || isExpanded"
|
||||
size="small"
|
||||
type="text"
|
||||
class="control-button run-online-button"
|
||||
@click.stop="goCodepen"
|
||||
>
|
||||
{{ langConfig['run-online-button-text'] }}
|
||||
</el-button>
|
||||
</transition>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { nextTick } from 'vue'
|
||||
import hljs from 'highlight.js'
|
||||
import clipboardCopy from 'clipboard-copy'
|
||||
import compoLang from '../i18n/component.json'
|
||||
import { stripScript, stripStyle, stripTemplate } from '../util'
|
||||
const version = '1.0.0' // element version
|
||||
@ -163,6 +176,35 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
copy() {
|
||||
const res = clipboardCopy(`
|
||||
<template>
|
||||
${this.codepen.html}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
${' ' + this.codepen.script}
|
||||
\<\/script>
|
||||
|
||||
<style>
|
||||
${this.codepen.style}
|
||||
</style>
|
||||
`)
|
||||
|
||||
res.then(() => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.langConfig['copy-success'],
|
||||
type: 'success',
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: this.langConfig['copy-error'],
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
},
|
||||
goCodepen() {
|
||||
// since 2.6.2 use code rather than jsfiddle https://blog.codepen.io/documentation/api/prefill/
|
||||
const { script, html, style } = this.codepen
|
||||
@ -335,15 +377,19 @@ export default {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
.control-button {
|
||||
line-height: 26px;
|
||||
.control-button-container {
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
padding-left: 5px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
font-size: 14px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,10 @@
|
||||
"demo-block": {
|
||||
"hide-text": "隐藏代码",
|
||||
"show-text": "显示代码",
|
||||
"button-text": "在线运行",
|
||||
"copy-button-text": "复制代码片段",
|
||||
"copy-success": "已复制！",
|
||||
"copy-error": "该浏览器不支持自动复制！",
|
||||
"run-online-button-text": "在线运行",
|
||||
"tooltip-text": "前往 codepen.io 运行此示例"
|
||||
},
|
||||
"footer": {
|
||||
@ -35,7 +38,10 @@
|
||||
"demo-block": {
|
||||
"hide-text": "Hide",
|
||||
"show-text": "Expand",
|
||||
"button-text": "Try it!",
|
||||
"copy-button-text": "Copy",
|
||||
"copy-success": "Copied！",
|
||||
"copy-error": "This browser does not support automatic copy！",
|
||||
"run-online-button-text": "Try it!",
|
||||
"tooltip-text": "Run this demo on codepen.io"
|
||||
},
|
||||
"footer": {
|
||||
@ -66,7 +72,10 @@
|
||||
"demo-block": {
|
||||
"hide-text": "Ocultar",
|
||||
"show-text": "Mostrar",
|
||||
"button-text": "Probar",
|
||||
"copy-button-text": "Copiar",
|
||||
"copy-success": "Copiar correctamente!",
|
||||
"copy-error": "Este navegador no admite copia automática!",
|
||||
"run-online-button-text": "Probar",
|
||||
"tooltip-text": "Prueba este ejemplo en codepen.io"
|
||||
},
|
||||
"footer": {
|
||||
@ -97,7 +106,10 @@
|
||||
"demo-block": {
|
||||
"hide-text": "Réduire",
|
||||
"show-text": "Agrandir",
|
||||
"button-text": "Essayez!",
|
||||
"copy-button-text": "Copie",
|
||||
"copy-success": "Copier avec succès!",
|
||||
"copy-error": "Ce navigateur ne prend pas en charge la copie automatique!",
|
||||
"run-online-button-text": "Essayez!",
|
||||
"tooltip-text": "Essayer cette démo sur codepen.io"
|
||||
},
|
||||
"footer": {
|
||||
@ -128,7 +140,10 @@
|
||||
"demo-block": {
|
||||
"hide-text": "隠す",
|
||||
"show-text": "展開する",
|
||||
"button-text": "試してみる!",
|
||||
"copy-button-text": "コピー",
|
||||
"copy-success": "正常にコピー!",
|
||||
"copy-error": "このブラウザは自動コピーをサポートしていません!",
|
||||
"run-online-button-text": "試してみる!",
|
||||
"tooltip-text": "codepen.ioでこのデモを実行します。"
|
||||
},
|
||||
"footer": {
|
||||
|
||||
@ -4117,6 +4117,11 @@ cli-width@^2.0.0:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
|
||||
|
||||
clipboard-copy@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.npm.taobao.org/clipboard-copy/download/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
|
||||
integrity sha1-Mm75cm1P/nLZqCp7vhk3neaSAX0=
|
||||
|
||||
cliui@^3.2.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user