62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md" @click="copy">
|
||
|
|
<DocumentDuplicateIcon class="w-5 h-5" />
|
||
|
|
<p>kopieren</p>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-if="data != 'nopaste'"
|
||
|
|
class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md"
|
||
|
|
@click="paste"
|
||
|
|
>
|
||
|
|
<ClipboardDocumentIcon class="w-5 h-5" />
|
||
|
|
<p>einfügen</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineComponent } from "vue";
|
||
|
|
import { ClipboardDocumentIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
|
||
|
|
import { mapState } from "pinia";
|
||
|
|
import { useContextMenuStore } from "@/stores/context-menu";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
props: ["data"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
selectedText: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(useContextMenuStore, ["clickedOnEl"]),
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.selectedText =
|
||
|
|
document.getSelection()?.toString() || this.clickedOnEl.value || this.clickedOnEl.innerText || "";
|
||
|
|
|
||
|
|
let selection = document.getSelection()?.toString();
|
||
|
|
console.log(selection);
|
||
|
|
if (selection == "") {
|
||
|
|
console.log("jo");
|
||
|
|
const range = document.createRange();
|
||
|
|
range.selectNode(this.clickedOnEl);
|
||
|
|
console.log(range);
|
||
|
|
window.getSelection()?.removeAllRanges();
|
||
|
|
window.getSelection()?.addRange(range);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
copy() {
|
||
|
|
navigator.clipboard.writeText(this.selectedText);
|
||
|
|
},
|
||
|
|
paste() {
|
||
|
|
const el = this.clickedOnEl;
|
||
|
|
navigator.clipboard.readText().then((e) => {
|
||
|
|
el.value = e;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|