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

凡大来啦

已于 2024-01-16 18:31:16 修改

阅读量825

点赞数 12

文章标签： ui vue.js elementui

于 2024-01-16 18:24:20 首次发布

本文链接：https://blog.csdn.net/u011690675/article/details/135631706

版权

<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 !== '') return
      this.input = '• '

    },
    
    // 录入文本时，每换一行在行首添加圆点
    handleInput (event) {
      if (event.inputType === 'insertLineBreak') {
        let txt = event.target
        let currentCursorPosition = txt.selectionStart
        let 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>

解释一下：