前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >组件左右拖动

组件左右拖动

作者头像
tianyawhl
发布于 2022-05-06 10:34:39
发布于 2022-05-06 10:34:39
2.2K00
代码可运行
举报
文章被收录于专栏:前端之攻略前端之攻略
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <div>
    <div style="display:flex;overflow:hidden;">
      <div class="left" style="width:300px;margin-right:20px;" ref="leftRef">
        <ul @dragstart="handleDragStart">
          <li v-for="(item,index) in componentsList" :key="index"
            :data-index="index" draggable>{{item.componentName}}</li>
        </ul>
      </div>
      <!-- 子元素里面有滚动条 flex:1 overflow:hidden;  或者flex:1;width:0 -->
      <div class="right rightContain"
        style="flex:1;overflow:hidden;;margin-right:20px;flex-shrink:0;"
        ref="rightContain">
        <div style="height:100%;overflow:auto;"
          @drop="handleDrop" @dragover="handelDragover" ref="dragedCon"
          @mousedown="handleMouseDown" @mouseup="handleMouseup">
          <div style="background:#fff;height:100%;width:1600px;position:relative;">
            <img src="../assets/imgs/jiujiangScada.jpg" alt="">
            <component class="commonCom drag"
              v-for="(item,index) in dragedComponents" :key="index"
              :is="item.componentFlag" :style="item.style" :data-index="index"
              @click.native="handleClick"></component>
          </div>
        </div>
      </div>
      <div class="right" style="width:250px;">
        <div>名称-{{label}}</div>
        <div>data-myIndex</div>
        <el-input v-model="myDataIndex"></el-input>
        <div>ID</div>
        <el-input v-model="IDValue"></el-input>
        <el-button @click="save">保存</el-button>
      </div>
    </div>
    <div>
      <el-button type="primary" @click="saveHtml">保存html</el-button>
      <div style="overflow:auto;" id="resultHtml">


      
      </div>
    </div>
  </div>

</template>

<script>
import componentsObj from "@/utils/requireComponents.js";
export default {
  name: "test",
  data() {
    return {
      label:"",
      index: 0,
      currentIndex: "",
      indexArr: [],
      myDataIndex: "",
      IDValue: "",
      timer: null,
      disX: "",
      disY: "",
      positionInfor: [],
      dragedComponents: [],
      componentsList: [
        {
          componentName: "文本组件",
          componentFlag: "MyText",
          style: { left: 0, top: 0 },
        },
        {
          componentName: "按钮组件",
          componentFlag: "Button",
          style: { left: 0, top: 0 },
        },
        {
          componentName: "多内容组件",
          componentFlag: "MoreLineText",
          style: { left: 0, top: 0 },
        },
      ],
    };
  },

  components: componentsObj,
  mounted() {},

  methods: {
    save() {
      console.log(this.currentIndex);
      let index = this.currentIndex;
      console.log(typeof index);
      let element = document.querySelector(`[data-myindex='${index}']`);
      console.log(element);
      element.id = this.IDValue;
    },
    handleClick(e) {
      // console.log(e.target.innerHTML)
      this.label = e.target.innerHTML
      console.log(e.target.getAttribute("data-myindex"));
      let dataMyIndex = e.target.getAttribute("data-myindex");
      if (dataMyIndex) {
        this.currentIndex = dataMyIndex;
        this.myDataIndex = dataMyIndex;
      } else {
        this.index++;
        e.target.setAttribute("data-myindex", this.index);
        this.currentIndex = this.index;
        this.myDataIndex = this.index;
      }
      this.IDValue = document.querySelector(
        `[data-myindex='${this.currentIndex}']`
      ).id;
      console.log(this.currentIndex);
      // e.target.setAttribute("data-myindex",this.index)
      // e.target.id = "123456"
      // console.log(e.target)
    },
    handleMouseDown(e) {
      var el = e.target;
      while (el && el.classList && !el.classList.contains("drag")) {
        el = el.parentNode;
      }
      console.log(el);

      let rightDisX = e.clientX - el.offsetLeft;
      let rightDisY = e.clientY - el.offsetTop;
      console.log(el.offsetTop);
      document.onmousemove = (e) => {
        let left = e.clientX - rightDisX;
        let top = e.clientY - rightDisY;
        el.style.left = left + "px";
        el.style.top = top + "px";

        console.log(el.dataset.index);
        this.dragedComponents[el.dataset.index].style.left = left + "px";
        this.dragedComponents[el.dataset.index].style.top = top + "px";
        console.log(this.dragedComponents);
      };
      console.log(el.offsetLeft);
    },
    handleMouseup() {
      document.onmousemove = null;
      document.onmouseup = null;
    },
    saveHtml() {
      console.log(document.querySelector(".rightContain").innerHTML.replace(/data-v-bef6da34=""/g,''));
      document.querySelector("#resultHtml").innerHTML =
        document.querySelector(".rightContain").innerHTML.replace('data-v-bef6da34=""','');
    },
    handleDragStart(e) {
      console.log("hi");
      console.log(e.target.dataset.index);
      e.dataTransfer.setData("index", e.target.dataset.index);
      this.disX = e.clientX - this.$refs.leftRef.getBoundingClientRect().left;
      this.disY = e.clientY - this.$refs.leftRef.getBoundingClientRect().top;
      console.log(this.disX);
      console.log(this.disY);
    },
    handelDragover(e) {
      e.preventDefault();
    },
    handleDrop(e) {
      console.log(e.dataTransfer.getData("index"));
      let index = e.dataTransfer.getData("index");
      let component = JSON.parse(JSON.stringify(this.componentsList[index]));
      console.log(this.$refs.dragedCon.scrollLeft);
      let left = e.clientX - this.$refs.dragedCon.getBoundingClientRect().left;
      let top = e.clientY - this.$refs.dragedCon.getBoundingClientRect().top;
      console.log(left);
      console.log(top);
      let scrollLeft = this.$refs.dragedCon.scrollLeft;
      let scrollTop = this.$refs.dragedCon.scrollTop;
      if (scrollLeft > 0) {
        left += scrollLeft;
      }
      if (scrollTop > 0) {
        top += scrollTop;
      }
      component.style.left = left - this.disX + "px";
      component.style.top = top - 15 + "px";
      console.log(component);
      this.dragedComponents.push(component);

      e.preventDefault();
      e.stopPropagation();
    },
  },
};
</script>

<style scoped>
.left {
  border: 1px solid #ccc;
  height: 500px;
}
.right {
  border: 1px solid #ccc;
  height: 500px;
}
.commonCom {
  position: absolute;
}
</style>

 举例其中的一个组件 MoreLineText.vue

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
  <ul class="p3 textul">
    <li class="p-title">标题</li>
    <li><span class="title-span">温度 </span><input type="text" class="textbox "
        value="11345566" readonly="readonly"> <span class="unit"></span></li>
  </ul>
</template>

批量注册组件 requireComponents.js 

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let webpackConponents = require.context("../components", true, /(\.vue)$/);
console.log(webpackConponents);

let componentsObj = {};
webpackConponents.keys().forEach((key) => {
    console.log(key); // ./requreContext1.vue  ./requreContext2.vue  ./newTest/RequreContext3.vue
    var index = key.lastIndexOf("/")
    let componentName = key.substring(index + 1, key.length).replace(/\.vue$/, "")
    console.log(componentName)

    // let componentName = key.split("/")[1].replace(/\.vue$/, "");
    let componentConfig = webpackConponents(key); //注意不能用[]
    componentsObj[componentName] = componentConfig.default;
   
});

console.log(componentsObj);

export default componentsObj
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-05-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
高通骁龙8295芯片及第六代Kryo架构
高通骁龙8295芯片,作为高通第四代汽车数字座舱平台的旗舰产品,凭借先进的5纳米制程工艺,在智能汽车领域树立了新标杆。这款芯片集成了强大的AI处理能力,算力高达30TOPS(8295P更是达到60TOPS),远超市面上众多竞品,为自动驾驶辅助、智能交互体验奠定了坚实基础。其GPU和CPU性能的显著提升,确保了流畅的多屏显示和复杂图形处理需求,能够在单一芯片上驱动多达11块屏幕,重新定义了未来座舱的沉浸式体验。加之增强的安全特性、高效的连接技术和对最新无线标准的支持,骁龙8295正引领着汽车智能化转型的浪潮,成为众多高端车型及创新品牌首选的智能核心。
用户7353950
2024/07/05
1.9K0
高通骁龙8295芯片及第六代Kryo架构
229TOPS!英特尔杀入AI座舱市场:英伟达/高通/地平线等迎来强敌!
8月8日下午,英特尔在深圳召开“英特尔AI座舱暨车载独立显卡发布会”,重磅发布了旗下首款锐炫™车载独立显卡——Arc A760,凭借高达229TOPS的强劲算力,将助力汽车厂商进入技术前沿,为智能座舱带来极致的生成式AI体验。
芯智讯
2024/08/09
1970
229TOPS!英特尔杀入AI座舱市场:英伟达/高通/地平线等迎来强敌!
搅局者联发科用“AI定义座舱”,能打破高通座舱垄断吗?
前言:在生成式端侧大模型上车、算力进化等技术背景下,智能座舱产业的市场机遇和竞争格局正在发生巨变。联发科正凭借“AI定义座舱”,加速赶超竞品,以实现智能座舱产业的重塑。
芯智讯
2024/04/30
2010
搅局者联发科用“AI定义座舱”,能打破高通座舱垄断吗?
端侧AI计算开发最难的问题,都被这家公司搞定了
机器之心报道 作者:泽南 为什么高通技术能成为众多公司产品宣传的重点? 最近一段时间,车规芯片的「天花板」骁龙 8155(第三代骁龙座舱旗舰级平台)引发了人们的热议,这款芯片强大的整体算力一举改变了很多车型饱受诟病的车机卡顿问题。 很多品牌都以搭载骁龙 8155 芯片作为卖点,理想 L9、小鹏 P5、蔚来 ET5、吉利星越 L 等热门车型上都有它的身影,极氪 001 甚至为了让车主放心,宣布免费为已购车的用户升级 8155 芯片。 根据车厂公布的信息,骁龙 8155 是首款 7 纳米制程工艺打造的车规级数字
机器之心
2022/08/25
3180
端侧AI计算开发最难的问题,都被这家公司搞定了
车圈新卖点8155背后,汽车智能化竞争已踩下油门 | 幂集创新
鱼羊 萧箫 发自 凹非寺 量子位 | 公众号 QbitAI 1111111   一切技术创新周期,一切发明时代,其实都是幂集创新作用的时代。我们希望通过这一系列栏目提供一种尺度,丈量技术创新周期的尺度,从技术维度把握创新浪潮的演进路线。 这是量子位最新原创系列策划栏目“幂集创新”第二期,本期的主题是智能车。 汽车的卖点,正在悄然向AI创新倾斜。落地到产品,就是智能车的方方面面。 且看车圈近来最热议题成都车展,连宝马沃尔沃这样老牌高端车企,都把传统汽车看重的设计感、动力性之类先放到了一边。 基本上是开口一个“
量子位
2022/09/20
2750
车圈新卖点8155背后,汽车智能化竞争已踩下油门 | 幂集创新
最强的电脑/手机/汽车/机器人芯片-2023
CPU 基准测试性能层次结构根据性能对当前和上一代英特尔和 AMD 处理器进行排名,包括所有最适合游戏的 CPU。在 CPU 排名图表和表格下方,本指南还为您提供了 CPU 基准测试的基本介绍,并包括常用 CPU 基准测试的列表。我们对 CPU 进行了超过 25 年的基准测试,因此我们在本文的第二页上保留了许多传统的历史 CPU 排名。
zhangrelay
2023/10/07
4410
最强的电脑/手机/汽车/机器人芯片-2023
车机而已,怎么连虚幻引擎都用上了?
金磊 浩楠 发自 凹非寺 量子位 | 公众号 QbitAI 赛车游戏,想必大家都玩过;汽车,很多人也都开过。 但是朋友,像游戏那样操控一台真正的汽车,你体验过吗? 来,先看这么一段画面: (本文所有图片、GIF均符合免责条款:车辆图片仅供参考,具体车型、配置信息等产品细节,请以路特斯实际发布为准) 你以为它是一段汽车展示动画? 不不不,事实并非是“你以为的你以为”,它的庐山真面目是这样的: 没错,刚才咱们看到的画面,只是车内中控屏上显示的一段show。 至于为什么虚实之间能够切换的如此丝滑,是因为背后所
量子位
2023/02/28
1.1K0
车机而已,怎么连虚幻引擎都用上了?
高通AI启示录,从一篇数学物理基础论文说起
如果说移动时代的成功“秘诀”太难追,那这篇论文展示的,正是高通面向AI时代的“十年功”管窥。
量子位
2019/06/28
5470
高通AI启示录,从一篇数学物理基础论文说起
5G时代来临,高通如何让AI触手可及?
不需要耗费巨大的算力,高通与vivo、腾讯王者荣耀、腾讯AI Lab合作,他们正共同打造一支AI电竞战队“SUPEX”,将与人类玩家对战。
量子位
2019/05/13
4980
5G时代来临,高通如何让AI触手可及?
性能超高通8155!首款车规级7nm智能座舱芯片“龍鷹一号”年底量产,吉利新车将直接采用!
8月5日,由国产半导体IP供应商芯原股份主办的“第十二届松山湖中国IC创新高峰论坛”在东莞松山湖召开,在本次论坛上,芯擎科技推介了其首款车规级7nm智能座舱芯片“龍鷹一号”。
芯智讯
2022/08/08
6520
性能超高通8155!首款车规级7nm智能座舱芯片“龍鷹一号”年底量产,吉利新车将直接采用!
芯擎科技7nm智能座舱芯片“龍鷹一号”实现量产出货!
3月30日,湖北芯擎科技有限公司(以下简称“芯擎科技”)在武汉举行发布会,正式宣布旗下新一代7nm智能座舱芯片“龍鷹一号”实现量产出货。
芯智讯
2023/04/11
4390
芯擎科技7nm智能座舱芯片“龍鷹一号”实现量产出货!
高通的自研架构芯片,正在整合生成式AI世界
新一代的旗舰手机上,动态壁纸、AI 画图、语音通话总结等功能一字排开,常用功能也有了新技术加持。
机器之心
2025/02/14
1010
高通的自研架构芯片,正在整合生成式AI世界
台积电4nm工艺,能拯救翻车的高通「火龙8」吗?
在手机芯片压力面前,高通看向了汽车和元宇宙。 作者 | 来自镁客星球的家衡 就在昨晚,高通召开了“2022骁龙之夜”线上直播活动,正式推出全新一代骁龙8 Gen 1 Plus处理器(以下简称“骁龙8+”)。 虽然名称上为骁龙8 Gen 1(以下简称“骁龙8”)的高频升级版,但由于改用台积电4nm工艺生产,因此这款芯片可以视作一款更新迭代的产品。 正因如此,上市仅仅6个月的骁龙8成为骁龙8系中“最短命”的旗舰芯片,它见证了手机厂商在散热上的“疯狂内卷”,同时也成了三星代工的“替罪羊”。 台积电4nm替代三星
镁客网
2022/05/23
3960
台积电4nm工艺,能拯救翻车的高通「火龙8」吗?
高通Snapdragon Ride Flex发布:业界首款同时支持数字座舱和ADAS的可扩展系列SoC
1月5日消息,昨日晚间移动处理器大厂高通(Qualcomm) 于CES 2023展会期间宣布推出了业界首款同时支持数字座舱和ADAS的可扩展系列SoC——Snapdragon Ride Flex,进一步丰富了高通骁龙“数字底盘”产品组合。
芯智讯
2023/02/09
5010
手机装不下骁龙8了
如果说CPU、GPU百分之二三十的提升感知还不够强烈,那么以往PC游戏上才能体验到的AI超级分辨率功能被一整个搬到手游上,你又感觉如何?
量子位
2021/12/09
3990
手机装不下骁龙8了
利用NPU和异构计算,高通为终端侧生成式AI普及按下“加速键”
当前,生成式AI变革正加速数字化转型,推动经济增长。根据麦肯锡研究,生成式AI技术可使60多个用例每年实现2.6万亿至4.4万亿美元的总体经济效益增长,经济规模大致相当于英国2021年的GDP。在移动领域,AI的影响已经深入到摄影摄像、电源管理、性能提升、恶意软件侦测和安全保障等多个方面,并为用户带来更加个性化、高效、安全和高度优化的体验。
芯智讯
2024/03/26
5110
利用NPU和异构计算,高通为终端侧生成式AI普及按下“加速键”
2023 CES 变色龙汽车 帅不帅?
元宇宙、虚拟现实在今年的 CES 上风靡一时。有无数的可穿戴设备原型可以戴在脸上,让你沉浸在虚拟世界中,在那里你可以看到、感觉到,在某些情况下甚至可以闻到你的网络环境。虽然 Metaverse 在 CES 上作为技术领域被人们关注,但另一项虚拟现实技术似乎是真正革命性的沉浸式 3D 技术:裸眼 3D 显示器和电视。没错,3D 屏幕不需要 3D 眼镜——而且视觉效果看起来令人难以置信。事实上,很明显,要让 Metaverse 和 VR 像许多公司希望的那样真正成为普通的日常使用技术,他们需要裸眼 3D 显示器和电视才能取得成功。
用户9732312
2023/03/08
4950
2023 CES 变色龙汽车 帅不帅?
骁龙嘉年华全面展示前沿移动科技,赋能美好数字生活
8月26日,骁龙嘉年华在成都东郊记忆国际时尚产业园正式开启,成都市市委宣传部副部长、成都市文产办主任师江、成都传媒集团董事长母涛、Ø成都市成华区区委宣传部部长马亚炜、高通公司全球高级副总裁盛况、高通公司全球副总裁侯明娟、高通公司全球副总裁李晶莅临现场。为期三天的骁龙嘉年华是高通首次打造的大型线下数字娱乐盛会,高通公司携手运营商、智能手机厂商、汽车厂商和电商等100多家行业合作伙伴,在16,000平米的超大展区展示近千款顶尖科技产品,为广大科技爱好者、游戏玩家和Z世代人群,带来集科技、电竞和潮玩于一体的综合数字娱乐体验。
VRPinea
2022/11/16
2670
骁龙嘉年华全面展示前沿移动科技,赋能美好数字生活
我所知道的车联网30年史,5G智能座舱开启汽车新时代
车联网(IoV:Internet of Vehicle)顾名思义就是让车联上网。这是物联网(IoT: Internet of Things)在汽车领域的一个细分应用。车辆和外界建立联系,并创造出丰富多彩的功能。
科技旋涡
2022/03/30
1.1K0
我所知道的车联网30年史,5G智能座舱开启汽车新时代
CES 2023:自动驾驶、元宇宙备受瞩目
1月5日-8日,CES 2023在拉斯维加斯举行。作为当前全球规模最大、影响力最广泛的消费类电子技术年展,本届展会涵盖的重要主题包括可持续性、数字健康、Web3与元宇宙以及人类安全等。
科技云报道
2023/02/14
2890
推荐阅读
相关推荐
高通骁龙8295芯片及第六代Kryo架构
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档