V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
myliang
V2EX  ›  Vue.js

fish-ui 一套基于 vue2 的 ui 组件库

  •  
  •   myliang ·
    myliang · 2017-12-07 22:18:11 +08:00 · 3294 次点击
    这是一个创建于 2303 天前的主题,其中的信息可能已经有所发展或是发生改变。

    A Vue.js 2.0 UI Toolkit for Web.
    git: https://github.com/myliang/fish-ui

    安装

    npm install less less-loader -S
    npm install fish-ui -S
    

    快速开始

    导入所有组件

    import Vue from 'vue'
    import FishUI from 'fish-ui'
    
    Vue.use(FishUI)
    
    

    按需导入组件

    import Button from 'fish-ui/src/components/Button.vue'
    import 'fish-ui/styles/base.less'
    import 'fish-ui/styles/button.less'
    
    

    实例

    https://myliang.github.io/fish-ui/

    特性

    • Equip with Vue.js, Moment, Vue-Router, ES6 & Babel 6
    • Cool with Webpack 2.0 & Vue Loader
    • Semantic CSS Components
    • Stylesheets in Less

    所有组件

    • BackTop
    • Button
    • Buttons
    • Calendar
    • Card
    • Carousel
    • CarouselItem
    • Cascader
    • Checkbox
    • Checkboxes
    • Col
    • DatePicker
    • Dropdown
    • Field
    • Fields
    • Form
    • Input
    • InputNumber
    • Layout
    • Menu
    • Message
    • Modal
    • Option
    • Pagination
    • Radio
    • Radios
    • Row
    • Select
    • Steps
    • Step
    • Submenu
    • Table
    • TabPane
    • Tabs
    • Tag
    • Tags
    • TimePicker
    • Upload
    • Tree
    • Tree Select
    • Transfer
    • Devider
    • Image
    • Timeline

    浏览器支持

    Modern browsers and Internet Explorer 9+(no test).

    Thanks to

    LICENSE

    MIT

    第 1 条附言  ·  2017-12-12 17:37:53 +08:00
    最新版已发布,请大家更新到最新版
    21 条回复    2017-12-20 13:00:30 +08:00
    myliang
        1
    myliang  
    OP
       2017-12-07 22:19:30 +08:00
    欢迎各位使用,提问 https://github.com/myliang/fish-ui/issues
    lhx2008
        2
    lhx2008  
       2017-12-07 22:25:28 +08:00
    还挺好看的,赞
    wwqgtxx
        3
    wwqgtxx  
       2017-12-08 00:51:08 +08:00 via iPhone
    不打算适配一下移动端么
    66beta
        4
    66beta  
       2017-12-08 09:03:17 +08:00
    移动端好的库太少,饿了么的 mint-ui 兼容性一般性能也不好,倒是 didi 的 cube-ui 可以一战,但是目前组件太少
    myliang
        5
    myliang  
    OP
       2017-12-08 09:07:57 +08:00
    @wwqgtxx 有这计划,貌似移动端的需求更大
    myliang
        6
    myliang  
    OP
       2017-12-08 09:08:47 +08:00
    @66beta 我开发这个组件库也是因为没什么太适合自己,开来有必要开发个移动端的
    wwqgtxx
        7
    wwqgtxx  
       2017-12-08 10:30:30 +08:00 via iPhone
    @myliang 对于很多小网站来说,一套能同时适配移动端和桌面端的 ui 库能大幅度提高开发效率
    myliang
        8
    myliang  
    OP
       2017-12-08 10:40:04 +08:00
    @wwqgtxx 明白,谢谢你提议,很多人也提过这个,后面添加支持
    dilu
        9
    dilu  
       2017-12-08 11:28:26 +08:00
    好看 果断 star 又多了一个选择
    myliang
        10
    myliang  
    OP
       2017-12-08 11:56:40 +08:00
    @dilu thx
    myliang
        11
    myliang  
    OP
       2017-12-08 16:26:09 +08:00
    已经更新到了 1.0.93 版本,重构了 select 的样式
    myliang
        12
    myliang  
    OP
       2017-12-11 18:00:33 +08:00
    @wwqgtxx 最近版本已经支持移动端了
    wwqgtxx
        13
    wwqgtxx  
       2017-12-11 19:30:13 +08:00
    @myliang 刚刚试了一下 demo,貌似忘记处理当列表还有代码框超出屏幕宽度的时候需要加上横向滚动条的问题了吧
    myliang
        14
    myliang  
    OP
       2017-12-11 19:46:57 +08:00
    @wwqgtxx 你是说的 table 是吗?
    wwqgtxx
        15
    wwqgtxx  
       2017-12-11 19:56:51 +08:00
    你试试在 chrome 开发者模式下看看这个页面 https://myliang.github.io/fish-ui/#/components/checkbox
    很多地方文字超出范围了怎么都拖不出来
    myliang
        16
    myliang  
    OP
       2017-12-11 20:07:17 +08:00
    @wwqgtxx 问题已解决,谢谢你!
    wwqgtxx
        17
    wwqgtxx  
       2017-12-20 11:07:13 +08:00 via iPhone
    昨天用 fish-ui 写了一个小项目,提点意见吧
    文档写的实在是,,,各种组件没有分类都混在一起,除非看提供的例子,否则根本不知道该如何组合使用。
    然后有些组件的属性并没有列在文档中( table 分页那部分),要自己查源代码才能找到
    另外有些组件虽然可以复用,比如 fish-option,在 form 和 menu 中都有使用,文档中却没有说明其在不同父容器中使用的区别
    fish-menu 中使用的 fish-option 和 vue-router 配合的并不好,需要手动写 click 事件,且还在在 mount 的时候加钩子来激活确定当前页,设置 default-active 属性
    fish-table 的扩展菜单只能通过 render 函数实现,然而大部分人还是用 vue-loader 写的.vue 组件,render 的编写对于初学者过于复杂了,是不是可以考虑中 slot 解决这个问题

    目前暂时就这么多,最后提一个,fish-ui 各个组件的 src 看着还是很清晰的,但是官方文档部分的源代码实在是看不懂,建议重构一下,毕竟这也是给各位使用者最好的例子
    myliang
        18
    myliang  
    OP
       2017-12-20 11:42:13 +08:00
    @wwqgtxx 谢谢你建议,这些问题我会最近修复,可以提 github, issue
    myliang
        19
    myliang  
    OP
       2017-12-20 12:35:18 +08:00
    @wwqgtxx 其实小真实的 demo,你可以看看我这个项目 https://github.com/myliang/fish-admin
    wwqgtxx
        20
    wwqgtxx  
       2017-12-20 12:54:01 +08:00
    @myliang fish-admin 我也看过,不过这个毕竟是需要在本地部署之后才能看效果,而且的确过于小了,很多内容都没有涉及到,而 fish-ui 的 doc 是可以直接看的,而且基本上覆盖了 fish-ui 所有的组件的用法,所以在细节方面参考价值更大
    myliang
        21
    myliang  
    OP
       2017-12-20 13:00:30 +08:00
    @wwqgtxx 其实 example 目录下的 demo 都是 Demo 开头的而已,比如表格 DemoTable.vue 这个是主要页面,主页面里的小 demo 就是 DemoTable*.vue, 这样你看 demo 就能很容易看明白了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   971 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 20:20 · PVG 04:20 · LAX 13:20 · JFK 16:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.