Element UI Input组件内容格式化：换行时行首添加圆点

<el-input v-model="input"placeholder="请输入"type="textarea":rows="8"@focus="handleFocus"@input.native="handleInput" />

解释一下：

1. Element UI对 input 事件做了一层包装，无法返回event对象，使用 .native 修饰符可以返回event对象
2. 圆点符号• 在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 值：

1. "insertText": 表示插入文本，通常与用户键入文本时触发的输入事件相关。
2. "insertLineBreak": 表示插入换行符，通常与用户按下回车键时触发的输入事件相关。
3. "deleteContentBackward": 表示向后删除内容，通常与用户按下删除键时触发的输入事件相关。
4. "deleteContentForward": 表示向前删除内容，通常与用户按下删除键时触发的输入事件相关。
5. "deleteWordBackward": 表示向后删除单词，通常与用户按下组合键（例如 Ctrl + Backspace）时触发的输入事件相关。
6. "deleteWordForward": 表示向前删除单词，通常与用户按下组合键（例如 Ctrl + Delete）时触发的输入事件相关。

InputEvent.inputType - Web API 接口参考 | MDN

• HTMLInputElement.setSelectionRange()

        HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。

HTMLInputElement.setSelectionRange() - Web API 接口参考 | MDN