打电话做网站的话术,江西哪家网站建设公司好,连云港做网站优化,深圳品牌策划营销1.通过 npm 或 yarn 安装 vuedraggable 库
npm install vuedraggableyarn add vuedraggable
2. 引入组件内部使用#xff0c;以下代码是一个Demo#xff0c;可直接复制粘贴演示
注意#xff1a;因项目使用了 vant#xff0c;需要安装 vant 才能正常运行
template以下代码是一个Demo可直接复制粘贴演示
注意因项目使用了 vant需要安装 vant 才能正常运行
templatediv classwrappervan-nav-bar title生产订单 left-arrow click-leftonLeftClick /div classpage_bgdiv styledisplay: flex; justify-content: centervan-list classlist_wrap myStyle :loadingloading :finishedfinished loadonLoadvan-cell classcell_item v-for(item, index) in dataList :keyindexspan classsign/spandiv classmystylediv销售订单{{ item.BillNo }}/div/divdiv classtable_wrap stylez-index: 999draggable classlist-group :listitem.Entries item-keyid grouppeople changeonChange1div v-for(items, indexs) in item.Entries :keyindexs stylepadding: 10pxdiv{{ items }}/div/div/draggable/div/van-cell/van-listvan-list stylewidth: 50vw; margin-right: 10px :loadingloading :finishedfinished loadonLoadvan-cell classcell_item myCellvan-dropdown-menuvan-dropdown-item v-modelcurrentValue :optionsnewList /van-button styleposition: absolute; top: 12px; right: 15px; width: 100px; height: 55px; z-index: 999999999 typeinfo sizesmall提交/van-button/van-dropdown-menudiv classtable_wrap styleheight: 275pxdraggable classlist-group :listlistObj.Entries item-keyid grouppeople changeonChange2div v-for(items, index) in listObj.Entries :keyindex stylepadding: 10pxdiv{{ items }}/div/div/draggable/div/van-cell/van-list/div/div/div
/template
script
import Draggable from vuedraggable;
export default {name: productlist,components: { Draggable },data() {return {loading: false,finished: true,isLoad: false,dataList: [],newList: [{ text: 1号线, value: 0 },{ text: 2号线, value: 1 },{ text: 3号线, value: 2 },{ text: 4号线, value: 3 }],currentValue: 0,listObj: {BillNo: 1号线,Entries: []}};},mounted() {this.userInfo JSON.parse(localStorage.getItem(userInfo));this.onSearchClick();},methods: {onLeftClick() {this.$router.push(/);},onLoad() {if (this.isLoad) {this.page;this.onSearchClick();}},async onSearchClick() {this.dataList [{BillNo: XSDD01,Entries: [物料:屏幕;客户:山东, 物料:手机;客户:四川, 物料:电脑;客户:河南, 物料:机箱;客户:北京]}];},onChange1(evt) {console.log(数据列表:, evt);},onChange2(evt) {console.log(响应列表:, evt);}}
};
/script
style scoped
::v-deep .van-popup--top {--dynamic-width: 50vw;left: calc(var(--dynamic-width) 5px);width: calc(var(--dynamic-width) - 10px);
}
.list_wrap.scroll_div {max-height: calc(100vh - 123px);
}
.custom-width {min-width: 200px;
}
.customWidth {min-width: 100px;
}
.myStyle {width: 50vw;padding: 0 5px;font-size: 12px !important;
}
.myCell {margin: 0 5px 0 0;
}
::v-deep .van-dropdown-menu__bar {position: relative;height: 40px;border-bottom: 1px solid #e5e5e5;
}
::v-deep .van-dropdown-menu__title--active,
::v-deep .van-dropdown-item__option--active .van-dropdown-item__icon,
::v-deep .van-dropdown-item__option--active {color: #0860b9;
}
::v-deep .van-overlay {background-color: rgba(0, 0, 0, 0);
}::v-deep .van-dropdown-menu__item {justify-content: left;
}
/style3.友情提示这个库使用方法其实很简单因为看别人写的比较复杂自己才写一个Demo 供大家理解其实这个库中最重要的就是这个属性 grouppeople 它决定了哪些组件可以相互拖拽就相当于一个 key相同 key 的可以相互拖拽。
