xuyue/webpreview
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add copy

Browse Source
This commit is contained in:
yuetsh
2025-03-07 14:27:49 +08:00
parent 6a5b480724
commit 82623d141e
3 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@@ -15,6 +15,7 @@
"@vueuse/core": "^12.8.2", "@vueuse/core": "^12.8.2",
"axios": "^1.8.1", "axios": "^1.8.1",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",
"copy-text-to-clipboard": "^3.2.0",
"github-markdown-css": "^5.8.1", "github-markdown-css": "^5.8.1",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
"marked": "^15.0.7", "marked": "^15.0.7",
@@ -1432,6 +1433,18 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/copy-text-to-clipboard": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
"integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/core-js": { "node_modules/core-js": {
"version": "3.40.0", "version": "3.40.0",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",

1
package.json
View File

@@ -16,6 +16,7 @@
"@vueuse/core": "^12.8.2", "@vueuse/core": "^12.8.2",
"axios": "^1.8.1", "axios": "^1.8.1",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",
"copy-text-to-clipboard": "^3.2.0",
"github-markdown-css": "^5.8.1", "github-markdown-css": "^5.8.1",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
"marked": "^15.0.7", "marked": "^15.0.7",

9
src/components/Tutorial.vue
View File

@@ -27,9 +27,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Icon } from "@iconify/vue" import { Icon } from "@iconify/vue"
import { css, html, js, tab } from "../store/editors"
import { computed, onMounted, ref, useTemplateRef, watch } from "vue" import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
import { marked } from "marked" import { marked } from "marked"
import copyFn from "copy-text-to-clipboard"
import { css, html, js, tab } from "../store/editors"
import { Tutorial } from "../api" import { Tutorial } from "../api"
import { step } from "../store/tutorial" import { step } from "../store/tutorial"
import { authed, roleSuper } from "../store/user" import { authed, roleSuper } from "../store/user"
@@ -85,14 +86,16 @@ function addButton() {
let copyTimer = 0 let copyTimer = 0
const actions = action.cloneNode() as HTMLDivElement const actions = action.cloneNode() as HTMLDivElement
pre.insertBefore(actions, pre.children[0]) pre.insertBefore(actions, pre.children[0])
const code = pre.childNodes[1] as HTMLPreElement const $code = pre.childNodes[1] as HTMLPreElement
const match = code.className.match(/-(.*)/) const match = $code.className.match(/-(.*)/)
let lang = "html" let lang = "html"
if (match) lang = match[1].toLowerCase() if (match) lang = match[1].toLowerCase()
actions.innerHTML = `<span class="lang">${lang.toUpperCase()}</span><div><div class="btn copy">复制</div><div class="btn">替换</div></div>` actions.innerHTML = `<span class="lang">${lang.toUpperCase()}</span><div><div class="btn copy">复制</div><div class="btn">替换</div></div>`
const $copy = actions.children[1].children[0] as HTMLDivElement const $copy = actions.children[1].children[0] as HTMLDivElement
const $replace = actions.children[1].children[1] as HTMLDivElement const $replace = actions.children[1].children[1] as HTMLDivElement
$copy.onclick = () => { $copy.onclick = () => {
const content = pre.children[1].textContent
copyFn(content ?? "")
$copy.innerHTML = "已复制" $copy.innerHTML = "已复制"
clearTimeout(copyTimer) clearTimeout(copyTimer)
copyTimer = setTimeout(() => { copyTimer = setTimeout(() => {