利用Vue3实现拖拽定制化首页功能

目录
  • 前期准备
  • 开始
    • 方法一
    • 方法二
    • 方案三
  • 最终实现结果
  • 总结

前期准备

  • Vue3
  • Ts
  • VueDragable （4版本以上）
  • 期望 拖拽组件 组件可以按需加载导入

开始

首先呢，我们先看下VueDragable的文档效果

文档的效果是这种基于列表的一个拖拽排序，那么回归到我们期望我们是想通过动态引入组件来进行拖拽排序，那么在完成拖拽定制化之前，首先要讲的是动态组件，在使用Vue2时候相信我们不陌生我们可以通过Component is来动态引入，如：

<template>
  <div class="component-box">
     <component :is="xxx""/>
  </div>
</template>
<script>
import xxx from 'xxx.vue'
export default{
    data(){
        return{

        }
    },
    components:{
        xxx
    }
}
</script>

其中is的值就是我们在components中注册的组件，这样就能完成动态组件的注入，那么在Vue3中呢？尤其是在setup语法糖使用时候我们这样做就会导致无法识别组件，这是因为setup语法糖中我们可以直接引入组件后使用，并不需要通过在components中注册（默认帮我们完成了），那么我们真实的业务场景其实后台返给我们的数据是这个格式的：

因此，我们的动态组件也需要做调整：

<div class="component-box" v-for="element in xxx">
  <component :is="element.name" :key="element.name"/>
</div>

这时候我们的is绑定就并非一个组件的实例了，其实是一个字符串，如此一来，就会产生错误并且导致页面无法正常加载我们的组件，那么该怎么办呢？大傻在网上做了调研，有三种方法:

方法一

通过Vue3的defineAsyncComponent方法去完成动态加载组件，使其成为一个实例对象。

import { defineAsyncComponent, ref } from 'vue'
// 需要加载的组件集合
const components = ref(new Map<string, any>())
components.value.set(
  'test1',
  defineAsyncComponent(() => import('./test1.vue'))
)
components.value.set(
  'test2',
  defineAsyncComponent(() => import('./test2.vue'))
)

这样我们在取值时候可以通过get方法传入具体字符串拿到对应的组件

方法二

这个则是通过shallowRef 或者 markRaw 来进行代理，shallowRef是浅层代理，只去代理一层，而markRaw则是标记该属性永远不为响应式

import { shallowRef, ref } from 'vue'
  import test1 from './test1.vue'
  import test2 from './test2.vue'

  //这里用ref的话，vue给出警告Vue接收到一个组件，该组件被制成响应对象。这可能会导致不必要的性能开销，应该通过将组件标记为“markRaw”或使用“shallowRef”而不是“ref”来避免。

  // 如果使用 markRaw 那么currentComp将不永远不会再成为响应式对象。 所以得使用 shallowRef
  let currentComp = shallowRef(test1)
 currentComp.value
  // 切换组件
  const changeComp = () => {
    if(currentComp.value == test1) {
      currentComp.value = test2
    }else {
      currentComp.value = test1
    }
  }

这种方法可行，但是不能传入字符串进行动态引入

方案三

双script标签完美解决

<script lang="ts">
import {
  Test1,
  Test2,
} from './components/DragComponents'

export default {
  components: {
    Test1,
    Test2,
  }
}
</script>
<script setup lang="ts">
const componentList = reactive([
  {
    name: 'Test1',
    title: '测试1',
    id: '1'
  },
  {
    name: 'Test2',
    title: '测试2',
    id: '2'
  }
])
</script>

这样我们可以直接去拿到后台数据进行处理。

最终实现结果

大傻最终呢，也是通过不断地爬坑去实现了这个拖拽效果，目前完成了横纵方向两种布局，待拓展的也就是，可定制宽高等等这些内容。有兴趣可以留言，大家一起交流。感兴趣的可以克隆下来试一试

总结

到此这篇关于利用Vue3实现拖拽定制化首页功能的文章就介绍到这了,更多相关Vue3拖拽定制化首页内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3.0利用vue-grid-layout插件实现拖拽布局

    Vue3.0利用vue-grid-layout插件实现拖拽布局

    目录 1.插件 2.插曲 3.实现 4.校验函数 1.插件 首先,我们选择的插件是vue-grid-layout npm i vue-grid-layout --save 官网:https://jbaysolutions.github.... 2.插曲 安装完依赖,发现项目能启动起来,按照官网demo发现页面空白,控制台提示没有找到子组件 改变思路,不使用局部引入组件,使用全局引入组件. 3.实现 const layout = ref<LayoutItem[]>([ { x: 0, y: 0,

  • 基于Vue3的全屏拖拽上传组件

    基于Vue3的全屏拖拽上传组件

    本文主要介绍了基于Vue3的全屏拖拽上传组件,分享给大家,具体如下: 知识点 浏览器拖拽 api fetch 请求 vue3 说来话长,长话短说,关于 html5 的拖拽 api 也只是做过一些拖拽排序的例子.其实思路上与其他拖拽上传组件基本一样,都是指定一个区域可拖拽,然后读取文件在上传 先说说拖拽 api,这个是 html5 新增的一个 api,给一个元素设置 draggable = true 属性时,该元素就会支持拖拽 拖拽元素事件如下 1. ondrag 当拖动元素的时候运行脚本 2.

  • vue3.x 使用jsplumb实现拖拽连线

    vue3.x 使用jsplumb实现拖拽连线

    本文实例为大家分享了vue3.x 使用jsplumb实现拖拽连线的具体代码,供大家参考,具体内容如下 如果想在vue2里面使用jsplumb 可以查看 文章,下面讲解如何在vue3.x 里面使用jsplumb进行拖拽连线 1.安装 npm install --save jsplumb 2.引入 <script lang="ts" setup>   import {ref, reactive,onMounted} from 'vue'   import jsPlumb fro

  • vue3使用vuedraggable实现拖拽功能

    vue3使用vuedraggable实现拖拽功能

    本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 1.npm i vuedraggable -S,使用这个命令,vue3会报错,如下图 2.使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版 3.vue使用代码如下: <template>   <div>     <h1 class="title">拖拽<

  • 利用Vue3实现拖拽定制化首页功能

    利用Vue3实现拖拽定制化首页功能

    目录 前期准备 开始 方法一 方法二 方案三 最终实现结果 总结 前期准备 Vue3 Ts VueDragable (4版本以上) 期望 拖拽组件 组件可以按需加载导入 开始 首先呢,我们先看下VueDragable的文档效果 文档的效果是这种基于列表的一个拖拽排序,那么回归到我们期望我们是想通过动态引入组件来进行拖拽排序,那么在完成拖拽定制化之前,首先要讲的是动态组件,在使用Vue2时候相信我们不陌生我们可以通过Component is来动态引入,如: <template> <div

  • Android利用控制点的拖拽画一个粽子

    Android利用控制点的拖拽画一个粽子

    目录 前言 实现逻辑 应用 总结 前言 上一篇我们通过Listener获取触控点的位置作为贝塞尔曲线的控制点,实现曲线的交互式绘制.不过,上一篇有个缺陷,控制点绘制完成后只能撤销,没法修改,如果要调整绘制的图形的话会非常麻烦,这一篇我们来实现控制点的拖拽式移动,动态调整位置来调整绘制的图形. 实现逻辑 上一篇的主要代码我们不做更改,主要是需要实现控制点的拖拽式移动,移动过程中动态绘制新的曲线.不过由于绘制过程中不能同时移动点,因此需要有个完成绘制的控制,完成绘制后才支持拖拽控制点.拖拽控制点实现

  • Qt利用QDrag实现拖拽拼图功能详解

    Qt利用QDrag实现拖拽拼图功能详解

    目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 main.cpp 4.1 mainwindow.h头文件 4.2 mainwindow.cpp源文件 4.3 PiecesList类 4.4 PuzzleWidget类 五.效果演示 一.项目介绍 本文介绍利用QDrag类实现拖拽拼图功能.左边是打散的图,拖动到右边进行复现,此外程序还支持手动拖入原图片. 二.项目基本配置 新建一个Qt案例,项目名称为“puzzle”,基类选择“QMainWindow”,取消选中创建

  • Java实现的可选择及拖拽图片的面板功能【基于swing组件】

    Java实现的可选择及拖拽图片的面板功能【基于swing组件】

    本文实例讲述了Java实现的可选择及拖拽图片的面板功能.分享给大家供大家参考,具体如下: 今天在论坛上看到帖子希望能在 Swing 中实现像拖地图一样拖拽图片.这里是一个最简单的实现,提供了一个基本思路. import javax.swing.*; import javax.swing.filechooser.FileNameExtensionFilter; import java.awt.*; import java.awt.event.MouseEvent; import java.awt.

  • Android中RecyclerView拖拽、侧删功能的实现代码

    Android中RecyclerView拖拽、侧删功能的实现代码

    废话不多说,下面展示一下效果. 这是GridView主文件实现. public class GridViewActivity extends AppCompatActivity { RecyclerView mRecyclerView; List<String> mStringList; RecyclerAdapter mRecyAdapter; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { s

  • .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:nuget install bootstrap-fileinput 注意:这里的导包需要在终端导入[需要在wwwroot文件夹下执行nuget命令]如下图 如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事 2前台页面编写

  • 微信小程序canvas拖拽、截图组件功能

    微信小程序canvas拖拽、截图组件功能

    先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-- readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上.如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放.旋转.删除元素 看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了:接下来我们一一解决.

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

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

  • 利用JavaScript实现拖拽改变元素大小

    利用JavaScript实现拖拽改变元素大小

    大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下

  • C#利用控件拖拽技术制作拼图游戏

    主要实现的功能: 1.程序附带多张拼图随机拼图. 2.可手动添加拼图. 3.游戏成功判断. 4.30秒超时判断. Puzzle.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms

随机推荐