Angular7 Drag and Drop

来源:https://www.cnblogs.com/SPHmomo/archive/2019/02/13/10370707.html
-Advertisement-
Play Games

@angular/cdk/drag-drop模塊可以幫助我們在水平/垂直列表中拖動單個項目或對其進行排序，在列表之間傳遞項目，顯示動畫、預覽、占位符、自定義拖放句柄。在本教程中，我們將創建許多簡單的例子來展示如何使用Angular 7 Material CDK – Drag and Drop。 ...


完整代碼在最後，下麵講解以此代碼為例

 

1.環境配置

1.1 安裝@angular/material、@angular/cdk

cnpm install --save @angular/material @angular/cdk

1.2 app.modules.ts導入

import { DragDropModule } from '@angular/cdk/drag-drop';

imports: [

...

DragDropModule

]

2.功能實現

2.1 拖拽

html編輯如下代碼即可：

<div cdkDrag class="drag-box"
drag me
</div>

2.2 排序

html:

<h3>列表排序</h3>
<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
    <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
        {{customer.name}}
    </div>
</div>

　　

　ts:

import { ...CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

customers = [
{ name: 'Adam', age: 23 },
{ name: 'Jack', age: 27 },
{ name: 'Katherin', age: 26 },
{ name: 'John', age: 30 },
{ name: 'Watson', age: 42 },
];

drop(event: CdkDragDrop<string[]>) {
    console.log('列表排序：', event, this.customers);
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
}

　執行如下操作：

列印結果：

 

2.3 橫向排序

html:

<h3>橫向排序</h3>
<div class="box-list-horizontal" cdkDropList cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
    <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
        {{customer.name}}
    </div>
</div>

2.4 添加動畫效果

　　為了設置動畫，我們定義了一個以transform屬性為目標的轉換。拖放CDK支持動畫：

 

--對列表中的元素進行拖動排序時的動畫=> .cdk-drag

.cdk-drag {
    transition: transform 100ms ease;
}

　

--從動畫的位置到最終把它放在列表的位置上時的動畫=> .cdk-drag-animating

.cdk-drag-animating {
    transition: transform 300ms ease;
}

 

2.5 占位符元素 placeholder

預設占位符

使用.cdk-drag-placeholder來顯示占位符元素，而不是實際的元素，因為它是在cdkDropList中拖動的。預設情況下，這看起來與正在排序的元素完全相同。

.cdk-drag-placeholder {
    background: #ccc;
    border: dotted 1px #999;
    transition: transform 500ms ease;
}

　拖拽時效果如下圖：

 

自定義占位符

使用*cdkDragPlaceholder指令，我們可以用一個自定義的占位符來代替預設的占位符

html:

<div class="box-list customph" cdkDropList (cdkDropListDropped)="drop($event)">
    <div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag >
        <div class="box-custom-placeholder" *cdkDragPlaceholder></div>
        {{customer.name}}
    </div>
</div>

　css:

// 自定義占位符
.customph{
    .box-custom-placeholder {
        height: 28px;
        width: 100px;
        background: #fff;
        border: dotted 1px #0084ff;
        transition: transform 200ms ease;
    }
     
    &.box-list.cdk-drop-list-dragging .drag-box:not(.cdk-drag-placeholder) {
        transition: transform 500ms ease;
    }
}

　　

2.6 預覽

當提取並拖動cdkDrag元素時，可以看到預覽元素。預設情況下，預覽元素看起來與被拖動的元素完全相同。

使用.cdk-drag-preview來定義預覽CSS:

// 預覽
.cdk-drag-preview {
    height: 28px;
    width: 100px;
    box-shadow: 0 3px 3px -3px #0084ff;
}

我們還需要使用*cdkDragPreview提供一個自定義模板:

<div cdkDropList class="box-list" (cdkDropListDropped)="drop($event)">
  <div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
    <p *cdkDragPreview>Age: {{customer.age}}</p>
  </div>
</div>

　

2.7 多個列表之間拖拽

我們可以使用cdkDropListConnectedTo屬性將一個或多個cdkDropList連接到一起。然後設置cdkDropListData和cdkDragData，將數據與cdkDropList和cdkDrag關聯起來。

html:

<div class="box-list" cdkDropList #inactiveList="cdkDropList" id="Inactive Customers"
     [cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"
     (cdkDropListDropped)="drop1($event)">
    <div class="drag-box dragList"
         [cdkDragData]="customer"
         *ngFor="let customer of inactiveCustomers"
         cdkDrag>
        {{customer.name}}
    </div>
</div>
<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
     [cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
     (cdkDropListDropped)="drop1($event)">
    <div class="drag-box dragList"
         [cdkDragData]="customer"
         *ngFor="let customer of activeCustomers"
         cdkDrag>
        {{customer.name}}
    </div>
</div>

　ts:

import { ...transferArrayItem } from '@angular/cdk/drag-drop';

  inactiveCustomers = [
    {name: 'Jack', age: 18},
    {name: 'Katherin', age: 16},
    {name: 'Adam', age: 36}
  ];

  activeCustomers = [
    {name: 'John', age: 10},
    {name: 'Watson', age: 24}
  ];

  drop1(event: CdkDragDrop<string[]>) {
    console.log('拖拽事件：event', event);
    if (event.previousContainer === event.container) {
      console.log('拖拽事件',
        `> 拖 '${event.item.data}' 到 '${event.container.id}'`);
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      console.log('拖拽事件',
        `> 拖 '${event.item.data}' 到 '${event.container.id}'`);
      transferArrayItem(
        event.previousContainer.data, event.container.data,
        event.previousIndex, event.currentIndex);
    }
  }

　執行如下操作：

列印結果：

 

 

 

CdkDropListGroup

CdkDropListGroup指令的範圍比CdkDropList要大一級。CdkDropListGroup可以包含多個CdkDropList。而且當CdkDropListGroup包含多個CdkDropList的時候，這些CdkDropList直接是相互connect的(CdkDropList就不用去寫cdkDropListConnectedTo屬性了)。

 

<div cdkDropListGroup>
    <div class="box-list" cdkDropList id="Inactive Customers"
         [cdkDropListData]="inactiveCustomers"
         (cdkDropListDropped)="drop1($event)">
        <div class="drag-box dragList" [cdkDragData]="customer"
             *ngFor="let customer of inactiveCustomers" cdkDrag>
            {{customer.name}}
        </div>
    </div>
    <div class="box-list" cdkDropList id="Active Customers"
         [cdkDropListData]="activeCustomers"
         (cdkDropListDropped)="drop1($event)">
        <div class="drag-box dragList"
             [cdkDragData]="customer"
             *ngFor="let customer of activeCustomers"
             cdkDrag>
            {{customer.name}}
        </div>
    </div>
</div>

　

2.8 事件監聽

Drag Event Handlers

– cdkDragStarted: 當用戶開始拖動時發出。

– cdkDragEnded: 當用戶停止拖動時發出。

– cdkDragEntered: 將item移動到新容器中時發出。

– cdkDragExited: 將item移出當前容器時發出。

 

 

Drop Event Handlers

 

– cdkDropListDropped: emits when an item was dropped inside the container.

 

– cdkDropListEntered: emits when a new item is dragged into this container.

 

– cdkDropListExited: emits when an item is dragged from this container into another container.

 

 

 

cdkDragStarted、cdkDragEnded、cdkDragMoved

 

html:

 

<h3>事件監聽</h3>
<div cdkDrag class="drag-box"
  (cdkDragStarted)="dragStarted($event)"
  (cdkDragEnded)="dragEnded($event)"
  (cdkDragMoved)="dragMoved($event)"
>
  drag me
</div>
<p>{{state}} {{position}}</p>

 

　ts:

import { CdkDragEnd, CdkDragStart, CdkDragMove... } from '@angular/cdk/drag-drop';

  dragStarted(event: CdkDragStart) {
    this.state = '拖拽開始';
    console.log('拖拽開始');
  }

  dragEnded(event: CdkDragEnd) {
    this.state = '拖拽結束';
    console.log('拖拽結束');
  }

  dragMoved(event: CdkDragMove) {
    console.log('dragMoved');
    this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }

　

cdkDropListEntered、cdkDropListExited、cdkDragEntered、cdkDragExited

　html:

<div class="box-list" cdkDropList #inactiveList="cdkDropList" id="Inactive Customers"
     [cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"
     (cdkDropListDropped)="drop1($event)"
     (cdkDropListEntered)="dropListEntered($event)" (cdkDropListExited)="dropListExited($event)">
    <div class="drag-box dragList" [cdkDragData]="customer"
         (cdkDragEntered)="dragEntered($event)" (cdkDragExited)="dragExited($event)"
         *ngFor="let customer of inactiveCustomers"
         cdkDrag>
        {{customer}}
    </div>
</div>
<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
     [cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
     (cdkDropListDropped)="drop1($event)">
    <div class="drag-box dragList"
         [cdkDragData]="customer"
         *ngFor="let customer of activeCustomers"
         cdkDrag>
        {{customer}}
    </div>
</div>

　ts:

import { ...CdkDragEnter, CdkDragExit} from '@angular/cdk/drag-drop';

  dragEntered(event: CdkDragEnter) {
    console.log(`drag:把 '${event.item.data}' 拖進 '${event.container.id}' `);
  }

  dragExited(event: CdkDragExit) {
    console.log(`drag:把 '${event.item.data}' 從 '${event.container.id}' 中拖出 `);
  }

  dropListEntered(event: CdkDragEnter) {
    console.log(`drop:'${event.container.id}' 中拖進了 '${event.item.data}'`);
  }

  dropListExited(event: CdkDragExit) {
    console.log(`drop：從 '${event.container.id}' 中拖出 '${event.item.data}'`);
  }

執行如下操作

 

列印結果：

 

再執行如下操作：

   

列印結果：

 

 

cdkDropListSorted

拖拽過程中交換item的時候回調

 

<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
     [cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
     (cdkDropListDropped)="drop1($event)"
     (cdkDropListSorted)="dropListSorted($event)">
    <div class="drag-box dragList"
         [cdkDragData]="customer"
         *ngFor="let customer of activeCustomers"
         cdkDrag>
        {{customer.name}}
    </div>
</div>

　ts:

  dropListSorted(event: CdkDropList) {
    console.log('Sorted:', event);
  }

　　

2.9 屬性

cdkDropListEnterPredicate

enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean

指定哪些item是可以拖拽到當前容器

 html:

<div class="box-list" cdkDropList #activeList="cdkDropList" id="Active Customers"
     [cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
     (cdkDropListDropped)="drop1($event)" [cdkDropListEnterPredicate]="predicate">
    <div class="drag-box dragList"
         [cdkDragData]="customer"
         *ngFor="let customer of activeCustomers"
         cdkDrag>
        {{customer.name}}
    </div>
</div>

　ts:

import { ...CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

predicate(drag: CdkDrag, drop: CdkDropList) {
    console.log('predicate:', drag, drop);
    return drag.data.age >= 18;
}

　　

CdkDrag屬性：

 

CdkDropList屬性

 

代碼：

html:

<div class="drag-box" cdkDrag>
  drag me
</div>

<h3>鎖定方向</h3>
<div class="drag-box" cdkDragLockAxis="y" cdkDrag>
  only up/down
</div>
<div class="drag-box" cdkDragLockAxis="x" cdkDrag>
  only left/right
</div>

<h3>事件監聽</h3>
<div cdkDrag class="drag-box"
  (cdkDragStarted)="dragStarted($event)"
  (cdkDragEnded)="dragEnded($event)"
  (cdkDragMoved)="dragMoved($event)"
>
  drag me
</div>
<p>{{state}} {{position}}</p>

<h3>拖拽handler</h3>
<div class="drag-box-with-handler drag-box" cdkDrag>
  <div class="box-handler" cdkDragHandle>
    點我拖拽
  </div>
</div>

<h3>列表排序</h3>
<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

<h3>橫向排序</h3>
<div class="box-list-horizontal" cdkDropList cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="drop($event)">
  <div class="drag-box dragListH" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

<h3>placeholder 預設占位符元素</h3>
<div>使用.cdk-drag-placeholder來顯示占位符元素，而不是實際的元素，
  因為它是在cdkDropList中拖動的。預設情況下，占位符元素看起來與正在排序的元素完全相同。</div>
<div class="box-list defplaceh" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

<h3>placeholder 自定義占位符元素</h3>
<div>使用*cdkDragPlaceholder指令，我們可以用一個自定義的占位符來代替預設的占位符</div>
<div class="box-list customph"  cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag >
      <div class="box-custom-placeholder" *cdkDragPlaceholder></div>
    {{customer.name}}
  </div>
</div>

<h3>預覽 Preview</h3>
<div>當提取並拖動cdkDrag元素時，可以看到預覽元素。預設情況下，
  預覽元素看起來與被拖動的元素完全相同。</div>
<div cdkDropList class="box-list" (cdkDropListDropped)="drop($event)">
  <div class="drag-box dragList" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
    <p *cdkDragPreview>Age: {{customer.age}}</p>
  </div>
</div>

<h3>兩個列表間拖放</h3>
<div class="twoList">
  <div class="box-list" cdkDropList #inactiveList="cdkDropList" id = "Inactive Customers"
    [cdkDropListData]="inactiveCustomers" [cdkDropListConnectedTo]="[activeList]"
    (cdkDropListDropped)="drop1($event)"
    (cdkDropListEntered)="dropListEntered($event)" (cdkDropListExited)="dropListExited($event)"
    [cdkDropListEnterPredicate]="predicate"
    >
    <div class="drag-box  dragList" [cdkDragData]="customer"
    (cdkDragEntered)="dragEntered($event)" (cdkDragExited)="dragExited($event)"
      *ngFor="let customer of inactiveCustomers;isLast as last" 
      cdkDrag>
      {{customer.name}}
    </div>
  </div>
  <div class="box-list" cdkDropList #activeList="cdkDropList" id = "Active Customers"
    [cdkDropListData]="activeCustomers" [cdkDropListConnectedTo]="[inactiveList]"
    (cdkDropListDropped)="drop1($event)" [cdkDropListEnterPredicate]="predicate"
    (cdkDropListSorted)="dropListSorted($event)"
    >
    <div
      class="drag-box  dragList"
      [cdkDragData]="customer"
      *ngFor="let customer of activeCustomers" 
      cdkDrag>
      {{customer.name}}
    </div>
  </div>
</div>

<!-- <h3>兩個列表間拖放 cdkDropListGroup</h3>
<div class="twoList" cdkDropListGroup>
  <div class="box-list" cdkDropList  id = "Inactive Customers"
    [cdkDropListData]="inactiveCustomers" 
    (cdkDropListDropped)="drop1($event)">
    <div class="drag-box  dragList" [cdkDragData]="customer"
      *ngFor="let customer of inactiveCustomers"  cdkDrag>
      {{customer.name}}
    </div>
  </div>
  <div class="box-list" cdkDropList  id = "Active Customers"
    [cdkDropListData]="activeCustomers" 
    (cdkDropListDropped)="drop1($event)">
    <div
      class="drag-box  dragList"
      [cdkDragData]="customer"
      *ngFor="let customer of activeCustomers" 
      cdkDrag>
      {{customer.name}}
    </div>
  </div>
</div> -->

　ts:

import { Component, OnInit } from '@angular/core';
import { CdkDragEnd, CdkDragStart, CdkDragMove,
  CdkDragDrop, CdkDragEnter, CdkDragExit, moveItemInArray,
  transferArrayItem, CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.scss']
})
export class DragDropComponent implements OnInit {
  state = '';
  position = '';
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];
  inactiveCustomers = [
    {name: 'Jack', age: 18},
    {name: 'Katherin', age: 16},
    {name: 'Adam', age: 36}
  ];

  activeCustomers = [
    {name: 'John', age: 10},
    {name: 'Watson', age: 24}
  ];

  constructor() { }

  ngOnInit() {
  }

  dragStarted(event: CdkDragStart) {
    this.state = '拖拽開始';
    console.log('拖拽開始');
  }

  dragEnded(event: CdkDragEnd) {
    this.state = '拖拽結束';
    console.log('拖拽結束');
  }

  dragMoved(event: CdkDragMove) {
    console.log('dragMoved');
    this.position = `> Position X: ${event.pointerPosition.x} - Y: ${event.pointerPosition.y}`;
  }

  dragEntered(event: CdkDragEnter) {
    console.log(`drag:把 '${event.item.data}' 拖進 '${event.container.id}' `);
  }

  dragExited(event: CdkDragExit) {
    console.log(`drag:把 '${event.item.data}' 從 '${event.container.id}' 中拖出 `);
  }

  dropListEntered(event: CdkDragEnter) {
    console.log(`drop:'${event.container.id}' 中拖進了 '${event.item.data}'`);
  }

  dropListExited(event: CdkDragExit) {
    console.log(`drop：從 '${event.container.id}' 中拖出 '${event.item.data}'`);
  }

  drop(event: CdkDragDrop<string[]>) {
    console.log('列表排序：', event, this.customers);
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }

  drop1(event: CdkDragDrop<string[]>) {
    console.log('拖拽事件：event', event);
    if (event.previousContainer === event.container) {
      console.log('拖拽事件',
        `> 拖 '${event.item.data}' 到 '${event.container.id}'`);
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      console.log('拖拽事件',
        `> 拖 '${event.item.data}' 到 '${event.container.id}'`);
      transferArrayItem(
        event.previousContainer.data, event.container.data,
        event.previousIndex, event.currentIndex);
    }
  }

  predicate(drag: CdkDrag, drop: CdkDropList) {
    console.log('predicate:', drag, drop);
    return drag.data.age >= 18;
  }

  dropListSorted(event: CdkDropList) {
    console.log('Sorted:', event);
  }


}

　app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { MatCardModule } from '@angular/material';
import { DragDropModule } from '@angular/cdk/drag-drop';
// import { VIEWPORT_RULER_PROVIDER } from '@angular/cdk/scrolling';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { DragDropComponent } from './drag-drop/drag-drop.component';

@NgModule({
  declarations: [
    AppComponent,
    VirtualScrollComponent,
    DragDropComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ScrollingModule,
    MatCardModule,
    DragDropModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 css:

.drag-box{
    height: 100px;
    width: 100px;
    border: 1px solid #000;
}
.box-handler{
    width: 100%;
    height: 20px;
    background: #ccc;
}
.dragList{
    height: 28px;
    margin: 5px 0;
}
.dragListH{
    display: inline-block;
    margin: 0 5px;
    height: 28px;
    width: 55px;
}
// 動畫效果
// .cdk-drag {
//     transition: transform 100ms ease;
// }

.cdk-drag-animating {
    transition: transform 300ms ease;
}
// 占位符 預設 placeholder
.defplaceh .cdk-drag-placeholder {
    background: #ccc;
    border: dotted 1px #999;
    transition: transform 500ms ease;
}

// 自定義占位符
.customph{
    .box-custom-placeholder {
        height: 28px;
        width: 100px;
        background: #fff;
        border: dotted 1px #0084ff;
        transition: transform 200ms ease;
    }
     
    &.box-list.cdk-drop-list-dragging .drag-box:not(.cdk-drag-placeholder) {
        transition: transform 500ms ease;
    }
}

// 預覽
.cdk-drag-preview {
    height: 28px;
    width: 100px;
    box-shadow: 0 3px 3px -3px #0084ff;
}


.twoList{
    overflow: hidden;
    >div{
        float: left;
        margin: 10px;
    }
}

　　

　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Flutter 即學即用系列博客——02 一個純 Flutter Demo 說明
    前言 上一篇文章我們搭建好了 Flutter 的開發環境。 "Flutter 即學即用——01 環境搭建" 這一篇我們通過 Flutter 的一個 Demo 來瞭解下 Flutter。 開發系統：MAC IDE：Android Studio 目錄 1. 創建一個 Flutter 項目 第一步：主界面 ...
  • ionic cordova build android error: commamd failed with exit code eacces
    問題： 電腦的gradle版本為Gradle 5.0，然而 因為 添加的android 平臺為6.3.0 gradle 是 4.1版本 電腦已存在 gradle的情況下，add platform 成功 但編譯失敗。 出現以下問題 ：commamd failed with exit code eacc ...
  • Android SQLite 資料庫學習
    SQLite 資料庫簡介 SQLite 是一個輕量級資料庫，它是D. Richard Hipp建立的公有領域項目，在2000年發佈了第一個版本。它的設計目標是嵌入式的，而且占用資源非常低，在記憶體中只需要占用幾百kB的存儲空間，這也是Android移動設備採用SQLite資料庫的重要原因之一。 SQL ...
  • js基礎和技巧記錄
    1、new Date(year, month, 0) 可以表示當前月份的最後一天 ...
  • 什麼是websoket
    概念HTML5作為下一代WEB標準，擁有許多引人註目的新特性，如Canvas、本地存儲、多媒體編程介面、WebSocket 等等。今天我們就來看看具有“Web TCP”之稱的WebSocket.WebSocket的出現是基於Web應用的實時性需要而產生的。這種實時的Web應用大家應該不陌生，在生活中 ...
  • JS取出兩個數組中的不同或相同元素
    1、取出兩個數組的不同元素 var arr1 = [0,1,2,3,4,5]; var arr2 = [0,4,6,1,3,9]; function getArrDifference(arr1, arr2) { return arr1.concat(arr2).filter(function(v, ...
  • 附實例！圖解React的生命周期及執行順序
    本文由雲+社區發表 作者：前端林子 1.七個可選的生命周期 可以結合下圖來看： (1) componentWillMount() 僅在render()方法前被調用一次，如果在該方法中調用了setState方法去改變組件的狀態值，那麼調用render()後，將會直接看到改變過了的狀態值，並且不論狀態值 ...
  • 實現導航欄下劃線跟隨效果
    就像上圖這樣的動畫效果 在導航欄里的時候，下劃線跟隨滑鼠移動，滑鼠移出導航欄時，下劃線回到初始位置，同時要適應導航的寬度 為了適應導航的寬度，就不能給導航元素設置 margin，然後將導航元素的 clientWidth 設置給下劃線 然後需要讓下劃線獨立於導航之外，從而保證它的無縫滑動（其實也可以用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類