首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

1小时搞定卡片拖拽、自动排列交换位置、拖拽数据存取

作者头像
IT大咖说
发布2019-10-28 18:08:41
3.7K1
发布2019-10-28 18:08:41
举报
文章被收录于专栏:IT大咖说IT大咖说

支持组件的样式和内容自定义

这是这次系列文章的第一篇,我自己封装了一个用vue实现的拖拽排列卡片组件,并且发布到npm,详细地记录下来了整体制作过程。总共有三篇文章,介绍组件的制作思路和遇到的问题,以及在发布到npm上并下载使用的过程中,发生了什么问题并如何解决。

  • 第一篇为组件封装后的使用文档及介绍
  • 第二篇为组件的实现思路以及细节
  • 第三篇为将组件打包并上传至npm,如何实现按需加载和下载后使用的问题

这是vue实现的拖动卡片组件,主要实现了:

  • 拖动卡片与其他卡片的位置更换,并且其他卡片根据拖动的位置自动顺移,位置数据实时更新
  • 拖动的时候可使用鼠标滚动
  • 卡片根据数据生成,所有参数和内容都是可以自定义的,方便应用于不同场景
  • 不同操作的事件都可获取到,拖动后的位置数据会实时更新
  • 可以全局安装和按需加载

如何使用?

下载carddragger
npm install carddragger
复制代码
全局安装

在你vue项目的入口js文件中使用,vue-cli生成的项目一般为main.js文件

import {installCardDragger} from 'carddragger'
Vue.use(installCardDragger)
复制代码
按需加载

在组件中直接import

import { cardDragger } from 'carddragger'

export default {
  components:{
    cardDragger,
  }
}
复制代码
使用示例

1.基础使用:

<template>
  <cardDragger :data="cardList">
  </cardDragger>
</template>
<script>
export default {
  data() {
    return {
      cardList: [{
        positionNum: i,
        name: "演示卡片"+i,
        id: "card"+i,
      }],
    }
  }
}
</script>
复制代码

2.完整示例: 参照源码仓库中的examples 将整个项目clone下来,npm install+npm run serve即可看到完整示例

Props(参数)

data格式示例:

卡片的内容根据data数据生成或自定义

<template>
    <div>
        <cardDragger
        :data="cardList"
        :colNum="4"
        :cardOutsideWidth="300"
        :cardInsideWidth="260"
        :cardOutsideHeight="310"
        :cardInsideHeight="240"
        />
        <!-- 上面的属性都可自定义 -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            cardList: [
                {
                    positionNum: 2,
                    name: "测试卡片2",
                    id: "card2",
                }
            ]
        }
    }
}
</script>
复制代码

Slot(插槽)

首先先介绍一下,卡片内容分为上下两部分:

  • 上部分为卡片的标题栏,并且拖拽事件只有点击上部分才触发
  • 下部分为卡片的内容

两个部分都是可以进行自定义内容及样式的。若不添加的自定义内容的话,标题栏和内容都是默认背景为白色,显示data中的name。若添加了自定义内容则背景需要自己设置。

标题栏插槽
<cardDragger :data="cardList" >
  <!-- 在组件中间插入template并设置 v-slot:header="slotProps"
       header为标题栏的插槽名字,在里面的内容会渲染到你每一个卡片标题栏上
       slotProps为从子组件返回的数据,及data数组里面的每一个对象数据-->
  <template v-slot:header="slotProps">
    <!-- 自定义内容 -->
    <div class="topMenuBox" >
      <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div>
      <div class="menuTitle" v-else> 默认标题 </div>
    </div>
  </template>
</cardDragger>
复制代码
内容插槽
<cardDragger :data="cardList">
  <!-- 与标题栏插槽一致,但需要注意v-slot:content-->
  <template v-slot:content="slotProps">
    <div class="insideData">
      {{slotProps.item.name}}
    </div>
  </template>
</cardDragger>
复制代码

你也可以

<cardDragger :data="cardList">
  <!-- 与标题栏插槽一致,但需要注意v-slot:content-->
  <template v-slot:content="slotProps">
     <component :is="slotProps.item.OtherData"></component>
     <!--这里用到的是vue的动态组件功能动态渲染组件,可传入更多属性至子组件 -->
  </template>
</cardDragger>

//省略部分代码,加载你的组件
import exampleChild1 from "./childComponent/exampleChild1"

cardList: [
    {
      positionNum: 1,
      name: "演示卡片1",
      id: "card1",
      OtherData:exampleChild1
      //OtherData这个是你自己定义的属性,注意不可与componentData属性名字重复
    }
]

复制代码

关于内容我做了另外一个判断,你可以将需要的组件放在data的componentData属性里面,内容会自动读取componentData的数据。当然你直接都使用slot就可以忽略这个属性。

import exampleChild1 from "./childComponent/exampleChild1"
//省略部分代码
cardList: [
    {
      positionNum: 1,
      name: "演示卡片1",
      id: "card1",
      componentData:exampleChild1   //直接设置即可使用
    }
]
/*使用componnetData属性传入的组件,可使用两个我定义好的Props
animationState:{
    类型:Boolean,
    功能:首次加载卡片的时候为true,之后为false,便于在首次加载卡片时显示动画。
}
itemData:{
    类型:Object,
    功能:获取当前卡片的其他数据
}
*/

//在子组件中使用props即可使用
props:{
    animationState:{
      type:Boolean,
      default:true
    },
    itemData:{
      type:Object
    }
}
复制代码

渲染优先级:data的componentData > slot > 默认内容

Events(事件)

startDrag

事件作用: 在点击卡片顶部标题栏的时候,触发此函数

事件参数: startDrag(event,id) 第一个参数event,是点击事件的原生event 第二个参数id,是选中的卡片的id

swicthPosition

作用: 在拖动一个卡片到另外一个卡片的位置的时候,触发此事件

事件参数: swicthPosition(oldPositon,newPositon,originItem) 第一个参数oldPositon,是卡片原来的位置号码 第二个参数newPositon,是卡片需要交换的位置号码 第三个参数originItem,是卡片交换完成后的数据

finishDrag

事件作用: 拖拽完成松开鼠标后,触发此事件

事件参数: swicthPosition(oldPositon,newPositon,originItem) 第一个参数oldPositon,是卡片原来的位置号码 第二个参数newPositon,是卡片需要交换的位置号码 第三个参数originItem,是卡片交换完成后的数据

考虑修复的问题

1.data的positionNum出现空缺则会报错,必须从1依次递增。但好像这种场景也不常用,考虑修复ing。

未来计划

  • 如果有需要的话我再封装个react版本
  • 修改其他需要的参数和进行扩展
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IT大咖说 微信公众号,前往查看

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 如何使用?
    • 下载carddragger
      • 全局安装
        • 按需加载
          • 使用示例
          • Props(参数)
            • data格式示例:
            • Slot(插槽)
              • 标题栏插槽
                • 内容插槽
                • Events(事件)
                  • startDrag
                    • swicthPosition
                      • finishDrag
                      • 考虑修复的问题
                      • 未来计划
                      相关产品与服务
                      数据库一体机 TData
                      数据库一体机 TData 是融合了高性能计算、热插拔闪存、Infiniband 网络、RDMA 远程直接存取数据的数据库解决方案,为用户提供高可用、易扩展、高性能的数据库服务,适用于 OLAP、 OLTP 以及混合负载等各种应用场景下的极限性能需求,支持 Oracle、SQL Server、MySQL 和 PostgreSQL 等各种主流数据库。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档