需求：vue+svg实现连线功能

问题描述：如标题所示

参考了svg.js和jquery实现连线功能

需求：
1.右侧两个方框可以合成一个bond，点击bond之后又可以恢复。
2.一对一连接
3.有回显功能

package.json
@svgdotjs/svg.js: “^3.1.1”

解决方法:
svg_style.css


.draw-container {position: relative;margin-top: 50px;
}.data-list {position: absolute;
}.question-list {left: 8%;
}.answer-list {right: 10%;
}.question-list li, .answer-list li {width: 113px;background: #FFFFFF;border-radius: 7px;margin-bottom: 16px;line-height: 56px;text-align: center;box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.14);
}.question-list li {border-left: 2px solid #F57474;cursor: crosshair;
}.answer-list li {border-left: 2px solid #4F90F0;position: relative;cursor: pointer;
}.hover-g {cursor: pointer;opacity: 1;stroke-width: 4;
}.bondGray, .bondBlue {width: 116px;height: 56px;box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.14);border-radius: 7px;display: flex;justify-content: center;align-items: center;font-size: 16px;color: #ffffff;margin-bottom: 16px;position: relative;cursor: pointer;
}.bondGray {background: #c6c6c6 !important;border-left: 2px solid #c6c6c6 !important;
}.bondBlue {background: #4F90F0 !important;
}.infoListStyle {/*width: 120px;*/height: 20px;font-size: 16px;line-height: 20px;text-align: center;border-radius: 2px;position: absolute;left: 113px;top: 5px;cursor: default;margin-right: 10px;display: flex;pointer-events: none;
}.netcardStyle {width: 90px;color: #659EF3;background: #D6E6FF;top: 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-right: 5px;
}.speedStyle {max-width: 100px;height: 20px;font-size: 16px;line-height: 20px;text-align: left;color: #333;margin-right: 10px;cursor: default;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.bondGray > div:last-child {top: 30px
}.bondBlue > div:last-child {top: 30px
}

link.vue

<template><div class="xx_info"><div class="link_box container"><div class="link_warp"><div class="draw-container" id="draw" ref="drawDom"><ul class="left_box question-list data-list"><liv-for="(item, index) in netList":key="index":data-question="item.name":data-answer="item.value"class="question-li"ref="leftBox"style="user-select: none">{{ item.name }}</li></ul><ul class="right_box answer-list data-list" ref="dataListBox"><liv-for="(item, index) in dataList":key="index":style="item.status == 'No' ? 'border-left:2px solid #C6C6C6' : ''":data-answer="item.name"class="answer-li"ref="rightBox"draggable="true"@dragstart.stop="startDrag($event, item)"@dragover.stop="overDrop($event)"@drop.stop="endDrop($event, index, item)">{{ item.name }}</li></ul></div><ul class="info"><li><p class="color_red"></p><p class="title">xx</p></li><li><p class="color_blue"></p><p class="title">xx(已通)</p></li><li><p class="color_gray"></p><p class="title">xx未通)</p></li></ul></div></div></div>
</template><script>
import {SVG} from "@svgdotjs/svg.js";export default {name: "index",data() {return {//  左侧数据netList: [{name: "1"},{name: "2"},{name: "3"},{name: "4"},{name: "5"}],// 右侧数据dataList: [],//svgdraw: null,// 保存数据lineArr: [],currentInfo: {},//bond 第一个数据elementstartLi: null,//bond 第一个数据startData: null,newArr: [],scrollTop: 0};},methods: {/*** 连线操作*/// 合并开始startDrag(e, val) {this.startLi = e.target;this.startData = val;},// 合并中overDrop(e) {e.preventDefault();},// 合并结束endDrop(ev, index, val) {if (ev.target != this.startLi) {/***  合并*/let node = document.createElement("li");// li标签的值valuenode.innerHTML = "bond";// li标签 classNamenode.classList.add("answer-li");// li标签classNameif (val.status == "No" && this.startData.status == "No") {node.classList.add("bondGray");} else {node.classList.add("bondBlue");}// li标签属性node.setAttribute("data-answer", `${this.startLi.innerText + "," + val.name}`);// 右侧数据和speedlet child = null,self = this,speed = null,infoList = null;for (let i = 0; i < 2; i++) {//  创建div标签 (bond后面的box）infoList = document.createElement("div");infoList.classList.add("infoListStyle");//  创建 div标签（bond后面的box的数据）child = document.createElement("div");// 数据的classNamechild.classList.add("netcardStyle");//  创建 div标签（bond后面的box的speed）speed = document.createElement("div");// 速率的classNamespeed.classList.add("speedStyle");if (i == 0) {// 元素child.innerHTML = self.startLi.innerText;// 标题child.title = self.startLi.innerText;// 速率的元素speed.innerHTML = self.startData.speed;// 速率的标题speed.title = self.startData.speed;} else {child.innerHTML = val.name;speed.innerHTML = val.speed;}// bond后面的box添加子元素infoList.appendChild(child);infoList.appendChild(speed);// bond添加子元素node.appendChild(infoList);}// 右侧列表添加bondthis.$refs.dataListBox.appendChild(node);// 移除 拖曳的元素ev.target.parentNode.removeChild(this.startLi);// 移除 被合并的元素ev.target.parentNode.removeChild(ev.target);// 清除左侧所选数据和lineArr数据let value = node.getAttribute("data-answer");this.clearLine(value);this.bindBtnEvent();this.itemForEach(true);/***  解绑*/let startEle = this.startLi;node.onclick = function () {// 移除bondself.$refs.dataListBox.removeChild(node);// 添加 被拖拽的元素self.$refs.dataListBox.appendChild(startEle);// 添加 被解绑的元素self.$refs.dataListBox.appendChild(ev.target);// 清除左侧所选数据和lineArr数据let value = node.getAttribute("data-answer");self.clearLine(value);self.bindBtnEvent();self.itemForEach(true);};ev.preventDefault();}},// 初始化async init() {this.draw = SVG().addTo("#draw").size("100%", "100%");// 获取右侧数据await this.getDataList();// 左侧数据this.createList(this.netList);// 绑定父亲事件事件this.bindParentsEvent();// 绑定按钮事件this.bindBtnEvent();},// 起始点数据createList(data) {data.forEach(element => {// 定义一个对象let obj = {};//左侧起始点判断为元素的名称obj.beginValue = element.name;// 创建线条obj.line = this.createLine();// 保存左侧数据this.lineArr.push(obj);});},// 创建线条createLine() {let self = this,line = self.draw.line();// 左侧方块line.marker("start", 2, 2, function (add) {add.attr({orient: 0});add.rect(2, 2).attr({fill: "white", stroke: "#F57474"});});// 右侧方块line.marker("end", 2, 2, function (add) {add.attr({orient: 0});add.rect(2, 2).attr({fill: "white", stroke: "#4F90F0", strokeWidth: 1});});// 连线的样式line.stroke({color: "#333",width: 2,opacity: 0.6,linecap: "round"});line.hide();//点击 删除线line.click(function () {let current = self.lineArr.find(el => {return el.line == this;});// 移除开始点的classNamecurrent.beginElement.classList.remove("selected");// 移除结束点的classNamecurrent.endElement.classList.remove("selected");// 开始点移除所选的值current.beginElement.setAttribute("data-selected", "");current.endValue = "";current.endElement = "";current.end = "";this.hide();});// 鼠标经过线line.mouseover(function () {let current = self.lineArr.find(el => {return el.line == this;});if (current.endValue) {//线条会放大this.addClass("hover-g");}});// 鼠标离开线line.mouseout(function () {//线条会恢复this.removeClass("hover-g");});return line;},// 连线开始-连线结束bindBtnEvent() {let self = this,node = document.getElementById("draw"),parentPosition = this.offset(node); //获取offset// 左侧数据this.$refs.leftBox.forEach(li => {// 鼠标离开li.onmousedown = function () {let current = self.lineArr.find(el => {return el.beginValue == li.getAttribute("data-question");});// 开始坐标为空current.begin = {};// 开始元素为点击的licurrent.beginElement = this;// 开始x坐标current.begin.y = self.offset(li).top - parentPosition.top + 25;// 开始y坐标current.begin.x = self.offset(li).left - parentPosition.left + 130;// 线显示current.line.show();// 线颜色current.line.stroke({color: "#333"});// 画线current.line.plot(current.begin.x, current.begin.y, current.begin.x, current.begin.y);current.end = {};/* 如果存在结束位置，删除 */if (current.endElement) {current.endElement.classList.remove("selected");li.classList.remove("selected");li.setAttribute('data-answer', '');}current.endElement = "";current.endValue = "";self.currentInfo = current;};});// 右侧数据let allLis = this.$refs.dataListBox.getElementsByTagName("li");if (allLis) {Array.prototype.slice.call(allLis).forEach(li => {li.onmouseup = function () {let current = self.lineArr.find(el => {return el.beginValue == self.currentInfo.beginValue;});if (current) {// 结束y坐标current.end.y = self.offset(li).top - parentPosition.top + 25;// 结束x坐标current.end.x = self.offset(li).left - parentPosition.left - 20;// 结束元素为点击的licurrent.endElement = this;//结束值为所选的右侧数据current.endValue = li.getAttribute("data-answer");// 画线current.line.plot(current.begin.x, current.begin.y, current.end.x, current.end.y);// 开始元素添加classNamecurrent.beginElement.classList.add("selected");// 开始元素添加所选的值current.beginElement.setAttribute("data-selected", current.endValue);// 元素添加classNameli.classList.add("selected");// 清空数据self.currentInfo = {};// dat-selected值与data-answer值一致self.$refs.leftBox.forEach(left => {if (left.getAttribute("data-selected") == li.getAttribute("data-answer")) {left.setAttribute("data-answer", `${left.getAttribute("data-selected")}`);}});}};});}},// 获取offsetoffset(element) {// 滚动的距离let offest = {top: 0,left: 0};let _position = null;getOffset(element, true);return offest;// 递归获取 offset, 可以考虑使用 getBoundingClientRectfunction getOffset(node, init) {// 非Element 终止递归if (node && node.nodeType !== 1) {return;}_position = window.getComputedStyle(node)["position"];// position=static: 继续递归父节点if (typeof init === "undefined" && _position === "static") {getOffset(node.parentNode);return;}offest.top = node.offsetTop + offest.top - node.scrollTop;offest.left = node.offsetLeft + offest.left - node.scrollLeft;// position = fixed: 获取值后退出递归if (_position === "fixed") {return;}getOffset(node.parentNode);}},// 绑定父亲事件bindParentsEvent() {// 如果结束点不在右侧数据，线条消失document.addEventListener("mouseup", e => {if (e.target.className && typeof e.target.className != "object") {let name = e.target.className.split(" ");if (name[0] != "answer-li" && this.currentInfo.line) {this.currentInfo.line.hide();}}});// draw 组件鼠标移动事件，添加线条let self = this,btn = document.getElementById("draw"),parentPosition = this.offset(btn);btn.onmousemove = function (e) {if (Object.keys(self.currentInfo).length != 0) {let end = {};end.x = self.getMousePos(event).x - parentPosition.left;end.y = self.getMousePos(event).y - (parentPosition.top - self.scrollTop);self.currentInfo.line.plot(self.currentInfo.begin.x, self.currentInfo.begin.y, end.x, end.y);}e.stopPropagation(); // 阻止事件冒泡};},//  获取鼠标坐标getMousePos(event) {var e = event || window.event;var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;var scrollY = document.documentElement.scrollTop || document.body.scrollTop;var x = e.pageX || e.clientX + scrollX;var y = e.pageY || e.clientY + scrollY;return {x: x,y: y};},// 默认值itemForEach(resize) {let self = this,node = document.getElementById("draw"),parentPosition = this.offset(node); //获取offseif (this.netList.length && this.dataList.length) {// 获取所有li标签let eles = document.getElementsByTagName("li");// 移除calssName// Array.prototype.slice.call(eles).forEach(el => {//     el.classList.remove("selected");// });// 去重this.$refs.leftBox.forEach(li => {if (this.newArr.indexOf(li.getAttribute("data-answer")) === -1) {this.newArr.push(li.getAttribute("data-answer"));}});// 浏览器缩放无需调用默认数据if (!resize) {// 生成bond-解开bondthis.bondList(this.newArr);}// 连线this.$refs.leftBox.forEach(leftLi => {let obj = {},beginValue = leftLi.getAttribute("data-question"),endValue = leftLi.getAttribute("data-answer");obj = self.lineArr.find(el => el.beginValue == beginValue);// 开始元素为liobj.beginElement = leftLi;// 开始为空坐标obj.begin = {};// 开始的y坐标obj.begin.y = self.offset(leftLi).top - parentPosition.top + 25;// 开始x坐标obj.begin.x = self.offset(leftLi).left - parentPosition.left + 130;// 左侧的元素值leftLi.setAttribute("data-selected", `${endValue}`);// bond存在if (endValue.indexOf(",") != -1) {//如果存在结束值if (endValue) {this.$refs.rightBox.forEach(rightLi => {// 右侧数据的值和结束值相等if (rightLi.innerText.trim() == endValue.split(",")[0] ||rightLi.innerText.trim() == endValue.split(",")[1]) {let allLis = this.$refs.dataListBox.getElementsByTagName("li");Array.prototype.slice.call(allLis).forEach(li => {//li 为标签if (li.getAttribute("data-answer") == endValue) {// 结束为空坐标obj.end = {};// 结束的y坐标obj.end.y = self.offset(li).top - parentPosition.top + 25;// 结束的x坐标obj.end.x = self.offset(li).left - parentPosition.left - 20;//  结束元素为bondobj.endElement = li;// 结束值为data-answer值obj.endValue = endValue;// 线的颜色obj.line.stroke({color: "#333"});// 画线obj.line.plot(obj.begin.x, obj.begin.y, obj.end.x, obj.end.y);// 显示线条obj.line.show();// 左侧数据添加classNameleftLi.classList.add("selected");// 右侧数据添加classNameli.classList.add("selected");}});}});}}// 没有bond存在if (endValue.indexOf(",") == -1) {//如果存在结束值if (endValue) {this.$refs.rightBox.forEach(rightLi => {// 右侧数据的值和结束值想等if (rightLi.innerText.trim() == endValue) {// 结束为空坐标obj.end = {};//结束的y坐标obj.end.y = self.offset(rightLi).top - parentPosition.top + 25;//结束的x坐标obj.end.x = self.offset(rightLi).left - parentPosition.left - 20;//  结束元素为liobj.endElement = rightLi;// 结束值为data-answer值obj.endValue = endValue;// 线的颜色obj.line.stroke({color: "#333"});// 画线obj.line.plot(obj.begin.x, obj.begin.y, obj.end.x, obj.end.y);// 显示线条obj.line.show();// 左侧数据添加classNameleftLi.classList.add("selected");// 右侧数据添加classNamerightLi.classList.add("selected");}});}}});}},// 数据回显-生成bondbondList(data) {data.forEach(item => {if (item.indexOf(",") != -1) {/***  合并*/let self = this;let node = document.createElement("li");// li标签的值valuenode.innerHTML = "bond";// li标签 classNamenode.classList.add("answer-li");// li标签classNamelet datas1 = {},datas2 = {};this.dataList.forEach(el => {if (item.split(",")[0] == el.name) {datas1 = el;}if (item.split(",")[1] == el.name) {datas2 = el;}});if (datas1.status == "No" && datas2.status == "No") {node.classList.add("bondGray");} else {node.classList.add("bondBlue");}// li标签属性node.setAttribute("data-answer", `${item.split(",")[0] + "," + item.split(",")[1]}`);// 右侧数据和speedlet child = null,speed = null,infoList = null;for (let i = 0; i < 2; i++) {//  创建div标签 (bond后面的box）infoList = document.createElement("div");infoList.classList.add("infoListStyle");//  创建 div标签（bond后面的box的数据）child = document.createElement("div");// 数据的classNamechild.classList.add("netcardStyle");//  创建 div标签（bond后面的box的speed）speed = document.createElement("div");// 速率的classNamespeed.classList.add("speedStyle");if (i == 0) {child.innerHTML = item.split(",")[0];speed.innerHTML = datas1.speed;} else {child.innerHTML = item.split(",")[1];speed.innerHTML = datas2.speed;}// bond后面的box添加子元素infoList.appendChild(child);infoList.appendChild(speed);// bond添加子元素node.appendChild(infoList);}// 右侧数据列表添加bondthis.$refs.dataListBox.appendChild(node);// 清除 已经合并的元素this.$refs.rightBox.forEach(li => {if (li.innerText == item.split(",")[0]) {this.$refs.dataListBox.removeChild(li);}if (li.innerText == item.split(",")[1]) {this.$refs.dataListBox.removeChild(li);}});/***  解绑*/node.onclick = function () {// 移除bondself.$refs.dataListBox.removeChild(node);// 添加被合并的元素self.$refs.rightBox.forEach(li => {if (li.innerText.trim() == item.split(",")[0]) {self.$refs.dataListBox.appendChild(li);}if (li.innerText.trim() == item.split(",")[1]) {self.$refs.dataListBox.appendChild(li);}});// 清除左侧数据所选数据和lineArr数据let value = node.getAttribute("data-answer");self.clearLine(value);//bond或unbond线条重构self.itemForEach(true);};}});},// 解绑：清除左侧数据所选数据和lineArr数据clearLine(value) {// 左侧数据移除数据this.$refs.leftBox.forEach(lis => {if (lis.getAttribute("data-answer").indexOf(",") != -1) {if (lis.getAttribute("data-answer") == value) {lis.classList.remove("selected");lis.setAttribute("data-answer", '');}} else {if (lis.getAttribute("data-answer") == value.split(",")[0] ||lis.getAttribute("data-answer") == value.split(",")[1]) {lis.classList.remove("selected");lis.setAttribute("data-answer", "");}}});// 清除lineArr数据this.lineArr.find(current => {if (current.endValue && current.endValue.indexOf(",") != -1) {if (current.endValue == value) {// 移除开始点的classNamecurrent.beginElement.classList.remove("selected");// 移除结束点的classNamecurrent.endElement.classList.remove("selected");// 开始点移除所选的值current.beginElement.setAttribute("data-selected", "");current.endValue = "";current.endElement = "";current.end = "";current.line.hide();}} else {if (current.endValue == value.split(",")[0] || current.endValue == value.split(",")[1]) {// 移除开始点的classNamecurrent.beginElement.classList.remove("selected");// 移除结束点的classNamecurrent.endElement.classList.remove("selected");// 开始点移除所选的值current.beginElement.setAttribute("data-selected", "");current.endValue = "";current.endElement = "";current.end = "";current.line.hide();}}});},/*** 接口*/// 获取右侧数据async getDataList() {try {// 模拟测试数据// this.dataList.splice(0);// setTimeout(() => {//     this.dataList.push(//         {//             name: '1',//             status: 'Yes',//             speed: 'Unknown'//         }, {//             name: '2',//             status: 'No',//             speed: 'Unknown'//         }, {//             name: '3',//             status: 'Yes',//             speed: 'Unknown'//         }, {//             name: '4',//             status: 'Yes',//             speed: 'Unknown'//         }, {//             name: '5',//             status: 'Yes',//             speed: 'Unknown'//         }, {//             name: '6',//             status: 'Yes',//             speed: 'Unknown'//         }, {//             name: '7',//             status: 'No',//             speed: 'Unknown'//         }, {//             name: '8',//             status: 'Yes',//             speed: 'Unknown'//         }, {//             name: '9',//             status: 'No',//             speed: 'Unknown'//         }, {//             name: '10',//             status: 'Yes',//             speed: 'Unknown'//         }//     );//     const wHeight = document.getElementsByClassName('link_warp')[0];//     wHeight.style.height = `${this.dataList.length * 60 + this.dataList.length * 20}px`;// }, 1000);// 真实数据const {data} = await this.$http.get("接口");if (data.result && Array.isArray(data.result)) {this.dataList.splice(0);data.result.forEach(el => {this.dataList.push({name: el.name,status: el.status,speed: el.speed == "Unknown!" ? "" : el.speed});});// 右侧高度，svg需要一个固定高度const wHeight = document.getElementsByClassName('link_warp')[0];wHeight.style.height = `${this.dataList.length * 60 + this.dataList.length * 20}px`;}} catch (e) {console.log("错误", e);}},// 回显信息async getXXInfo() {// 模拟测试数据// let flag = true;// if (flag) {//     this.netList[0].value = '1';//     this.netList[1].value = '2';//     this.netList[2].value = '3,4';//     this.netList[3].value = '5,6';//     this.netList[4].value = '7';//     this.netList[5].value = '8';//     setTimeout(() => {//         this.itemForEach();//         this.bindBtnEvent();//     }, 3000);// }//真实数据try {const {data} = await this.$http.get("接口");if (data.result && data.result.xx) {/*** 连线*/this.netList[0].value = data.result.xx;this.netList[1].value = data.result.xx;this.netList[2].value = data.result.xx;this.netList[3].value = data.result.xx;this.netList[4].value = data.result.xx;setTimeout(() => {this.itemForEach();this.bindBtnEvent();}, 3000);} } catch (e) {console.log("错误", e);}},},mounted() {// 初始化svgthis.init();let that = this;// 滚动let dom = document.getElementsByClassName('steps_content')[0];dom.addEventListener("scroll", e => {that.scrollTop = e.target.scrollTop;});// 浏览器缩放时window.onresize = function () {document.documentElement.scrollTop = 0;document.body.scrollTop = 0;let resize = true;that.bindBtnEvent();that.bindParentsEvent();that.itemForEach(resize);};},created() {// 获取回显信息this.getXXInfo();}
};
</script>
<style scoped lang="stylus">
.xx_infoheight 100%.link_boxborder-top: 1px solid #F3F3F3padding-top 30px.link_warp//height 500pxdisplay flexjustify-content space-betweenwidth 60%margin 0 auto.draw-containerdisplay flexjustify-content space-aroundflex 1.infomargin-left 40pxlidisplay flexalign-items center.color_red, .color_blue, .color_graywidth 10pxheight 10pxmargin-right 9px.color_bluebackground: #4F90F0.color_graybackground: #C6C6C6.color_redbackground: #F57474.titlefont-size 12pxfont-family MicrosoftYaHeicolor rgba(0, 0, 0, 0.7)line-height 16px
</style>

需求：vue+svg实现连线功能相关推荐

基于 Vue 的学生社团线上管理平台开发与设计
0 引言近年来, 各高校为丰富学生的校园生活. 培养学生的个性, 社团与社团人数增加迅速, 需要处理的各类信息也层出不穷, 传统的管理方式已经不利于快捷地处理这些问题. 因此管理不便. 信息错综复杂 ...
html表格上下移动,Vue实现table上下移动功能示例
本文实例讲述了Vue实现table上下移动功能.分享给大家供大家参考,具体如下: 结合Element组件,scope中有三个参数(row,cow,$index)分别表示行内容.列内容.以及此行索引值, ...
css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
vue pc端实现直播功能+弹幕
vue项目中实现直播功能同时具备弹幕和聊天室功能一.vue中实现直播功能 1.首先,需要知道直播的常用协议,RTMP 和 HLS,我这边采用的直播流为HLS.下面就是对播放选取,做过 H5 播放器的 ...
使用Vue 简化用户查询/添加功能
使用Vue简化用户查询/添加功能 1. 查询功能 1.1 Vue核心对象: 1.2 brand.html: 1.3 selectAllServlet(无变化): 2. 添加功能 2.1 addBra ...
前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）
前端基于vue企业微信JS-SDK语音识别功能开发(同公众号) 微信JS-SDK 1.前期准备前端代码撰写微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功 ...
Vue.js入门实战项目（五）--编写Vue.js代码实现前端功能
前端页面通常由前端开发人员编写好,作为后端开发,只要能定位到自己需要写代码的地方,实现相应的需求即可. 完整项目我已经上传到了码云上,供大家学习参考. vuejsdemo 定位 HTML 1.找到 V ...
vue模拟加载更多功能（数据追加）
使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该 ...
Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器过滤器,就是vue允许开发者 ...
简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...

需求：vue+svg实现连线功能

需求：vue+svg实现连线功能相关推荐

最新文章

热门文章