分类：VUE

2020
10-30

vue制作toast组件npm包示例代码

之前写了一个ui组件，但是感觉没必要的东西太多了，所以做了一下优化介绍之前制作的小组件是用webpack-simple搭建的，但是左思右想感觉没必要的东西太多太多，所以又写了一个清洁版的，直接开整开始建立一个空文件夹，然后直接终端运行npminit建立完之后会生成一个package.json文件，内容如下注意：name是之后要发的npm包的名字不要重名，建议去npm先搜一下有没有在取接下来对package.json文件添加所需模块,{"name":"sev... 继续阅读 >

2020
10-30

在vue中使用jsonp进行跨域请求接口操作

前言：这里我们使用的是第三方插件jsonp。github网址：https://github.com/webmodules/jsonp1、安装npminstalljsonp-S2、引入一般新建一个js文件来引入原始jsonp插件，然后对原始插件进行封装，对跨域接口参数的拼接，封装好这个jsonp文件后export出去，之后在哪里用到就再在那里import。1.新建jsonp.js文件来封装原始jsonp插件//引入原始jsonp插件importoriginJsonpfrom'jsonp'/*封装原jsonp插件，返回promise对象url：... 继续阅读 >

2020
10-30

SpringBoot+Mybatis+Vue 实现商品模块的crud操作

准备工作第一步创建新module,名字为10-springboot-goods-vue.第二步添加maven依赖并进行初步配置(拷贝即可)第三步拷贝pojo,dao,service包中的所有接口和类.第四步拷贝静态资源到static目录(例如vue.js,axios.min.js)商品查询设计及实现创建GoodsController并定义相关方法,代码如下:packagecom.cy.pj.goods.controller;importcom.cy.pj.goods.pojo.Goods;importcom.cy.pj.goods.service.GoodsService;importjava.util.List;... 继续阅读 >

2020
10-30

design vue 表格开启列排序的操作

开启排序1、本地数据排序column数据设置，需要开启的列设置sorter:(a,b)=>a.address.length-b.address.length,自定义排序方法2、服务端排序sorter设置true点击排序，表格触发change方法，接受参数change(pagination,filters,sorter,{currentDataSource})第三个参数就是排序信息{field,order}<a-table:columns="header":dataSource="body":pagination="pagination"@change="handleTableChange">method... 继续阅读 >

2020
10-30

VUE和Antv G6实现在线拓扑图编辑操作

效果图如下：我使用的是G62.0,也可以使用G63.0，3.0的拓扑图单独作为一个编辑器使用，使用更加方便。不过2.0的比较简单，容易上手。1.首先在Antv官网上找到蚂蚁AntvG6插件，引入插件。也可以npm方式引入。2.写组件exportdefault{name:“index”,components:{},mounted(){this.initG6();},data(){return{action:‘',name:‘',func:‘',account:‘',workflow:‘',nodeType:0,color:‘',net:‘',Util:‘',workfl... 继续阅读 >

2020
10-30

在vue项目中引用Antv G2,以饼图为例讲解

我就废话不多说了，大家还是直接看代码吧~npminstall@antv/g2--savetemplate内容：<template><divid="pieChart"></div></template>js部分：​//引入G2组件importG2from"@antv/g2";​exportdefault{name:"",//数据部分data(){return{sourceData:[],//声明一个数组chart:{},//全局定义chart对象id:Math.random().toString(36).substr(2),//动态生成ID,便于多次引用}},/... 继续阅读 >

2020
10-30

在Vue中使用Viser说明(基于AntV-G2可视化引擎)

前言AntV-G2官网推荐使用Viser,本文介绍针对Vue版本的viser-vue简单使用。安装viser-vueyarnaddviser-vueyarnadd@antv/data-setmain.js中引入importViserfrom'viser-vue'Vue.use(Viser)定义d2demo.vue组件<template><div><v-chart:forceFit="true":height="height":data="data":scale="scale"><v-tooltip:showTitle="false"data-key="item*percent"/><v-axis/><v-legenddata-key="item"/><v-pieposi... 继续阅读 >

2020
10-30

antd vue table跨行合并单元格,并且自定义内容实例

ant-design-vue版本：~1.3.8需求：表格实现跨行合并，并且在合并完的单元格中显示图片效果图：源码：exportdefault{data(){return{pic95:require('@/assets/produit/95.png'),pic99:require('@/assets/produit/99.png'),varTable:{cloumns:[{title:'置信度',dataIndex:'confidence',class:'confidence',customRender:(va... 继续阅读 >

2020
10-30

vue用ant design中table表格,点击某行时触发的事件操作

使用customRow设置行属性，写对应事件:customRow="rowClick"然后在data里面写rowClick:record=>({//事件on:{click:()=>{//点击改行时要做的事情//......console.log(record,'record')}}})在官方文档中也写的很清楚补充知识：Ant-Design-Vuetable合并单元格，并且添加点击事件点击行，有一个customRow。可以配置点击事件。单元格的自定义分为两种方式。一种是：通过template标签。html部分//... 继续阅读 >

2020
10-30

ant design vue嵌套表格及表格内部编辑的用法说明

实现效果：因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件，无法实现根据展开节点获取其内部数据的需求，因此直接使用a-table组件表格外层可以翻页，查询携带页码参数<a-tablesize="default"rowKey="dict_id"//根据自己数据内部关键针设定ref="table"@expandedRowsChange="expandedRowsChange"@expand="expand"//展开表格节点操作@change="change"//外层表格中排序，翻页，修改页面数量等操作:expandedRo... 继续阅读 >

2020
10-30

解决ant design vue 表格a-table二次封装,slots渲染的问题

目的就是对a-table进行二次封装，但是在如何显示a-table的slot时遇到了问题，原本想法是在a-table内把$slots都渲染，期望在使用该组件时能正确渲染，然而。。。并不会正确渲染<template><a-tablebordered:scroll="{x:scrollX,y:600}"v-bind="{...$attrs,...$props,...{dataSource:body,columns:header}}":loading="loadingObj"v-on="listeners"><templatev-for="(val,slot)in$slots":slot="slot">{{... 继续阅读 >

2020
10-30

ant design vue中表格指定格式渲染方式

注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别渲染方法1：指定渲染函数：constcolumns=[{title:'排名',dataIndex:'key',customRender:renderContent//渲染函数的规则},{title:'搜索关键词',dataIndex:'keyword',customRender:(text,row,index)=>{if(index<4){//前4行数据以a标签的形式被渲染return<ahre... 继续阅读 >

2020
10-30

vue实现一个矩形标记区域(rectangle marker)的方法

代码地址：vue-rectangle-marker一、前言一些cms系统经常会用到区域标记功能，所以写了个用vue实现的矩形标记区域，包含拖拽、放大缩小、重置功能。二、实现结果1.初始2.标记三、代码实现<template><divclass="rectangle-marker"><divclass="mark-wrap"><imgref="backImg":src="imgUrl"class="img-responsive"alt="响应式图像"@load="onload"><divclass="draw-rect":class="{'no-event':disabled}"@mousemov... 继续阅读 >

2020
10-30

ant design vue datepicker日期选择器中文化操作

按照antdesignvue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言：//默认语言为en-US，如果你需要设置其他语言，推荐在入口文件全局设置localeimportmomentfrom'moment';import'moment/locale/zh-cn';moment.locale('zh-cn');<a-date-picker:defaultValue="moment('2015-01-01','YYYY-MM-DD')"/>完成此步骤后，日期只有部分是中文的，并且年月顺序错误，查找了很多资料才发现，antdesignvue有一个国... 继续阅读 >

2020
10-28

ant design vue中日期选择框混合时间选择器的用法说明

首先时间格式化用到moment方法，需要在页面中引入moment组件importmomentfrom'moment'结构代码：<a-date-pickerstyle="width:100%":getCalendarContainer="(triggerNode)=>triggerNode.parentNode"format="YYYY-MM-DDHH:mm:ss"v-decorator="['pushtime',{rules:[{required:true,message:'请输入发布时间!'}]}]":showTime="{defaultValue:moment('00:00:00','HH:mm:ss')}":disabl... 继续阅读 >

2020
10-28

解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)

一、在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为Vue无法探测普通的新增属性，需要用vue内置的方法二、Vue.set()响应式新增与修改数据此时我们需要知道Vue.set()需要哪些参数，官方API：https://cn.vuejs.org/v2/api/#... 继续阅读 >