纷享销客开发者手册
目录

基础类库

# 基础类库

# Actionsheet

# Demo
<template>
  <div>
    <group>
      <switch title="Normal Usage" :value.sync="show1"></switch>
      <switch title="Show cancel menu" :value.sync="show2"></switch>
      <switch title="menu as tips" :value.sync="show3"></switch>
    </group>
    <actionsheet :show.sync="show1" :menus="menus1" @on-click-menu="click"></actionsheet>
    <actionsheet :show.sync="show2" :menus="menus2" @on-click-menu="click" show-cancel></actionsheet>
    <actionsheet :show.sync="show3" :menus="menus3" @on-click-menu="click" @on-click-menu-delete="onDelete" show-cancel></actionsheet>
    <toast :show.sync="showSuccess">Deleted</toast>
  </div>
</template>

<script>
import { Actionsheet, Group, Switch, Toast } from '../components';

export default {
  components: {
    Actionsheet,
    Group,
    Switch,
    Toast,
  },
  data () {
    return {
      show1: false,
      menus1: {
        menu1: 'Share to friends',
        menu2: 'Share to timeline',
      },
      show2: false,
      menus2: {
        menu1: 'Take Photo',
        menu2: 'Choose from photos',
      },
      show3: false,
      showSuccess: false,
      menus3: {
        'title.noop': `Are you sure?
                       <br/>
                       <span style="color:#666;font-size:12px;">
                          Once deleted, you will never find it.
                       </span>`,
        delete: '<span style="color:red">Delete</span>',
      },
    };
  },
  methods: {
    click(key) {
      console.log(key);
    },
    onDelete() {
      this.showSuccess = true;
    },
  },
};
</script>
# Props
参数 说明 类型 默认值
cancel-text 取消按钮文字 String cancel
menus 菜单列表, hash map, 格式见下 Object { }
show 显示绑定值, 双向绑定 Boolean false
show-cancel 是否显示取消按钮 Boolean false

menus 格式如下

{
  menu1: 'Take Photo',
  menu2: 'Choose from photos'
}
# Events
自定义事件名 参数 描述
on-menu-click (menuKey, menuValue) 点击菜单时触发
on-cancel - - 点击取消时触发

# Badge

# Demo
<template>
  <div>
    <badge text="Hi"></badge>
    <br/>
    <group>
      <cell title="Used in a Cell" is-link>
        <div class="badge-value" slot="value" class="uik-center-v">
          New Message &nbsp;
          <badge text="8"></badge>
        </div>
      </cell>
      <cell title="Used in a Cell" is-link>
        <div class="badge-value" slot="value" class="uik-center-v">
          New Message &nbsp;
          <badge text="888"></badge>
        </div>
      </cell>
    </group>
  </div>
</template>

<script>
import { Badge, Group, Cell } from '../components';

export default {
  components: {
    Badge,
    Group,
    Cell,
  },
};
</script>

<style lang="less">
.badge-value {
  display: inline-block;
}
</style>
# Props
参数 说明 类型 默认值
text 描述文字 String 无

# Button-Tab

ButtonTab 与 ButtonTabItem 组件配合使用

# Demo
<template>
  <div class="button-tab-container">
    <button-tab>
      <button-tab-item>Today</button-tab-item>
      <button-tab-item selected>This Week</button-tab-item>
      <button-tab-item>This Month</button-tab-item>
    </button-tab>
    <br>
    <button-tab>
      <button-tab-item selected>文章订阅</button-tab-item>
      <button-tab-item>商品订阅</button-tab-item>
    </button-tab>
    <br>
    <divider>Red Dot</divider>
    <button-tab>
      <button-tab-item selected>All Message</button-tab-item>
      <button-tab-item><span class="uik-reddot-s">New Message</span></button-tab-item>
    </button-tab>
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, Divider } from '../components';

export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    Divider,
  },
};
</script>

<style lang="less" scoped>
  .button-tab-container {
    margin-top: 30px;
  }
</style>
# Props

button-tab

参数 说明 类型 默认值
height tab高度 Number 无

button-tab-item

参数 说明 类型 默认值
selected 是否选中 Boolean false
# Slots
名字 说明
默认slot 选项卡区域
# Events
自定义事件名 参数 描述
on-item-click - - 点击button-tab-item时触发

# Card

# Demo
<template>
  <div>
    <divider>simple card with header and content</divider>
    <card :header="{title:'我的钱包'}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="uik-1px-l uik-1px-r">
          <span>1130</span>
          <br/>
          京豆
        </div>
        <div class="uik-1px-r">
          <span>15</span>
          <br/>
          京东券
        </div>
        <div class="uik-1px-r">
          <span>0</span>
          <br/>
          京东卡/E卡
        </div>
        <div>
          <span>88</span>
          <br/>
          七天待还
        </div>
      </div>
    </card>

    <br>
    <divider>with footer</divider>
    <card :header="{title:'商品详情'}" :footer="{title:'查看更多',link:'/component/panel'}">
      <p slot="content" class="card-padding">custom content</p>
    </card>

    <br>
    <divider>use header slot and content slot</divider>
    <card>
      <img slot="header" src="http://placeholder.qiniudn.com/640x300" style="width:100%;display:block;">
      <div slot="content" class="card-padding">
        <p style="color:#999;font-size:12px;">Posted on January 21, 2015</p>
        <p style="font-size:14px;line-height:1.2;">
          Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit..
        </p>
      </div>
    </card>
  </div>
</template>

<script>
import { Card, Divider } from '../components';

export default {
  components: {
    Card,
    Divider,
  },
};
</script>

<style lang="less" scoped>
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
</style>
# Props
参数 说明 类型 默认值
header hash map, 格式见下 Object 无
footer hash map, 格式见下 Object 无

header 格式如下

{
  title: 'Naruto',
}

footer 格式如下

{
  title: 'Boruto',
  link: 'some/path',
}
# Slots
名字 说明
header 卡片头部区域
content 卡片主题内容区域
footer 卡片底部区域

# Flexbox

Flexbox 功能由 Flexbox 及 FlexboxItem 子组件组成, 需配合使用

# Demo
<template>
  <div>
    <divider>Horizontal</divider>
    <flexbox>
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
    </flexbox>
    <br/>
    <flexbox>
      <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>
    <br/>
    <divider>Honrizontal with no gutter</divider>
    <flexbox :gutter="0">
      <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-item><div class="flex-demo">4</div></flexbox-item>
    </flexbox>
    <br>
    <divider>Vertical</divider>
    <flexbox orient="vertical">
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
    </flexbox>
    <br>
    <divider>Vertical with no gutter</divider>
    <flexbox orient="vertical" :gutter="0">
      <flexbox-item><div class="flex-demo">1</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2</div></flexbox-item>
    </flexbox>
    <br>
    <divider>Grid support(12 columns)</divider>
    <flexbox>
      <flexbox-item :span="4"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item><div class="flex-demo">2/3</div></flexbox-item>
    </flexbox>
    <br>
    <divider>flexiable grid</divider>
    <flexbox>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/6"><div class="flex-demo">1/6</div></flexbox-item>
      <flexbox-item :span="1/8"><div class="flex-demo">1/8</div></flexbox-item>
      <flexbox-item :span="1/8"><div class="flex-demo">1/8</div></flexbox-item>
      <flexbox-item><div class="flex-demo">rest</div></flexbox-item>
    </flexbox>
    <br>
    <divider>flex-wrap</divider>
    <flexbox :gutter="0" class="flexbox-demo-wrap">
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
      <flexbox-item :span="1/3"><div class="flex-demo">1/3</div></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
import { Flexbox, FlexboxItem, Divider } from '../components';

export default {
  components: {
    Flexbox,
    FlexboxItem,
    Divider,
  },
};
</script>

<style lang="less">
.flex-demo {
  text-align: center;
  color: #fff;
  background-color: #ffac38;
  border-radius: 4px;
  background-clip: padding-box;
}
.flexbox-demo-wrap {
  flex-wrap: wrap;
}
</style>
# Props

flexbox

参数 说明 类型 默认值
gutter FlexboxItem 之间的间距, 单位px Number 8
orient Flexbox 容器的布局方向(vertical or horizontal) String horizontal

flexbox-item

参数 说明 类型 默认值
span flexbox grid, 栅格布局中每列的比例 Number or String 无
# Slots
名字 说明
默认slot HTML内容区域

# Panel

# Demo
<template>
  <div>
    <group title="switch the type">
      <radio title="type" :value.sync="type" :options="['withIcon', 'rawText', 'cellList']"></radio>
    </group>
    <panel header="图文组合列表" :footer="footer" :list="list" :type="type"></panel>
  </div>
</template>

<script>
import { Panel, Group, Radio } from '../components';

export default {
  components: {
    Panel,
    Group,
    Radio,
  },
  data () {
    return {
      type: 'withIcon',
      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: '/',
      },
    };
  },
};
</script>
# Props
参数 说明 类型 默认值
footer panel 底部结构, hash map, 格式见下 Object 无
header 标题描述文本, Array, 格式见下 String 无
list panel 内容列表 Array 无
type panel 类型, 共三种 withIcon, rawText, cellList String withIcon

footer 格式如下

{
    title: '查看更多',
    url: 'path/to/some/where',
}

header 格式如下

[{
    src: 'path/to/some/image',
    title: '标题一',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: '/component/cell',
}, {
    src: 'path/to/some/image',
    title: '标题二',
    desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
    url: {
        path: '/component/radio',
        replace: false,
    },
}]
# Events
自定义事件名 参数 描述
on-click-header - - 点击标题时触发
on-click-footer - - 点击页脚时触发
on-click-item (item) 点击 panel 中每项内容区域时触发

# Picker

# Demo
<template>
  <div>
    <group-title>默认，不设置默认值时选中第一个</group-title>
    <picker :data='years' :value.sync='currentValue' @on-change='change'></picker>
    <br>
    <group-title>异步加载及动态改变数据</group-title>
    <picker :data='yearsAsync' :value.sync='yearAsyncCurrentValue' @on-change='change'></picker>
    <br>
    <x-button type="primary" @click="changeValue([[1,3,5,7,9,11],[2,3,4,5],['a','b','c']])">Set Data1</x-button>
    <x-button type="primary" @click="changeValue([[1,3,5,7,9,11],[2,3,4,5]])">Set Data1</x-button>
    <x-button type="primary" @click="changeValue([[2,4,6,8,10,11]])">Set Data2</x-button>
    <br>
    <group-title>设置默认值时</group-title>
    <picker :data='years' :value.sync='setDefaultYear' @on-change='change'></picker>
    <br>
    <group-title>五列</group-title>
    <picker :data='fiveColumn' :value.sync='fiveColumnCurrentValue' @on-change='change'></picker>
    <br>
    <group-title>地区联动: 当前值{{correlationCurrentValue}}</group-title>
    <picker :data='correlation' :columns=3 :value.sync='correlationCurrentValue' @on-change='change'></picker>
    <x-button @click="setData1" type="primary">set Value to ["USA", "usa002", "0005"]</x-button>
    <x-button @click="setData2" type="primary">set Value to ["china", "china002", "gz"]</x-button>
    <x-button @click="setList" type="primary">set List</x-button>
  </div>
</template>

<script>
import { Picker, GroupTitle, XButton } from '../components';

const yearsMockData = [];
for (let i = 2000; i <= 2030; i++) {
  yearsMockData.push({
    name: `${i}年`,
    value: `${i}`,
  });
}

export default {
  components: {
    Picker,
    GroupTitle,
    XButton,
  },
  data () {
    return {
      years: [yearsMockData],
      yearsAsync: [],
      yearAsyncCurrentValue: [''],
      currentValue: [''],
      setDefaultYear: ['2002'],
      fiveColumn: [
        ['你', '我', '他'],
        ['you', 'I', 'him'],
        ['ni', 'wo', 'ta'],
        [1, 2, 3, 4, 5],
        [5, 4, 3, 2, 1],
      ],
      fiveColumnCurrentValue: ['我', 'him', 'ni', '1', '2'],
      correlation: [{
        name: '中国',
        value: 'china',
        parent: 0,
      }, {
        name: '美国',
        value: 'USA',
        parent: 0,
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china',
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china',
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA',
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA',
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001',
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001',
      }, {
        name: '广西001',
        value: 'gz',
        parent: 'china002',
      }, {
        name: '广西002',
        value: 'sz',
        parent: 'china002',
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001',
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001',
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002',
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002',
      }],
      correlationCurrentValue: [],
    };
  },
  methods: {
    change(value) {
      console.log('new Value', value);
    },
    changeValue (value) {
      this.yearsAsync = value;
    },
    setData1() {
      this.correlationCurrentValue = ['USA', 'usa002', '0005'];
    },
    setData2() {
      this.correlationCurrentValue = ['china', 'china002', 'gz'];
    },
    setList() {
      this.correlation.push({
        name: '美国002_003',
        value: '0007',
        parent: 'usa002',
      });
    },
  },
};
</script>
# Props
参数 说明 类型 默认值
columns 设置滚动列数，注意仅在需要多级联动时设置，默认不联动 Number 0
data 数据源，可以是多维数组或对象数组，格式如下 Array 无
item-class Picker中每列所包含的每个选项的CSS类选择器名字 String scroller-item
value Picker当前值，双向绑定 Array 无

data 格式如下

多维数组的情况, 此时每一个数组成员代表一列的数据


[   ['你', '我', '他'],   ['you', 'I', 'him'],   ['ni', 'wo', 'ta'],   [1, 2, 3, 4, 5],   [5, 4, 3, 2, 1], ]

对象数组的情况, 此时用于多级联动时的情况，Picker的列数由数据源包含的各级依赖关系决定， 注意此组件采用扁平化数据结构，使用时请将原始数据源（如：树形数据结构）转换为扁平化结构，形式如下


[{
    name: '中国',
    value: 'china',
    parent: 0,
},{
    name: '云南',
    value: 'china001',
    parent: 'china',
},  {
    name: '昆明',
    value: 'kunming',
    parent: 'china001',
}, {
    name: '大理',
    value: 'dali',
    parent: 'china001',
}, {
    name: '广东',
    value: 'china002',
    parent: 'china',
}, {
    name: '广州',
    value: 'gz',
    parent: 'china002',
}, {
    name: '深圳',
    value: 'sz',
    parent: 'china002',
}]
# Events
自定义事件名 参数 描述
on-change value 值变化时触发
# Demo
<template>
  <div>
    <group>
      <switch title="Default popup" :value.sync="show"></switch>
      <switch title="Full popup" :value.sync="showFull"></switch>
      <switch title="Multi popup (first)" :value.sync="showMulti"></switch>
    </group>
    <popup :show.sync="show">
      <div class="popup0">
        <group>
          <switch title="Another Switcher" :value.sync="show"></switch>
          <switch title="Show Toast" :value.sync="showToast"></switch>
        </group>
      </div>
    </popup>

    <toast :show.sync="showToast">You did it!</toast>

    <popup :show.sync="showFull" height="100%">
      <div class="popup1">
        <group>
          <switch title="Another Switcher" :value.sync="showFull"></switch>
        </group>
      </div>
    </popup>

    <popup :show.sync="showMulti">
      <div class="popup2">
        <group>
          <switch title="Multi Popup (first)" :value.sync="showMulti"></switch>
          <switch title="Multi Popup (second)" :value.sync="showSecond"></switch>
        </group>
        this is the first popup
      </div>
    </popup>

    <popup :show.sync="showSecond">
      <div class="popup2">
        <group>
          <switch title="Multi Popup (second)" :value.sync="showSecond"></switch>
        </group>
        this is the second popup
      </div>
    </popup>
  </div>
</template>

<script>
import { Popup, Group, Switch, Toast } from '../components';

export default {
  components: {
    Popup,
    Group,
    Scroller,
    Toast,
  },
  data () {
     return {
      show: false,
      showFull: false,
      showMulti: false,
      showSecond: false,
      showToast: false,
    };
  },
};
</script>

<style>
.popup0 {
  padding-bottom:15px;
  height:200px;
}
.popup1 {
  width:100%;
  height:100%;
}
.popup2 {
  padding-bottom:15px;
  height:400px;
}
</style>
# Props
参数 说明 类型 默认值
height 弹出层高度 String auto
show 是否显示Popup，双向绑定 Boolean false

如果希望弹出层铺满整个屏幕，则可设置 height=100%

# Slots
名字 说明
默认slot 弹出层内容区域，可随意嵌入任意DOM元素或组件
# Events
自定义事件名 参数 描述
on-first-show - - 第一次出现时触发，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）
on-hide - - 隐藏时触发

PopupPicker 依赖于 Picker 组件

# Demo
<template>
  <div>
    <group title="single column">
      <popup-picker :title="title1" :data="list1" :value.sync="value1"></popup-picker>
    </group>
    <br>
    <div class="picker-buttons">
      <x-button type="primary" @click="changeList10">重新赋值列表</x-button>
      <x-button type="primary" @click="changeList11">push方式更改列表</x-button>
    </div>
    <group title="double columns">
      <popup-picker :title="title2" :data="list2" :value.sync="value2"></popup-picker>
    </group>
    <br>

    <group title="chained columns">
      <popup-picker :title="title3" :data="list3" :columns="3" :value.sync="value3"></popup-picker>
      <popup-picker :title="title4" :data="list3" :columns="3" :value.sync="value4" show-name></popup-picker>
    </group>

    <br>
    <div class="picker-buttons">
      <x-button type="primary" @click="changeList21">push方式更改列表</x-button>
    </div>

  </div>
</template>

<script>
import { PopupPicker, Group, Picker, XButton } from '../components';

export default {
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
  },
  methods: {
    changeList10 () {
      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']];
    },
    changeList11 () {
      this.list1[0].push('我是push条目');
    },
    changeList20 () {},
    changeList21 () {
      this.list3.push({
        name: '美国002_007',
        value: '0007',
        parent: 'usa002',
      });
    },
  },
  data () {
    return {
      title1: '手机机型',
      title2: '详细机型',
      title3: '联动显示值',
      title4: '联动显示文字',
      list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
      list2: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'],
        ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']],
      list3: [{
        name: '中国',
        value: 'china',
        parent: 0,
      }, {
        name: '美国',
        value: 'USA',
        parent: 0,
      }, {
        name: '广东',
        value: 'china001',
        parent: 'china',
      }, {
        name: '广西',
        value: 'china002',
        parent: 'china',
      }, {
        name: '美国001',
        value: 'usa001',
        parent: 'USA',
      }, {
        name: '美国002',
        value: 'usa002',
        parent: 'USA',
      }, {
        name: '广州',
        value: 'gz',
        parent: 'china001',
      }, {
        name: '深圳',
        value: 'sz',
        parent: 'china001',
      }, {
        name: '广西001',
        value: 'gx001',
        parent: 'china002',
      }, {
        name: '广西002',
        value: 'gx002',
        parent: 'china002',
      }, {
        name: '美国001_001',
        value: '0003',
        parent: 'usa001',
      }, {
        name: '美国001_002',
        value: '0004',
        parent: 'usa001',
      }, {
        name: '美国002_001',
        value: '0005',
        parent: 'usa002',
      }, {
        name: '美国002_002',
        value: '0006',
        parent: 'usa002',
      }],
      value1: ['iPhone'],
      value2: ['iPhone', '华为3'],
      value3: [],
      value4: [],
    };
  },
};
</script>

<style scoped>
.picker-buttons {
  margin: 0 15px;
}
</style>
# Props
参数 说明 类型 默认值
columns 设置滚动列数，注意仅在需要多级联动时设置，默认不联动 Number 0
data 数据源，可以是多维数组或对象数组，格式如下 Array [ ]
inline-desc 可选，cell的子标题 String 无
placeholder 可选，自定义展示内容，支持HTML String 无
show-name 可选，是否显示 value 对应的中文文本 Boolean false
title cell的主标题 String 无
value Picker当前值，双向绑定 Array [ ]

data 格式如下

多维数组的情况, 此时每一个数组成员代表一列的数据


[   ['你', '我', '他'],   ['you', 'I', 'him'],   ['ni', 'wo', 'ta'],   [1, 2, 3, 4, 5],   [5, 4, 3, 2, 1], ]

对象数组的情况, 此时用于多级联动时的情况，Picker的列数由数据源包含的各级依赖关系决定， 注意此组件采用扁平化数据结构，使用时请将原始数据源（如：树形数据结构）转换为扁平化结构，形式如下


[{
    name: '中国',
    value: 'china',
    parent: 0,
},{
    name: '云南',
    value: 'china001',
    parent: 'china',
},  {
    name: '昆明',
    value: 'kunming',
    parent: 'china001',
}, {
    name: '大理',
    value: 'dali',
    parent: 'china001',
}, {
    name: '广东',
    value: 'china002',
    parent: 'china',
}, {
    name: '广州',
    value: 'gz',
    parent: 'china002',
}, {
    name: '深圳',
    value: 'sz',
    parent: 'china002',
}]

# Progress

Progress 组件默认利用 MProgress (opens new window) 对进度条加以控制，具体API详见MProgress文档。注意，若想在父组件中调用MProgressAPI对进度条的生命周期加以控制，建议采用parent.$refs.progressInstance.progress方式引用

# Demo
<template>
  <div>
    <progress></progress>
    <br/>
    <progress :percent.sync="percent1"></progress>
    <br/>
    <progress :template="2"></progress>
    <br/>
    <progress :template="3"></progress>
    <br/>
    <progress :template="4"></progress>
  </div>
</template>

<script>
import { Progress } from '../components';

export default {
  components: {
    Progress,
  },
  data () {
    return {
      percent1: 50,
    };
  },
};
</script>
# Props
参数 说明 类型 默认值
percent 进度条进度标识，双向绑定，采用百分比，注意，该属性用于自定义进度条控制器的场景，默认采用 MProgress Number 0
template 进度条类型，共5中类型，其中4中默认类型，一种自定制类型，详见下文 Number 0

template 类型如下

类型 对应属性值（template） 描述
custom 0 自动嵌于Progress组件内部
Determinate 1 自动 append to body，即位于页面顶部位置
Buffer 2 自动嵌于Progress组件内部
Indeterminate 3 自动嵌于Progress组件内部
Query Indeterminate and Determinate 4 自动嵌于Progress组件内部
# Demo
<template>
  <div>
    <search @result-click="resultClick" @on-change="getResult" :results="results" :value.sync="value" :cancel-text="cancelText"></search>
  </div>
</template>

<script>
import { Search } from '../components';

function getResult (val) {
  let rs = [];
  for (let i = 0; i < 40; i++) {
    rs.push({
      title: `${val} result: ${i + 1} `,
      other: i,
    });
  }
  return rs;
}

export default {
  components: {
    Search,
  },
  methods: {
    resultClick (item) {
      alert('you click the result item: ' + JSON.stringify(item));
    },
    getResult (val) {
      this.results = getResult(this.value);
    },
  },
  data () {
    return {
      results: [],
      value: '',
      cancelText: '取消',
    };
  },
};
</script>
# Props
参数 说明 类型 默认值
auto-fixed 是否激活搜索输入框 Boolean true
cancel-text 取消按钮文本 String cancel
placeholder 提示文字 String Search
results 搜索结果列表，对象数组 Array [ ]
value 实时输入的搜索关键字，双向绑定 String ''
# Events
自定义事件名 参数 描述
on-change value 搜索关键字变化时触发
on-submit value 调用后台异步接口提交时出发
result-click (item) 点击某一具体搜索结果项时触发

# Spinner

# Demo
<template>
  <div>
    <group>
      <cell v-for="type in types" :title="type">
        <spinner :type="type" slot="value"></spinner>
      </cell>
    </group>
  </div>
</template>

<script>
import { Spinner, Group, Cell } from '../components';

export default {
  components: {
    Spinner,
    Cell,
    Group,
  },
  data () {
    return {
      types: ['android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral'],
    };
  },
};
</script>
# Props
参数 说明 类型 默认值
type 类型，可选值有 'android'，'ios'，'ios-small'，'bubbles'，'circles'，'crescent'，'dots'，'lines'，'ripple'，'spiral' String ios

# Swiper

Swiper 提供了list快捷设置和 SwiperItem 子组件方便定义。利用 wechatui (opens new window)

# Demo
<template>
  <div>
    <group-title>list模式下，默认高度为180px, 如果设置aspect-ratio会根据宽度自动计算高度</group-title>
    <swiper :list="demo01_list" :index="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
    <p>current index: {{demo01_index}}</p>
    <x-button @click="demo01_index = 0">go to 0</x-button>
    <x-button @click="demo01_index = 1">go to 1</x-button>
    <x-button @click="demo01_index = 2">go to 2</x-button>

    <br/>
    <br/>
    <divider>华丽的分割线</divider>


    <group-title>设置aspect-ratio, 将自动根据宽度计算高度</group-title>
    <swiper :list="demo02_list" style="width:85%;margin:0 auto;" :aspect-ratio="300/800" dots-position="center"></swiper>

    <br/>
    <br/>
    <divider>华丽的分割线</divider>

    <group-title>自动轮播</group-title>
    <swiper :list="demo03_list" auto style="width:80%;margin:0 auto;" height="180px" dots-class="custom-bottom" dots-position="center"></swiper>
    <br/>
    <br/>
    <divider>华丽的分割线</divider>

    <group-title>use swiper-item for image list</group-title>
    <swiper :aspect-ratio="300/800">
      <swiper-item class="swiper-demo-img" v-for="item in demo04_list"><img :src="item"></swiper-item>
    </swiper>

    <br/>
    <br/>
    <divider>华丽的分割线</divider>

    <group-title>Async setting list data</group-title>
    <swiper :list="demo05_list" auto height="180px" @on-index-change="demo05_onIndexChange"></swiper>
    <p> current index: {{demo05_index}}</p>
    <x-button @click="demo05_onLoad(1)" type="primary" style="margin: 10px 0;">Load list1</x-button>
    <x-button @click="demo05_onLoad(2)" type="primary" style="margin: 10px 0;">Load list2</x-button>

    <br/>
    <br/>
    <divider>华丽的分割线</divider>

    <group-title>引入swiper-item自定义item内容，用height定义高度</group-title>
    <swiper auto height="100px">
      <swiper-item class="black"><h2 class="title fadeInUp animated">它无孔不入</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">你无处可藏</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">不是它可恶</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">而是它不懂你</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">我们试图</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">做些改变</h2></swiper-item>
    </swiper>

    <br/>
    <br/>
    <divider>华丽的分割线</divider>

    <group-title>垂直方向文字滚动</group-title>
    <swiper auto height="30px" direction="vertical" :interval="2000" class="text-scroll" :show-dots="false">
      <swiper-item><p>义务爱了 完成传奇世界H5-王者归来任务 获得20金币</p></swiper-item>
      <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>
      <swiper-item><p>零哥章魚 完成传奇世界H5-王者归来任务 获得30金币</p></swiper-item>
      <swiper-item><p>做迎而為 兑换【饿了么】畅享美食红包 消耗20金币</p></swiper-item>
      <swiper-item><p>只知道不知道 兑换【饿了么】畅享美食红包 消耗20金币</p></swiper-item>
      <swiper-item><p>基本世神 兑换《传奇世界H5》畅玩级礼包 消耗30金币</p></swiper-item>
    </swiper>

    <br/>
    <br/>
    <divider>华丽的分割线</divider>

    <group-title>循环模式</group-title>
    <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
    <p>current index: {{demo06_index}}</p>
  </div>
</template>

<script>
import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from '../components';

const baseList = [{
    url: '',
    img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
    title: '如何手制一份秋意的茶？',
}, {
    url: '',
    img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
    title: '茶包VS原叶茶',
}, {
    url: '',
    img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
    title: '播下茶籽，明春可发芽？',
}];
const imgList = [
  'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
  'http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff',
  'http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff',
];
const demoList = imgList.map((one) => ({
  url: '',
  img: one,
}));
export default {
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
  },
  ready () {
  },
  methods: {
    demo01_onIndexChange (index) {
      this.demo01_index = index;
    },
    demo05_onIndexChange (index) {
      this.demo05_index = index;
    },
    demo05_onLoad (id) {
      this.demo05_list = id === 1 ? baseList : demoList;
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index;
    },
  },
  data () {
    return {
      demo01_list: baseList,
      demo02_list: demoList,
      demo03_list: demoList,
      demo04_list: imgList,
      demo05_list: [],
      demo06_list: baseList,
      demo01_index: 0,
      demo05_index: 0,
      demo06_index: 0,
    };
  },
};
</script>

<style scoped>
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.uik-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
</style>
# Props
参数 说明 类型 默认值
threshold 滑动距离阀值，当按住屏幕滑动超过此距离，松开手时，自动滑，否则不滑动 Number 50
duration 滑屏动画时间，单位ms，数值越小，滑动越快 Number 300
list 列表数据 Array 无
dots-position indicator位置 String right
dots-class indicator的附加样式类 String 无
auto 是否自动播放 Boolean false
interval 轮播时间间隔，单位ms Number 3000
direction 播放方向 String horizontal
height 容器高度 String auto
aspect-ratio 纵横比，设置则自动根据宽度计算高度 Number 无
index 指定显示item的 Number 0
loop 是否循环播放 Boolean 无
min-moving-distance 最小滑动距离 Number 0
show-desc-mask 是否显示描述遮罩 Boolean true
show-dots 是否显示indicator Boolean true
# Slots
名字 说明
默认slot 轮播区域

# Tab

Tab 与 TabItem 组件配合使用

# Demo
<template>
  <div>
    <div>
    <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>
    <br/>
    <br/>
    <br/>
    <divider>different active class</divider>
    <tab :animate="false">
      <tab-item active-class="active-6-1" :selected="demo6 === '已发货'" @click="demo6 = '已发货'">已发货</tab-item>
      <tab-item active-class="active-6-2" :selected="demo6 === '未发货'" @click="demo6 = '未发货'">未发货</tab-item>
      <tab-item active-class="active-6-3" :selected="demo6 === '全部订单'" @click="demo6 = '全部订单'">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <divider>no animation</divider>
    <tab :animate="false">
      <tab-item :selected="demo5 === '已发货'" @click="demo5 = '已发货'">已发货</tab-item>
      <tab-item :selected="demo5 === '未发货'" @click="demo5 = '未发货'">未发货</tab-item>
      <tab-item :selected="demo5 === '全部订单'" @click="demo5 = '全部订单'">全部订单</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <tab :line-width="2" active-color='#fc378c'>
      <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item">{{item}}</tab-item>
    </tab>
    <br/>
    <x-button @click="addTab" :disabled="list2.length === 5" type="primary">Add tab item</x-button>
    <x-button @click="removeTab" :disabled="list2.length <= 2" type="primary">Remove tab item</x-button>
    <br/>
    <br/>
    <tab :line-width="2">
      <tab-item :selected="demo3 === item" v-for="(index, item) in list3" :class="{'uik-1px-r': index===0}" @click="demo3 = item">{{item}}</tab-item>
    </tab>
    <br/>
    <br/>
    <br/>
    <sticky>
      <tab :line-width="1">
        <tab-item :selected="demo4 === item" v-for="item in list4" @click="demo4 = item">{{item}}</tab-item>
      </tab>
    </sticky>
</template>

<script>
import { Tab, TabItem, Sticky, Divider, XButton } from '../components';

const list = () => ['精选', '美食', '电影', '酒店', '外卖'];

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
  },
  data () {
    return {
      demo1: '未发货',
      list2: list(),
      demo5: '未发货',
      demo2: '美食',
      list3: ['收到的消息', '发出的消息'],
      demo3: '收到的消息',
      list4: ['正在正映', '即将上映'],
      demo4: '即将上映',
      demo6: '未发货',
    };
  },
  methods: {
    addTab () {
      if (this.list2.length < 5) {
        this.list2 = list().slice(0, this.list2.length + 1);
      }
    },
    removeTab () {
      if (this.list2.length > 1) {
        this.list2 = list().slice(0, this.list2.length - 1);
      }
    },
  },
};
</script>

<style>
  .active-6-1 {
    color: rgb(252, 55, 140) !important;
    border-color: rgb(252, 55, 140) !important;
  }
  .active-6-2 {
    color: #04be02 !important;
    border-color: #04be02 !important;
  }
  .active-6-3 {
    color: rgb(55, 174, 252) !important;
    border-color: rgb(55, 174, 252) !important;
  }
</style>
# Props

tab| 参数 | 说明 | 类型 | 默认值 | |---------------|-----------------------------|---------|---------| | default-color | 可选，默认文字的颜色 | String | #999 | | active-color | 可选，高亮文字的颜色和线条颜色 | String | #ffac38 | | animate | 可选，是否使用动画 | Boolean | true | | line-width | 可选，边框大小 | Number | 3 |

tab-item| 参数 | 说明 | 类型 | 默认值 | |----------|---------|---------|--------| | selected | 是否高亮 | Boolean | false |

# Slots
名字 说明
默认slot 选项卡区域
# Events
自定义事件名 参数 描述
on-item-click - - 点击tab-item时触发

# XHeader

目前 Xheader 并不处理定位，请手动用class或者style设置。

# Demo
<template>
  <div>
    <x-header>This is the page title.</x-header>
    <br>
    <x-header :left-options="{showBack: false}">do not show Back</x-header>
    <br>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">with more menu</x-header>
    <br>
    <x-header>with right link<a slot="right">Feedback</a></x-header>
    <br>
    <x-header>long long long long long long long text<a slot="right">Feedback</a></x-header>
    <br>
    <x-header>with left slot<a slot="left">Close</a></x-header>
    <br>
    <x-header style="background-color:#000;">custom background color</x-header>
    <actionsheet :menus="menus" :show.sync="showMenus" show-cancel></actionsheet>
  </div>
</template>

<script>
import XHeader from '../components/x-header';
import { Actionsheet } from '../components';

export default {
  components: {
    XHeader,
    Actionsheet,
  },
  data () {
    return {
      menus: {
        menu1: 'Take Photo',
        menu2: 'Choose from photos',
      },
      showMenus: false,
    };
  },
};
</script>
# Props
参数 说明 类型 默认值
leftOptions.showBack 是否显示返回箭头 Boolean true
leftOptions.backText 返回文字，可以为空 String Back
leftOptions.preventGoBack 是否阻止点击Back时的后退，默认会调用history.back() Boolean false
rightOptions.showMore 是否显示更多图标 Boolean false
# Events
自定义事件名 参数 描述
on-click-back - - 点击后退按钮或者文字时触发, 并且只有 leftOptions.preventGoBack 设为 true 时才触发
on-click-more - - 点击更多图标时触发
# Slots
名字 说明
默认slot 标题文字
left 位于Back之后的内容
right 位于 rightOptions.showMore 之后的内容
通用
表单

← 表单 →