拖拽

链接

  • 1、下载 npm i sortablejs angular-sortablejs
    1. // 在命令行中输入 npm i sortablejs angular-sortablejs 下载
  • 2、在app.mudule.ts中引入 ```javascript /* 拖拽插件 / import {SortablejsModule} from ‘angular-sortablejs’;

@NgModule({ //… imports: [ //… SortablejsModule.forRoot({animation: 150}), ], })

  2. - **3、在页面/组件中使用**
  3. ```javascript
  4. // html文件
  5.   <div [sortablejs]="comnboList" [sortablejsOptions]="sortOptions" class="list">
  6.     <div *ngFor='let item of comnboList;index as idx' nz-row nzType="flex" nzJustify="space-between" nzAlign="middle" nzGutter="8" class="combo-item">
  7.       <div nz-col class="src" nzSpan="6">
  8.         <img [src]="item.src" alt="" class="">
  9.       </div>
  10.       <div nz-col class="" nzSpan="10">
  11.         {{ item.auth }}
  12.       </div>
  13.       <div nz-col class="delete" nzSpan="4">
  14.         删除
  15.       </div>
  16.     </div>
  17.   </div>
  1. // ts文件
  2. import {SortablejsOptions} from 'angular-sortablejs';
  3. // ...
  4. public comnboList:object[] = [
  5.     {id:0,src:'1',auth:'王小波',order:0},
  6.     {id:1,src:'2',auth:'王小波-1',order:1},
  7.     {id:2,src:'3',auth:'王小波-2',order:2},
  8.     {id:3,src:'4',auth:'王小波-3',order:3},
  9.     {id:4,src:'5',auth:'王小波-4',order:4},
  10.     {id:5,src:'6',auth:'王小波-5',order:5},
  11.     {id:6,src:'1',auth:'王小波-6',order:6},
  12.   ]
  13. sortOptions: SortablejsOptions = {
  14.         group: 'comnbo',
  15.         onStart: (/**Event*/ evt) => {
  16.             console.log(evt);
  17.         },
  18.         onEnd: (/**Event*/ evt) => {
  19.             console.log(evt);
  20.         }
  21.   //...
  22.     };

上传

链接

  1. // 下载命令： npm install @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus 
  2. import Uppy from '@uppy/core'
  3. import Dashboard from '@uppy/dashboard'
  4. import Instagram from '@uppy/instagram'
  5. import Tus from '@uppy/tus'
  7. Uppy()
  8.   .use(Dashboard, {
  9.     trigger: '#select-files',
  10.     showProgressDetails: true
  11.   })
  12.   .use(Instagram, {
  13.     target: Dashboard,
  14.     serverUrl: 'https://companion.uppy.io'
  15.   })
  16.   .use(Tus, { endpoint: 'https://master.tus.io/files/' })
  17.   .on('complete', (result) => {
  18.     console.log('Upload result:', result)
  19.   })