<el-input v-model="input"placeholder="请输入"type="textarea":rows="8"@focus="handleFocus"@input.native="handleInput" />
解释一下:
- Element UI对 input 事件做了一层包装,无法返回event对象,使用 .native 修饰符可以返回event对象
- 圆点符号• 在Element UI默认的字体下显示为方块,需要修改默认字体为雅黑
<script>
export default {name: 'DashBoard',data () {return {input: ''}},methods: {// 获得焦点时,如果内容为空,首行添加圆点handleFocus () {if (this.input !== '') returnthis.input = '• '},// 录入文本时,每换一行在行首添加圆点handleInput (event) {if (event.inputType === 'insertLineBreak') {let txt = event.targetlet currentCursorPosition = txt.selectionStartlet textBeforeCursor = txt.value.substring(0, currentCursorPosition)let textAfterCursor = txt.value.substring(currentCursorPosition)// 添加特殊符号到新行的行首txt.value = textBeforeCursor + "• " + textAfterCursor// 重新设置光标位置txt.setSelectionRange(currentCursorPosition + 2, currentCursorPosition + 2)// 双向绑定的数据重新赋值this.input = txt.value}}}
}
</script>
解释一下:
- HTMLInputElement.selectionStart
一个表示选择文本的开始索引的数字。当没有选择时,它返回当前文本输入光标位置的偏移量。
HTMLInputElement - Web API 接口参考 | MDN
- InputEvent.inputType
InputEvent 接口中的只读属性 inputType 返回对可编辑内容所做更改的类型。可能的更改包括插入、删除和格式化文本。以下是一些可能的 inputType 值:
- "insertText": 表示插入文本,通常与用户键入文本时触发的输入事件相关。
- "insertLineBreak": 表示插入换行符,通常与用户按下回车键时触发的输入事件相关。
- "deleteContentBackward": 表示向后删除内容,通常与用户按下删除键时触发的输入事件相关。
- "deleteContentForward": 表示向前删除内容,通常与用户按下删除键时触发的输入事件相关。
- "deleteWordBackward": 表示向后删除单词,通常与用户按下组合键(例如 Ctrl + Backspace)时触发的输入事件相关。
- "deleteWordForward": 表示向前删除单词,通常与用户按下组合键(例如 Ctrl + Delete)时触发的输入事件相关。
InputEvent.inputType - Web API 接口参考 | MDN
- HTMLInputElement.setSelectionRange()
HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。
HTMLInputElement.setSelectionRange() - Web API 接口参考 | MDN