精华内容
下载资源
问答
  • Vue拖拽组件awe-dnd

    千次阅读 2020-05-06 15:41:53
    npm install awe-dnd --save 安装相关文章:npm 安装指定版本(按版本安装) 在main.js中注册 import VueDND from 'awe-dnd'; // 注册-拖拽组件 Vue.use(VueDND); 在页面drag.vue中运用 <templ...

    安装依赖

    npm install awe-dnd --save
    

    安装相关文章:npm 安装指定版本(按版本安装)

    在main.js中注册

    import VueDND from 'awe-dnd';
    // 注册-拖拽组件
    Vue.use(VueDND);
    

    在页面drag.vue中运用

    <template>
      <div class="drag-content">
        <span :style="{'background-color': item.color}"
          v-for="(item, index) in colorList"
          v-dragging="{ item: item, list: colorList, group: 'item' }" :key="index">{{item.color}}</span>
      </div>
    </template>
    
    <script>
    export default{
      data () {
        return {
          colorList: [
            {color: '#2ec7c9'}, {color: '#b6a2de'}, {color: '#5ab1ef'},
            {color: '#ffb980'}, {color: '#d87a80'}, {color: '#8d98b3'},
            {color: '#e5cf0d'}, {color: '#97b552'}, {color: '#95706d'},
            {color: '#dc69aa'}, {color: '#07a2a4'}, {color: '#9a7fd1'},
            {color: '#588dd5'}, {color: '#f5994e'}, {color: '#c05050'},
            {color: '#59678c'}, {color: '#c9ab00'}, {color: '#7eb00a'},
            {color: '#6f5553'}, {color: '#c14089'}
          ]
        }
      },
      mounted () {
        // 拖拽后触发的事件
        this.$dragging.$on('dragged', (res) => {
          console.log(res)
        })
      }
    }
    </script>
    
    <style>
      .drag-content{width: 500px; margin: 20px auto; text-align: left;}
      .drag-content span{width: 50%; height: 50px; line-height: 50px; text-align: center; display: inline-block;}
    </style>
    
    

    效果图

    在这里插入图片描述

    相关文章:Vue 拖拽组件 vuedraggable 和 vue-dragging

    展开全文
  • 由于Element组件不支持动态拖拽设置表头,所以使用awe-dnd插件实现拖拽效果 实现方法: 安装依赖 npm install awe-dnd --save 全局注册或局部注册 1、全局注册 在main.js文件中 import VueDND from 'awe-dnd'; ...

    项目场景:

    VUE+Element 实现el-table动态设置表头(可拖拽)


    问题描述:

    由于Element组件不支持动态拖拽设置表头,所以使用awe-dnd插件实现拖拽效果


    实现方法:

    安装依赖

    npm install awe-dnd --save
    

    全局注册或局部注册

    1、全局注册

    • 在main.js文件中
    import VueDND from 'awe-dnd';
    // 注册-拖拽组件
    Vue.use(VueDND);
    

    2、局部注册(页面内注册)

    import Vue from 'vue'
    import VueDND from 'awe-dnd'
    Vue.use(VueDND)
    

    页面使用

    1、HTML

    <template>
    <div class="table-box">
                <el-table
                  v-loading="loading"
                  :data="tableData"
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#FAFAFA',
                    color: '#000000',
                    'font-family': 'Source Han Sans CN',
                    'font-size': '14px',
                    'font-weight': '400'
                  }"
                >
                  <!-- checkedTitle -->
                  <el-table-column
                    v-for="(title, titleIndex) in checkedTitleList"
                    :key="titleIndex"
                    :prop="title.column"
                    :label="title.text"
                    width="180"
                    :sortable="title.sortable"
                  >
                    <template slot-scope="{ row }">
                      <span>11</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操 作"
                    width="260"
                    fixed="right"
                    class-name="small-padding fixed-width"
                  >
                    <template slot-scope="{ row }">
                      <div class="level buttons" style="padding: 0 5px">
                        <div
                          v-permission="{ action: 'auxiliary.plan:update' }"
                          class="details-btn"
                          @click="handleUpdate(row)"
                        >
                          编辑
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-popover
                  v-model="visibleAllTitle"
                  placement="bottom"
                  width="200"
                  trigger="manual"
                  popper-class="select-sort-title-popover"
                >
                  <div class="select-sort-title">
                    <p class="custom-column">自定义列</p>
                    <p class="sorting">勾选需要显示的列,拖动列名进行排序。</p>
                    <el-checkbox-group
                      v-model="checkedTitle"
                      @change="setTableHeader"
                    >
                      <el-checkbox
                        v-for="title in allTitleList"
                        :key="title"
                        v-dragging="{
                          item: title,
                          list: allTitleList,
                          group: 'title'
                        }"
                        :label="title"
                      >{{ title }}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                  <i
                    slot="reference"
                    class="el-icon-setting"
                    @click="visibleAllTitle = !visibleAllTitle"
                  />
                </el-popover>
              </div>
    </template>
    

    2、javascript

    注意:由于el-checkbox-groupv-model没办法绑定一个对象,会导致给不了默认值,所以复选框绑定的是字符串数组,选择或拖拽之后使用数组过滤出对应的title列表

    <script>
    import lodash from 'lodash'
    import Vue from 'vue'
    import VueDND from 'awe-dnd'
    Vue.use(VueDND)
    const allTitleText = [
      '表头1',
      '表头2',
      '表头3',
      '表头4',
      '表头5',
      '表头6',
      '表头7',
      '表头8',
      '表头9',
      '表头10'
    ]
    const allTitleListClone = [
      {
        text: '表头1',
        column: 'orderNumber',
        sortable: true
      },
      {
        text: '表头2',
        column: 'materialCode',
        sortable: false
      },
      {
        text: '表头3',
        column: 'workshopName',
        sortable: false
      },
      { text: '表头4', column: 'type', sortable: false },
      { text: '表头5', column: 'planNum', sortable: false },
      {
        text: '表头6',
        column: 'planCompleteTime',
        sortable: false
      },
      { text: '表头7', column: 'deliveryDate', sortable: false },
      { text: '表头8', column: 'orderDate', sortable: false },
      {
        text: '表头9',
        column: 'currentInventory',
        sortable: false
      },
      { text: '表头10', column: 'isfully', sortable: false }
    ]
    export default {
      name: 'AuxiliaryPlan',
      data() {
        return {
        	tableData: [{}, {}],
          //   设置表头
          visibleAllTitle: false,
          checkedTitle: [],
          checkedTitleList: lodash.cloneDeep(allTitleListClone),
          allTitleList: lodash.cloneDeep(allTitleText),
          draggedList: lodash.cloneDeep(allTitleText),
        }
      },
       mounted() {
        this.dropEvent()
        this.checkedTitle = lodash.cloneDeep(allTitleText)
      },
       methods: {
        getList() {},
        // 拖拽设置表头
        /**
         * @description:拖拽事件,选中的checkedCities 根据拖拽的list 的顺序排序
         * @param {*}
         * @return {*}
         */
        dropEvent() {
          this.$dragging.$on('dragged', ({ value }) => {
            this.draggedList = value.list
            this.filterCheckedTitleList()
          })
        },
        setTableHeader() {
          this.filterCheckedTitleList()
        },
        filterCheckedTitleList() {
          this.checkedTitle.sort((a, b) => {
            return this.draggedList.indexOf(a) - this.draggedList.indexOf(b)
          })
          const tempList = lodash.cloneDeep(this.checkedTitle)
          allTitleListClone.forEach(title => {
            const index = this.checkedTitle.findIndex(item => title.text === item)
            if (index !== -1) {
              tempList[index] = title
            }
          })
          this.checkedTitleList = tempList
        },
       }
    }
    </script>
    

    3、CSS

    注意:由于使用了el-popover弹出框,需要在body内去全局修改样式才会生效,避免更改到其他地方,需要定义一个唯一的classel-popover需要使用popper-class指定对应的class

    <style lang="scss" scoped>
    .table-box {
              position: relative;
               .el-icon-setting {
                position: absolute;
                right: 20px;
                top: 16px;
                z-index: 9;
              }
    }
    </style>
    
    .select-sort-title-popover {
      background: #ffffff;
      border: 1px solid #1890ff;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      padding: 20px;
      width: 220px !important;
    
      .select-sort-title {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
    
        p {
          width: 100%;
          margin: 0;
        }
    
        .custom-column {
          color: #333333;
          margin-bottom: 12px;
        }
    
        .sorting {
          font-size: 10px;
          transform: scale(0.8);
          color: #999999;
          margin-left: -18px;
          width: 122%;
        }
    
        .el-checkbox {
          line-height: 30px;
    
          .el-checkbox__label {
            font-size: 12px;
            padding: 0 10px 0 5px;
            margin-left: 10px;
          }
        }
    
        .is-checked {
          .el-checkbox__label {
            background: #E7F4FF;
          }
    
        }
      }
    
      .popper__arrow {
        border-bottom-color: #1890ff !important;
      }
    }
    

    拖拽的关键代码

     v-dragging="{
                          item: title,
                          list: allTitleList,
                          group: 'title'
                        }"
    
    • 页面拖拽触发的方法
    dropEvent() {
          this.$dragging.$on('dragged', ({ value }) => {
            this.draggedList = value.list
            this.filterCheckedTitleList()
          })
        },
        filterCheckedTitleList() {
          this.checkedTitle.sort((a, b) => {
            return this.draggedList.indexOf(a) - this.draggedList.indexOf(b)
          })
          const tempList = lodash.cloneDeep(this.checkedTitle)
          allTitleListClone.forEach(title => {
            const index = this.checkedTitle.findIndex(item => title.text === item)
            console.log(index, 'index')
            if (index !== -1) {
              tempList[index] = title
            }
          })
          this.checkedTitleList = tempList
        },
    

    效果图

    • 拖拽前
      在这里插入图片描述
    • 拖拽后
    • 在这里插入图片描述
    展开全文
  • 最近发现一个挺好用的拖拽排序插件awe-dnd ,刚好又在学习ant design,所以萌发了让table表格可自定义位置和自定义显隐的想法,用了俩个多小时把这个想法实现了。 1. 先去安装awe-dnd,awe-dndnpm链接:...

    最近发现一个挺好用的拖拽排序插件awe-dnd ,刚好又在学习ant design,所以萌发了让table表格可自定义位置和自定义显隐的想法,用了俩个多小时把这个想法实现了。

    1. 先去安装awe-dnd , awe-dnd npm链接 :https://www.npmjs.com/package/awe-dnd

    $ npm install awe-dnd --save

    2. 再mian.js中配置

    //main.js
     
    import VueDND from 'awe-dnd'
     
    Vue.use(VueDND)

    3. 在components 建一个drag文件夹 用来制作组件方便重复使用

     3.1 文件夹中新建drag.vue

    //drag.vue
    
    <template>
    
    
    	<div>
    
    
    
    
    
    
    		<a-popover :title="popoverTitle" trigger="click">
    			<a slot="content">
    				<div class="color-list">
    					<div class="color-item" v-for="(color,index) in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
    					 :key="color.text">
    						<a>
    							<a-checkbox @change="onChange(index)" :checked="color.checked">{{color.text}}</a-checkbox>
    						</a>
    					</div>
    				</div>
    
    			</a>
    			<a-button type="primary">{{butTitle}}</a-button>
    		</a-popover>
    
    	</div>
    
    
    
    
    
    
    </template>
    <script>
    
    	export default {
    
    		props: ['butTitle','popover' ,'columnsData', 'colorsData'],
    
    		data() {
    			return {
    				butName:'',
    				popoverTitle:'',
    				columnsAll: [],
    				columnsAllcache: {},
    				colors: [],
    				colorsArry: [],
    				columns: []
    
    			}
    		},
    		methods: {
    
    			rf: function() {
    				this.colorsArry = this.colors
    				this.getDrag()
    			},
    
    
    			getDrag: function() {
    
                  //columnsAllcache 用来存放全部包裹头部信息 构建以头部信息key为索引对象的数据结构
    
    				var columnsAllcache = {}
    
    				for (var i = 0; i < this.columnsAll.length; i++) {
    					columnsAllcache[this.columnsAll[i].scopedSlots.customRender] = this.columnsAll[i]
    				}
    
    				this.columns = [] 
    
                    //循环排序数组 获取最新文字信息和显隐信息
    				for (var m = 0; m < this.colorsArry.length; m++) {
    
    					var columnsItem = this.colorsArry[m]
    
    					if (columnsItem.checked) { //判断排序数组中checked为选中的一项 将其放入columns 数组中 做为要展示的头部信息
    						this.columns.push(columnsAllcache[columnsItem.key])
    					}
    
    
    				}
    
    				this.$emit('onChange', this.columns) //触发回调方法
    
    
    
    			},
    
    			onChange: function(index) {
    				this.colorsArry[index].checked = !this.colorsArry[index].checked
    				this.getDrag()
    			},
    
               
    
    
    		},
    
    
    
    		mounted() {
    			this.$dragging.$on('dragged', ({
    				value
    			}) => {
    
    				this.colorsArry = value.list
    				this.getDrag()
    
    			})
    			this.$dragging.$on('dragend', () => {
    
    			})
    
    			this.colors = this.colorsData==undefined?[]:this.colorsData  //接收要排序的数组
    			this.columnsAll = this.columnsData==undefined?[]:this.columnsData //接收表格全部的信息
    			this.butName = this.butTitle==undefined?'':this.butTitle  //按钮名称
    			this.popoverTitle = this.popover==undefined?'':this.popover //气泡框标题
    			
    			
    			this.rf()
    		}
    	}
    </script>
    

    3.2再在文件夹下新建index.js 和drag.vue 保持一致

    import Drag from './drag.vue'
    export default Drag
    

    4. 回到需要引入该组件的页面 我这里是table.vue

    //table.vue
    
    <template>
    
    
    	<div>
    	
    <!--Drag 可配置项 butTitle按钮文字(可为空) popover气泡框title(可为空)columnsData所有的完整的表格头部信息(不可为空)colorsData(用来排序的数组 可为空)-->
    		<Drag butTitle="点击排序"  popover='表格排序' :columnsData='columnsAll' :colorsData='colors' @onChange='setColumns'></Drag>
    	
    <div style="margin-top: 200px;">
    	<a-table :columns="columns" :dataSource="data" bordered>
    		<template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record, index">
    			<div :key="col">
    				<a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col)" />
    				<template v-else>{{text}}</template>
    			</div>
    		</template>
    		<template slot="operation" slot-scope="text, record, index">
    			<div class='editable-row-operations'>
    				<span v-if="record.editable">
    					<a @click="() => save(record.key)">Save</a>
    					<a-popconfirm title='Sure to cancel?' @confirm="() => cancel(record.key)">
    						<a>Cancel</a>
    					</a-popconfirm>
    				</span>
    				<span v-else>
    					<a @click="() => edit(record.key)">Edit</a>
    				</span>
    			</div>
    		</template>
    	</a-table>
    </div>
    		
    
    
    	</div>
    
    
    
    
    
    
    </template>
    <script>
    	
    	import Drag from '@/components/drag'  //引入drag组件
    	
    	const data = []
    	for (let i = 0; i < 100; i++) {
    		data.push({
    			key: i.toString(),
    			name: `Edrward ${i}`,
    			age: 32,
    			address: `London Park no. ${i}`,
    		})
    	}
    
    	export default {
    		
    		components:{
    			Drag,
    		},
    		
    		data() {
    			return {
    
    				data,  //data 为表格数据
    				columnsAll: [{  //columnsAll为该表单中所有的头部数据
    					title: 'name',
    					dataIndex: 'name',
    					width: '25%',
    					scopedSlots: {
    						customRender: 'name'
    					},
    				}, {
    					title: 'age',
    					dataIndex: 'age',
    					width: '15%',
    					scopedSlots: {
    						customRender: 'age'
    					},
    				}, {
    					title: 'address',
    					dataIndex: 'address',
    					width: '40%',
    					scopedSlots: {
    						customRender: 'address'
    					},
    				}, {
    					title: 'operation',
    					dataIndex: 'operation',
    					scopedSlots: {
    						customRender: 'operation'
    					},
    				}],
    		
    				columns:[], //表格最终要展示的头部信息
    				
    				
    				colors:[{   // colors数组的想法是基于从数据库中取要展示的头部信息
    					'text':'name',
    					'key':'name',
    					'checked':true
    					
    				},
    				
    				{
    					'text':'age',
    					'key':'age',
    					'checked':true
    				},
    				
    				{
    					'text':'address',
    					'key':'address',
    					'checked':false
    				},
    				{
    					'text':'operation',
    					'key':'operation',
    					'checked':true
    				}
    				
    				],
    	
    
    			}
    		},
    		methods: {
    			
    
    			setColumns:function  (val) {  //drag组件 改变时回调该方法 回调回来的val 是表格最终的头部信息
    				this.columns=val
    			},
    
    //以下是ant table方法
    
    handleChange(value, key, column) {
    				const newData = [...this.data]
    				const target = newData.filter(item => key === item.key)[0]
    				if (target) {
    					target[column] = value
    					this.data = newData
    				}
    			},
    			edit(key) {
    				const newData = [...this.data]
    				const target = newData.filter(item => key === item.key)[0]
    				if (target) {
    					target.editable = true
    					this.data = newData
    				}
    			},
    			save(key) {
    				const newData = [...this.data]
    				const target = newData.filter(item => key === item.key)[0]
    				if (target) {
    					delete target.editable
    					this.data = newData
    					this.cacheData = newData.map(item => ({ ...item
    					}))
    				}
    			},
    			cancel(key) {
    				const newData = [...this.data]
    				const target = newData.filter(item => key === item.key)[0]
    				if (target) {
    					Object.assign(target, this.cacheData.filter(item => key === item.key)[0])
    					delete target.editable
    					this.data = newData
    				}
    			},
    		
    
    		},
    		mounted() {
    		
    		}
    	}
    </script>
    

    5.最终效果

     

    6.该功能是基于awe-dnd插件和ant design 开发完成 ,以上drag组件也可使用于其他vue框架 如iview ,使用其他框架要遵循框架具体使用情况,需要保证drag组件绑定的onChange事件触发的回调函数中返回的数据val 适用于其余框架的table规范。

    展开全文
  • 一、Vue-draggable 二、awe-dnd

    一、Vue-draggable

    1、安装组件

    npm i -s vuedraggable
    

    2、在vue项目中引入该组件并注册

    import Draggable from 'vuedraggable';
    ......
    new Vue({
    el:'#app',
    components:{
       Draggable
    },
    data() {
    return {
    
    })
    

    3、在模板中使用

    <draggable 
         v-bind="{group:'favItem',animation:150}" 
         v-model="list" 
         @change="change"
         @start="start"
         @end="end">
      <button v-for="item in list" :key="item.key">{{item.text}}</button>
    </draggable>
    ......
    new Vue({
        el:'#app',
        components:{
           Draggable
        },
        data() {
           return {
              ...
        }),
        methodes:{
         change(evt) {},
         start(evt) {},
         end(evt) {},
        }
      })
    

    各项配置介绍:vuedraggable文文档
    start和end只会在拖拽元素移动的开始和结束时触发,过程中不会触发,这也是在项目中最后选用的原因。

    二、awe-dnd

    1、安装

    npm i -s awe-dnd
    

    2、导入插件

    ##  main.js
    import VueDND from 'awe-dnd';
    Vue.use(VueDND);
    

    3、使用

      <button 
        v-for="fav in FavList" 
        :key="item.key"
        v-dragging="{item:fav,list:FavList}"
        >{{item.text}}</button>
    ......
    new Vue({
        el:'#app',
        components:{
           Draggable
        },
        data() {
           return {
              ...
        }),
        mounted(){
        this.$dragging.$on('dragged',({value})=> {
            console.log(value.list)
       })
      }
       })
    

    会一直监听拖拽的过程,在拖拽的过程中会一直打印信息;

    展开全文
  • Vue 拖拽组件 vuedraggable 和 awe-dnd

    千次阅读 2019-06-03 17:06:00
    Vue 拖拽组件 vuedraggable 和 awe-dnd vuedraggable:https://www.npmjs.com/package/vuedraggable awe-dnd:https://www.npmjs.com/package/awe-dnd posted @ 20.....
  • npm install awe-dnd --save 然后去main.js里引用 import VueDND from 'awe-dnd' Vue.use(VueDND) 应用实例及参数说明 用官方文档给的数据写的实例,因为文档说的也不是很细致,所有的参数说明是我自行理解的 ...
  • cnpm i awe-dnd --save 二、引入 在main.js中 // 拖拽排序插件 import VueDND from 'awe-dnd' Vue.use(VueDND) 三、参考代码 <template> <div> <div class="item" v-for="item in list" v-...
  • npm install awe-dnd --save 引入awe-dnd插件 在main.js中引入 import VueDND from 'awe-dnd' Vue.use(VueDND) 以下是我写的一个小案例 <template> <div class="color-list"> <div class="color...
  • 项目中遇到一个需求; 电商管理平台添加商品的时候需要上传或者选择商品轮播图展示的图片,这里涉及到图片的...npm install awe-dnd --save 全局引入 import VueDND from 'awe-dnd' Vue.use(VueDND) 组件中使...
  • 1、awe-dnd github地址:https://github.com/hilongjw/vue-dragging 2、vue-draggable github地址:https://github.com/SortableJS/Vue.Draggable 通过使用过发现vue-draggable 只能实现tab栏列表拖拽,tab对应的...
  • 因为马上要做一个拖拽排序的功能,便先来了解下拖拽框架的使用,网上一搜就可以看到有[vuedraggable](https://www.npmjs.com/package/vuedraggable)和 [awe-dnd](https://github.com/hilongjw/vue-dragging)。...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 150
精华内容 60
关键字:

Awe-dnd