17.拖拽列表(drag-vertical-list-view)

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

实例

基础用法

<template>
  <div class="drag-list">
    <drag-vertical-list-view
      class="seekbar1"
      :data="listData"
      @onDragEndEvent="onDragEndEvent"
      @onClickEvent="onClickEvent"
      @onDeleteEvent="onDeleteEvent"
    >
    </drag-vertical-list-view>
  </div>
</template>
<script>
export default {
    data() {
        return {
            listData: {
                supportRTL: true, // 增加适配阿拉伯语时的样式
                backgroundColor: '#F9F9F9', // 组件背景色 默认为 #F9F9F9
                isEditing: false, // 是否编辑
                rowHeight: 62, // 行高 默认为52，建议大于等于52，参考UI
                rowSpace: 10, // 行间距 默认为10
                itemTextColor: '#333333', // 默认字体颜色#333333
                itemBgColor: '#FFFFFF', // 行背景色 #FFFFFF
                itemFont: 16, // 字体大小 默认为16
                itemCornerRadius: 16, // 默认为16，参考UI(注意：android系统0-rowHeight/2才有效果)
                iconCornerRadius: 0, // 默认为0
                iconHeight: 32, // 图片高度，默认32， 图片宽度等于高度，参考UI
                deleteIconHeight: 0, // 图片高度，默认32， 图片宽度等于高度，参考UI
                sortIconHeight: 48, // 图片高度，默认32， 图片宽度等于高度，参考UI
                deleteIcon: '', // 默认用切图 删除图片
                sortIcon: '', // 默认用切图  排序图片
                list: [
                     {
                        itemId: '0',
                        name: '全屋照明', //名称
                        icon: 'https://pic.5tu.cn/uploads/allimg/1708/pic_5tu_big_201708111325384841.jpg'
                    },
                    {
                        itemId: '1',
                        name: '全屋用水',
                        icon: 'https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
                    },
                    {
                        itemId: '2',
                        name: '全屋空气',
                        icon: ''
                    },
                    {
                        itemId: '3',
                        name: '全屋环境文字很长很长最多一行点点...',
                        icon: ''
                    },
                ]
            }
        }
    }
    methods: {
    }
}
</script>

Attributes:data

Prop	Type	Required	Default	Description
supportRTL	Boolean	N	false	是否适配阿拉伯语时的样式
backgroundColor	string	N	#F9F9F9	组件背景色
isEditing	Boolean	N	false	是否编辑
rowHeight	Number	N	52	行高 默认为 52，建议大于等于 52
rowSpace	Number	N	10	行间距 默认为 10
itemTextColor	string	N	#333333	默认字体颜色
itemBgColor	string	N	#FFFFFF	行背景色
itemFont	Number	N	16	字体大小 默认为 16
itemCornerRadius	Number	N	16	默认为 16，参考 UI 行圆角
iconCornerRadius	Number	N	0	默认为 0 图片圆角
iconHeight	Number	N		图片高度
deleteIconHeight	Number	N	32	删除图片高度，默认 32，图片宽度等于高度
sortIconHeight	Number	N	32	排序图片高度，默认 32， 图片宽度等于高度
deleteIcon	string	N	-	删除图片
sortIcon	string	N	-	排序图片
list	Arrary	Y	[]	列表数据 注 1
iconBgColor	string	N	#0000ff	图片背景颜色

• 注 1 data.list

Prop	Type	Required	Default	Description
itemId	string	Y		唯一标识符
name	string	Y		名称
icon	string	N	-	图标

Events

事件名称	说明	回调参数
onClickEvent	点击事件通知 返回当前点击的 item 数据	{"itemId": '', "name": '', "icon": ''}
onDeleteEvent	删除事件通知 返回当前点击的 itemId	{"itemId": ''}
onDragEndEvent	拖拽结束 返回当前 list 数据	拖拽结束的 list