Basic Components

About 5201 wordsAbout 17 min

2026-01-19

Basic Components

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

Parameter	Description	Type	Default
cancel-text	Cancel button text	String	cancel
menus	Menu list, hash map, format see below	Object
show	Show binding value, two-way binding	Boolean	false
show-cancel	Whether to show cancel button	Boolean	false

menus Format:

{
  menu1: 'Take Photo',
  menu2: 'Choose from photos'
}

Events

Event Name	Parameter	Description
on-menu-click	(menuKey, menuValue)	Triggered when menu is clicked
on-cancel	- -	Triggered when cancel is clicked

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

Parameter	Description	Type	Default
text	Description text	String	none

Button-Tab

ButtonTab works together with ButtonTabItem component

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>Article Subscription</button-tab-item>
      <button-tab-item>Product Subscription</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

Parameter	Description	Type	Default
height	tabHeight	Number	none

button-tab-item

Parameter	Description	Type	Default
selected	Whether checked	Boolean	false

Slots

Name	Description
defaultslot	Tab area

Events

Event Name	Parameter	Description
on-item-click	- -	Triggered when button-tab-item is clicked

Card

Demo

<template>
  <div>
    <divider>simple card with header and content</divider>
    <card :header="{title:'My Wallet'}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="uik-1px-l uik-1px-r">
          <span>1130</span>
          <br/>
          JD Beans
        </div>
        <div class="uik-1px-r">
          <span>15</span>
          <br/>
          JD Coupons
        </div>
        <div class="uik-1px-r">
          <span>0</span>
          <br/>
          JD Card/E-Card
        </div>
        <div>
          <span>88</span>
          <br/>
          Due in 7 Days
        </div>
      </div>
    </card>

    <br>
    <divider>with footer</divider>
    <card :header="{title:'Product Details'}" :footer="{title:'View More',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

Parameter	Description	Type	Default
header	hash map, format see below	Object	none
footer	hash map, format see below	Object	none

header Format:

{
  title: 'Naruto',
}

footer Format:

{
  title: 'Boruto',
  link: 'some/path',
}

Slots

Name	Description
header	Card header area
content	Card content area
footer	Card footer area

Flexbox

Flexbox Function consists of Flexbox and FlexboxItem Child componentcomponents, must be used together

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

Parameter	Description	Type	Default
gutter	`FlexboxItem` spacing between items, unit: px	Number	8
orient	`Flexbox` container layout direction(vertical or horizontal)	String	horizontal

flexbox-item

Parameter	Description	Type	Default
span	flexbox grid, grid layout column ratio	Number or String	none

Slots

Name	Description
defaultslot	HTML content area

Panel

Demo

<template>
  <div>
    <group title="switch the type">
      <radio title="type" :value.sync="type" :options="['withIcon', 'rawText', 'cellList']"></radio>
    </group>
    <panel header="Image-Text List" :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: 'Title一',
        desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
        url: '/component/cell',
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'Title二',
        desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
        url: {
          path: '/component/radio',
          replace: false,
        },
      }],
      footer: {
        title: 'View More',
        url: '/',
      },
    };
  },
};
</script>

Props

Parameter	Description	Type	Default
footer	`panel` footer structure, hash map, format see below	Object	none
header	Title description text, Array, format see below	String	none
list	`panel` Content list	Array	none
type	`panel` type, three options `withIcon`, `rawText`, `cellList`	String	withIcon

footer Format:

{
    title: 'View More',
    url: 'path/to/some/where',
}

header Format:

[{
    src: 'path/to/some/image',
    title: 'Title一',
    desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
    url: '/component/cell',
}, {
    src: 'path/to/some/image',
    title: 'Title二',
    desc: 'Huge spherical celestial body composed of various materials, called planets. Planets have certain shapes and their own orbits.',
    url: {
        path: '/component/radio',
        replace: false,
    },
}]

Events

Event Name	Parameter	Description
on-click-header	- -	Triggered when Title is clicked
on-click-footer	- -	Triggered when footer is clicked
on-click-item	(item)	Triggered when each item content area in `panel` is clicked

Picker

Demo

<template>
  <div>
    <group-title>default, select first when defaultValue is not set</group-title>
    <picker :data='years' :value.sync='currentValue' @on-change='change'></picker>
    <br>
    <group-title>Async load and dynamically change data</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>When defaultValue is set</group-title>
    <picker :data='years' :value.sync='setDefaultYear' @on-change='change'></picker>
    <br>
    <group-title>Five columns</group-title>
    <picker :data='fiveColumn' :value.sync='fiveColumnCurrentValue' @on-change='change'></picker>
    <br>
    <group-title>Region linkage: Current Value{{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}years`,
    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

Parameter	Description	Type	Default
columns	Set scroll columns, Note: only set when multi-level linkage is needed, default no linkage	Number	0
data	Data source, can be multi-dimensional array or object array, format:	Array	none
item-class	`CSS` class selector name for each option contained in each column of `Picker`	String	scroller-item
value	`Picker` current value, two-way binding	Array	none

data Format:

Multi-dimensional array case, each array member represents a column of data


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

Object array case, used for multi-level linkage, the number of columns in Picker is determined by the dependency relationship at each level contained in the data source, Note: This component uses a flattened data structure. When using, please convert the original data source (such as tree structure) to a flattened structure, as follows


[{
    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

Event Name	Parameter	Description
on-change	value	ValueTriggered on change

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

Parameter	Description	Type	Default
height	Popup height	String	auto
show	Whether to show popup, two-way binding	Boolean	false

If you want the popup to fill the entire screen, you can set height=100%

Slots

Name	Description
defaultslot	Popup content area, can embed any DOM element or component

Events

Event Name	Parameter	Description
on-first-show	- -	Triggered on first appearance, used when async data fetch or necessary UI rendering is needed on first load (e.g., when `Popup` contains `Scroller`)
on-hide	- -	Triggered on hide

PopupPicker depends on the Picker component

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">Reassign value list</x-button>
      <x-button type="primary" @click="changeList11">Update list via 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">Update list via 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

Parameter	Description	Type	Default
columns	Set scroll columns, Note: only set when multi-level linkage is needed, default no linkage	Number	0
data	Data source, can be multi-dimensional array or object array, format:	Array	[ ]
inline-desc	optional, cell subtitle	String	none
placeholder	optional, custom display content, supports HTML	String	none
show-name	optional, whether to show corresponding text for `value`	Boolean	false
title	cell main title	String	none
value	`Picker` current value, two-way binding	Array	[ ]

data Format:

Multi-dimensional array case, each array member represents a column of data


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

Object array case, used for multi-level linkage, the number of columns in Picker is determined by the dependency relationship at each level contained in the data source, Note: This component uses a flattened data structure. When using, please convert the original data source (such as tree structure) to a flattened structure, as follows


[{
    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 component uses MProgress to control progress by default. For detailed API, refer to MProgress documentation. Note: If you want to call MProgress API in parent component to control the lifecycle of Progress, it is recommended to use parent.$refs.progressInstance.progress for reference

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

Parameter	Description	Type	Default
percent	Progress indicator, two-way binding, uses percentage, Note: this property is for custom progress controller scenarios, default uses `MProgress`	Number	0
template	Progress type, total 5 types, including 4 default types and 1 custom type, see below	Number	0

The template type is as follows

Type	Corresponding Value (template)	Description
custom	0	Auto embedded in `Progress` component
Determinate	1	Auto append to `body`, positioned at page top
Buffer	2	Auto embedded in `Progress` component
Indeterminate	3	Auto embedded in `Progress` component
Query Indeterminate and Determinate	4	Auto embedded in `Progress` component

Search

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

Parameter	Description	Type	Default
auto-fixed	Whether to auto-fix search input box	Boolean	true
cancel-text	cancelButtontext	String	cancel
placeholder	Toast text	String	Search
results	Search result list, object array	Array	[ ]
value	Real-time input search keyword, two-way binding	String	''

Events

Event Name	Parameter	Description
on-change	value	Triggered when search keyword changes
on-submit	value	Triggered when calling backend async API for submission
result-click	(item)	Triggered when clicking a specific search result 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

Parameter	Description	Type	Default
type	Type, optional values: 'android', 'ios', 'ios-small', 'bubbles', 'circles', 'crescent', 'dots', 'lines', 'ripple', 'spiral'	String	ios

Swiper

Swiper provides quick list setup and SwiperItem child component for convenient definition. Uses wechatui

Demo

<template>
  <div>
    <group-title>In list mode, default height is 180px. If aspect-ratio is set, height will be calculated automatically based on width</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>Gorgeous dividing line</divider>


    <group-title>Set the aspect-ratio, and the Height will be automatically calculated based on the Width.</group-title>
    <swiper :list="demo02_list" style="width:85%;margin:0 auto;" :aspect-ratio="300/800" dots-position="center"></swiper>

    <br/>
    <br/>
    <divider>Gorgeous dividing line</divider>

    <group-title>Automatic rotation</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>Gorgeous dividing line</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>Gorgeous dividing line</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>Gorgeous dividing line</divider>

    <group-title>Introduce swiper-itemcustomitemContent, and use height to define Height</group-title>
    <swiper auto height="100px">
      <swiper-item class="black"><h2 class="title fadeInUp animated">它none孔不入</h2></swiper-item>
      <swiper-item class="black"><h2 class="title fadeInUp animated">你none处可藏</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>Gorgeous dividing line</divider>

    <group-title>Vertical text scrolling</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>Gorgeous dividing line</divider>

    <group-title>Loop mode</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

Parameter	Description	Type	Default
threshold	Sliding distance threshold: when you press and hold the screen and slide beyond this distance, it will slide automatically when you release your hand; otherwise, it will not slide.	Number	50
duration	Swipe animation time, in milliseconds. The smaller the value, the faster the sliding.	Number	300
list	List data	Array	null
dots-position	indicator position	String	right
dots-class	Additional style classes for indicator	String	无
auto	Whether to play automatically	Boolean	false
interval	Carousel interval, in milliseconds	Number	3000
direction	Playback direction	String	horizontal
height	Container height	String	auto
aspect-ratio	Aspect ratio: if set, the height will be automatically calculated based on the width.	Number	null
index	Specify the display of items	Number	0
loop	Whether to play in a loop	Boolean	null
min-moving-distance	Minimum sliding distance	Number	0
show-desc-mask	Whether to display the description mask	Boolean	true
show-dots	Whether to display the indicator	Boolean	true

Slots

Name	Description
defaultslot	Carousel area

Tab

Tab component is used together with TabItem component

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>

tab| Parameter | Description | Type | Default | |---------------|-----------------------------|---------|---------| | default-color | optional, default text color | String | #999 | | active-color | optional, highlighted text and line color | String | #ffac38 | | animate | optional, whether to use animation | Boolean | true | | line-width | optional, border line width | Number | 3 |

tab-item| Parameter | Description | Type | Default | |----------|---------|---------|--------| | selected | Whether highlighted | Boolean | false |

Slots

Name	Description
defaultslot	Tab area

Events

Event Name	Parameter	Description
on-item-click	- -	Triggered when clicking tab-item

XHeader

Currently XHeader does not handle position, please set it manually using class or 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

Parameter	Description	Type	Default
leftOptions.showBack	Whether to show back arrow	Boolean	true
leftOptions.backText	Back button text, can be empty	String	Back
leftOptions.preventGoBack	Whether to prevent going back when clicking Back, default will call history.back()	Boolean	false
rightOptions.showMore	Whether to showMoreIcon	Boolean	false

Events

Event Name	Parameter	Description
on-click-back	- -	Triggered when clicking back button or text, only triggered when `leftOptions.preventGoBack` is set to `true`
on-click-more	- -	Triggered when clicking more icon

Slots

Name	Description
defaultslot	Title text
left	Content positioned after back button
right	Content positioned after `rightOptions.showMore`

Approval

BI

Connect

Media

Disk

ERP

File

Material

Message

Other

Task

Attendance Checking

Basic Components