vue draggable resizable gorkys与v-chart使用与总结

实现效果:

实现图表的二次封装以及表格的自由拖动,缩放功能

先贴出两个组件的地址:

vue-draggable-resizable-gorkys
v-chart

图标的二次封装

这里我们先做一个简单的封装

比如标题+图表的形式:chart_with_upwards_trend:

<div class="chartcontainer">
  <div>{{diyposition.title}}</div>
  <ve-line :data="chartData[0]" width="100%" height="100%" :judge-width="true" ref="mychart" :colors="colors"></ve-line>
 </div>

尤其说明一下这里的:judge-width="true"属性

如果不设置这个属性值为true的话 表格很有可能没有办法获取到初始宽度

另外,如果要实现表格宽度根据父组件的宽度自适应的话

我们要使用vue的ref属性

在父组件中监听父组件宽度的变化

一旦监听到宽度发生了变化,就调用子组件的方法

this.$refs.mychart.echarts.resize();

这样就能结合我们的vue-draggable-resizable-gorkys组件

实现图表的宽高自适应

关于图表的配色

我们可以自己定义一个颜色组:

colors: [
    "#61a0a8",
    "#d48265",
    "#91c7ae",
    "#749f83",
    "#ca8622",
    "#bda29a",
    "#6e7074",
    "#546570",
    "#c4ccd3"
   ]
:colors="colors"

这样就可以完成图表的配色了

vue-draggable-resizable-gorkys组件的使用
<vdr
    :active="false" //确定组件是否应处于活动状态。
    :w="200px"
    :h="200px"
    :resizable="ifresizable"//定义组件应该可以调整大小。
    :draggable="ifdraggable"//定义组件应该是否可拖动。
    v-on:dragging="onDrag"//每当拖动组件时调用。
    v-on:resizing="onResize"//每当组件调整大小时调用。
    @resizestop="onResizstop(index)"
    @dragstop="onDragstop(index)"//每当组件停止拖动时调用。
   >
     <LineChartBlock
     :chartData="charts.blockdata[index].chartdata"
     :diyposition="item"
     :changesizewidth="width"
     :changesizeheight="height"
     :colors="colors"
     v-if="charts.blockdata[index].type==1"
    ></LineChartBlock>
   </vdr>

总结

以上所述是小编给大家介绍的vue draggable resizable gorkys与v-chart使用与总结,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue插件draggable实现拖拽移动图片顺序

    vue插件draggable实现拖拽移动图片顺序

    本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下 例如图片显示的这种图片列表.商品展示需要拖动图片改变顺序,vuedraggable可以实现拖拽. 首先, npm i vuedraggable 然后在组件中引入, import draggable from 'vuedraggable'; 定义组件, components: { draggable, }, 标签中应用, <ul class="pic-list clearfix"

  • vue draggable resizable 实现可拖拽缩放的组件功能

    虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了. 所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本,最近正好有时间就适配一下. 新增特征 冲突检测 吸附对齐 默认样式优化 功能预览 项目地址 github.com/gorkys/vue-- 如果喜欢该项目,欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件是否开启冲突检

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

  • vue draggable resizable gorkys与v-chart使用与总结

    实现效果: 实现图表的二次封装以及表格的自由拖动,缩放功能 先贴出两个组件的地址: vue-draggable-resizable-gorkys v-chart 图标的二次封装 这里我们先做一个简单的封装 比如标题+图表的形式:chart_with_upwards_trend: <div class="chartcontainer"> <div>{{diyposition.title}}</div> <ve-line :data="c

  • vue draggable组件实现拖拽及点击无效问题的解决

    vue draggable组件实现拖拽及点击无效问题的解决

    目录 一.效果图 二.拖拽及点击无效解决方法 三.vuedraggable的使用 在实现一个移动端项目的时候,根据产品需求,要实现一个既能增加删除又可以拖拽调换位置的效果,然后我使用了draggable组件,然后发现放到手机上的时候苹果(ios)手机可以正常使用,但是鸿蒙系统的手机(例如华为pro40)有些是不可以正常拖拽.增加和删除,只能一开始正常操作两三个,然后后面就怎么点都没有什么反应.通过多次尝试和查找方法,最终找到了解决办法,我在这里总结一下. 一.效果图 二.拖拽及点击无效解决方法

  • Vue.Draggable拖拽功能的配置使用方法

    本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=

  • Vue draggable实现从左到右拖拽功能

    Vue draggable实现从左到右拖拽功能

    本文实例为大家分享了Vue draggable实现从左到右拖拽功能的具体代码,供大家参考,具体内容如下 1.安装插件 npm install vuedraggable 2.在需要使用的组件中引入 import draggable from 'vuedraggable' 3.注册组件 components:{undefined draggable } 示例: <div style="height: 1000px;">     <div class="test-

  • Vue.Draggable实现交换位置

    Vue.Draggable实现交换位置

    Vue.Draggable实现交换位置,供大家参考,具体内容如下 前言 最近的一个项目接触了到了Vue.Draggable这个组件.不过我们的需求和Vue.Draggable这个组件所支持的有些出入.这个拖拽组件属于插入的模式.一但拖拽的是相间的元素(中间隔着几个元素),那么拖拽元素就会占据被拖拽元素的位置,而后续元素位置逐级向下减一. 如下图: c拖拽到a的位置,表现为c插入到a的前面.所以变为了cab. 需求 实现交换而非插入及上图要变成(cba) 实现方式 想要阻止它插入是不可能,我们只能

  • vue Draggable实现拖动改变顺序

    本文实例为大家分享了vue Draggable实现拖动改变顺序的具体代码,供大家参考,具体内容如下 1.npm install vuedraggable 2.import draggable from 'vuedraggable' 3.示例代码 Test.vue <template>  <ul class="sort-ul">     <div>45454</div>     <draggable  group="arti

  • vue如何实现拖动图片进行排序Vue.Draggable

    vue如何实现拖动图片进行排序Vue.Draggable

    目录 拖动图片进行排序Vue.Draggable 下面是实现过程 项目draggable拖拽移动图片顺序 第一步.导入 第二步.组件引入 第三步.定义组件 第四步.页面中使用 拖动图片进行排序Vue.Draggable 好久没接触vue的项目了,最近接到一个vue图片处理的小项目,有一项需求是要实现拖动图片就行排序. 接到这个需求之后立马想到了Vue.Draggable这款基于Sortable.js实现的vue拖拽插件 下面是实现过程 第一步:安装Vue.Draggable.两种方式npm和ya

随机推荐