Vue3实现可视化拖拽标签小程序

这篇具有很好参考价值的文章主要介绍了Vue3实现可视化拖拽标签小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

Vue3实现可视化拖拽标签小程序,vue.js,typescript,前端

实现功能:可视化标签拖拽,双击标签可修改标签内容

HTML结构

<div class="box" v-move>
  <div class="header">标签1</div>
  <div @dblclick="startEditing" v-if="!isEditing">{{content}}</div>
  <input type="text" v-model="editedContent" @blur = 'stopEditing' v-if="isEditing">
</div>

一个大DIV包含里面存放两个DIV一个input
header为头部标签名称
内容区域绑定双击鼠标事件,触发开始修改事件(startEditing),使用v-if进行标签的显示和隐藏操作
input标签,事件绑定为修改内容,绑定获取焦点事件(@blue=“stopEditing”),并且绑定和内容区域一样的变量用来控制显示隐藏,一方为显示另一方必定为隐藏

TS部分

import { Directive, DirectiveBinding } from "vue";

const vMove: Directive<any, void> = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    // 创建一个变量 moveElement,表示 DOM 元素的子元素(假设这是要拖动的元素)
    const moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement;

    // 鼠标按下事件处理函数
    const mouseDown = (e: MouseEvent) => {
      // 计算鼠标相对于元素的偏移量
      const X = e.clientX - el.offsetLeft;
      const Y = e.clientY - el.offsetTop;

      // 鼠标移动事件处理函数
      const move = (e: MouseEvent) => {
        // 更新元素的位置,实现拖动效果
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
      };

      // 添加鼠标移动事件监听器
      document.addEventListener("mousemove", move);

      // 添加鼠标松开事件监听器,用于停止拖动
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };

    // 将鼠标按下事件处理函数添加到元素上
    moveElement.addEventListener("mousedown", mouseDown);
  },
};

采用自定义指令进行设置移动组件,DirectiveDirectiveBinding:这是Vue.js中用于自定义指令的一些类型和功能。自定义指令允许你在DOM元素上附加自定义行为。Directive 是自定义指令的基本类型,而 DirectiveBinding 是与指令绑定的数据的类型。

上述代码定义了一个名为 vMove 的自定义指令,它会在元素上附加拖动行为。当鼠标在 moveElement(元素的子元素)上按下时,启动拖动操作,通过鼠标移动事件更新元素的位置,并在鼠标松开时停止拖动。这个自定义指令可以在Vue.js应用中使用,将其添加到需要拖动的元素上,以实现拖拽功能。文章来源地址https://www.toymoban.com/news/detail-696216.html

<script setup lang="ts">
// 导入 Vue 和自定义指令相关的模块
import { ref, Directive, DirectiveBinding } from "vue";

// 自定义指令 vMove 的实现
const vMove: Directive<any, void> = (el: HTMLElement, binding: DirectiveBinding) => {
  // 获取需要移动的 DOM 元素,假设它是传入元素的第一个子元素
  let moveElement: HTMLElement = el.firstElementChild as HTMLDivElement;
  console.log(moveElement);

  // 鼠标按下事件处理函数
  const mouseDown = (e: MouseEvent) => {
    // 计算鼠标点击位置相对于元素左上角的偏移量
    let X = e.clientX - el.offsetLeft;
    let Y = e.clientY - el.offsetTop;

    // 鼠标移动事件处理函数
    const move = (e: MouseEvent) => {
      console.log(e);
      // 更新元素的位置,实现拖动效果
      el.style.left = e.clientX - X + "px";
      el.style.top = e.clientY - Y + "px";
    };

    // 添加鼠标移动事件监听器,以便拖动元素
    document.addEventListener("mousemove", move);

    // 添加鼠标松开事件监听器,停止拖动
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", move);
    });
  };

  // 将鼠标按下事件处理函数添加到移动元素上
  moveElement.addEventListener("mousedown", mouseDown);

  console.log(binding);
};

// 使用 ref 创建响应式数据
const content = ref('内容'); // 原始内容
const isEditing = ref(false); // 是否处于编辑模式
const editedContent = ref(''); // 编辑后的内容

// 进入编辑模式
const startEditing = () => {
  isEditing.value = true;
  editedContent.value = content.value; // 将原始内容设置为编辑后的内容
}

// 退出编辑模式
const stopEditing = () => {
  isEditing.value = false;
  content.value = editedContent.value; // 保存编辑后的内容
}

</script>

<template>
  <div class="box" v-move>
    <div class="header">标签1</div>
    <!-- 使用双击事件触发编辑模式 -->
    <div @dblclick="startEditing" v-if="!isEditing">{{ content }}</div>
    <!-- 编辑模式下显示输入框 -->
    <input type="text" v-model="editedContent" @blur="stopEditing" v-if="isEditing">
  </div>
</template>

<style scoped>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px solid;
  background: #f59c09;
  .header {
    height: 20px;
    background: #f59c09;
    color: white;
  }
}
</style>

到了这里,关于Vue3实现可视化拖拽标签小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 记录vue3+echarts搭建数据可视化页面!

    提示:记录一下写页面的时候遇到过的一些小问题! 页面布局就是简单的用了个三栏式布局,在写页面的过程中对于多个页面共同使用的部分要注意善用组件复用,避免写冗余重复的代码! 比如说对于需要重复使用的图表容器,可以将其注册为全局组件V3Echarts.vue,当需要表

    2024年02月16日
    浏览(56)
  • Vue3 +Echarts5 可视化大屏——屏幕适配

    项目基于Vue3 + Echarts5 开发,屏幕适配是使用 scale 方案 Echarts组件按需引入,减少打包体积 地图组件封装(全国省份地图按需加载) 效果图: 大屏适配常用的方案有 rem + vw/vh 和 scale 。 rem + vw/vh 方案 结合使用rem(相对于根元素字体大小的单位)和vw/vh(视窗宽度/高度的单位

    2024年02月15日
    浏览(51)
  • Vue3 + Vite + TypeScript + dataV 打造可视化大屏

    网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从 0 搭建一个可视化大屏项目,毕竟 Vue 一直在更新,自己搭建的可以使用最新版本的 Vue ,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好

    2024年02月03日
    浏览(46)
  • 一个Vue3搭建的低代码数据可视化开发平台

    Vue.js是一款基于MVVM模式的JavaScript框架,通过其简洁、高效的语法和强大的功能,帮助开发者构建出更加灵活、快速和可维护的Web应用。与其他框架相比,Vue区别于市场上的繁杂,它注重易用性和迅速上手的优势,给开发者提供了更大的自由度。无论是用于构建简单的个人项

    2024年02月14日
    浏览(48)
  • 基于VUE3开发的CAD图可视化平台代码开源了

    ​ 唯杰地图VJMAP 为 CAD 图或 自定义地图格式 WebGIS 可视化 显示开发提供的一站式解决方案,支持的格式如常用的 AutoCAD 的 DWG 格式文件、 GeoJSON 等常用 GIS 文件格式,它使用 WebGL 矢量图块 和 自定义样式 呈现交互式地图, 提供了全新的 大数据可视化 可视化功能。 ​ 唯杰地图

    2024年01月18日
    浏览(63)
  • 前端vite+vue3——可视化页面性能耗时指标(fmp、fp)

    大家好,我是yma16,本文分享关于 前端vite+vue3——可视化页面性能耗时(fmp、fp)。 fmp的定义 FMP(First Meaningful Paint)是一种衡量网页加载性能的指标。它表示在加载过程中,浏览器首次渲染出有意义的内容所花费的时间。有意义的内容指的是用户可以看到和交互的元素,如

    2024年03月19日
    浏览(62)
  • vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目

    目录 系列文章目录 前言 一、搭建项目 1.检查node版本号 2.搭建vue3项目 二、配置cesium 1.前期准备 2.安装cesium 3.引入cesium 4.初始化页面 总结   这几年智慧城市、数字孪生、数字可视化这些高级词汇可太多啦,招聘简介上也有很多要求会webGis等相关经验,所以我觉得最近来学一

    2024年02月07日
    浏览(68)
  • GoView 是一个Vue3搭建的低代码数据可视化开发平台

    开源、精美、便捷的「数据可视化」低代码开发平台 框架:基于  Vue3  框架编写,使用  hooks  写法抽离部分逻辑,使代码结构更加清晰; 类型:使用  TypeScript  进行类型约束,减少未知错误发生概率,可以大胆修改逻辑内容; 性能:多处性能优化,使用页面懒加载、组件

    2024年02月04日
    浏览(60)
  • 【Python可视化大屏】全流程讲解pyecharts拖拽可视化大屏的背后原理

    目录 一、设计方案 二、项目背景 三、电影爬虫 3.1 导入库 3.2 发送请求 3.3 解析页面 3.4 存储到csv 四、数据持久化存储 4.1 导入库 4.2 存入MySQL 4.3 讲解视频 五、开发可视化大屏 5.1 柱形图 5.2 饼图 5.3 词云图 5.4 数据表格 5.5 涟漪散点图 5.6 条形图 5.7 大标题 5.8 Page组合 六、彩蛋

    2024年02月04日
    浏览(75)
  • vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化

    大家好,我是yma16,本文分享关于 vue3+echarts应用——深度遍历 html 的 dom结构并使用树图进行可视化。 💖vue3系列文章 vue3 + fastapi 实现选择目录所有文件自定义上传到服务器 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+an

    2024年01月20日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包