| VUX - Vue 移动端 UI 组件库

Components

Actionsheet_COM

import { Actionsheet } from 'vux'

Props

name	type	default	version	description
value	Boolean	false		是否显示, 使用 v-model 绑定变量
show-cancel	Boolean	false		是否显示取消菜单，对安卓风格无效
cancel-text	String	cancel(取消)		取消菜单的显示文字
theme	String	ios		菜单风格，可选值为[‘ios’,‘android’]
menus	Object Array	{}		菜单项列表，举例：`{menu1: '删除'}`，如果名字上带有`.noop`表明这是纯文本(HTML)展示，不会触发事件，用于展示描述或者提醒。从`v2.1.0`开始支持数组类型的菜单，可自定义键值，见下面说明。
close-on-clicking-mask	Boolean	true	v2.0.0	点击遮罩时是否关闭菜单，适用于一些进入页面时需要强制选择的场景。
close-on-clicking-menu	Boolean	true	v2.3.8	点击菜单时是否自动隐藏

Events

name	params	description	version
on-click-menu	(menuKey, menuItem)	点击菜单时触发
on-click-menu-{menuKey}	(menuKey)	点击事件的快捷方式, `menuKey`与`label`的值有关。举例：如果你有一个菜单名字为`delete`, 那么你可以监听 `on-click-menu-delete`
on-click-menu-cancel		点击取消菜单时触发
on-click-mask		点击遮罩时触发	v2.3.4

Demo page

从v2.1.0开始支持数组类型的菜单。

label: 菜单名字，支持文字及html。

value: 英文字符，表示触发事件的名字，如果不设置不会触发on-click-menu事件。

type: 类型，可选值如下

primary 主色
warn 警告色
disabled 不可操作，灰色。点击时不会关闭
info 信息提示，点击时不会关闭。作用同对象类型的key.noop。

[{
  label: 'Are you sure?<br/><span style="color:#666;font-size:12px;">Once deleted, you will never find it.</span>',
  type: 'info'
}, {
  label: 'Primary',
  type: 'primary',
  value: 'primary'
}, {
  label: 'Warn',
  type: 'warn'
}, {
  label: 'Disabled',
  type: 'disabled'
}, {
  label: 'Default'
}]

Alert_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Alert } from 'vux'

该组件支持以plugin形式调用：

以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`buttonText`而不是`button-text`。

在 `ViewBox` 或者 `overflow-scrolling:touch` 的容器中使用时，请使用 `prop:transfer-dom` 来解决其引起的 `z-index` 失效问题。详细参考 demo。

import  { AlertPlugin } from 'vux'
Vue.use(AlertPlugin)

// 或者umd方式
// 引入构建的js文件
Vue.use(vuxAlertPlugin)

// 显示
this.$vux.alert.show({
  title: 'Vux is Cool',
  content: 'Do you agree?',
  onShow () {
    console.log('Plugin: I\'m showing')
  },
  onHide () {
    console.log('Plugin: I\'m hiding')
  }
})
// 隐藏
this.$vux.alert.hide()

如果你想实现在`vue-router`的`beforeEach`或者`afterEach`的 hook 里关闭，可以使用 `Vue.$vux.alert.hide()`

该组件在 v2.7.2 以上支持单独调用，方法和插件使用一致。

import { AlertModule } from 'vux'

Props

name	type	default	version	description
value	Boolean	false		是否显示, 使用 v-model 绑定变量
title	String			弹窗标题
content	String		v2.2.0	提示内容，作为 slot:default 的默认内容，如果使用 slot:default, 将会失效
button-text	String	ok(确定)		按钮文字
hide-on-blur	Boolean	false		是否在点击遮罩时自动关闭弹窗
mask-transition	String	vux-fade		遮罩动画
dialog-transition	String	vux-dialog		弹窗主体动画
mask-z-index	Number String	1000	v2.6.4	遮罩层 z-index 值

Slots

name	description	version
default	提示内容

Events

name	params	description	version
on-show		弹窗显示时触发
on-hide		弹窗关闭时触发

Demo page

Badge_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Badge } from 'vux'

Props

name	type	default	version	description
text	String			显示的文字

Demo page

Blur_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Blur } from 'vux'

zh-CN:|

当前组件使用svg实现模糊效果。如果在手机上渲染过慢，可以尝试直接使用css3的blur filter。

en:|

This component uses svg to implement blur. If rendering it in mobile devices is too slow, you can try to use a css3 featrue – blur filter.

Props

name	type	default	description
blur-amount	Number	10	模糊程度
url	String		图片地址
height	Number	200	容器高度

Slots

name	description	version
default	容器内容，显示在模糊内容上面

Demo page

ButtonTab_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { ButtonTab, ButtonTabItem } from 'vux'

ButtonTab

Props

name	type	default	version	description
value	Number	0		当前选中索引值，从0开始，使用 `v-model` 绑定
height	Number	30		高度值, 单位为像素

ButtonTabItem

Props

name	type	default	version	description
selected	Boolean	false		是否选中

Events

name	params	description	version
on-item-click	(index)	当前按钮点击时触发

Demo page

Calendar_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Calendar } from 'vux'

  <group>
    <calendar title="title" v-model="value"></calendar>
  </group>

`calendar`只能在`Group`中使用
除了`title`和 `value`, 其他`props`和`inline-calendar`完全一致。

当绑定值为数组时，日历将为多选模式

Props

name	type	version	description
value	String		表单值, v-model 绑定。当值为空时，为单选；当值为[]时，为多选；设置值为’TODAY’可快捷选取当前日期。`placeholder`只有在值为空或[]时显示。
title	String		label文字
placeholder	String		占位提示文字
show-popup-header	Boolean	v2.6.0	是否显示弹窗头部，当为多选时强制显示，单选时默认不显示
popup-header-title	String	v2.6.0	弹窗头部文字
display-format	Function	v2.6.4	格式化显示值
readonly	String	v2.7.2	是否禁用弹窗选择

Events

name	params	description
on-change	(value)	值改变时触发
on-show		弹窗显示时触发
on-hide		弹窗关闭时触发

Demo page

Card_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Card } from 'vux'

Props

name	type	description
header.title	String	头部标题，不指定则不显示
footer.title	String	底部标题，不指定则不显示
footer.link	String	底部链接，普通url或者v-link参数

Slots

name	description	version
header	头部位置
content	中间主体位置
footer	底部位置

Events

name	params	description	version
on-click-footer		点击底部时触发
on-click-header		点击头部时触发

Demo page

CellBox_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { CellBox } from 'vux'

  <group>
    <cell-box is-link>
      <!-- anything -->
    </cell-box>
  </group>

与`cell`相比，`cell-box`更自由和灵活，只提供`is-link`和`link`属性，内容直接使用默认slot定义。
`cell-box`同样只能在`Group`中使用

Props

name	type	default	version	description
is-link	Boolean	false		是否为链接，如果是，右侧将会出现指引点击的右箭头
link	String Object			点击链接，可以为http(s)协议，也可以是 vue-router 支持的地址形式
border-intent	Boolean	true	v2.2.1-rc.1	是否显示边框与左边的间隙
align-items	String	center	v2.6.5	flex 布局 align-items 设置

Slots

name	description	version
default	内容区域

Demo page

CellFormPreview_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { CellFormPreview } from 'vux'

`CellFormPreview` 需要在 `Group` 组件中使用。

  <group>
    <cell title="Total" value="￥1024"></cell>
    <cell-form-preview :list="list"></cell-form-preview>
  </group>

import { CellFormPreview, Group, Cell } from 'vux'

export default {
  components: {
    CellFormPreview,
    Group,
    Cell
  },
  data () {
    return {
      list: [{
        label: 'Apple',
        value: '3.29'
      }, {
        label: 'Banana',
        value: '1.04'
      }, {
        label: 'Fish',
        value: '8.00'
      }]
    }
  }
}

Props

name	type	default	version	description
list	Array		v2.2.0	内容列表，键值包括`label`和`value`，可缺值
border-intent	Boolean	true	v2.2.1-rc.1	是否显示边框与左边的间隙

Demo page

Cell_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Cell } from 'vux'

  <group>
    <cell title="title" value="value"></cell>
  </group>

cell只能在`Group`中使用

Props

name	type	default	version	description
title	String			左边标题文字
value	String			右侧文字，复杂的样式布局请使用slot
inline-desc	String			标题下面文字，一般为说明文字
link	String Object			点击链接，可以为http(s)协议，也可以是 vue-router 支持的地址形式
is-link	Boolean	false		是否为链接，如果是，右侧将会出现指引点击的右箭头
primary	String	title		可选值为 [‘title’, ‘content’]，对应的div会加上weui_cell_primary类名实现内容宽度自适应
is-loading	Boolean	false	v2.2.0	是否显示加载图标，适用于异步加载数据的场景
value-align	String	left	v2.2.0	文字值对齐方式，可选值为 left right。当设为 right 时，primary 值将会设为 content
border-intent	Boolean	true	v2.2.1-rc.1	是否显示边框与左边的间隙
arrow-direction	String		v2.2.1-rc.1	右侧箭头方向，可选有 up down
disabled	Boolean		v2.2.2	对 label 和箭头(如果使用 is-link )显示不可操作样式
align-items	String	center	v2.6.4	align-items 样式值

Slots

name	description	version
default	右侧内容，相比于value的优点是可以用复杂的样式或者调用组件
value	[废弃] 同默认slot
icon	标题左侧的图像位置
after-title	标题右侧位置
child	cell的直接子元素，因此可以添加一个相对于cell绝对定位的元素
inline-desc	inline-desc 内容，和 prop:inline-desc 功能一样，但是可以使用 html	v2.2.1-rc.6
title	title 插槽，方便自定义样式	v2.3.3

Demo page

CheckIcon_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { CheckIcon } from 'vux'

Props

name	type	default	version	description
value	Boolean	false	v2.3.8	是否选中，使用 :value.sync 双向绑定
type	String	unknown		check icon 样式，可选值为[‘plain’]

Demo page

Checker_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Checker } from 'vux'

Checker 是比Radio或者Checklist更加灵活的选择组件，可以自定义需要的布局样式。

Checker

Props

name	type	default	version	description
default-item-class	String			默认状态class
selected-item-class	String			选中样式class
disabled-item-class	String			不可选样式class
type	String	radio		类型，单选为`radio`, 多选为`checkbox`
value	String Array			表单值，使用`v-model`绑定
max	Number			最多可选个数，多选时可用
radio-required	Boolean	false	v2.6.3	在单选模式下是否必选一个值。设为 true 后点击当前选中项不会取消选中。

Events

name	params	description	version
on-change	`(value)`	value值变化时触发

CheckerItem

Props

name	type	default	version	description
value	String			当前项的值
disabled	Boolean	false		是否为不可选

Events

name	params	description	version
on-item-click	`(itemValue, itemDisabled)`	当前项被点击时触发

Demo page

Checklist_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Checklist } from 'vux'

从 v2.6.2 开始，max=1即为单选模式，不会要求先取消上一个选中的才能选中下一个值。

Props

name	type	default	version	description
value	Array			表单值
title	String			标题
required	Boolean	false		是否为必选
options	Array			选项列表，可以为`[{key:'name',value:'value',inlineDesc:'inlineDesc'}]`的形式
max	Number			最多可选个数
min	Number			最少可选个数
random-order	Boolean	false		是否随机打乱选项顺序
check-disabled	Boolean	true	v2.2.1-rc.1	是否进行可选检测，默认情况下当选择个数等于可选个数(max)时，其他项不可选择。该选项主要适用于从多个选项列表中收集值的场景。注意的该选项设为 false 时 max 设置将失效。
label-position	String	right	v2.2.1-rc.4	label 位置，可以设置为 left 或者 right
disabled	String		v2.3.8	是否禁用操作

Events

name	params	description	version
on-change	(value, label)	值变化时触发，参数为 (value, label)，其中 label 参数在 v2.5.7 后支持

Methods

name	params	description	version
getFullValue		获取值和对应的显示文字	v2.6.4

Demo page

Clocker_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Clocker } from 'vux'

Props

name	type	default	version	description
time	String			结束时间
format	String	%D 天 %H 小时 %M 分 %S 秒		显示格式

Slots

name	description	version
default	若存在，则作为最终显示出来的格式模板

Events

name	params	description	version
on-tick		时间计算时触发，但非精确每1s触发
on-finish		时间结束时触发

Demo page

ColorPicker_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

This Component is Deprecated. 请参考源码直接使用cell+slot来实现

import { ColorPicker } from 'vux'

Props

name	type	default	description
value	String		表单值
colors	Array		可选颜色列表
size	String	large	按钮大小，可选值 large, middle, small

Demo page

Confirm_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Confirm } from 'vux'

建议参照例子使用 `v-transfer-dom` 将弹窗插入 `body` 节点下，避免组件非 body 子节点导致的各种问题。

该组件支持以plugin形式调用：

以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`confirmText`而不是`confirm-text`。

import  { ConfirmPlugin } from 'vux'
Vue.use(ConfirmPlugin)

// 显示
const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
this.$vux.confirm.show({
  // 组件除show外的属性
  onCancel () {
    console.log(this) // 非当前 vm
    console.log(_this) // 当前 vm
  },
  onConfirm () {}
})
// 隐藏
this.$vux.confirm.hide()
// prompt形式调用
this.$vux.confirm.prompt('placeholder', {
  onCancel () {}
  onConfirm () {}
})
// 设置输入值
this.$vux.confirm.setInputValue('value') // 注意需要在 onShow 事件中执行

Props

name	type	default	version	description
show	Boolean	false		是否显示，使用`v-model`绑定
show-input	Boolean	false	v2.5.0	是否显示输入框，如果为true，slot会失效
placeholder	String		v2.5.0	输入框的提示（仅在showInput为true的情况下有效）
theme	String	ios		弹窗风格，可以是ios或android
hide-on-blur	Boolean	false		是否在点击遮罩时自动关闭弹窗
title	String			弹窗标题
content	String			弹窗内容，作为slot默认内容，可以是html片段，如果使用slot该字段会失效
confirm-text	String	确认(confirm)		确认按钮的显示文字
cancel-text	String	取消(cancel)		取消按钮的显示文字
mask-transition	String	vux-fade		遮罩动画
dialog-transition	String	vux-dialog		弹窗动画
close-on-confirm	Boolean	true	v2.5.0	是否在点击确认按钮时自动关闭
input-attrs	Object		v2.5.7	input 属性
mask-z-index	Number String	1000	v2.6.4	遮罩层 z-index 值

Slots

name	description	version
default	弹窗主体内容

Events

name	params	description
on-cancel		点击取消按钮时触发
on-confirm	(value)	点击确定按钮时触发, 参数为prompt中输入的值
on-show		弹窗出现时触发
on-hide		弹窗隐藏时触发

Methods

name	params	description	version
v2.6.4		[feature] 支持属性 mask-z-index 设置遮罩 z-index
setInputValue	(value)	设置输入值，当 show-input 为 true 时有效	v2.5.5

Demo page

Countdown_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

This Component is Deprecated.

import { Countdown } from 'vux'

Props

name	type	default	version	description
value	number			时间，秒为单位
start	Boolean	true		是否开始计数

Demo page

Countup_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Countup } from 'vux'

Props

name	type	default	version	description
start-val	Number	0		开始数字
end-val	Number			结束数字
decimals	Number	0		小数点位数
duration	Number	2		耗时（秒）
options	Object			`countup.js`的设置项
start	Boolean	true		是否自动开始计数
tag	String	span	v2.5.5	渲染标签

Demo page

DatetimeRange_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { DatetimeRange } from 'vux'

该组件和 `Datetime` 组件不同的地方是`年月日`集中显示在一栏，适合范围不大的日期选择。
需要在`Group`组件里使用

Props

name	type	default	description
title	String		标题文字
value	Array		表单值，`v-model`绑定。比如，[‘2017-01-15’, ‘03’, ‘05’]
inline-desc	String		描述字符
placeholder	String		提示文字，当`value`为空时显示
start-date	String		限定最小日期，注意该限制只能限定到日期，不能限定到小时分钟
end-date	String		限定最大日期，注意该限制只能限定到日期，不能限定到小时分钟
format	String	YYYY-MM-DD	日期栏的显示格式

Events

name	params	description	version
on-change	`(value)`	表单值变化时触发, 参数 `(newVal)`

Demo page

DatetimeView_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { DatetimeView } from 'vux'

Props

name	type	default	version	description
value	String			表单值，`v-model`绑定
format	String	YYYY-MM-DD		日期栏的显示格式

Methods

name	params	description	version
render		强制重新渲染组件，当主动修改值或者其他非响应属性时需要调用该方法	v2.5.0

Demo page

Datetime_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Datetime } from 'vux'

需要在`Group`组件里使用

该组件支持以plugin形式调用：

// 以 plugin 形式使用时，请在入口处引入：
import { DatetimePlugin } from 'vux'
Vue.use(DatetimePlugin)

// 组件内使用
this.$vux.datetime.show({
  value: '', // 其他参数同 props
  onHide () {
    const _this = this
  },
  onShow () {
    const _this = this
  }
})

this.$vux.datetime.hide()

Props

name	type	default	version	description
format	String	YYYY-MM-DD		时间格式，不支持特殊字符，只能类似 YYYY-MM-DD HH:mm:ss 这样的格式
title	String			标题
value	String			表单值，`v-model`绑定
inline-desc	String			描述字符
placeholder	String			提示文字，当`value`为空时显示
min-year	Number			可选择的最小年份
max-year	Number			可选择的最大年份
min-hour	Number	0		限定小时最小值
max-hour	Number	23		限定小时最大值
confirm-text	String	ok(确认)		确认按钮文字
cancel-text	String	cancel(取消)		取消按钮文字
clear-text	String			显示在中间的自定义按钮的文字
year-row	String	{value}		年份的渲染模板
month-row	String	{value}		月份的渲染模板
day-row	String	{value}		日期的渲染模板
hour-row	String	{value}		小时的渲染模板
minute-row	String	{value}		分钟的渲染模板
start-date	String			限定最小日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟。小时限定请使用`min-hour`和`max-hour`
end-date	String			限定最大日期，格式必须为 YYYY-MM-DD，注意该限制只能限定到日期，不能限定到小时分钟
required	Boolean	false		是否必填
display-format	Function		v2.1.1-rc.11	自定义显示值
readonly	String		v2.3.6	只读模式，显示类似于 cell
show	Boolean		v2.3.7	控制显示，要求 vue^2.3
minute-list	Array		v2.3.7	定义分钟列表，比如 [‘00’, ‘15’, ‘30’, ‘45’]
hour-list	Array		v2.3.7	定义小时列表，比如 [‘09’, ‘10’, ‘11’, ‘12’]
default-selected-value	String		v2.4.1	设置默认选中日期，当前 value 为空时有效
compute-hours-function	Function		v2.5.5	动态设置小时列表，参数为 `(value, isToday, generateRange)`
compute-days-function	Function		v2.6.1	动态设置日期列表，参数为 `({year, month, min, max}, generateRange)`

Slots

name	description	version
default	触发元素内容
title	title slot	v2.3.6

Events

name	params	description	version
on-change	`(value)`	表单值变化时触发, 参数 `(newVal)`
on-clear		点击显示在中间的自定义按钮时触发
on-show		弹窗显示时触发
on-hide	`(type)`, type is one of [cancel, confirm]	弹窗关闭时触发	v2.7.4
on-cancel		点击取消按钮或者遮罩时触发，等同于事件 on-hide(cancel)	v2.7.4
on-confirm		点击确定按钮时触发，等同于事件 on-hide(confirm)	v2.7.4

Demo page

Divider_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Divider } from 'vux'

不支持配置分割线颜色，因为线条是通过图片来实现的。好处是在任何背景颜色下都可以适应。如果需要配置颜色，请使用`load-more`组件。

<divider>我是有底线的</divider>

Slots

name	description	version
default	分隔线标题

Demo page

Drawer_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Drawer } from 'vux'

当前组件 forked 自 https://github.com/bajian/vue-drawer

因为 router-view 组件需要包含在 drawer 组件里，因此源码请参考 App.vue https://github.com/airyland/vux/blob/v2/src/App.vue

Props

name	type	default	version	description
show	Boolean	false	v2.4.0	是否展开，使用 :show.sync 绑定(vue@^2.3.3)
drawer-style	String		v2.4.0	菜单样式
show-mode	String	overlay	v2.4.0	展示方式，push(推开内容区域)或者 overlay(在内容上显示)
placement	String	left	v2.4.0	显示位置，可以为 left 或者 right

Slots

name	description	version
default	主体内容插槽	v2.4.0
drawer	侧边栏内容插槽	v2.4.0

Demo page

Flexbox_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Flexbox } from 'vux'

Flexbox

Props

name	type	default	description
gutter	Number	8	间隙像素大小（px）
orient	String	horizontal	排布方向，可选[‘horizontal’, ‘vertical’]
justify	String		`flex`的`justify-content`属性
align	String		`flex`的`align-items`属性
wrap	String		`flex`的`flex-wrap`属性
direction	String		`flex`的`flex-direction`属性

Slots

name	description	version
default	`flexbox-item`的内容插槽

FlexboxItem

Props

name	type	default	version	description
span	Number			占用宽度，如果不设置，所有flexbox-item将平分
order	String			`flex`的`order`属性

Slots

name	description	version
default	内容插槽

Demo page

Flow_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Flow } from 'vux'

Flow

Props

name	type	default	version	description
orientation	String	horizontal		flow 方向，可选[‘horizontal’, ‘vertical’]

FlowState

Props

name	type	default	description
title	String		标题
state	String Number		在节点中显示的内容
is-done	Boolean	false	该节点是否完成

Slots

name	description	version
title	标题插槽，默认内容为 prop:title	v2.7.0

FlowLine

Props

name	type	default	description
tip	String		流线的提示文字，当 is-done 为 true 时无效
tip-direction	String	top for horizontal flow, left for vertical flow	提示文字方向，可选[‘top’, ‘right’, ‘bottom’, ‘left’]. 在横向 flow 中默认为 top，纵向默认则为 left
is-done	Boolean	false	该流线是否完成
line-span	Number String		流线的整体长度，如果不设置，所有 flow line 将平分
process-span	Number String	50	在 flow line 上显示的进度比例

Demo page

FormPreview_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { FormPreview } from 'vux'

Props

name	type	default	description
header-label	String		头部标题
header-value	String		头部内容
body-items	Array	[]	主体内容列表， [{label:‘label’,value:‘value’}]
footer-buttons	Array	[]	底部按钮列表，default 为灰色样式，primary 文字为高亮颜色， [{style: “primary”, text: “text”, onButtonClick: fn(prop:name), link: “/path”}]

Demo page

Grid_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Grid, GridItem } from 'vux'

<grid>
  <grid-item label="Grid" v-for="i in 9">
    <img slot="icon" src="../assets/grid_icon.png">
  </grid-item>
</grid>

Grid

Props

name	type	default	version	description
rows	Number	3	v2.2.0	(v2.6.0 之后废弃，使用 col 替代)宫格行数，建议少于`5`
cols	Number	3	v2.6.1	列数。如果为非单行 Grid，需要设置 cols，否则所有 GridItem 会平均宽度显示在一行。
show-lr-borders	Boolean	true	v2.8.1	是否显示左右边框
show-vertical-dividers	Boolean	true	v2.8.1	是否显示垂直分割线

Slots

name	description	version
default	用于`grid-item`的插槽

GridItem

Props

name	type	description
icon	String	图标地址，如果是线上地址，推荐使用该prop。如果是本地图标资源，使用`slot=icon`可以保证资源被正确打包
label	String	`label` 文字
link	String	vue-router 路径

Slots

name	description	version
icon	图标内容，直接使用`<img>`标签
label	label 文字的 slot，作用同 prop:label

Demo page

Group_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Group } from 'vux'

Group是一个特殊的表单wrapper组件，主要用于将表单分组，单个表单元素也算一组。常见的表单组件都必须作为Group的子组件。属于Group子组件的有：Cell, XInput, XTextarea, XSwitch, Calendar, XNumber, Radio, XAddress, Datetime, Selector

Props

name	type	description
title	String	分组标题
title-color	String	分组标题文字颜色
label-width	String	为子元素设定统一label宽度
label-align	String	为子元素设定统一对齐方式
label-margin-right	String	为子元素设定统一的右边margin
gutter	String	设定group的上边距，只能用于没有标题时

Slots

name	description	version
default	子组件插槽
title	标题插槽	v2.5.1

Demo page

Icon_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Icon } from 'vux'

Props

name	type	default	version	description
type	String			图标名字，可选值见demo
is-msg	Boolean	false		是否用作消息提示页面图标，图标尺寸会使用93px

Demo page

<icon type="success"></icon>
<icon type="info"></icon>
<icon type="info-circle"></icon>
<icon type="warn"></icon>
<icon type="waiting"></icon>
<icon type="waiting-circle"></icon>
<icon type="safe-success"></icon>
<icon type="safe-warn"></icon>
<icon type="success-circle"></icon>
<icon type="success-no-circle"></icon>
<icon type="circle"></icon>
<icon type="download"></icon>
<icon type="cancel"></icon>
<icon type="search"></icon>
<icon type="clear"></icon>
<icon type="success" is-msg></icon>
<icon type="info" is-msg></icon>
<icon type="safe-success" is-msg></icon>
<icon type="safe-warn" is-msg></icon>

InlineCalendar_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { InlineCalendar } from 'vux'

Props

name	type	default	version	description
value	String Array			当前选中日期，使用`v-model`绑定。值为字符串(包括空字符串)时表示单选日期，为数组(包括空数组)时表示多选。
render-month	Array			指定渲染日期，如 [2018, 8]
start-date	String			起始日期，格式为 `YYYY-MM-dd`
end-date	String			结束日期，格式为`YYYY-MM-dd`
show-last-month	Boolean	true		是否显示上个月的日期
show-next-month	Boolean	true		是否显示下个月的日期
highlight-weekend	Boolean	false		是否高亮周末
return-six-rows	Boolean	true		是否总是渲染6行日期
hide-header	Boolean	false		是否隐藏日历头部
hide-week-list	Boolean	false		是否隐藏星期列表
replace-text-list	Object			替换列表，可以将默认的日期换成文字，比如今天的日期替换成今，{‘TODAY’:‘今’}
weeks-list	Array	[‘Su’, ‘Mo’, ‘Tu’, ‘We’, ‘Th’, ‘Fr’, ‘Sa’]		星期列表，从周日开始
render-function	Function			用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性)
render-on-value-change	Boolean	true		当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false
disable-past	Boolean	false		禁止选择过去的日期，该选项可以与 start-date 同时使用
disable-future	Boolean	false		禁止选择未来的日期，该选项可以 end-date 同时使用
marks	Array		v2.6.0	(beta) 自定义日期标记
disable-weekend	Boolean	false	v2.7.0	是否禁用周六日
disable-date-function	Function		v2.7.0	自定义标记特定日期是否应该禁用，返回 true 表示禁用，false 表示不禁用，不返回表示和原有逻辑一致(这样不影响和 disable-weekend 等禁用属性同时使用)

Slots

name	description	version
each-day	用以自定义每一天的显示渲染，推荐使用该 slot 来替代 render-function	v2.3.5

Events

name	params	description	version
on-change		值变化时触发
on-view-change	(data, index)	渲染月份变化时触发。初始化时会触发一次，如果不希望处理初始化时的触发，可以检查第二个参数是否为 0	v2.5.12
on-select-single-date	(currentValue)	单选模式下选中日期时触发	2.7.6

Methods

name	params	description	version
getDates		获取当前日期列表	v2.5.11
switchViewToToday		渲染当天所在月份	v2.5.12
switchViewToMonth	(year, month)	渲染特定年月日期	v2.5.12
switchViewToCurrentValue		渲染当前值所在月份	v2.5.12

Demo page

InlineLoading_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { InlineLoading } from 'vux'

版本要求 vux@^2.3.4

InlineXNumber_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { InlineXNumber } from 'vux'

Props

name	type	default	description
width	String	50px	数字所占据的宽度
button-style	String	square	按钮样式，可选[‘round’]
min	Number		最小值
max	number		最大值

Demo page

LoadMore_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { LoadMore } from 'vux'

Props

name	type	default	version	description
show-loading	Boolean	true		是否显示 loading 图标
tip	String			提示文字，如果没有显示图标也没有显示文字，则显示点

Demo page

Loading_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Loading } from 'vux'

该组件支持以plugin形式调用：

import  { LoadingPlugin } from 'vux'
Vue.use(LoadingPlugin)

// 或者umd方式
// 引入构建的js文件
Vue.use(vuxLoadingPlugin)

// 显示
this.$vux.loading.show({
 text: 'Loading'
})
// 隐藏
this.$vux.loading.hide()

loading同样支持在vue外直接使用，请参照 [https://github.com/airyland/vux/blob/v2/docs/examples/loading.html](https://github.com/airyland/vux/blob/v2/docs/examples/loading.html)

从v2.7.8版本开始以组件形式调用增加`delay`参数，从而实现延时显示.

Props

name	type	default	description
show	Boolean	false	显示状态，在 v2.5.7 前使用`v-model`绑定，后面直接使用 `:show` 绑定
text	String		提示文字
position	String	fixed	定位方式，默认为`fixed`，在100%的布局下用`absolute`可以避免抖动
transition	String	vux-mask	显示动画名字

Slots

name	description	version
default	提示文字区域

Demo page

Marquee_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Marquee, MarqueeItem } from 'vux'

Marquee

Props

name	type	default	description
interval	Number	2000	切换时间间隙
duration	Number	300	切换动画时间
direction	String	up	切换方向，可选[‘up’, ‘down’]
item-height	Number		条目高度，当默认状态为隐藏时你需要设置值，否则组件渲染时会获取不到正确高度

Slots

name	description	version
default	内容插槽

MarqueeItem

Slots

name	description	version
default	内容插槽

Demo page

Masker_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Masker } from 'vux'

Props

name	type	default	version	description
color	String	0, 0, 0		遮罩颜色，rgb值，‘0, 0, 0’
opacity	Number	0.5		遮罩透明度
fullscreen	Boolean	false	v2.1.1-rc.14	遮罩是否全屏

Slots

name	description	version
default	背景内容，位于遮罩下方，一般为图片
content	遮罩上方内容，一般显示标题消息

Demo page

Msg_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Msg } from 'vux'

Props

name	type	default	description
title	String		操作状态提示文字
description	String		描述文字
icon	String	success	图标类型，可选值有 `success`, `warn`, `info`, `waiting`
buttons	Array		操作按钮列表，一个按钮对象包含`text`, `type`(和x-button组件type一致), `link`, `onClick`

Slots

name	description	version
buttons	自定义按钮区域元素
description	自定义描述文字内容

Demo page

Panel_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Panel } from 'vux'

Props

name	type	default	description
header	String		头部文字
footer	Object		尾部配置，`{url: url, title: title}`
list	Array		内容列表，`[{title, desc, src, fallbackSrc, meta:{source,date,other}}]`
type	String	1	布局类型，可选值 [‘1’, ‘2’, ‘3’, ‘4’, ‘5’]

Events

name	params	description
on-click-header		点击头部时触发
on-click-item	`(item)`	点击内容列表时触发
on-click-footer		点击尾部时触发

Demo page

Picker_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Picker } from 'vux'

请确保列表项的`value`值是字符串，使用数字会出错。
如果你的业务接口返回数字值为数字，需要你先处理成字符串；同样，获取到值时为字符串，你需要自己转换成数字。

非联动情况下，列表数据格式示例：

// data
[['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你'], ['小米1', 'iPhone2', '华为3', '情怀4', '三星5', '其他6', '不告诉你7']]

// 或者使用 name => value 的形式
[[{
  name: '2019届5班',
  value: '1'
}, {
  name: '2019届4班',
  value: '2'
}]]

// value
['小米', '小米1']

联动时，列表数据格式示例：

// data
[{
  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'
}]

Props

name	type	version	description
value	Array		表单值，使用 `v-model` 绑定
data	Array		选项列表数据
columns	Number		指定联动模式下的列数，当不指定时表示非联动
fixed-columns	Number		指定显示多少列，隐藏多余的
column-width	Array	v2.2.0	定义每一列宽度，只需要定义除最后一列宽度，最后一列自动宽度，比如对于3列选择，可以这样：[1/2, 1/5]

Events

name	params	description	version
on-change	`(value)`	选择值变化时触发

Methods

name	params	description	version
getNameValues		根据 value 获取字面值	v2.3.1

Demo page

Popover_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Popover } from 'vux'

Props

name	type	default	description
content	String		弹出窗口内容
placement	String		弹出窗口位置
gutter	Number	5	箭头和触发元素之间的距离

Slots

name	description	version
default	触发元素
content	弹窗内容

Events

name	params	description	version
on-show		弹窗显示时触发
on-hide		弹窗隐藏时触发

Demo page

PopupHeader_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { PopupHeader } from 'vux'

Props

name	type	version	description
left-text	String	v2.5.2	左侧文字
right-text	String	v2.5.2	右侧文字
title	String	v2.5.2	标题
show-bottom-border	String	v2.5.2	是否显示底部边框

Events

name	params	description	version
on-click-left		左侧文字点击时触发	v2.5.2
on-click-right		右侧文字点击时触发	v2.5.2

Demo page

PopupPicker_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { PopupPicker } from 'vux'

其他选项与`picker`一致

Props

name	type	default	version	description
value	Array			表单值，使用`v-model绑定`
title	String			标题
cancel-text	String			弹窗的取消文字
confirm-text	String			弹窗的确认文字
placeholder	String			提示文字
show-name	Boolean	false		是否显示文字值而不是key
inline-desc	String			Cell的描述文字
show	Boolean			显示 (支持.sync修饰 next)
value-text-align	String	right	v2.1.0-rc.3	value 对齐方式(text-align)
display-format	Function		v2.1.1-rc.7	自定义在cell上的显示格式，参数为当前 value，使用该属性时，show-name 属性将失效
popup-style	Object		v2.5.2	弹窗样式，可以用于强制指定 z-index
popup-title	String		v2.7.0	弹窗标题

Slots

name	description	version
title	标题插槽，使用 scope.labelClass 和 scope.labelStyle 继承原有样式(实现样式受控于 group label 设置)	v2.3.7

Events

name	params	description	version
on-change	`(value)`	值变化时触发
on-show		弹窗出现时触发
on-hide	`(closeType)` true表示confirm(选择确认), false表示其他情况的关闭	弹窗关闭时触发
on-shadow-change	`(Array ids, Array names)`	picker 值变化时触发，即滑动 picker 时触发	v2.5.6

Demo page

PopupRadio_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { PopupRadio } from 'vux'

属性同 cell 和 Radio 的属性，需要注意的是不支持 fillMode。

Props

name	type	default	version	description
readonly	String		v2.3.6	只读样式，类似于 cell

Slots

name	description	version
popup-header	弹窗顶部	v2.3.3
each-item	自定义每个条目显示内容	v2.3.7

Events

name	params	description	version
on-show		弹窗显示时触发	v2.6.5
on-hide		弹窗关闭时触发	v2.6.5

Demo page

Popup_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Popup } from 'vux'

Props

name	type	default	version	description
value	Boolean			是否关闭，使用`v-model`绑定
height	String	auto		高度，设置`100%`为整屏高度。当 position 为 top 或者 bottom 时有效。
hide-on-blur	Boolean	true		点击遮罩时是否自动关闭
is-transparent	Boolean	false	v2.1.1-rc.9	是否为透明背景
width	String	auto	v2.2.1-rc.6	设置 100% 宽度必须使用该属性。在 position 为 left 或者 right 时有效。
position	String	bottom	v2.2.1-rc.6	位置，可取值 [‘left’, ‘right’, ‘top’, ‘bottom’]
show-mask	Boolean	true	v2.2.1-rc.6	是否显示遮罩
popup-style	Object		v2.5.2	弹窗样式，可以用于强制指定 z-index
hide-on-deactivated	Boolean	true	v2.5.5	是否在 deactived 事件触发时自动关闭，避免在路由切换时依然显示弹窗

Slots

name	description	version
default	弹窗主体内容

Events

name	params	description	version
on-hide		关闭时触发
on-show		显示时触发
on-first-show		第一次显示时触发，可以在该事件回调里初始化数据或者界面

Demo page

Previewer_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Previewer } from 'vux'

注意避免使用过大图片，否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上) #2514。

list的数据示例如图：

[{
  src: 'https://placekitten.com/800/400',
  w: 600,
  h: 400
},
{
  src: 'https://placekitten.com/1200/900',
  msrc: 'https://placekitten.com/120/90', // 缩略图
  w: 1200,
  h: 900
}]

注意在 v2.4.0 之前 w 和 h 都必须填写

显示特定index的图片，使用ref:

this.$refs.previewer.show(index)

注意，当你自定义添加按钮时，需要在 photoswipe 选项设置 clickable 元素，否则点击将没有响应

<previewer ref="previewer" :list="previewerList" :options="options">
  <template slot="button-after">
    <span class="previewer-delete-icon-box">
      <img src="../assets/previewer_delete_icon.png" width="22" height="22" class="previewer-delete-icon" @click.prevent.stop="removeImg">
    </span>
  </template>
</previewer>

options: {
  isClickableElement: function (el) {
    return /previewer-delete-icon/.test(el.className)
  }
}

Props

name	type	default	version	description
list	Array			图片列表
options	Object			`photoswipe`的设置

Slots

name	description	version
button-after	操作按钮之后，可以添加自定义图标	v2.6.3
button-before	操作按钮之前，可以添加自定义图标	v2.6.3

Events

name	params	description	version
on-close		关闭时触发	v2.2.1-rc.4
on-index-change		切换图片后触发(首次打开不会触发)	v2.8.1

Methods

name	params	description	version
goTo	(index)	跳转到特定图片	v2.5.10
prev		跳转到上一张	v2.5.10
v2.8.1		跳转到下一张	v2.5.10
getCurrentIndex		获取当前图片索引	v2.6.3

Demo page

Qrcode_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Qrcode } from 'vux'

Props

name	type	default	description
value	String		编码内容，如果为链接，请保证有http(s)协议名
size	Number	80	尺寸大小
bg-color	String	#FFFFFF	背景颜色
fg-color	String	#000000	二维码着色
type	String	img	渲染类型，可以为`img`(适合需要在微信需要长按识别的场景)和`canvas`

Demo page

Radio_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Radio } from 'vux'

  <group>
    <radio title="title" :options="options" v-model="value"></radio>
  </group>

options可以为简单数组，也可以为key=>value形式键值对

const options = [ 'China', 'Japan' ]

const options2 = [{
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '001',
  value: 'radio001'
}, {
  icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',
  key: '002',
  value: 'radio002'
}]

`radio`只能在`Group`中使用

Props

name	type	default	version	description
value	String			表单值，使用`v-model`绑定
options	Array			可选列表，可以用字符串组成的数组或者 `key=>value` 的形式
fill-mode	Boolean	false		是否可填写
fill-placeholder	String			可填写时的提示文字
fill-label	String			可填写时的label文字
disabled	Boolean		v2.3.8	禁用操作
selected-label-style	Object		v2.4.0	设置选中时的 label 样式，比如使用其他颜色更容易区分是否为选中项

Slots

name	description	version
each-item	自定义如何显示每一项	v2.3.5

Demo page

Range_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Range } from 'vux'

Props

name	type	default	description
value	Number	0	表单值，使用`v-model`绑定
decimal	Boolean	false	是否在变化时显示小数
min	Number	0	可选最小值
max	Number	100	可选最大值
step	Number	1	步长
disabled	Boolean	false	是否禁用
minHTML	String		最小值显示的html模板
maxHTML	String		最大值显示的html模板
disabled-opacity	Number		禁用样式的透明度
rangeBarHeight	Number	1	高度

Events

name	params	description	version
on-change	`(value)`	绑定值变化时触发事件	v2.2.2

Demo page

Rater_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Rater } from 'vux'

Props

name	type	default	version	description
max	Number	5		最多可选个数
value	Number	0		值，使用 v-model 绑定
disabled	Boolean	false		是否禁用
star	String	★		字符
active-color	String	#fc6		选中时的颜色
margin	Number	2		间隙值
font-size	Number	25		字体大小
min	Number	0	v2.7.9	最小值

Demo page

Scroller_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Scroller } from 'vux'

该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。
建议使用第三方相关组件，相关 issue 将不会处理。

`Scroller`的内容必须是一个`div`，并且只能有一个`div`
`Scroller` 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。

默认高度为整个视口高度，如果你加了`x-header`，那么你需要减去一个`x-header`的高度: `height="-46"`

请确保在你的数据更新后进行`reset`操作(参考下面文档)，如果你做了`reset`还有问题再开`issue`并附上代码，否则将`绝对不会被处理`。

Props

name	type	default	version	description
value	Object			对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus
height	String	viewport height		容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如`height="-40"`
lock-x	Boolean	false		锁定X方向
lock-y	Boolean	false		锁定Y方向
scrollbar-x	Boolean	false		是否显示横向滚动条
scrollbarY	Boolean	false		是否显示垂直方向滚动条
bounce	Boolean	true		是否显示边缘回弹效果
use-pulldown	Boolean	false		是否使用下拉组件
use-pullup	Boolean	false		是否使用上拉组件
pulldown-config	Object	see below		下拉组件配置
pullup-config	Object	see below		上拉组件配置
scroll-bottom-offset	Number	0	v2.2.1-rc.6	在距离底部多长距离时触发事件 on-scroll-bottom

Slots

name	description	version
default	scroller 内容，必须是一个 `div` 元素

Events

name	params	description	version
on-scroll	`(position)`	容器滚动时触发，参数为`top`和`left`位置
on-scroll-bottom		滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值	v2.2.1-rc.6
on-pulldown-loading		用户触发下拉刷新状态，监听该事件以获取加载新数据
on-pullup-loading		用户触发上拉加载状态，监听该事件以加载新数据

Methods

name	params	description
reset	`(position, duration, easing)`	在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n)
donePullup		设置上拉刷新操作完成，在数据加载后执行
disablePullup		禁用上拉刷新，在没有更多数据时执行
enablePullup		启用上拉刷新插件
donePulldown		设置下拉刷新操作完成，在数据加载后执行

Demo page

pulldown 默认配置:

{
  content: 'Pull Down To Refresh',
  height: 60,
  autoRefresh: false,
  downContent: 'Pull Down To Refresh',
  upContent: 'Release To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pulldown-'
}

pullup 默认配置:

{
  content: 'Pull Up To Refresh',
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  downContent: 'Release To Refresh',
  upContent: 'Pull Up To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pullup-'
}

QA 如何更新数据

如果展示内容只是简单的增加或者减少，直接调用reset方法即可

this.$nextTick(() => {
  this.$refs.scroller.reset()
})

如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况

this.$nextTick(() => {
  this.$refs.scroller.reset({
    top: 0
  })
})

QA 如何设置pullup完成

方法1，直接调用ref的donePullup方法

this.$refs.demo2.donePullup()

方法2，绑定value, 重置状态

自定义pullup模板同样是用v-model来绑定以获取状态变化

<scroller v-model="status"></scroller>

data () {
  return {
    status: {
      pullupStatus: 'default'
    }
  }
}

// 重置状态为default
this.status.pullupStatus = 'default

QA 如何设置pulldown完成

参照pullup, 使用方法donePulldown或者绑定pulldownStatus然后重置为default。

QA 如何禁用或者启用pullup

在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup
同样可以调用方法 disablePullup 或者设置pullupStatus为disabled

反之，则调用方法 enablePullup 或者设置pullupStatus为enabled

启用keep-alive后滚动有问题

需要在调用Scroller的页面上在 hook: activated上执行reset

activated () {
  this.$refs.scroller.reset()
}

Search_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Search } from 'vux'

Props

name	type	default	description
placeholder	String	搜索(search)	提示文字
cancel-text	String	取消(cancel)	取消文字
value	String		表单值，`v-model`绑定
results	Array		指定搜索结果, 为带有 title key 的对象组成的数组，如 [{title: ‘hello’, otherData: otherValue}], auto-fixed 为 false 时不会显示结果
auto-fixed	Boolean	true	是否自动固定在顶端
top	String	0px	自动固定时距离顶部的距离
position	String	fixed	自动固定时的定位，一些布局下可能需要使用其他定位，比如`absolute`
auto-scroll-to-top	Boolean	false	`Safari`下弹出键盘时可能会出现看不到input，需要手动滚动，启用该属性会在fix时滚动到顶端

Slots

name	description	version
default	搜索结果列表上面 slot，可以用来自定义搜索结果显示区域(results 设为空)
right	输入框右侧 slot
left	输入框左侧 slot	v2.3.5

Events

name	params	description	version
on-submit	`(value)`	表单提交时触发
on-cancel		点击`取消`按钮时触发
on-change	`(value)`	输入文字变化时触发
on-result-click	`(item)`	点击结果条目时触发，原来的`result-click`事件不符合规范已经废弃
on-focus		输入框获取到焦点时触发	v2.1.1-rc.10
on-blur		输入框失去焦点时触发	v2.6.3

Methods

name	params	description	version
setFocus		获取 input 焦点，在 Safari 上你必须在 click 事件回调里使用才能生效
setBlur		手动设置 input 失去焦点，一般用于在 on-submit 事件中实现隐藏手机键盘	v2.3.6

Demo page

Selector_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Selector } from 'vux'

  <group>
    <selector title="title" v-model="value"></selector>
  </group>

`selector`只能在`Group`中使用

在`iOS`上，如果没有指定`placeholder`也没有指定`value`，会出现弹出选择框时默认选中第一个值，但是确定后依然没有选中的情况。
因此对于`iOS`，组件内部在列表项前面增加了一个空的`option`，强制用户滑动选择一次以避免上面的问题。

Props

name	type	default	version	description
value	String Number Object			表单值，使用v-model绑定
title	String			标题
direction	String			选项对齐方式
options	Array			选项列表，可以为简单数组，或者 `{ key: KEY, value: VALUE }` 结构的键值对数组。当使用键值对时，返回的`value`为`key`的值。
name	String			表单的name名字
placeholder	String			提示文字
readonly	Boolean	false		是否不可选择
value-map	Array		v2.7.2	设置键值对映射用以自动转换接口数据, 如 [‘value’, ‘label’]

Events

name	params	description	version
on-change	`(value)`	值变化时触发

Methods

name	params	description	version
getFullValue		获取当前完整值，在使用了 valueMap 里可以用该方法来获取当前选中值的原始对象	v2.7.2

Demo page

Spinner_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Spinner } from 'vux'

Props

name	type	default	version	description
type	String	ios		图标类型

Demo page

Step_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Step } from 'vux'

Demo page

Sticky_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Sticky } from 'vux'

在Chrome模拟器运行时你可能会发现没有效果，这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone，目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试，但是真机上是完全正常的交互。

你也可以设置禁用原生支持检测以获得相同的效果：`:check-sticky-support="false"`

如果你没有使用100%的布局，也没有头部可以直接这样使用

<sticky>
  <div>Blabla</div>
</sticky>

如果你像demo一样使用view-box和x-header，那么需要这样：

<sticky scroll-box="vux_view_box_body" :offset="46">
  <div>Blabla</div>
</sticky>

建议加一个div高度为内容高度，这样可以避免当定位为sticky时下面的元素会突然向上走。

// 禁用原生检测时，可以在外围加
<div style="height:44px;">
  <sticky scroll-box="vux_view_box_body" :offset="46" :check-sticky-support="false">
    <div>Blabla</div>
  </sticky>
</div>

// 使用原生检测时，`div`紧挨着组件之后，并设置类名`vux-sticky-fill`
<sticky scroll-box="vux_view_box_body" :offset="46">
  <div>Blabla</div>
</sticky>
<div class="vux-sticky-fill" style="height:44px;"><div>

请不要直接照抄 demo 代码，滚动容器为 window 时请不要指定 scroll-box，滚动容器并非使用 `view-box` 时 id 并不是 `vux_view_box_body`，请按照实际情况来设定。

Props

name	type	default	description
scroll-box	String	window	滚动容器，默认为`window`，如果你使用了viewbox，那么你需要指定容器id：`vux_view_box_body`
check-sticky-support	Boolean	true	是否检测当前浏览器是否支持sticky特性，禁用则在`iPhone`设置上也使用`scroll`实现
offset	Number	0	距离顶部高度，在存在头部（如使用了`x-header`）的情况下需要设置一个距离

Slots

name	description	version
default	内容插槽

Methods

name	params	description	version
bindSticky		手动重新绑定，用于内容变化导致位置变化定位不再正确的情况	v2.5.4

Demo page

Swipeout_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'

Swipeout

包装子组件的wrap组件

Slots

name	description	version
default	子组件插槽

SwipeoutItem

Props

name	type	default	description
sensitivity	Number	0	滑动多少距离后开始触发菜单显示
auto-close-on-button-click	Boolean	true	点击按钮后是否收回菜单
disabled	Boolean	false	是否不可滑动
threshold	Number	0.3	滑动多少距离后自动打开菜单，否则收回。可以为小于1的比例或者宽度值
transition-mode	String	reveal	菜单打开方式，`reveal`表示菜单不动内容滑出，`follow`表示菜单随内容滑出

Slots

name	description	version
left-menu	左菜单
right-menu	右菜单

Events

name	params	description	version
on-open		菜单完全打开时触发
on-close		菜单完全关闭时触发

Methods

name	params	description	version
open	`(direction)`	打开菜单，参数为方向
close		关闭菜单

SwipeoutButton

Props

name	type	default	description
text	String		按钮文字，同`slot=default`
background-color	String		背景颜色
type	String		内置的颜色类型，可选`primary`, `warn`
width	String	80	按钮宽度

Demo page

Swiper_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Swiper } from 'vux'

`list`为图片列表快捷设置，如果你需要自定义一些样式，或者内容并不为纯图片，可以引用`swiper-item`组件来自定义。
`list` 格式如下

[{
  url: 'javascript:',
  img: 'https://static.vux.li/demo/1.jpg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/5.jpg',
  title: '送你一次旅行',
  fallbackImg: 'https://static.vux.li/demo/3.jpg'
}]

`fallbackImg` 在 `v2.5.13` 支持，它将在 `img` 加载失败时显示，注意的是 `fallbackImg` 可能会在 `img` 加载成功时也进行了加载，只是不会显示（取决于浏览器实现）。

不要在`swiper`里嵌套`scroller`，在`web`上过于复杂化而且手势会有冲突，相关`Issue`将不会处理。

需要注意的是，在使用 `swiper-item` 而非 `list` 图片列表时，如果只有两项，将无法实现 `loop` 循环播放。

该组件场景是固定高度的内容列表，不支持为不同 swiper-item 设置不同高度。

如果确实需要设置不同高度，可以通过 ref 获取 swiper, 通过 this.$refs.swiper.xheight = '100px' 设置。切记，需要放在 $nextTick 中执行。

Props

name	type	default	description
list	Array		图片列表
direction	String	horizontal	方向
show-dots	Boolean	true	是否显示提示点
show-desc-mask	Boolean	true	是否显示描述半透明遮罩
dots-position	String	right	提示点位置
dots-class	String		提示className
auto	Boolean	false	是否自动轮播
loop	Boolean	false	是否循环
interval	Number	3000	轮播停留时长
threshold	Number	50	当滑动超过这个距离时才滑动
duration	Number	300	切换动画时间
height	String	180px	高度值。如果为`100%`宽度并且知道宽高比，可以设置`aspect-ratio`自动计算高度
aspect-ratio	Number		用以根据当前可用宽度计算高度值
min-moving-distance	Number	0	超过这个距离时才滑动
v-model	Number	0	index 绑定，使用`v-model`，一般不需要绑定

Events

name	params	description	version
on-index-change	`(currentIndex)`	轮播 index 变化时触发
on-get-height	`(height)`	高度获取后触发	v2.7.0

Demo page

Tab_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Tab, TabItem } from 'vux'

如果需要监听tab-item的点击事件并取得索引，请使用on-item-click事件:

<tab>
  <tab-item @on-item-click="handler"></tab-item>
</tab>

Tab

Props

name	type	default	version	description
line-width	Number	3		线条宽度
active-color	String			选中时文字颜色
default-color	String			默认文字颜色
disabled-color	String			不可点击时文字颜色
bar-active-color	String			设置底部`bar`颜色，该颜色也可以通过`less`变量`@tab-bar-active-color`设置。
animate	Boolean	true		切换时是否需要动画
custom-bar-width	String Function		v2.1.1-rc.7	设置底部`bar`宽度，默认宽度是整体tab宽度平分，比如`50px`。使用函数时参数为当前索引`index`，你可以定义不同`tab-item`对应的`bar`宽度。
badge-label	String		v2.3.5	徽标文字
badge-background	String	null	v2.3.5	徽标背景颜色
badge-color	String	null	v2.3.5	徽标文字颜色
prevent-default	String		v2.7.2	是否禁止自动切换 tab-item
scroll-threshold	Number	4	v2.8.1	滚动阀值，超过可滚动

TabItem

Props

name	type	default	version	description
disabled	Boolean	false		是否不可选
active-class	String			当前项选中时的class

Events

name	params	description	version
on-item-click	`(index)`	当前 tabItem 被点击时触发	v2.2.1-rc.4

Demo page

Tabbar_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Tabbar, TabbarItem } from 'vux'

支持简单模式，即不指定icon，label将垂直居中显示。

默认定位为 `absolute`，适用于 `100%页面布局`，如果你并非 100% 布局(可以配合使用 view-box 组件)，请手动重置样式为 `position: fixed`

Tabbar

Props

name	type	default	version	description
icon-class	String			图标的class名

Slots

name	description	version
default	tabbar主体内容，只允许tabbar-item

Events

name	params	description	version
on-index-change		value 值变化时触发	v2.5.4

TabbarItem

Props

name	type	default	description
selected	Boolean	false	是否选中当前项，你也可以使用`v-model`来指定选中的`tabbar-item`的`index`
badge	String		徽标文字，不指定则不显示
show-dot	Boolean	false	是否显示红点
link	String		链接，可以为普通url或者用`vue-link`的路径写法，使用 object 写法指定 replace 为 true 可实现 replace 跳转
icon-class	String		图标类名，如果tabbar也同时定义了icon-class, 会使用tabbar-item的

Slots

name	description	version
icon	图标区域
icon-active	如果存在，当前 tabbar-item 点击时会显示，用于切换图标	v2.1.1-rc.8
label	图标下方文字

Events

name	params	description	version
on-item-click		点击菜单项时触发

Demo page

Timeline_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Timeline, TimelineItem } from 'vux'

待补充

Toast_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { Toast } from 'vux'

该组件支持以plugin形式调用：

以插件形式调用时，和`template`中使用不同，属性名请使用`小驼峰式`，比如`isShowMask`而不是`is-show-mask`。

import  { ToastPlugin } from 'vux'
Vue.use(ToastPlugin)

// 或者umd方式
// 引入构建的js文件
Vue.use(vuxToastPlugin)

// 默认参数
Vue.use(ToastPlugin, {position: 'top'})

// 显示
this.$vux.toast.show({
 text: 'Loading'
})

// 显示文字
this.$vux.toast.text('hello', 'top')

// 隐藏
this.$vux.toast.hide()

Props

name	type	default	version	description
value	Boolean	false		是否显示, 使用 v-model 绑定
time	Number	2000		显示时间
type	String	success		类型，可选值 success, warn, cancel, text
width	String	7.6em		宽度
is-show-mask	Boolean	false		是否显示遮罩，如果显示，用户将不能点击页面上其他元素
text	String			提示内容，支持 html，和默认slot同样功能
position	String	default	v2.1.1-rc.4	显示位置，可选值 default, top, middle, bottom

Slots

name	description	version
default	默认slot, 提示内容

Events

name	params	description	version
on-show		提示弹出时触发
on-hide		提示隐藏时触发

Demo page

ViewBox_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { ViewBox } from 'vux'

该组件为100%高布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。

在viewBox里元素定位为absolute，效果等同于fixed。

使用时需要设置 html, body 高为100%:

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

view-box所有父div也需要为100%高度：

<div style="height:100%;">
  <view-box ref="viewBox">
    <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
    <router-view></router-view>
    <tabbar slot="bottom"></tabbar>
  </view-box>
</div>

如果你想保存滚动距离，推荐使用vuex实现，在特定path对scrollBody监听scroll事件，并获取滚动距离保存到vuex的state里。示例可以参考vux源码的App.vue

Props

name	type	default	version	description
body-padding-top	String			主体的`padding-top`值，当顶部存在`x-header`等`absolute`定位元素时需要设置
body-padding-bottom	String			主体的`padding-bottom`值，当底部存在`tabbar`等`absolute`定位元素时需要设置

Slots

name	description	version
header	顶部区域，如果要使用统一的XHeader，可以使用该slot
default	主体内容，可滚动的区域
bottom	底部区域，Tabbar可以使用该slot

Methods

name	params	description
scrollTo	`(top)`	滚动到指定位置
getScrollTop		获取当前滚动距离
getScrollBody		获取滚动`div`, 也可以直接用组件引用的`.$refs.viewBoxBody`

Demo page

WechatEmotion_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { WechatEmotion } from 'vux'

Props

name	type	default	version	description
isGif	Boolean	false		是否为动图

Slots

name	description	version
default	表情名字, 可选值: ‘微笑’, ‘撇嘴’, ‘色’, ‘发呆’, ‘得意’, ‘流泪’, ‘害羞’, ‘闭嘴’, ‘睡’, ‘大哭’, ‘尴尬’, ‘发怒’, ‘调皮’, ‘呲牙’, ‘惊讶’, ‘难过’, ‘酷’, ‘冷汗’, ‘抓狂’, ‘吐’, ‘偷笑’, ‘可爱’, ‘白眼’, ‘傲慢’, ‘饥饿’, ‘困’, ‘惊恐’, ‘流汗’, ‘憨笑’, ‘大兵’, ‘奋斗’, ‘咒骂’, ‘疑问’, ‘嘘’, ‘晕’, ‘折磨’, ‘衰’, ‘骷髅’, ‘敲打’, ‘再见’, ‘擦汗’, ‘抠鼻’, ‘鼓掌’, ‘糗大了’, ‘坏笑’, ‘左哼哼’, ‘右哼哼’, ‘哈欠’, ‘鄙视’, ‘委屈’, ‘快哭了’, ‘阴险’, ‘亲亲’, ‘吓’, ‘可怜’, ‘菜刀’, ‘西瓜’, ‘啤酒’, ‘篮球’, ‘乒乓’, ‘咖啡’, ‘饭’, ‘猪头’, ‘玫瑰’, ‘凋谢’, ‘示爱’, ‘爱心’, ‘心碎’, ‘蛋糕’, ‘闪电’, ‘炸弹’, ‘刀’, ‘足球’, ‘瓢虫’, ‘便便’, ‘月亮’, ‘太阳’, ‘礼物’, ‘拥抱’, ‘强’, ‘弱’, ‘握手’, ‘胜利’, ‘抱拳’, ‘勾引’, ‘拳头’, ‘差劲’, ‘爱你’, ‘NO’, ‘OK’, ‘爱情’, ‘飞吻’, ‘跳跳’, ‘发抖’, ‘怄火’, ‘转圈’, ‘磕头’, ‘回头’, ‘跳绳’, ‘挥手’, ‘激动’, ‘街舞’, ‘献吻’, ‘左太极’, ‘右太极’

Demo page

XAddress_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

  <group>
    <x-address title="title" v-model="value"></x-address>
  </group>

import { XAddress } from 'vux'

// 如果你需要引入数据，如果你的版本低于 v2.2.0，请使用 ChinaAddressData
import { XAddress, ChinaAddressV4Data } from 'vux'

// 如果需要引入旧版数据
import { XAddress, ChinaAddressV2Data } from 'vux'

如果你需要单独引入地址数据，可以在源码[src/datas](https://github.com/airyland/vux/tree/v2/src/datas)找到。

设计上 `x-address` 只能在 `Group` 中使用。但是你依然可以不在 `Group` 中使用，使用 `display:none` 隐藏然后用 :show.sync 来控制组件显示状态。

<x-address style="display:none;" title="title" v-model="value" :list="addressData" placeholder="请选择地址" :show.sync="showAddress"></x-address>

v4 和 v3 的区别是在 v4 里重庆多了县列表。
从 `2.1.1-rc.12` 开始，`直辖区`做了简化，原来是北京市-北京市市辖区-东城区，现在是北京市-市辖区-东城区。组件内部做了兼容，你以`raw-value`方式传入两种写法表现和旧版本一致，不会出错。

从 `2.1.1-rc.15` 开始，数据必须指定版本，原来的 `ChinaAddressData` 废弃并停留在 `v2` 版本不再更新。
不同版本数据差异可以从[这里](https://github.com/airyland/china-area-data)找到。

Props

name	type	default	version	description
raw-value	Boolean	false		指定初始化时绑定的数据是否为文本(即省市名，而不是id)类型，即对于非id值组件内部会转换为id。如果是异步设置value，只能使用id赋值。
title	String			表单标题
value	Array			表单值, 使用`v-model`绑定
list	Array			地址列表, 可以引入内置地址数据或者用自己的数据，但是需要按照一致的数据结构。
inline-desc	String			标题下的描述
placeholder	String			没有值时的提示文字
hide-district	Boolean	false		是否隐藏区，即只显示省份和城市
value-text-align	String	right		value 对齐方式(text-align), `v2.1.0-rc.49`开始支持
popup-style	Object		v2.5.2	弹窗样式，可以用于强制指定 z-index
show	Boolean		v2.5.8	显示 (支持.sync修饰 next)

Slots

name	description	version
title	title 插槽，可以使用它来添加 icon 等自定义样式，受控于 group 需要从 scope 里继承 class 和样式	v2.3.8

Events

name	params	description	version
on-hide		关闭后触发，当非确定时，参数为false，反之为true
on-show		显示时触发
on-shadow-change	`(Array ids, Array names)`	picker 值变化时触发，即滑动 picker 时触发	v2.5.6

Demo page

XButton_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XButton } from 'vux'

按照`Vue`[文档](https://cn.vuejs.org/v2/guide/components.html#使用-v-on-绑定自定义事件)，在组件上绑定点击事件请使用`@click.native`。

Props

name	type	default	version	description
type	String	default		按钮类型，可选值为 `default,primary,warn`
disabled	Boolean	false		是否不可点击
text	String			按钮文字，同默认slot
mini	Boolean	false		是否为mini类型，即小尺寸的按钮
plain	Boolean	false		是否是plain样式，没有背景色
action-type	String			`button`的type属性，默认为浏览器默认(submit)，可选为 `submit` `button` `reset`
link	String		v2.3.5	vue-router 路由, 值为 `BACK` 等同于 `go(-1)`
show-loading	Boolean	false		显示加载图标
gradients	Array		v2.7.4	按钮背景渐变，长度必须为2

Slots

name	description	version
default	按钮文字

Demo page

XCircle_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XCircle } from 'vux'

Props

name	type	default	description
stroke-width	Number	1	线条宽度
stroke-color	String	#3FC7FA	线条颜色
trail-width	Number	1	背景线条宽度
trail-color	String	#D9D9D9	背景线条颜色
percent	Number	0	进度百分比

Demo page

XDialog_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XDialog } from 'vux'

如果当前组件所在位置某一父级使用了 `ViewBox` 组件或者直接使用了 Safari 的 `overflowScrolling:touch`，请引入指令 `transfer-dom` 以解决其带来的 `z-index` 失效问题。

如果你没有使用，那么不需要参照 demo 加上`v-transfer-dom`

import { TransferDomDirective as TransferDom } from 'vux'

export default {
  directives: {
    TransferDom
  }
}

<div v-transfer-dom>
  <x-dialog></x-dialog>
</div>

`scroll` 属性已经在 v2.5.12 废弃，因为它并没有实现阻止 body 滚动。
如果你是 `100%` 布局，按照下面配置布局可以实现阻止滚动。

import { ConfigPlugin } from 'vux'

Vue.use(ConfigPlugin, {
  $layout: 'VIEW_BOX'
})

Props

name	type	default	version	description
show	Boolean	false		弹窗是否可见，使用 `v-model` 绑定，在 v2.5.3 之后版本支持.sync修饰符
mask-transition	String	vux-mask		遮罩层动画
dialog-transition	String	vux-dialog		弹窗动画
hide-on-blur	Boolean	false		是否在点击遮罩时自动关闭弹窗
scroll	Boolean	true		【废弃】是否在弹窗上滚动时 body 内容也滚动
dialog-style	Object		v2.2.2	设置内部弹窗样式，覆盖原有的宽度、背景颜色等样式
mask-z-index	Number String	1000	v2.6.4	遮罩层 z-index 值

Slots

name	description	version
default	弹窗的主体内容

Events

name	params	description	version
on-show		弹窗可见时触发
on-hide		弹窗关闭时触发

Demo page

XHeader_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XHeader } from 'vux'

Props

name	type	default	description
left-options.showBack	Boolean	true	是否显示返回文字
left-options.backText	String	Back	返回文字
left-options.preventGoBack	Boolean	false	是否阻止返回
title	String		标题
transition	String		标题出现的动画
right-options.showMore	Boolean	false	是否显示右侧的更多图标

Slots

name	description	version
default	标题
left	左侧部分插槽，在返回文字后，不会影响到原有的图标
overwrite-left	重写左侧部分的返回文字及图标	v2.2.2
right	右侧部分插槽
overwrite-title	标题插槽，用于自定义标题位置内容	v2.5.3

Events

name	params	description	version
on-click-more		点击右侧更多时触发
on-click-back		当left-options.preventGoBack为true,点击左边返回时触发
on-click-title		点击标题时触发

Demo page

XIcon_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

组件来自于 [Ionicons(MIT)](http://ionicons.com/)，你可以在网站上面看到所有的图标。
该组件无法在`script`引入的方式中使用，需要自行拷贝 svg 资源。

x-icon 是一个虚拟(占位)组件，你不需要引入XIcon 组件，当调用时vux-loader@^1.0.43会自动将转换成 inline svg。

你可以根据类名来设置样式(fill)。

目前并不支持 svg sprite，将在后面版本支持。

示例(请更新 vux-loader 到 v1.0.57 以上，否则不支持传除 type 和 size 之外的属性)：

<x-icon type="ios-arrow-up" class="icon-red"></x-icon>
<x-icon type="ios-arrow-up" size="30"></x-icon>

x-icon 无法动态设置 `type`，只能单个引入，原因是 x-icon 组件主要目的是实现按需引入图标。
若要实现动态切换那么也意味着整个 icon 列表都得引入，因此暂时不支持。

Props

name	type	default	version	description
type	String			图标名字
size	String	24		尺寸大小

Demo page

XImg_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XImg } from 'vux'

Props

name	type	default	description
default-src	String		默认显示的图片地址
src	String		最终加载的图片地址
webp-src	String		webp 格式的图片地址，如果当前浏览器支持webp，则加载该地址
error-class	String		加载失败时添加到 img 元素上的类名
success-class	String		加载成功时添加到 img 元素上的类名
offset	Number	100	距离多远时开始加载
container	String	window	当图片是在一个容器里滚动时(比如demo站点100%高度的布局)，你需要指定容器的选择器
delay	Number	0	延迟执行，在存在路由过渡时立即执行可能会导致进入页面后并不会正确加载图片。该属性在 2.5.4 后已经不推荐使用，推荐使用 BusPlugin 来通知组件页面已经载入完成。

Demo page

XInput_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XInput } from 'vux'

  <group>
    <x-input title="title" v-model="value"></x-input>
  </group>

`x-input`只能在`Group`中使用

如果你想实现在输入框右边按钮切换密码明文，请使用slot=right实现type切换。

`mask` 在 `2.6.1` 支持，但注意的是使用 mask 后值也是经过 mask 处理后的值，进行判断或者提交到接口前应该注意。
比如格式化手机号码，`mask` 值为 `999 9999 9999`，得到的值将是 13 位的 `145 3456 3456`，提交或者判断都应该先清除中间空格。此时也不应该用 is-type=china-mobile 进行验证。

Props

name	type	default	version	description
value	String			表单值，使用`v-model`绑定
type	String	text		即input的`type`属性，目前支持 `text`,`number`,`email`,`password`,`tel`
is-type	String Function			内置验证器，支持`email`,`china-name`,`china-mobile`, 同样也支持直接传函数, 需要同步返回一个对象`{valid:true}`或者`{valid:false, msg:错误信息}`
required	Boolean	false		是否必值，如果不禁用验证，当没有填写时会在右侧显示错误icon
title	String			label文字
placeholder	String			placeholder 提示
show-clear	Boolean	true		是否显示清除icon
min	Number			最小输入字符限制
max	Number			最大输入字符限制，等同于`maxlength`，达到限制到不能再输入
disabled	Boolean	false		是否禁用填写
readonly	Boolean	false		同input的标准属性readonly
debounce	Number			`debounce`用以限制`on-change`事件触发。如果你需要根据用户输入做`ajax`请求，建议开启以节省无效请求和服务器资源，单位为毫秒
placeholder-align	String	left	v2.1.1-rc.8	placeholder 文字对齐方式
text-align	String	left		值对齐方式
label-width	String		v2.2.1-rc.4	label 宽度，权重比 group 的 labelWidth 高。不设定时将进行自动宽度计算，但超过15个字符时不会进行宽度设定。
mask	String		v2.6.1	(beta) 值格式化，依赖于 vanilla-masker，其中 9 表示数字，A 表示大写字母，S 表示数字或者字母
should-toast-error	String	true	v2.6.3	是否在点击错误图标时用 toast 的形式显示错误

Slots

name	description	version
label	用于自定义`label`(即 title)部分内容，比如使用`icon`
restricted-label	用于自定义`label`部分，和`slot=label`不同的是，该slot宽度受到父组件`group`的限制
right	用以在输入框右边显示内容，比如单位，切换密码显示方式等
right-full-height	用于放置和 cell 高度的验证码图片	v2.8.1

Events

name	params	description	version
on-blur	`(value, $event)`	input的`blur`事件
on-focus	`(value, $event)`	input的`focus`事件
on-enter	`(value, $event)`	input输入完成后点击`enter(确认)`事件
on-change	`(value)`	输入值变化时触发。如果你使用了`debounce`，那么触发将不会是实时的。
on-click-error-icon	`(error)`	点击错误图标时触发，你可以关闭 `should-toast-error` 然后用这个事件来自定义显示错误的提示内容	v2.6.3

Methods

name	params	description	version
focus		手动获得焦点
blur		手动设置 input 失去焦点
reset	`(value = '')`	重置输入框值，清除错误信息	v2.1.1-rc.10

Demo page

XNumber_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XNumber } from 'vux'

  <group>
    <x-number title="title" v-model="value"></x-number>
  </group>

`x-number`只能在`Group`中使用

Props

name	type	default	description
value	Number	0	表单值，使用`v-model`绑定
title	String		标题
min	Number		最小值
max	Number		最大值
step	Number	1	步长
fillable	Boolean	false	是否可填写
width	String	50px	输入框宽度
button-style	String	square	按钮样式，可选值为`square`或者`round`
align	String	right	按钮部分位置，默认在右边(right)，可选值为`left`和`right`

Demo page

XProgress_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XProgress } from 'vux'

Props

name	type	default	version	description
percent	Number	0		进度值，0到100
show-cancel	Boolean	true		是否显示取消按钮

Events

name	params	description	version
on-cancel		点击取消按钮时触发

Demo page

XSwitch_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XSwitch } from 'vux'

  <group>
    <x-switch title="title" v-model="value"></x-switch>
  </group>

`x-switch`只能在`Group`中使用

Props

name	type	default	version	description
title	String			label文字
disabled	Boolean	false		是否不可点击
value	Boolean	false		表单值, 使用`v-model`绑定
inline-desc	String			标签下文字
prevent-default	Boolean	false	v2.5.0	阻止点击时自动设定值
value-map	Array	[false, true]	v2.7.0	用于自定义 false 和 true 映射的实际值，用于方便处理比如接口返回了 0 1 这类非 boolean 值的情况

Events

name	params	description	version
on-change	`(value)`	值变化时触发，参数为 (currentValue)
on-click	`(newVal, oldVal)`	点击组件时触发

Demo page

XTable_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XTable } from 'vux'

Props

name	type	default	version	description
full-bordered	Boolean	false	v2.2.1-rc.4	是否显示表格左右边框
content-bordered	Boolean	true	v2.2.1-rc.4	是否显示 body tr 的下边框
cell-bordered	Boolean	true	v2.2.1-rc.4	是否显示表格的右边边框

Slots

name	description	version
default	表格内容	v2.2.1-rc.4

Demo page

XTextarea_COM

编辑文档
进入demo页面
demo 原始链接
demo源码

import { XTextarea } from 'vux'

  <group>
    <x-textarea title="title" v-model="value"></x-textarea>
  </group>

`x-textarea`只能在`Group`中使用

Props

name	type	default	version	description
title	String		v2.1.1-rc.8	label文字
inline-desc	String		v2.1.1-rc.8	位于标题下的描述文字
show-counter	Boolean	true		是否显示计数
max	Number	0		最大长度限制
value	String			表单值, 使用`v-model`绑定
name	String			表单名字
placeholder	String			没有值时的提示文字
rows	Number	3		textarea 标准属性 rows
cols	Number	30		textarea 标签属性 cols
height	Number	0		高度
readonly	Boolean	false		textarea 标签属性 readonly
disabled	Boolean	false		textarea 标签属性 disabled
autosize	Boolean	false	v2.2.1-rc.6	是否根据内容自动设置高度

Slots

name	description	version
label	用于自定义`label`(即 title)部分内容，比如使用`icon`	v2.1.1-rc.8
restricted-label	用于自定义`label`部分，和`slot=label`不同的是，该slot宽度受到父组件`group`的限制	v2.1.1-rc.8

Events

name	params	description	version
on-change	`(value)`	表单值变化时触发
on-focus		focus 事件	v2.1.1-rc.11
on-blur		blur 事件	v2.1.1-rc.11

Methods

name	params	description	version
updateAutosize		重置 autosize 高度，如果绑定值不为空，需要调用该函数进行高度重置	v2.5.1

Demo page