一、概述
因業務需求,多行文本需要顯示行號,方便查看配置。
由於默認的textarea輸入框無法顯示行號,因此需要使用第三方插件纔行。
二、插件
我找了一個插件,叫bin-code-editor,它原本是用來輸入json數據的,也可以做json格式校驗。
但是java項目的配置文件,也不一定是json格式的,而是yaml格式的。因此,只需要去掉json校驗即可。
安裝模塊
npm install bin-code-editor -d
引入
在 main.js 中寫入2行
import CodeEditor from 'bin-code-editor'; Vue.use(CodeEditor);
test.vue
<template> <div> <div> <b-code-editor v-model="prodDesc" :auto-format="false" :smart-indent="true" theme="idea" :indent-unit="4" :line-wrap="false" :lint="false" ref="editor"></b-code-editor> </div> </div> </template> <script> export default { data() { return { prodDesc: 'SQL.url=jdbc:sqlserver://127.0.0.1; DatabaseName=BaseFrame\n' + 'SQL.userName=sa\n' + 'SQL.passWord=-+' } }, mounted() { }, methods: {} } </script> <style type="text/css"> </style>
訪問測試頁面,效果如下: