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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 2543 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

semantic-ui

LICENSE

MIT

第 1 条附言 · 2017-12-12 17:37:53 +08:00

最新版已发布，请大家更新到最新版

21 条回复 • 2017-12-20 13:00:30 +08:00

myliang

2017-12-07 22:19:30 +08:00

欢迎各位使用，提问 https://github.com/myliang/fish-ui/issues

lhx2008

2017-12-07 22:25:28 +08:00

还挺好看的，赞

wwqgtxx

2017-12-08 00:51:08 +08:00 via iPhone

不打算适配一下移动端么

66beta

2017-12-08 09:03:17 +08:00

移动端好的库太少，饿了么的 mint-ui 兼容性一般性能也不好，倒是 didi 的 cube-ui 可以一战，但是目前组件太少

myliang

2017-12-08 09:07:57 +08:00

@wwqgtxx 有这计划，貌似移动端的需求更大

myliang

2017-12-08 09:08:47 +08:00

@66beta 我开发这个组件库也是因为没什么太适合自己，开来有必要开发个移动端的

wwqgtxx

2017-12-08 10:30:30 +08:00 via iPhone

@myliang 对于很多小网站来说，一套能同时适配移动端和桌面端的 ui 库能大幅度提高开发效率

myliang

2017-12-08 10:40:04 +08:00

@wwqgtxx 明白，谢谢你提议，很多人也提过这个，后面添加支持

dilu

2017-12-08 11:28:26 +08:00

好看果断 star 又多了一个选择

myliang

2017-12-08 11:56:40 +08:00

@dilu thx

myliang

2017-12-08 16:26:09 +08:00

已经更新到了 1.0.93 版本，重构了 select 的样式

myliang

2017-12-11 18:00:33 +08:00

@wwqgtxx 最近版本已经支持移动端了

wwqgtxx

2017-12-11 19:30:13 +08:00

@myliang 刚刚试了一下 demo，貌似忘记处理当列表还有代码框超出屏幕宽度的时候需要加上横向滚动条的问题了吧

myliang

2017-12-11 19:46:57 +08:00

@wwqgtxx 你是说的 table 是吗？

wwqgtxx

2017-12-11 19:56:51 +08:00

你试试在 chrome 开发者模式下看看这个页面 https://myliang.github.io/fish-ui/#/components/checkbox
很多地方文字超出范围了怎么都拖不出来

myliang

2017-12-11 20:07:17 +08:00

@wwqgtxx 问题已解决，谢谢你！

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

2017-12-20 11:42:13 +08:00

@wwqgtxx 谢谢你建议，这些问题我会最近修复，可以提 github, issue

myliang

2017-12-20 12:35:18 +08:00

@wwqgtxx 其实小真实的 demo,你可以看看我这个项目 https://github.com/myliang/fish-admin

wwqgtxx

2017-12-20 12:54:01 +08:00

@myliang fish-admin 我也看过，不过这个毕竟是需要在本地部署之后才能看效果，而且的确过于小了，很多内容都没有涉及到，而 fish-ui 的 doc 是可以直接看的，而且基本上覆盖了 fish-ui 所有的组件的用法，所以在细节方面参考价值更大

myliang

2017-12-20 13:00:30 +08:00

@wwqgtxx 其实 example 目录下的 demo 都是 Demo 开头的而已，比如表格 DemoTable.vue 这个是主要页面，主页面里的小 demo 就是 DemoTable*.vue, 这样你看 demo 就能很容易看明白了