v-if="submitCommond ==='enter'"
id="messgae_input"
v-model="currentMessage"
class="border-none"
type="textarea"
autofocus
rows="7"
:readonly="loading"
placeholder="請輸入內容"
@keyup.enter.exact="keyEnter($event)"
@keyup.ctrl.enter="lineFeed($event)"
/>
<textarea
v-if="submitCommond === 'ctrl'"
id="messgae_input"
v-model="currentMessage"
class="border-none"
type="textarea"
autofocus
rows="7"
:readonly="loading"
placeholder="請輸入內容"
@keyup.ctrl.enter.exact="keyCtrlEnter($event)"
@keyup.enter.exact="lineFeed($event,'enter')"
/>
keyCtrlEnter(event) {
this.btnIsDisabled()
this.setSubmitBtnDisabled()
this.getSubmitBtnIsDisabled()
// console.log('ctrl' + this.loading)
if (this.submitCommond === 'ctrl' && !this.submitBtnDisabled && !this.loading && this.haveMessage) {
this.loading = true
this.submitNewMsg()
event.preventDefault()
}
},
lineFeed(event, ctrl) {
if (ctrl === 'enter') {
return
}
// console.log('換行')
// console.log(this.currentMessage)
event.preventDefault()
this.currentMessage = this.currentMessage + '\n'
},
1.不能使用el-textarea,無法設置exact,
而設置 @keyup.ctrl.enter.exact="keyCtrlEnter($event)"可以解決按 ctrl+enter仍然觸發enter事件的問題。
2.textarea需要設置autofocus自動獲取焦點,才能實現enter或ctrl+enter發送。
3.enter發送過程中,設置loading變量監聽發送狀態。 將變量賦給readonly屬性來禁止發送時輸入。注意:不能使用disable屬性來禁止發送,disabled在發送後會自動失去焦點。必須要再次點擊textarea才能再次獲取到焦點,而readonly就不會發送後自動失去焦點。
4.textarea默認enter換行,所以在enter和ctrl+enter時,如果使用enter換行不需要再對數據設置n