最近在完成web端在线绘图功能时,需要开发一个从左侧拖拽一种图标到画布中。调研了非常多种现在做拖拽布局的组件,调研的地址是:https://vuejsexamples.com/tag/drag/经过比较,选择了一款优秀的可拖拽框架,vue-grid-layout。npm安装npm install vue-grid-layout --save使用demo<grid-layout            
                
         
            
            
            
            背景项目需要表格支持拉伸每列的宽度,查看了文档,官方建议是用 vue-draggable-resizable 插件结合 components 属性,给表头 header 增加一个可拖拽的功能。其实下面的前三个问题都很好解决,网上也有很多解决方案,但因为考虑到项目中表格很多,而且每个表格都要支持拉伸列宽度,所以不可能按官方文档那样,每个表格的 vue 组件都写重复的代码,所以就封装了一个方法,专门获            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-24 09:52:03
                            
                                2519阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            vue3 实现组件拖拽小案例一.实现效果将不同组件拖拽至展示区展示拖拽前拖拽后,取消后还原(没有动态演示真抱歉)二.实现过程页面基本样式<template>
  <div class="drag-view">
    <!-- 拖拽页面基本布局 -->
    <div class="drag-left">
      预览区
      <d            
                
         
            
            
            
            不bb先看效果 bb两句最近在做一个基于vue的后台管理项目。平时项目进度统计就在上禅道上进行。so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面。 既然领导发话,那就开干。。所有技术:vue + vuedraggable拖动的实现基于 vuedraggable的插件开发。主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动。  基本步骤布局这块布局为最为普通的两栏布局,这里采            
                
         
            
            
            
            Spring Boot 学习记录笔记【 五 】集成 Ant Design Vue页面布局官网代码展示自定义组件目录the-footer.vue 代码展示the-header.vue 代码展示the-left.vue 代码展示App.vue 代码修改HomeView.vue 代码调整全局图标页面解析错误解决集成HTTP库Axios数据绑定结尾 集成 Ant Design Vue安装命令:npm i            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-11 12:07:55
                            
                                301阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            项目场景:1,ant-design-vue 使用表单导入展示数据 2,项目需求显示为如下图所示,故涉及复杂表头的处理和显示 3,本篇文章主要以复杂表头的处理讲解为主,简单表头导入导出均引入xlsx之类的插件即可使用 循环对应产品属性的参与者信息并且标记填充展示功能分析:1,导出的效果,如果用原生自带的程序,是不会将两级复杂表头导出的,会默认展示两层表头的第二层,比如这样;由于没有一级表头的区分,故            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-02 20:55:37
                            
                                157阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            vue.draggable 拖拽项目需求中,需要支持拖拽,即找到了vue.draggable,下面来说一下基本使用方法 1.首先需要安装它,官网地址 https://www.itxst.com/vue-draggable/tutorial.html 2.安装 npm i -S vuedraggable 3.基本教程请看官网例子 我这边是根据后端接口请求的数据进行布局与官网例子稍有不同 我们首先看一            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-15 20:35:47
                            
                                2357阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
               介绍在vue中使用antV-G2展示散点图G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。一、安装 antV-G2通过 npm 安装npm install @antv/g2 -            
                
         
            
            
            
            在ant design vue组件库中,并没有提供可以直接监听table滚动的api,在此我使用了原生js去对table表格赋予一个监听表格滚动事件。在处理一写数据量特别大的情况下,我们不能把后端的数据一次性全部拿到前端在table表格中展示,为了考虑性能优化,使用了滚动加载表格数据。做这个功能之前,我们首先需要获取到table滚动到底部或者顶部时去触发方法。首先我想要对表格进行滚动加载,接口需要            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-09-22 20:13:42
                            
                                141阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            设计效果:需求:图片是九宫格布局,第一排图片之间的箭头为右箭头,第二排箭头为左箭头,以此类推,下箭头需求是以弓字形显示,卡片右侧内容Hover的时候要出现tip注意最后一排不足三个的时候要隐藏横向箭头,并隐藏下箭头子组件 html:<template>
  <div class="visitor-track-container">
    <div            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-14 23:28:04
                            
                                293阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            Antd Vue 组件库之Table表单 Table 表格展示行列数据。何时使用当有大量结构化的数据需要展现时;当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。如何使用指定表格的数据源 dataSource 为一个数组。代码演示Name  GenderEmailCandelária Cardosofemalecandelaria.cardoso@e            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-06 19:58:36
                            
                                350阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            用vue脚手架搭建完成一个项目之后,用npm install ant-design-vue --save安装ant design vue **1、layout布局** 我用的是layout的布局,安装完成后,在main.js中配置一下 官方文档上用一个引入一个,而且还有报错。我就直接全部引入过来了import Vue from 'vue'
import App from './App.vue'
i            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-16 13:51:22
                            
                                52阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            演示事例http://www.longstudy.club/vue-drag-scroll/index.html最近在做一个新的项目,有个需求是这样的:       简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移动。一开始没啥思路,所以就发了个朋友圈,得到的答案挺多的,主要还是用拖拽之类的,但这个拖拽只是单个元素的拖动,我想要            
                
         
            
            
            
            前端为Ant Design Vue 版本为1.6.2,使用的是vue2Ant Design Vue中 a-table 嵌套子表格,说的可能稍微墨迹了点,不过重点内容都说的比较详细,利于新人理解,高手可以自取完整代码 内容概述:完成样式及完整代码展示子表格嵌套只打开一个嵌套表格 完成样式及完整代码展示下图为官网图,会在每行最前面多一个加号,点击后会展开,看到子表格的数据<template>            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-19 12:53:25
                            
                                251阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            写个笔记记录下自己使用组件/插件的经历,个人经历,仅用作记录与参考,写法和解决方案各位还需鉴别,有更好的方法欢迎指导讨论。Ant Design Vue的table组件的基本用法官方文档说的比较清楚了:antd-vue 表格Table组件 这里记录下个人的使用经历和遇到的坑,项目以jeecg-boot 2.3.0作为架构进行开发,仅供参考。1.针对table组件生成的表格某一列的数据变化去改变其他列            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-23 18:17:57
                            
                                186阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            在ant design vue开发中有时候会利用后台数据循环生成表单,需要我们绑定prop以及自定义校验事件以下是我用官网提供的方法结合自身项目写出来的总结一、首先在data里定义表单数据// 循环生成的人员表单数据
addManForm:{
    manObjList:[
        {
            person_info_company_guid:undefined,//所属            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-15 14:32:22
                            
                                745阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            一. 场景UI框架:“ant-design-vue”: “^2.1.3”如下图,点击红色框中的图标时,所有的数据根据当前点击的内容进行升降排序。二. 实现2.1 如果是前端实现排序// 表格列的配置描述
const columns = [
	...
	{
		title: '实验名称',
		key: 'abName',
		slots: { customRender: 'abName' },            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-17 00:11:15
                            
                                1549阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            概述Ant Design作为一门设计语言面世,经历过多年的迭代和积累,它对UI的设计思想已经成为一套事实标准,受到众多前端开发者及企业的追捧和喜爱,也是React开发者手中的神兵利器。ant-design-vue 是 Ant Design 的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致,真正做到了样式0修改,组件API也尽量保持了一致。             
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-06 07:40:01
                            
                                203阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            Ant Design的布局 我们来讲一下Ant Design布局空间布局是体系化视觉设计的起点,和传统的平面设计的不同之处在于,UI界面的布局空间要基于『动态、体系化』的角度出发展开,我们受到建筑界大师柯布西耶的模度思想的启发,基于『秩序之美』的原则,探索UI设计中的动态空间秩序。 在中后台视觉体系中定义布局系统,建议从5个方面出发: 1.统一的画板尺寸 2.适配方案 3.网络单位 4.栅格 5.            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-27 08:18:46
                            
                                175阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            开发模式预览 demo在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码。常见的解决方案是像开发一般项目一样使用 webpack-dev-server 预览组件,比如通过 vue-cli 初始化项目,或者自己配置脚本。文艺一点儿地可能会用到 parcel 来简化 demo 的开发配置(比如 muse-ui)。展示文档作为一个 ui 组件库,也肯定要有自己的组件展示文档。一般业界常            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-04 17:08:29
                            
                                99阅读