摘要: 轮子总得造上一造~
一、项目介绍
已有组件
二、安装下载
npm install x-vui -S
三、快速开始
3.1 构建项目(配合vue-cli)
# 全局安装 vue-cli
npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-vui-project
# 安装依赖,并下载x-vui
cd my-vui-project
npm install && npm install x-vui
# 项目启动 默认端口localhost:8080
npm run dev
3.2 引入vui组件库
你可以引入整个 vui,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 vui。
3.2.1 完整引入
在main.js中写入
import Vue from 'vue'
import vui from 'x-vui'
import 'x-vui/lib/vui-css/index.css';
Vue.use(vui)
3.2.2 按需部分引入
在main.js中写入(假如我只需要Scroller和Select组件)
import Vue from 'vue'
import {
Scroller,
Select
// ...
} from 'x-vui'
import 'x-vui/lib/vui-css/scroller.css';
import 'x-vui/lib/vui-css/select.css';
Vue.component(Scroller.name, Scroller)
Vue.component(Select.name, Select)
3.2.3 全局注册vui插件
注:完整引入了vui,则无需再注册插件
import Vue from 'vue';
import {
$Toast,
$Dialog
// ...
} from 'x-vui';
Vue.prototype.$toast = $Toast
Vue.prototype.$dialog = $Dialog
四、组件用法
4.1 swiper
可以自己调配自己想要的swiper,不一定得是轮播图
4.1.1 Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | swiper类型 | string | swiper(正常)/thum(缩略) | swiper |
auto | 自动播放时长 | number | — | 5000 |
items | swiper展示的列表 | array | — | [] |
showIndicators | 是否展示swiper小圆点 | boolean | — | true |
styles | swiper样式控制 | object | — | {} |
resetTitle | 重置title内容 | string | — | — |
4.1.2 Events
事件名称 | 说明 | 回调参数 |
---|---|---|
change | swiper滑动回调 | 当前swiper item索引 |
4.1.3 用法
<template>
<div class="swiper-page">
<p>正常swiper</p>
<x-swiper type='swiper' :items='items' :styles="{height: '180px'}"></x-swiper>
<p>缩略swiper</p>
<x-swiper type='swiper' :items='items' :type="'thum'" :styles="{height: '208px'}"></x-swiper>
</div>
</template>
<script>
export default {
data () {
return {
items: [
require('assets/beauty_1.png'),
require('assets/beauty_2.png'),
require('assets/beauty_3.png'),
require('assets/beauty_4.png'),
require('assets/beauty_5.png')
],
}
}
}
</script>
<style lang="stylus" scoped>
.swiper-page {
height auto
}
</style>
4.2 scroller(下拉刷新上拉加载)
4.2.1 Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
onRefresh | 下拉回调 | function | — | — |
onInfinite | 上拉回调 | function | — | — |
width | scroller宽度 | string | — | 100% |
height | scroller高度 | string | — | 100% |
isLoadMore | 是否展示上拉加载 | boolean | — | true |
refreshText | 下拉文本内容 | string | — | 下拉刷新 |
noDataText | 无数据文本 | string | — | 没有更多数据啦~ |
refreshLayerColor | 下拉文本颜色 | string | — | #AAA |
loadingLayerColor | 上拉文本颜色 | string | — | #AAA |
animating | 是否有动画 | boolean | — | true |
animationDuration | 动画间隔 | number | — | 250 |
bouncing | 是否有反弹效果 | string | — | true |
cssClass | content css class | string | — | — |
4.2.2 用法
<style scoped>
.scroller-page {
height: 330px
}
ul {
padding: 20px 0
}
li {
width: 100%;
height: 35px;
line-height: 35px;
border-bottom: 1px solid #eee;
text-align: center;
}
</style>
<template>
<div class="scroller-page">
<x-scroller
:on-refresh="refresh"
:on-infinite="infinite"
:noDataText="noDataText"
>
<!-- content is here -->
<ul>
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
<li>数据6</li>
</ul>
</x-scroller>
</div>
</template>
<script>
export default {
data () {
return {
noDataText: '没有更多数据啦~'
}
},
methods: {
refresh (done) {
setTimeout(done, 1000)
this.noDataText = ''
console.log('refresh');
},
infinite (done) {
setTimeout(done, 1000, true)
this.noDataText = '没有更多数据啦~'
console.log('infinite');
}
}
}
</script>
4.3 search
4.3.1 Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
async | 是否进行节流 | boolean | — | true |
timeout | 搜索节流时长 | number | — | 100 |
styles | search样式 | object | — | — |
placeholder | placeholder | string | — | '搜索' |
autofocus | 是否自动聚焦(iOS端autofocus无效) | boolean | — | — |
clear | 进行搜索是否清空search框内容 | boolean | — | false |