VUEドラッグカード、自動アライメント交換位置、ドラッグデータアクセス

記事のこのシリーズは最初の章、私はラップ実装VUEでのドラッグカード・アセンブリーを、およびNPM、全体の生産プロセスダウン詳細な記録を公開します。3つの記事の総数、生成部は、部品や問題に遭遇するだけでなく、プロセスを説明し、何が起こったとどのように問題を解決するために中に放出されたNPMで使用するためにダウンロードしました。

最初は、ドキュメントやプレゼンテーションコンポーネントパッケージの使用であり、
第二の成分は、アイデアの実現であるとの問題が発生しました
パッケージコンポーネントのタイトルIIIと需要とダウンロードの上にロードされた後に問題を使用する方法、NPMにアップロード

これが実装され、ドラッグ・カード・アセンブリVUE、主な成果です。

他のカードの交換位置、および他のカードとドラッグカードは自動的にシス位、リアルタイム位置データの更新のドラッグに応じてシフトされます
マウスを使用している場合、スクロールをドラッグします
カードデータの生成、パラメータおよびすべての内容は簡単に別のシーンに適用される、カスタマイズされています
取得する異なる操作のイベントは、位置データは、リアルタイムドラッグに更新されます
インストールおよび世界的な需要のロードすることができます

どのように使用するには？

ダウンロードcarddragger

NPM carddraggerをインストール

グローバル・インストール

プロジェクトVUEで入り口のjsファイルを使用して、VUE-CLI-生成されたプロジェクトファイルは、通常、main.jsです

インポート{installCardDragger} から ' carddragger ' 
Vue.use（installCardDragger）

需要ロード

アセンブリに直接インポートします

インポート{cardDragger} から ' carddragger ' 

エクスポートデフォルト{ 
  コンポーネント：{ 
    cardDragger、
  } 
}

使用例

1.基本：

<テンプレート> 
  <cardDragger：データ= " cardList " > 
  </ cardDragger> 
</テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
  データ（）{ 
    リターン{ 
      cardList：[{ 
        positionNum：I、
        名称：" 演示卡片" + I、
        ID ：" カード" + I、
      }]、
    } 
  } 
}
 </ SCRIPT>

2.完全な例：
リファレンスソースリポジトリの例のは
、NPM完全な例を参照するのに役立つインストール+ NPMの実行、ダウンプロジェクト全体のクローンを作成します

小道具（パラメータ）

プロパティ	説明	タイプ	デフォルト値
データ	必要な、カードのデータを渡す必要があり、特定の形式の説明の下に参照してください。	アレイ	-
コイン	カード内に配置された列数	数	2
cardOutsideWidth	外部カードは、幅（何のコンテンツを含まない部分）を占有する必要があります	数	590
cardOutsideHeight	（何のコンテンツ部分を含まない）に必要なカードによって占められて外部の高さ	数	380
cardInsideWidth	カードの幅	数	560
cardInsideHeight	身長カード	数	320
detectDistance	それは最小距離交換位置をトリガーする際にカードをドラッグします	数	50

例のデータ形式：

データを生成したり、カスタマイズするカードのコンテンツデータ

<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>

属性	说明	类型	默认值
id	必填，设置卡片的id作为唯一识别	String	-
positionNum	必填，设置卡片位置，从1开始依次递增	Number	-
name	选填，设置卡片的标题名称	String	'默认标题'
componentData	选填，设置卡片的内容为组件数据，如果此参数具有数据的话，则slot传入的数据失效	Array	-

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，是卡片交换完成后的数据

作者：裂泉
链接：https://juejin.im/post/5da53e29e51d457822796ed8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。