1. 技术文章
  2. Vux使用经验

Vux使用经验

由 断了今生、忘了曾经 提交于 2020-02-27 04:19:16

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>
标签
placeholder
flexbox
input
margin
change
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!