布局
简单平分：水平布局和垂直布局
<template>
<divider>Horizontal</divider>
<flexbox style="height:40px;">
<flexbox-item><div class="flex-demo">1</div></flexbox-item>
<flexbox-item><div class="flex-demo">2</div></flexbox-item>
<flexbox-item><div class="flex-demo">3</div></flexbox-item>
</flexbox>
<divider>Vertical</divider>
<flexbox orient="vertical" :margin-left=0>
<flexbox-item><div class="flex-demo" style="margin-left:0">1</div></flexbox-item>
<flexbox-item><div class="flex-demo" style="margin-left:0">2</div></flexbox-item>
<flexbox-item><div class="flex-demo" style="margin-left:0">3</div></flexbox-item>
</flexbox>
</template>
<script>
//引入组件
import {Divider,FlexboxItem,Flexbox} from 'vux/src/components'
//创造构造器
export default {
components: {
Divider,FlexboxItem,Flexbox
},
}
/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
},
}*/
</script>
<style>
.flex-demo {
text-align: center; /*文本居中显示*/
color: #EEE;
background-color: #0077FF;
margin-bottom: 16px;
border-radius: 6px; /*按钮的圆角弧度*/
-webkit-background-clip: padding-box;
}
</style>
嵌套布局
<template>
<flexbox :margin-left=0 style="height: 200px; background-color: #fff;" class="vux-1px-tb vux-1px-l vux-1px-r">
<flexbox-item class="vux-1px-r" style="height:200px;"></flexbox-item>
<flexbox-item>
<flexbox orient="vertical" :margin-left=0>
<flexbox-item class="vux-1px-b"></flexbox-item>
<flexbox-item style="height: 100px;"><!--height: 100% doesnot work here-->
<flexbox :margin-left=0>
<flexbox-item class="vux-1px-r"></flexbox-item>
<flexbox-item></flexbox-item>
</flexbox>
</flexbox-item>
</flexbox>
</flexbox-item>
</flexbox>
</template>
Props
| 名字 |
类型 |
默认 |
描述 |
| height |
String |
Viewport |
高度 |
| lockX |
Boolean |
false |
锁定X方向 |
| lockY |
Boolean |
false |
锁定Y方向 |
| scrollbarX |
Boolean |
false |
横向滚动条 |
| scrollbarY |
Boolean |
false |
垂直方向滚动条 |
| bounce |
Boolean |
true |
是否有边缘回弹 |
| use-pulldown |
Boolean |
false |
是否使用下拉组件 |
| use-pullup |
Boolean |
false |
是否使用上拉组件 |
| pulldown-config |
Object |
见下面 |
下拉组件配置 |
| pullup-config |
Object |
见下面 |
上拉组件配置 |
| pulldown-status |
String |
无 |
双向绑定，当需要自定义下拉刷新行为时配置 |
| pullup-status |
String |
无 |
双向绑定，当需要自定义上拉行为时配置 |
Methods
reset方法，重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得ref进行reset, 并且需要在$nextTick中执行。
this.$nextTick(() => {
this.$refs.scroller.reset()
})
Events
scroller的uuid
| 名字 |
描述 |
实例 |
| pullup:loading |
上拉加载时触发的事件，需要在获取数据后使用$broadcast触发状态更新， |
this.$broadcast(‘pullup:reset’, uuid) |
| pulldown:loading |
下拉加载时触发的事件，需要在获取数据后使用$broadcast触发状态更新， |
this.$broadcast(‘pulldown:reset’, uuid) |
| pullup:disable |
禁用上拉加载，当没有更多数据需要禁用时使用$broadcast触发禁用， |
this.$broadcast(‘pullup:disable’, uuid) |
| pullup:enable |
启用上拉加载，禁用插件后，当又重新需要时使用$broadcast触发重新启用， |
this.$broadcast(‘pullup:enable’, uuid) |
Slots
默认slot根元素必须有且只有一个, 如
content
tab选项卡
举个栗子
可以取消切换动画
active-color=”#fc378c”可以设置切换的颜色
<template>
<tab>
<tab-item :selected="demo1 === '已发货'" @click="demo1 = '已发货'">已发货</tab-item>
<tab-item :selected="demo1 === '未发货'" @click="demo1 = '未发货'">未发货</tab-item>
<tab-item :selected="demo1 === '全部订单'" @click="demo1 = '全部订单'">全部订单</tab-item>
<tab-item :selected="demo1 === '1'" @click="demo1" = '6666'>6666</tab-item>
</tab>
</template>
<script>
//引入组件
import {Tab, TabItem} from 'vux/src/components'
//创造构造器
export default {
components: {
Tab, TabItem
},
data () {
return {
demo1: '1'
}
}
}
/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
},
}*/
</script>
<style>
.flex-demo {
text-align: center;
color: #fff;
background-color: #0077FF;
margin-bottom: 8px;
border-radius: 4px;
-webkit-background-clip: padding-box;
}
</style>
更简洁的粟子
<tab :line-width="2" active-color="#fc378c">
<tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"></tab-item>
</tab>
export default {
data () {
return {
demo2: '美食',
list2: ['精选', '美食', '电影', '酒店', '外卖']
}
}
}
Props
| 参数 |
说明 |
类型 |
默认值 |
| show |
是否显示 |
Popup，需要双向绑定 Boolean |
false |
| height |
弹出层高度 |
String auto |
如果希望弹出层铺满整个屏幕，则可设置height=100% |
Events
on-first-show 第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）
<template>
<div>
<group>
<switch title="WIFI" :value.sync="show"></switch>
<switch title="Full popup" :value.sync="show1"></switch>
</group>
<popup :show.sync="show">
<div class="popup0">
<group>
<switch title="Another Switcher" :value.sync="show"></switch>
</group>
</div>
</popup>
<popup :show.sync="show1" height="80%">
<div class="popup1">
<group>
<switch title="Another Switcher" :value.sync="show1"></switch>
</group>
</div>
</popup>
</div>
</template>
<script>
//引入组件
import {
Group,
Switch,
Popup,
} from 'vux/src/components'
//创造构造器
export default {
components:{
Group,Switch,Popup
},
data () {
return {
show: false,
show1: false
}
}
}
/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
},
}*/
</script>
<style>
.popup0 {
padding-bottom:15px;
height:200px;
}
.popup1 {
width:100%;
height:100%;
}
</style>
Sticky 自动固定在顶部
<template>
<!-- <br v-for="i in number">中的number是调节高度的 -->
<br v-for="i in 5">
<sticky>
<tab :line-width=1>
<tab-item selected>正在正映</tab-item>
<tab-item>即将上映</tab-item>
</tab>
</sticky>
<br v-for="i in 50">
</template>
<script>
//引入组件
import {
Sticky,
Tab,
TabItem
} from 'vux/src/components'
//创造构造器
export default {
components:{
Tab,Sticky,TabItem
},
data () {
return {
show: false,
show1: false
}
}
}
/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
},
}*/
</script>
顶部滚动广告
<template>
<div>
<scroller lock-x scrollbar-y use-pulldown @pulldown:loading="load" enable-horizontal-swiping>
<div class="box2">
<swiper :list="list" direction="horizontal" auto :min-moving-distance="20" height="180px"></swiper>
</div>
</scroller>
</div>
</template>
<script>
import { Scroller, Swiper } from 'vux/src/components'
export default {
components: {
Scroller,
Swiper
},
methods: {
load (uuid) {
const _this = this
setTimeout(function () {
_this.$broadcast('pulldown:reset', uuid)
}, 2000)
}
},
data () {
return {
list: [{
url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&mid=400385458&idx=1&sn=78f6b8d99715384bdcc7746596d88359&scene=19#wechat_redirect',
img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
title: '如何手制一份秋意的茶？'
}, {
url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&mid=400160890&idx=1&sn=29ef02af25793a11a3f6aec92bfb46c1&scene=19#wechat_redirect',
img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
title: '茶包VS原叶茶'
}, {
url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&mid=400094682&idx=1&sn=8231a2053b772b2108784fccc254d28c&scene=19#wechat_redirect',
img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
title: '播下茶籽，明春可发芽？'
}]
}
}
}
</script>
日期选择
<template>
<div>
<group title="default format: YYYY-MM-DD">
<datetime :value.sync="value1" @on-change="change" title="Birthday"></datetime>
</group>
<group title="YYYY-MM-DD HH:mm">
<datetime :value.sync="value2" format="YYYY-MM-DD HH:mm" @on-change="change" title="start time" inline-desc="select hour and minute"></datetime>
</group>
<group title="Placeholder">
<datetime :value.sync="value3" format="YYYY-MM-DD" placeholder="Please select" @on-change="change" title="start time"></datetime>
</group>
<group title="specified min-year and max-year">
<datetime :value.sync="value4" placeholder="Please select" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" title="years after 2000"></datetime>
</group>
<group title="specified template text in Chinese">
<datetime :value.sync="value5" placeholder="请选择日期" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" title="Chinese" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>
</group>
</div>
</template>
<script>
import { Datetime, Group } from 'vux/src/components'
export default {
components: {
Datetime,
Group
},
data () {
return {
value1: '2016-02-11',
value2: '',
value3: '',
value4: '',
value5: ''
}
},
methods: {
change (value) {
console.log('change', value)
}
}
}
</script>
表单
<template>
<div>
<group title="Default">
<x-input title="message" placeholder="I'm placeholder"></x-input>
</group>
<group title="不显示清除按钮">
<x-input title="message" placeholder="I'm placeholder" :show-clear="false" autocapitalize="characters"></x-input>
</group>
<group title="set is-type=china-name">
<x-input title="姓名" name="username" placeholder="请输入姓名" is-type="china-name"></x-input>
</group>
<group title="set keyboard=number and is-type=china-mobile">
<x-input title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
</group>
<group title="set is-type=email">
<x-input title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email"></x-input>
</group>
<group title="set min=2 and max=5">
<x-input title="2-5个字符" placeholder="" :min="2" :max="5"></x-input>
</group>
<group title="确认输入">
<x-input title="请输入6位数字" type="text" placeholder="" :value.sync="password" :min="6" :max="6" @on-change="change"></x-input>
<x-input title="请确认6位数字" type="text" placeholder="" :equal-with="password"></x-input>
</group>
<group title="验证码" class="weui_cells_form">
<x-input title="验证码" class="weui_vcode">
<img slot="right" src="http://weui.github.io/weui/images/vcode.jpg">
</x-input>
<x-input title="发送验证码" class="weui_vcode">
<x-button slot="right" type="primary">发送验证码</x-button>
</x-input>
</group>
<group title="check if value is valid when required===true">
<x-input title="message" placeholder="I'm placeholder" v-ref:input></x-input>
<cell title="get valid value" :value="'$valid value:' + $refs.input.valid"></cell>
</group>
<group title="check if value is valid when required===false">
<x-input title="message" placeholder="I'm placeholder" :required="false" v-ref:input02></x-input>
<cell title="get valid value" :value="'$valid value:' + $refs.input02.valid"></cell>
</group>
</div>
</template>
<script>
import { XInput, Group, XButton, Cell } from 'vux/src/components'
export default {
components: {
XInput,
XButton,
Group,
Cell
},
data () {
return {
password: '123465'
}
},
methods: {
change (val) {
console.log(val)
}
}
}
</script>
<style scoped>
.weui_cell_ft .weui_btn {
margin-left: 5px;
vertical-align: middle;
display: inline-block;
}
</style>
单个计数器
<template>
<div>
<group title="Default">
<x-number name="number" title="Number"></x-number>
</group>
<group title="listen to change events">
<x-number name="listen" title="Number" :value="0" :min="0" @on-change="change"></x-number>
</group>
<group title="set width=100">
<x-number title="Number" :width="100"></x-number>
</group>
<group title="set step=0.5">
<x-number title="Number" :step="0.5"></x-number>
</group>
<group title="set value=1, min=-5 and max=8">
<x-number title="Number" :min="-5" :max="8" :value="1"></x-number>
</group>
<group title="fillable = false">
<x-number :value="10" title="Number" :fillable="false"></x-number>
</group>
<group title="with other element">
<x-number title="Number" :min="-5" :max="8" :value="1" type="inline"></x-number>
<x-number title="Number" :min="-5" :max="8" :value="1" type="inline"></x-number>
<switch title="Other element" :value.sync="true"></switch>
</group>
</div>
</template>
<script>
import { Group, XNumber, Switch } from 'vux/src/components'
export default {
components: {
XNumber,
Group,
Switch
},
methods: {
change (val) {
console.log('change', val)
}
}
}
</script>
图文组合列表
<template>
<div>
<group title="switch the type">
<radio title="type" :value.sync="type" :options="['1', '2', '3']"></radio>
</group>
<panel header="图文组合列表" :footer="footer" :list="list" :type="type"></panel>
</div>
</template>
<script>
import { Panel, Group, Radio } from 'vux/src/components'
export default {
components: {
Panel,
Group,
Radio
},
data () {
return {
type: '1',
list: [{
src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
title: '标题一',
desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
url: '/component/cell'
}, {
src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
title: '标题二',
desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
url: {
path: '/component/radio',
replace: false
}
}],
footer: {
title: '查看更多',
url: 'http://vux.li'
}
}
}
}
</script>
