vue 几乎都会用到的几个组件库

element

https://element.eleme.cn/#/zh-CN
这个没什么好说的,现在做前端的都会吧，简单使用翻官方文档就可以了，多组件配合再加上计算属性或监听也可以绽放不一样的效果
比如效果图：
输入前：

输入后:

主要代码：

<template>
    <div>
        <el-form-item label="学号">
            <div class="input-multiple-box" id="inputMultipleBox">
              <div>
                <el-tag v-for="(tag, index) in studentList" 
                :key="index" 
                type="info" 
                closable 
                @close="handleClose(index)">
                  {{ tag }}
                </el-tag>
              </div>
              <el-input
                v-model="number"
                @keyup.enter.native="handleInputConfim"
                @blur="handleInputConfim"
                placeholder="请输入学生学号"
              ></el-input>
            </div>
        </el-form-item>
    </div>
</template>
<script>
  export default {
    name: 'student',
    data() {
        // 标签数组
        studentList: [],
        // 页面绑定，用户正在输入的值
        number:''
    },
    watch:{
      // 检测用户正在输入的值
      number(newval){
        // 遍历用户输入,将所有非法字符替换为分隔符
        let roul=/^\d{1}$/
        let checkstr=''
        for(let char of newval){
          roul.test(char)?checkstr+=char:checkstr+=','
        }
  
        // 如果输入内容包含分隔符，则分割用户输入,过滤出非空元素,长度不足的补零，并添加到标签数组
        if(checkstr.indexOf(',')!=-1){
          this.studentList.push(
            ...checkstr
              .split(',')
              .filter(item=>{return (item==null || item=='')?false:true})
              .map(item=>{return (item.length<10)?item.padStart(10,'0'):item})
          )
          this.number=''
          this.$forceUpdate()
        }
      }
    },
   methods: {
    // 关闭标签时，从数组中删除对应项
      handleClose(index){
        this.$delete(this.studentList,index)
        this.$forceUpdate()
  
      },
    //   失焦事和按回车时的逻辑和输入分隔符逻辑一样，所以直接加一个分隔符，让监听函数处理即可
      handleInputConfim(){
        this.number+=','
      },
  }
  }
  </script>
  <style>
  .input-multiple-box{
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding: 0 5px;
    display: flex;
    flex-wrap: wrap;
    max-height: 90px;
    overflow-y: auto;
  }
  #inputMultipleBox{
    /deep/.el-input__inner{
      border: none;
      padding:0px;
    }
    .el-input {
      //width:100px;
      display: inline;
    }
  }
  </style>

echarts

https://echarts.apache.org/zh/index.html
也没什么好说的，做过图表的都用过啊吧,翻文档呗

vxe-table

https://vxetable.cn/#/table/start/install
很多组件比element功能强大，尤其是表格相关的，但是官网文档写的不如element友善，经常有指令或属性找不到，示例也不是很完整。需要多多摸索。

draggable

https://github.com/SortableJS/Vue.Draggable
可以用鼠标直接拖动的穿梭框，可以实现的效果比 element 不要好看太多
中文文档可以参照：https://www.itxst.com/vue-draggable/tutorial.html
简单做一个自定义样式的例子；
效果图：
代码片段：

<template>
    <div>
        <el-col :span="12">
            <div class="groupbox">
                <div class="title">
                    <el-col :span="12">姓名</el-col>
                    <el-col :span="12">职务</el-col>
                </div>
                <div class="listBody">
                    <draggable v-model="leftarr" group="itxst"  dragClass="dragClass" 
                    ghostClass="ghostClass" chosenClass="chosenClass">
                        <transition-group class="groutminheight">
                            <div class="item" v-for="item in leftarr" :key="item.name">
                              <el-row>
                                <el-col :span="12">{{ item.name }}</el-col>
                                <el-col :span="12">{{ item.post }}</el-col>
                              </el-row>
                            </div>
                        </transition-group>
                    </draggable>
                </div>
            </div>
        </el-col>
        <!--右侧穿梭框-->
        <el-col :span="12">
            <div class="groupbox">
                <div class="title">
                    <el-col :span="12">姓名</el-col>
                    <el-col :span="12">职务</el-col>
                </div>
                <div class="listBody">
                    <draggable v-model="reartarr" group="itxst" dragClass="dragClass"
                    ghostClass="ghostClass" chosenClass="chosenClass">
                        <transition-group class="groutminheight">
                            <div class="item" v-for="item in reartarr" :key="item.name">
                                <el-row>
                                    <el-col :span="12">{{ item.name }}</el-col>
                                    <el-col :span="12">{{ item.post }}</el-col>
                                </el-row>
                            </div>
                        </transition-group>
                    </draggable>
                </div>
            </div>
        </el-col>
    </div>
</template>
<style>
//定义穿梭框样式
.ghostClass {background-color: blue !important;}
//鼠标选中后的颜色
.chosenClass {
  background-color: #2DF67D !important;
  opacity: 1 !important;
}
//拖动时的样式
.dragClass {
  background-color: greenyellow !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
//包括标题合列表的容器盒子
.groupbox{
  margin:20px;
  padding: 10px;
  background:linear-gradient(to top,rgba(65,216,147,0.3) 0%,rgba(65,216,147,0.7) 50%, rgba(65,216,147,0.3) 100%);
  display:flex;
  flex-direction: column;
}
//标题
.title{
  font-size: 18px;
  height: 35px;
  margin-left: 20px;
  margin-right:20px;
  margin-bottom: 8px;
  top:0px;
  flex: 0 0 35px;
}
//列表容器盒子
.listBody{flex:1 1 200px; overflow: auto;}
//列表
.groutminheight{
  overflow: auto;
  display: block;
  min-height:100px;
}
  //隐藏滚动条
::-webkit-scrollbar {display: none;}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  background-color: #f1f1f1;
  border-radius: 15px;
}
.item:hover{background-color: #fdfdfd;cursor: move;}
.item + .item{border-top:none;margin-top: 6px;}
</style>

CodeMirror

https://codemirror.net/
可以配置高亮效果和关键字提示的代码编辑器
并且在一定程度上支持个性化定制，例如图片中的 sql 编辑器，不仅可以提示 sql 关键字。
也可以通过配置实现提示表名和列明。
可以用来实现在线编辑器。
上效果：

组件代码：

<template>
  <div class="tableMsg" ref="tableMsg">
    <div class="sqlMsg">
      <div class="codesql">
        <textarea ref="sqlEditor" v-model="sqlValue" ></textarea>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
// 引入核心样式( sql 编辑器功能)
import 'codemirror/theme/ambiance.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/hint/show-hint.css';// 引入全局实例
const CodeMirror = require('codemirror/lib/codemirror');//
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/selection/active-line');// sql语言包
require('codemirror/mode/sql/sql');// 代码自动提示插件
require('codemirror/addon/hint/show-hint');
require('codemirror/addon/hint/sql-hint');
export default {
  name: "sqlEdit",
  data() {
    return {
      // 缓存已经查询过列名的表
      tableColumnname:{},
      // 编辑框输入的SQL 语句
      sqlValue:"",
      // 代码编辑器实例
      editor:null
    }
  },
  mounted() {
    // 创建代码编辑器
    this.createeditor()
  },
  methods: {
    // 创建代码编辑器
    createeditor(){
      // 创建代码编辑器
      this.editor = CodeMirror.fromTextArea(
        this.$refs.sqlEditor,//绑定的dom元素
        {
          value: this.sqlValue,//初始内容
          mode: { name: 'text/x-mysql' },//设置编译器对应的语言
          indentWithTabs: true,//是否tabs缩进
          smartIndent: true,//自动缩进是否开启
          lineNumbers: true,//是否显示行号
          matchBrackets: true,//匹配结束符号
          cursorHeight: 1,//光标高度
          readOnly: false,//是否只读
          autofocus: true,//自动聚焦
          hintOptions: {
            completeSingle: true ,//简写自动补全模式
            tables: {//自定义提示词
              tableName1:['column_1','column_2','column_3'],
              tableName2:['column_1','column_2','column_3']
            }
          }
        }
      )
      // 给代码编辑器绑定输入事件，调用代码提示框功能！！！！！！！！！！！
      this.editor.on('inputRead', () => {this.editor.showHint();});
      // 常用API
      // “changes”：每次编辑器内容更改时触发
      // “beforeChange”：事件在更改生效前触发
      // “cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。
      // “keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发
      // “inputRead”:当用户输入或粘贴到编辑器时触发。
      // “electrictInput”:收到指定的electrict输入时触发
      // “beforeSelectionChange”:此事件在选中内容变化前触发
      // “viewportChange”：编辑器的视口( view port )改变（滚动，编辑或其它动作）时触发
      // “gutterClick”：编辑器的gutter(行号区域)点击时触发
      // “focus”：编辑器收到焦点时触发
      // “blur”:编辑器失去焦点时触发
      // “scroll”:编辑器滚动条滚动时触发
      // “keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件触发器
    }
  }
};
</script>
<style scoped>
.tableMsg{
  display: flex;
  flex-direction: row;
}
.sqlMsg{
  flex:auto;
  height: 105%;
  margin:30px;
  display: flex;
  flex-direction: column;
}
.codesql{
  outline:none;
  border:none;
  padding: 10px;
  height: 65%;
  border-radius: 10px;
  box-shadow:
    -10px -10px 10px rgba(0,0,0,0.4),
    inset -5px -5px 5px rgba(125,125,125,0.4),
    inset 5px 5px 5px rgba(125,125,125,0.4);
}
</style>

先写到这里，老板提新需求了，回头再继续码。