我将逐点解释,因为它可能是一个安静的复合体。
我用鼠标或触控板突出显示文本,并且在 mouseup 上突出显示的文本存储在对象数组中。每个对象都包含选定的文本。
只要我选择不同的文本,我希望在该数组上循环以便能够一一显示所有选择。
基本上,我将每个选定的文本存储到 selectionArray。每个 selectedText 都是对象内的字符串。所以 SelectionArray 变成这样的对象数组在第一次选择上:
[
{selectedText: '...string...'}
]
在第二个选择中,数组被更新:
[
{selectedText: '...string...'},
{selectedText: '...another string...'}
]
依此类推...最后,我在等于 selectionArray 的 items 数组上使用 v-on 循环:
this.items = selectionArray
目前我几乎就在那里,但缺少一些东西,因为我没有看到实时修改我必须对 HTML(奇怪)进行无用的修改,例如才能看到结果。我怀疑创建的方法,但我需要帮助,至少是一种逻辑的调查方式。谢谢
这是代码:
<template>
<main class='wrapper'>
<section class='wrapper-copy'>
<div class='copy'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi dolorum soluta pariatur asperiores. Recusandae atque nesciunt ipsa velit impedit fugit enim, quia explicabo adipisci sunt earum laudantium illo. Tenetur.
Animi magnam corrupti atque mollitia eaque enim, voluptatum magni laboriosam vel possimus reprehenderit aut doloribus inventore repellat aliquam voluptatem esse ut saepe at iusto qui quibusdam doloremque exercitationem ipsam. Dicta.
In animi nobis accusamus nemo repellat dicta a repellendus provident accusantium fugit voluptas minus laudantium reiciendis cumque, amet porro maiores quisquam? Ullam aut voluptatem delectus cum rerum perferendis vero laudantium!
</div>
</section>
<article class="wrapper-select">
<div class="select">
<div id='input'
class='selected-copy'
v-for='(item, index) in items'
:key='item.index'>
<div class='index'>{{ index }} </div>
<p class='selection'> {{ item.selectedText }} </p>
</div>
</div>
</article>
</main>
</template>
<script>
export default {
name: 'app',
data () {
return {
items: []
}
},
created () {
var selectionArray = []
function storeSelection () {
var selectedText = window.getSelection().toString()
if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {
selectionArray[selectionArray.length] = {selectedText}
}
console.log(selectionArray)
}
document.addEventListener('mouseup', storeSelection)
this.items = selectionArray
console.log(this.items)
}
}
</script>