16.拖拽组件(midea-drag-list-view)

APP 内置组件，可直接在 template 中使用，不需要 import 导入和注册;

实例

基础用法

<template>
  <midea-drag-list-view ref="dragListView" class="drag" :data="data">
  </midea-drag-list-view>
</template>
<script>
export default {
    data() {
        return {
            data: {
                itemViewHeight: 100, // 行高
                itemViewMarginTop: 10, //行间距
                imageMarginTop: 10, //图片距离顶部的的距离
                textMarginTop: 10, // 文字与图片的距离
                textColor: 'blue', //文字颜色
                textSize: 16, //文字大小
                imageSize: 60, //图片大小
                spanCount: 4, //列数
                isEditable: false, //控制整个列表是否可编辑，默认是false, 为true时才显示编辑按钮
                editIcon: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg', //编辑按钮图标地址
                listData: [
                {
                    id: '1', //item的标识
                    imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg', //图标url
                    label: 'test1', //文本描述
                    isEditable: true //控制是否显示该编辑按钮，默认为false, 为true则显示
                },
                {
                    id: '2',
                    imageSrc: 'https://alifei03.cfp.cn/creative/icon/512/VCG25i3639132.jpg',
                    label: 'test2'
                },
                {
                    id: '3',
                    imageSrc: 'https://alifei04.cfp.cn/creative/icon/512/VCG25i3639133.jpg',
                    label: 'test3',
                    isEditable: true //控制是否显示该编辑按钮，默认为false, 为true则显示
                },
                {
                    id: '4',
                    imageSrc: 'https://alifei05.cfp.cn/creative/icon/512/VCG25i3639134.jpg',
                    label: 'test4',
                    isEditable: true //
                },
                {
                    id: '5',
                    imageSrc: 'https://tenfei01.cfp.cn/creative/icon/512/VCG25i3639135.jpg',
                    label: 'test5',
                    isEditable: true
                }
                ]
            }
        }
    }
    methods: {
        methods: {
    getDataList(event) {
      let that = this
      this.$refs.dragListView.getListData(function(data) {
        that.data = {
          listData: [
            {
              id: '1',
              imageSrc: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg',
              label: 'test1qerqerqwerqwrwerqwerqwrwrqwrwrqwerwr'
            },
            {
              id: '2',
              imageSrc: 'https://alifei03.cfp.cn/creative/icon/512/VCG25i3639132.jpg',
              label: 'test2'
            },
          ],
          itemViewHeight: 100, // 行高
          itemViewMarginTop: 10, //行间距
          imageMarginTop: 10, //图片距离顶部的的距离
          textMarginTop: 10, // 文字与图片的距离
          textColor: 'blue', //文字颜色
          textSize: 16, //文字大小
          imageSize: 40, //图片大小
          spanCount: 4, //列数
          isEditable: true, //控制整个列表是否可编辑，默认是false, 为true时才显示编辑按钮
          editIcon: 'https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg'
        }
    }),
    }
}
</script>

Attributes:data

Prop	Type	Required	Default	Description
supportRTL	Boolean	N	false	是否适配阿拉伯语时的样式
itemViewHeight	Number	N	-1	行高
itemViewMarginTop	Number	N	10	行间距
imageMarginTop	Number	N	10	图片距离顶部的的距离
textMarginTop	Number	N	12	文字与图片的距离
textColor	String	N	#000000	文字颜色
textSize	Number	N	12	文字大小
imageSize	Number	N	60	图片大小
spanCount	Number	N	4	列数
isEditAble	Boolean	N	false	控制整个列表是否可编辑,为 true 时才显示编辑按钮
editIcon	String	N	''	编辑按钮图标地址
listData	Array	N	[]	列表项（见注 1）

• 注 1 listData

  Prop	Type	Required	Default	Description
  id	String	Y	-	item 的标识
  imageSrc	String	Y	''	图片 url
  label	String	Y	''	文本描述
  isEditable	Boolean	N	false	是否显示该编辑按钮

方法 $refs

事件名称	说明	回调参数
getListData	获取拖拽后的列表数据 listData. 返回的是一个 json 数组字符串。返回数据如下

    {   code:0,
        msg: "success",
        listData:[
                {
                    id:"1",//item 的标识
                    "imageSrc":"https://alifei02.cfp.cn/creative/icon/512/VCG25i3639131.jpg", //图标 url
                    label:"test1",//文本描述
                    isEditable:true,//控制是否显示该编辑按钮，默认为 false, 为 true 则显示
                }
            ]
    }

|## Events

事件名称	说明	回调参数
onDeleteEvent	删除事件通知。返回当前被删除 item 的 id	{ id: xxx }
onClickEvent	点击事件通知。返回当前被点击 item 的 id	{ id: xxx }
onDragEventStart	开始拖拽事件通知。返回当前被拖拽 item 的 id	{ id: xxx }
onDragEventEnd	结束拖拽事件通知。返回当前被拖拽 item 的 id	{ id: xxx }