V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shuirong1997
V2EX  ›  程序员

我封装了一个可拖拽的 Tree 组件( Vue),并发布到了 NPM

  •  
  •   shuirong1997 ·
    shuiRong · 2017-06-19 14:10:53 +08:00 · 3550 次点击
    这是一个创建于 2706 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Github : https://github.com/shuiRong/vue-drag-tree

    DEMO: https://shuirong.github.io/vuedragtree/#/


    有需求才有动力

    一开始在新项目里用的 Tree 组件是 Element 的,但踩到坑了:Tree 节点的填加 /删除无法反映到 data 里,这个影响就比较大了。然后我通过一些奇技淫巧让节点的改变反映到了 data 里,虽然有点消耗性能(用了深克隆),但勉强算是解决了问题。

    然后随着项目的进展,需要 Tree 节点可拖拽......

    本着 能用开源项目就不自己写 的原则,我就去 Gayhub 上找适合的项目了。但很不幸运,虽然找到了很多不错的拖拽项目,但都不是我想要的。

    无奈,只能自己写了。

    快速了学习了 HTML5 的拖拽特性后,发现尤雨溪写了一个树形视图,正好能借鉴下。两者一结合,项目就成了。

    嘿嘿


    预览

    vue-drag-tree.gif


    快速开发

    如果你决定了要做一件事,那就尽可能地快点。比如做一个项目,注释,文档什么乱七八糟的都可以后来再加上,尽早写出来个 Version 1.0 和一个能看的 DEMO 再说

    为什么呢?

    因为夜长梦多,时间久了什么事都可能发生。尽管对于 Tree 组件这种项目来说,时机并没有那么重要(比较重要的:项目质量,需求的满足度),但你也应该有这样的意识

    说些废话,项目无关,可以不看:
    
    该做选择的时侯就要果断,“犹犹豫豫,顾忌很多”会让你大概率错失良机。或许你会说,难道不该考虑“×××”“×××”“×××”的情况吗?应该考虑,做选择时就应该考虑到所有相关可能出现的情况。
    但是,你考虑的太久了!
    个人觉得考虑问题不应该带入情绪,它只会把你的注意力带到次要矛盾那里,而不是主要的。完全这样思考问题,我还做不到,但在努力做的更好。
    
    "当断不断,反受其乱",最新看<<中国历朝通俗演义>>,感悟到的。
    

    上传 NPM

    关于"Vue 组件如何上传到 NPM,供他人使用“,我一开始受到了一些相关博客的误导,大概就是webpack把项目打包成 JS 文件,然后在package.jsonmain导出该 JS 文件。(或许这种方法可以吧,而是我没搞定)

    我参考了很多文章和项目的代码,仍旧不能成功地在其他项目中引入。

    最终,我灵光一闪,想到:为何不直接在main里直接导出 Vue 组件(.vue 文件)呢?

    成功!

    // 在项目根目录下登录 npm。首先,你需要有个 npm 帐号
    npm login
    // ...根据提示输入用户名,密码
    // ...上传。以后每次代码更新后都可以用这条命令重新上传。记得上传前更新下版本号。
    npm publish 
    

    比较意外的是,上传了一天就有 112 次 downloads 了......看来,有这样需求的人还挺多呢。 (补充:得知这些下载量基本都来自于镜像...-_-)

    npm.png

    12 条回复    2017-06-19 19:41:45 +08:00
    iTakeo
        1
    iTakeo  
       2017-06-19 17:02:51 +08:00
    Firefox 有 bug
    learnshare
        2
    learnshare  
       2017-06-19 17:03:59 +08:00   ❤️ 1
    相信我,112 次 downloads 都是第三方镜像的同步
    pwcong
        3
    pwcong  
       2017-06-19 17:12:05 +08:00
    相信我,112 次 downloads 都是第三方镜像的同步
    caniuse
        4
    caniuse  
       2017-06-19 17:28:15 +08:00
    相信我,112 次 downloads 都是第三方镜像的同
    chairuosen
        5
    chairuosen  
       2017-06-19 18:18:36 +08:00
    其实拖拽更多的不是交换,而是单纯把某项提前
    frankynwa
        6
    frankynwa  
       2017-06-19 18:56:03 +08:00
    心路历程写的很详细,赞一个。
    shuirong1997
        7
    shuirong1997  
    OP
       2017-06-19 18:56:08 +08:00
    @iTakeo 多谢反馈,看看怎么回事。(猜测是拖拽事件的问题...)

    @caniuse 少了个”步“。(蛤蛤)

    @chairuosen 那我这个算是拖拽高配版?( XD )
    SourceMan
        8
    SourceMan  
       2017-06-19 18:58:06 +08:00
    你的 commit message,我宁愿你统一用 Update。。。。
    chairuosen
        9
    chairuosen  
       2017-06-19 18:58:48 +08:00
    @shuirong1997 ...低配。。。n 项,想把最后一项放到第一个,要拖 n-1 次。
    shuirong1997
        10
    shuirong1997  
    OP
       2017-06-19 19:02:30 +08:00
    @chairuosen 怎么会呢? 同层级的最后一个可以和第一个直接交换的。 不同层级的也可以一次拖拽交换的
    chairuosen
        11
    chairuosen  
       2017-06-19 19:38:16 +08:00
    @shuirong1997 1234567,交换后是 7234561 啊,我想要 7123456
    shuirong1997
        12
    shuirong1997  
    OP
       2017-06-19 19:41:45 +08:00
    @chairuosen 也是,没考虑到这种情况。感谢反馈,下次更新加上....XD
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   991 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 20:16 · PVG 04:16 · LAX 12:16 · JFK 15:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.