酷徒LOGO

vue-kanban, 基于vue的拖放看板(kanban board)


  • 源代码名称:vue-kanban
  • 源代码网址:http://www.github.com/BrockReece/vue-kanban
  • vue-kanban源代码文档
  • vue-kanban源代码下载
  • Git URL:
    git://www.github.com/BrockReece/vue-kanban.git
    Git Clone代码到本地:
    git clone http://www.github.com/BrockReece/vue-kanban
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/BrockReece/vue-kanban
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    vue-kanban

    拖放看板(kanban board)组件

    安装

    使用npm将vue看板添加到项目中

    
    
    
    
    npm install vue-kanban 
    
    
    
    

    或者Yarn

    
    
    
    
    yarn add vue-kanban
    
    
    
    

    基本用法

    安装插件

    
    
    
    
    import vueKanban from 'vue-kanban'
    
    
    
    Vue.use(vueKanban)
    
    
    
    

    然后在项目中使用组件。

    
    
    
    
    <kanban-board :stages="stages" :blocks="blocks"></kanban-board>
    
    
    
    
    道具阶段:看板板的一系列阶段blocks:组成看板上的块的对象数组
    
    
    
    
    {
    
    
     stages: ['on-hold', 'in-progress', 'needs-review', 'approved'],
    
    
     blocks: [
    
    
     {
    
    
     id: 1,
    
    
     status: 'on-hold',
    
    
     title: 'Test',
    
    
     },
    
    
     ],
    
    
    }
    
    
    
    

    接收更改

    组件在移动块时发出事件

    
    
    
    
    <kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock"></kanban-board>
    
    
    <script>
    
    
    ...
    
    
     methods: {
    
    
     updateBlock(id, status) {
    
    
     this.blocks.find(b => b.id === Number(id)).status = status;
    
    
     },
    
    
     },
    
    
    ...
    
    
    </script>
    
    
    
    

    添加一些样式

    我在这个repo中包括了一个scs样式表作为起点,可以在项目中使用

    
    
    
    
    <style lang="scss">
    
    
     @import './assets/kanban.scss';
    
    
    </style>
    
    
    
    

    定制看板块

    每个块都有一个命名槽,可以像这样从父块扩展。

    
    
    
    
    <kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock">
    
    
     <div v-for="block in blocks" :slot="block.id">
    
    
     <div>
    
    
     <strong>id:</strong> {{ block.id }}
    
    
     </div>
    
    
     <div>
    
    
     {{ block.title }}
    
    
     </div>
    
    
     </div>
    
    
    </kanban-board>
    
    
    
    




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备17041772号-2  |  如果智培  |  酷兔英语  |  帮酷