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

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

  •  
  •   shuirong1997 · 158 天前 · 983 次点击
    这是一个创建于 158 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    iTakeo   157 天前
    Firefox 有 bug
        2
    learnshare   157 天前   ♥ 1
    相信我,112 次 downloads 都是第三方镜像的同步
        3
    pwcong   157 天前
    相信我,112 次 downloads 都是第三方镜像的同步
        4
    caniuse   157 天前
    相信我,112 次 downloads 都是第三方镜像的同
        5
    chairuosen   157 天前
    其实拖拽更多的不是交换,而是单纯把某项提前
        6
    frankynwa   157 天前
    心路历程写的很详细,赞一个。
        7
    shuirong1997   157 天前
    @iTakeo 多谢反馈,看看怎么回事。(猜测是拖拽事件的问题...)

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

    @chairuosen 那我这个算是拖拽高配版?( XD )
        8
    SourceMan   157 天前
    你的 commit message,我宁愿你统一用 Update。。。。
        9
    chairuosen   157 天前
    @shuirong1997 ...低配。。。n 项,想把最后一项放到第一个,要拖 n-1 次。
        10
    shuirong1997   157 天前
    @chairuosen 怎么会呢? 同层级的最后一个可以和第一个直接交换的。 不同层级的也可以一次拖拽交换的
        11
    chairuosen   157 天前
    @shuirong1997 1234567,交换后是 7234561 啊,我想要 7123456
        12
    shuirong1997   157 天前
    @chairuosen 也是,没考虑到这种情况。感谢反馈,下次更新加上....XD
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2594 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 50ms · UTC 07:38 · PVG 15:38 · LAX 23:38 · JFK 02:38
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1