基于vue的UI组件库,功能持续增加中...
$ npm install mycustomui --save
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/mycustomui/lib/styles/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/mycustomui/lib/customui.umd.min.js"></script>
import Vue from 'vue';
import 'mycustomui/lib/styles/index.css';
import customUI from "mycustomui";
Vue.use(customUI);
...
// 示例:HelloWorld
<HelloWorld msg="Welcome" />
// 组件:LaSlider/SliderItem 走马灯
<LaSlider :arrow="true" @changeIndex="changeIndex">
<SliderItem v-for="(item, index) in 5" :key="index">
<h1>插入内容</h1>
</SliderItem>
</LaSlider>
...
methods: {
changeIndex(res) {
console.log(res);
}
}
// 方法:toast轻提示
this.$toast.warning('warning');
this.$toast({
message: 'test',
type: 'success',
duration: 2000,
animate: 1,
onClose: function() {
console.log('closed callback');
}
});
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| height | 高度 | String | -- | 100% |
| initIndex | 初始状态激活项的索引,从 0 开始 | Number | -- | 0 |
| loop | 循环切换 | Boolean | true/false | true |
| arrow | 切换箭头的显示 | Boolean | true/false | false |
| arrowColor | 切换箭头的色系 | String | light/deep | deep |
| indicator | 底部指示器 | Boolean | true/false | true |
| indicatorColor | 底部指示器色系 | String | light/deep | deep |
| autoplay | 自动切换 | Boolean | true/false | true |
| interval | 切换间隔 | Number | -- | 3000 |
| direction | 切换方向 | String | left/right | right |
| touchRatio | 触发切换所需拖动比例 | Number | 0~1 | 0.3 |
| 方法名 | 说明 | 参数 | 示例 |
|---|---|---|---|
| sliderPrev | 切换至上一项 | -- | this.$refs[name].sliderNext() |
| sliderNext | 切换至下一项 | -- | -- |
| handleIndicator | 切换至指定项 | 需要切换的索引,从 1 开始 | -- |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| changeIndex | 切换时触发,返回当前激活项的索引和原激活项的索引 | json |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 提示类型(纯文本多文字提示选info) | String | ['success', 'warning', 'loading', 'info'] | -- |
| duration | 持续时间ms | Number | 0 默认不关闭 | 2500 |
| message | 提示文本 | String | -- | -- |
| fontSize | 文本字体大小 | String | 'max' | -- |
| animate | 显示动效 | Number | [1, 2, 3] | 1 |
| onClose | 回调函数 | Function | -- | -- |
| 方法名 | 说明 | 参数 | 示例 |
|---|---|---|---|
| close | 主动关闭提示 | -- | this.$toast.close() |
- 补充组件库
- 组件按需引入
- 整理文档及demo
- 单元测试