Vux使用經驗

Vux使用心得

參考連接

佈局

簡單平分：水平佈局和垂直佈局

<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; " 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>

Scroller

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: ['精選', '美食', '電影', '酒店', '外賣'] } } }

Popup彈出層

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==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect', img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg', title: '如何手製一份秋意的茶？' }, { url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect', img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg', title: '茶包VS原葉茶' }, { url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=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>