demo地址(不完善) https://liliangabc.github.io/vueui-widgets
import Vue from 'vue'
import VueUI from 'vueui-widgets'
import 'vueui-widgets/dist/vueui.css'
Vue.use(VueUI, { prefix: 'ui' })
目前已完成的组件如下:
- Alert
- Avator
- BackTop
- Badge
- Button
- ButtonGroup
- Icon
- Input
- Tag
- Message
- Notice
- Checkbox
- CheckboxGroup
- Card
- Timeline
- TimelineItem
- Progress
- Collapse
- Panel
- Modal
- breadcrumb
- breadcrumbItem
- Swiper
- SwiperItem
- Row
- Col
- Layout
- Header
- Content
- Footer
- Sider
- Radio
- RadioGroup
- ISwitch
- Tabs
- TabPane
- Spin
- Transfer
- Rate
- InputNumber
- Select
- Option
- OptionGroup
- Scroll
- ICircle
- Step
- Steps
- Affix
- LoadingBar
- Page
- Dropdown
- DropdownMenu
- DropdownItem
- Menu
- MenuItem
- Submenu
- MenuGroup
- Tooltip
- Poptip
- Tree
- Table
- Slider
- Form
- FormItem
- AutoComplete
新增AutoComplete组件,暂不支持自定义slot选项列表
新增Form,FormItem组件,暂不支持表单验证
新增Slider组件
新增Table组件,该版本仅实现了部分功能,后续版本会逐步实现所有功能,详见演示地址:打开Demo
新增Tree组件,暂不支持渲染方法,将在1.0版本之前提供支持
新增Poptip组件
新增Tooltip组件
新增垂直导航菜单,但没有动画效果,计划1.0版本发布之前完美支持该功能,可能还存在一些细节未完善
新增Menu,MenuItem,Submenu,MenuGroup组件,目前仅支持水平导航菜单,垂直导航菜单下个版本提供支持
新增Dropdown, DropdownMenu, DropdownItem组件, 暂不支持菜单位置设置和二级菜单,计划1.0版本发布之前完美支持该功能
新增Page组件
新增LoadingBar组件,具体用法请参见demo演示和介绍 打开Demo
新增Affix组件
新增Scroll,ICircle,Step,Steps组件,ICircle对应于iview中的Circle组件
Select组件新增支持多选和键盘选择,以及本地和远程搜索功能,与iview Select用法完全一致
新增Select,Option,OptionGroup组件,暂不支持多选和键盘选择,将在下个版本提供支持
新增InputNumber组件 暂不支持用于格式化数值的 formatter 和 parser属性
新增Rate组件
新增Transfer组件
新增Spin组件
新增Tabs,TabPane组件
新增ISwitch组件,对应iview中的Switch组件,用法完全一样;
新增Radio,RadioGroup组件
新增Layout,Header,Content,Footer,Sider组件,除了Sider不支持breakpoint属性,其它与iview完全一致;
新增Row,Col组件,用来实现与boostrap一致的响应式网格布局
- 因发现Swiper组件存在bug,和代码实现上的不够完美,紧急修复bug并优化代码逻辑,尺寸计算全部改成百分比,更适应窗口大小的变化;
- github仓库地址已变更,现在和包名保持一致;
新增Swiper, SwiperItem组件; 对应于iview中的Carousel, CarouselItem,用法完全一样;
- 新增breadcrumb, breadcrumbItem导航组件
- 新增resize,scroll 指令, 二者都绑定一个Function,window大小改变或滚动会调用该Function,用法如下:
<template>
<div>
<div v-resize="handleResize"></div>
<div v-scroll="handleScroll"></div>
</div>
</template>
<script>
export default {
methods: {
handleResize(event) {
},
handleScroll(event) {
}
}
}
</script>
- 新增Modal组件
该组件既可以在模板中使用,亦可以通过添加到Vue实例的$Modal对象使用 对象用法如下:
- this.$Modal.info(config)
- this.$Modal.success(config)
- this.$Modal.warning(config)
- this.$Modal.error(config)
- this.$Modal.confirm(config)
- this.$Modal.remove() // 全局关闭对话框
新增Progress, Collapse, Panel组件
新增Card, Timeline, TimelineItem组件
新增Checkbox和CheckboxGroup组件
this.$Message.info(options)
this.$Message.success(options)
this.$Message.warning(options)
this.$Message.error(options)
this.$Message.loading(options)
this.$Message.config(options)
this.$Message.destroy(options)
this.$Notice.open(options)
this.$Notice.info(options)
this.$Notice.success(options)
this.$Notice.warning(options)
this.$Notice.error(options)
this.$Notice.config(options)
this.$Notice.destroy(options)
稳定版将兼容IE10以上和其它浏览器,如果你要考虑IE9的兼容,请谨慎选择!
很抱歉,因精力有限,目前专注于开发新组件,文档暂时没充足时间编写, 详细文档请暂时参见iview http://www.iviewui.com/
更多组件正在开发的路上,敬请期待...