在Vue中,獲取選中的文章是一個常見的需求。我們可以通過以下步驟來實現(xiàn):
HTML代碼:
<div id="app">
<textarea v-model="article"></textarea>
<button @click="getSelectedText">獲取選中的文章</button>
</div>
Vue代碼:
var app = new Vue({
el: '#app',
data: {
article: ''
},
methods: {
getSelectedText: function() {
var selectedText = window.getSelection().toString();
if(selectedText) {
alert(selectedText);
}
}
}
})
以上代碼中,我們首先在HTML中定義了一個文本框和一個按鈕,文本框綁定了Vue實例中的數(shù)據(jù)article,按鈕綁定了Vue實例中的getSelectedText方法。
接著,在Vue實例中定義了getSelectedText方法。該方法通過window.getSelection()獲取當(dāng)前選中的文本,如果選中了內(nèi)容就通過alert彈出選中的內(nèi)容。
在實際使用中,我們可以根據(jù)需求將彈出內(nèi)容的方式改成將選中的內(nèi)容賦值給Vue實例中的某個數(shù)據(jù),或者將選中的內(nèi)容發(fā)送到后臺等。