hkly-ui v1.0.1

Vue 使用案例如下

组件属性

// props 属性
const props = {
  /**
       * 列表数据-二维数组结构
       * 格式如下：
       *      [
       *        {
       *          listTitle:'列表标题',
       *          status:'列表状态'
       *          listData:[
       *            id:'业务唯一ID',
       *            title:'卡片标题',
       *            status:'数据状态-与列表状态保持一致'
       *            content:'卡片内容',
       *          ]
       *        }
       *      ]
       **/
  listDatas: {
    type: Array,
    default () {
      return null
    }
  },
  // 是否显示列表卡片的下拉框组件
  isDropdown: {
    type: Boolean,
    default () {
      return true
    }
  },
  // 移动完成的回调函数
  moveComplete: {
    type: Function,
    default () {
      return () => {}
    }
  },
  // 删除完成的回调函数
  deleteComplete: {
    type: Function,
    default () {
      return () => {}
    }
  },
  // 主题颜色
  themeColor: {
    type: String,
    default () {
      return '#28439d'
    }
  },
  // 单个列表宽度
  listWidth: {
    type: Number,
    default () {
      return 220
    }
  },
  // 拖拽动画效果
  animation: {
    type: Number,
    default () {
      return 400
    }
  }
}

#组件案例代码
1、main.js 引入组件
import HklyUi from 'hkly-ui'
import 'hkly-ui/hkly-ui.css'
Vue.use(HklyUi)

2、使用案例
<template>
  <a-card style="width: 90%;height:100%;margin:20px;">
    <div >
      <hk-draggable-list :listDatas="listDatas"
                         :animation="400"
                         :listWidth="300"
                         :themeColor="'#28439d'"
                         :isDropdown="true"
                         :moveComplete="moveComplete"
                         :deleteComplete="deleteComplete"
                         ref="draggableRef">
        <!--列表标题插槽-->
        <template slot="listTitleSlot" slot-scope="{item}">
          <a-icon type="alert" style="color: white;"/>&nbsp;{{ item.listTitle }}（{{ item.listData.length }}）
        </template>
        <!--卡片下拉框自定义插槽-->
        <template slot="dropdownMenuSlot" slot-scope="{item}">
          <a-menu-item>
            <a @click="clickMenu(item)"><a-icon type="eye" theme="twoTone" /> 查看详情</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="clickMenu(item)"><a-icon type="edit" theme="twoTone" /> 编辑</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="$refs.draggableRef.delete(item)"><a-icon type="delete" theme="twoTone" /> 删除</a>
          </a-menu-item>
        </template>
        <!--卡片内容自定义插槽-->
        <template slot="cardContentSlot" slot-scope="{item}">
          <p style="color: black;">{{ item.id }}{{ item.content }}</p>
          <p style="color: gray;">{{ item.title }}</p>
        </template>
      </hk-draggable-list>
    </div>
  </a-card>
</template>

<script>

const lists = [
  {
    listTitle: '待开发任务',
    status: '待开发',
    listData: [
      { id: 'dkf1', status: '待开发', title: '待开发1', content: '卡片内容' },
      { id: 'dkf2', status: '待开发', title: '待开发2', content: '卡片内容' }
    ]
  },
  {
    listTitle: '待测试任务',
    status: '待测试',
    listData: [
      { id: 'dcs1', status: '待测试', title: '待测试1', content: '卡片内容' },
      { id: 'dcs2', status: '待测试', title: '待测试2', content: '卡片内容' },
      { id: 'dcs3', status: '待测试', title: '待测试3', content: '卡片内容' }
    ]
  },
  {
    listTitle: '待上线任务',
    status: '待上线',
    listData: [
      { id: 'dsx1', status: '待上线', title: '待上线1', content: '卡片内容' },
      { id: 'dsx2', status: '待上线', title: '待上线2', content: '卡片内容' },
      { id: 'dsx3', status: '待上线', title: '待上线3', content: '卡片内容' }
    ]
  },
  {
    listTitle: '已完成任务',
    status: '已完成',
    listData: [
      { id: 'ywc1', status: '已完成', title: '已完成1', content: '卡片内容' },
      { id: 'ywc2', status: '已完成', title: '已完成2', content: '卡片内容' },
      { id: 'ywc3', status: '已完成', title: '已完成3', content: '卡片内容' }
    ]
  }
]

export default {
  name: 'HkDraggableDemo',
  components: {
  },
  data () {
    return {
      listDatas: lists
    }
  },
  methods: {
    // 拖拽完成后，获取拖拽后的数据对象，可直接在此调用接口，执行更新操作
    moveComplete (data) {
      this.$message.info(JSON.stringify(data))
      // 获取最新的所有集合数据
      console.log(this.$refs.draggableRef.newListDatas)
    },
    // 删除列表数据回调函数
    deleteComplete (data) {
      this.$message.info('删除成功：' + JSON.stringify(data))
      // 获取最新的所有集合数据
      console.log(this.$refs.draggableRef.newListDatas)
    },
    // 点击自定义下拉菜单触发
    clickMenu (item) {
      this.$message.info(JSON.stringify(item))
    }
  }
}
</script>