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>