纷享销客开发者手册

简体中文

English

表单

约 3325 字大约 11 分钟

2026-01-16

Address

Address 基于 PopupPicker & Cell扩展。

Demo
<template>
  <div>
    <group>
      <address :title="title" :value.sync="value" :list="addressData" placeholder="请选择地址" inline-desc="可以设置placeholder"></address>
      <cell title="上面value值" :value="value | json"></cell>
      <address :title="title2" :value.sync="value2" raw-value :list="addressData"></address>
      <address title="二级省市" :value.sync="value3" raw-value :list="addressData"></address>
    </group>
    <br/>
    <x-button type="primary" @click="changeData">改变数据</x-button>
    <br/>
    <group>
      <address title="只显示省市" :value.sync="value4" raw-value :list="addressData" hide-district></address>
    </group>
  </div>
</template>

<script>
import { Group, Address, AddressChinaData, XButton, Cell } from '../components';

export default {
  components: {
    Group,
    Address,
    XButton,
    Cell,
  },
  data () {
    return {
      title: '默认为空',
      value: [],
      title2: '手动设定',
      value2: ['广东省', '深圳市', '南山区'],
      value3: ['海南省', '儋州市', '--'],
      addressData: AddressChinaData,
      value4: [],
    };
  },
  methods: {
    changeData () {
      this.value2 = ['430000', '430400', '430407'];
    },
  },
};
</script>
Props
参数说明类型默认值
hide-district是否隐藏行政区Boolean无
inline-desccell的子标题String无
list地址库， 可通过异步接口取回， 或者静态化为list.json文件放到本地Array无
placeholder水印，可作为占位符String无
raw-value是否传入中文字面值Booleanfalse
title标题String无
value表单，address field的值，双向绑定Array[]

Calendar

Calendar 基于 InlineCalendar & Popup扩展。

Demo
<template>
  <div>
    <group title="default">
      <calendar :value.sync="demo1" title="Calendar" disable-past></calendar>
    </group>
  </div>
</template>

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

export default {
  components: {
    Calendar,
    Group,
  },
  data () {
    return {
      demo1: '',
    };
  },
};
</script>
Props
参数说明类型默认值
titlecell标题String无

Inline-Calendar

Demo
<template>
    <div>
        <inline-calendar
            class="inline-calendar-demo"
            :show.sync="show"
            :value.sync="value"
            start-date="2016-04-01"
            end-date="2017-06-18"
            :range="range"
            :show-last-month="showLastMonth"
            :show-next-month="showNextMonth"
            :highlight-weekend="highlightWeekend"
            :return-six-rows="returnSixRows"
            :hide-header="hideHeader"
            :hide-week-list="hideWeekList"
            :replace-text-list="replaceTextList"
            :weeks-list="weeksList"
            :custom-slot-fn="buildSlotFn"
            :disable-past="disablePast">
        </inline-calendar>
    </div>
</template>

<script>
import InlineCalendar from '../components/inline-calendar';
module.exports = {
    components: {
        InlineCalendar,
    },
    data () {
        return {
            show: true,
            value: '',
            range: false,
            showLastMonth: true,
            showNextMonth: true,
            highlightWeekend: false,
            returnSixRows: true,
            hideHeader: false,
            hideWeekList: false,
            replaceTextList: {},
            weeksList: [],
            buildSlotFn: () => '',
            disablePast: false,
        };
    },
};
</script>

<style lang="less" scoped>
.inline-calendar-demo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(5px);
}
</style>
Props
参数说明类型默认值
hideWeek-list是否隐藏星期列表Booleanfalse
replace-text-list替换列表，可以将任意默认的日期换成对应的自定义文字，比如今天的日期替换成今，Object
start-date可选起始日期，格式为'YYYY-MM-dd'String无
show-last-month是否显示上个月的日期Booleantrue
show-next-month是否显示下个月的日期Booleantrue
highlight-weekend是否高亮周末Booleanfalse
return-six-rows是否总是渲染6行日期Booleantrue
hide-header是否隐藏日历头部Booleanfalse
render-month可选，只渲染指定月份的日历，如[2016, 10]，即只渲染2016年10月份的日历，其他月份不渲染Array无
end-date可选结束日期，格式为'YYYY-MM-dd'，即为日历指定范围String无
custom-slot-fn可选，用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性)Function无
render-on-value-change当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为falseBooleantrue
disable-past是否禁止选择过去的日期，该选项可以与start-date同时使用Booleanfalse
value当前选中日期，双向绑定，默认为空，即选中当天日期String无
weeks-list导航星期列表，从周日开始Array['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

Cell

需要与 Group 组件一起使用

Demo
<template>
  <div>
    <group>
      <cell title="My Account" value="Protected"></cell>
    </group>
  </div>
</template>

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

export default {
  components: {
    Group,
    Cell,
  },
};
</script>
Props
参数说明类型默认值
title可选，lable文字String无
value可选，右边文字String无
inline-desc可选，lable第二行文字String无
link可选，支持http绝对路径及v-link配置String or Object无
is-link可选，是否为链接，如果为true，样式上会出箭头。当link存在时，is-link会自动设置为trueBooleanfalse
primary可选，可选值为title和content，对应的div会加上为weui_cell_primary类名实现内容宽度自适应Stringtitle
Slots
名字说明
默认slotvalue区域
icontitle前，用于定义icon区域
after-titleafter-title
valuevalue区域，同默认slot，保留仅出于兼容考虑，不建议再使用

Checker

Checker 与 CheckerItem 组件配合使用

Demo
<template>
  <div>
    <checker :value.sync="demo1" default-item-class="demo1-item" selected-item-class="demo1-item-selected">
      <checker-item value="1">1</checker-item>
      <checker-item value="2">2</checker-item>
      <checker-item value="3">3</checker-item>
    </checker>
  </div>
</template>

<script>
import { Checker, CheckerItem } from '../components';

export default {
  components: {
    Checker,
    CheckerItem,
  },
  data () {
    return {
      demo1: '',
    };
  },
};
</script>

<style scoped>
.demo1-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid green;
}
</style>
Props
参数说明类型默认值
default-item-class初始状态时，check-item的默认样式String无
disabled-item-classdisabled状态时，check-item的样式String无
selected-item-class选中时，check-item的样式String无
valuecheck-item的值，双向绑定String or Number无
Slots
名字说明
默认slotcheck-item区域

Checklist

Demo
<template>
  <div>
    <checklist title="default checklist" :options="commonList" :value.sync="checkedValueList" @on-change="change"></checklist>
  </div>
</template>

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

export default {
  components: {
    Group,
    Checklist,
  },
  data () {
    return {
      commonList: ['China', 'Japan', 'America'],
      checkedValueList: [],
    };
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>
Props
参数说明类型默认值
max可选，至多选择条目个数Number无
min可选，至少选择条目个数Number无
options选项数组Array无
random-order可选，是否打乱条目排序Booleanfalse
required可选，是否为必选项Booleantrue
title选项标题String无
value可选，已选择条目值Array无

当设置 required=false 时，min 设置将无效，即最少选定个数为 0

Datetime

需要与 Group 组件一起使用

Demo
<template>
  <div>
    <group title="default format: YYYY-MM-DD">
      <datetime :value.sync="value1" @on-change="change" title="Birthday"></datetime>
    </group>
  </div>
</template>

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

export default {
  components: {
    Datetime,
    Group,
  },
  data () {
    return {
      value1: '2016-02-11',
    };
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>
Props
参数说明类型默认值
inline-desc副标题String无
value日期值String默认为当前日期
hour-row小时显示格式String
cancel-text取消按钮文本Stringcancel
confirm-text确认按钮文本Stringok
format显示格式String'YYYY-MM-DD'
day-row日期显示格式String
placeholder提示文字String无
min-year最小可选年Number无
max-year最大可选年Number无
month-row月份显示格式String
minute-row分钟显示格式String
title显示标题String无
year-row年份显示格式String

Radio

需要与 Group 组件一起使用

Demo
<template>
  <div>
    <group title="fill mode with custom placeholder and label">
      <radio fill-mode fill-label="Other" fill-placeholder="填写其他的哦" :options="radioValueList" @on-change="change"></radio>
    </group>
  </div>
</template>

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

export default {
  components: {
    Radio,
    Group,
  },
  data () {
    return {
      radioValueList: ['China', 'Japan'],
    };
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>
Props
参数说明类型默认值
fill-placeholder自定义输入框的水印提示String无
fill-mode是否增加自定义输入框Booleanfalse
fill-label自定义输入框标签String无
options选项列表, 支持简单数组及key=>value键值对，使用键值对时表单值为keyArray无
value表单值，必选，双向绑定String无
Events
自定义事件名参数描述
on-changevalue值变化时触发

Range

Demo
<template>
  <div>
    <group title="default range">
      <cell title="Default" :inline-desc="'value: '+data1" primary="content">
        <range slot="value" :value.sync="data1"></range>
      </cell>
      <cell title="allow decimals" :inline-desc="'value is: '+data2" primary="content">
        <range slot="value" :value.sync="data2" decimal></range>
      </cell>
      <cell title="value=20" :inline-desc="'value is: '+data3" primary="content">
        <range slot="value" :value.sync="data3"></range>
      </cell>
    </group>
  </div>
</template>

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

export default {
  components: {
    Range,
    Group,
    Cell,
  },
  data () {
    return {
      data1: 0,
      data2: 0,
      data3: 20,
    };
  },
};
</script>
Props
参数说明类型默认值
step可选，滑动步长Number0
decimal可选，是否开启小数支持Booleanfalse
disabled可选，是否为禁止状态Booleanfalse
disabled-opacity可选，禁止状态下控件的透明度Number0.75
min可选，取值范围最小值Number0
max可选，取值范围最大值Number100
min-HTML可选，最小值定制内容String无
max-HTML可选，最大值定制内容String无
range-bar-height可选，状态条的高度Number1
range-handle-height可选，滑柄位置Number30
value可选，当前选择值Number0

Rater

Demo
<template>
    <div>
        <group title="Normal Usage">
            <cell title="set default score = 5" inline-desc="total 5 stars if not specified">
                <rater :value.sync="data" slot="value"></rater>
            </cell>
            <cell title="change color">
                <rater :value.sync="data" slot="value" :max="6" active-color="#04BE02"></rater>
            </cell>
        </group>
    </div>
</template>

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

export default {
  components: {
    Rater,
    Group,
    Cell,
  },
  data () {
    return {
      data: 5,
    };
  },
};
</script>
Props
参数说明类型默认值
disabled可选，不可点击Booleanfalse
active-color可选，激活时颜色String#FFAC38
font-size可选，图标大小Number25
margin可选，图标间距离Number2
max可选，最高评分值Number5
star可选，评分图标样式String★
value可选，评分值，双向绑定Number0

Selector

需要配合 Group 组件一起使用

Demo
<template>
    <div>
        <group title="with placeholder">
            <selector placeholder="请选择省份" title="省份" :options="list" @on-change="onChange"></selector>
        </group>
        <group title="set value=北京">
            <selector :value.sync="value1" title="省份" :options="plainList" @on-change="onChange"></selector>
        </group>
    </div>
</template>

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

export default {
  components: {
    Selector,
    Group,
  },
  data () {
    return {
        plainList: ['广东', '广西'],
        list: [{ key: 'gd', value: '广东' }, { key: 'bg', value: '北京' }],
        value1: '北京',
    };
  },
  methods: {
    onChange (val) {
      console.log('change', val);
    },
  },
};
</script>
Props
参数说明类型默认值
options选项列表, 支持简单数组及key=>value键值对，使用键值对时表单值为keyArray无
placeholder指示文本String无
readonly只读Booleanfalse
title标题String无
value表单值，双向绑定String无
Events
自定义事件名参数描述
on-changevalue值变化时触发

Switch

作为行内表单组件, Switch 组件需要与 Group 组件一起使用

Demo
<template>
  <div>
    <group title="default">
      <switch title="default setting"></switch>
      <switch title="default true" :value.sync="isSelect"></switch>
    </group>
  </div>
</template>

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

export default {
  components: {
    Switch,
    Group,
  },
  data () {
    return {
      isSelect: true,
    };
  },
};
</script>
Props
参数说明类型默认值
disabled是否禁止操作Booleanfalse
inline-desc副标题String无
titlecell标题, 支持传入HTMLString无
value表单值,双向绑定Booleanfalse
Events
自定义事件名参数描述
on-changevalue值变化时触发

X-Button

Demo
<template>
  <div>
    <box gap="10px 10px">
      <divider>default</divider>
      <x-button>submit</x-button>
      <x-button type="primary">primary</x-button>
      <x-button type="warn">Delete</x-button>

      <divider>mini</divider>
      <x-button mini>submit</x-button>
      <x-button mini type="primary">primary</x-button>
      <x-button mini type="warn">Delete</x-button>
      <br>
      <x-button mini plain>submit</x-button>
      <x-button mini plain type="primary">primary</x-button>

      <divider>plain</divider>
      <x-button plain>submit</x-button>
      <x-button plain type="primary">primary</x-button>

      <divider>disabled</divider>
      <x-button disabled>disable submit</x-button>
      <x-button type="primary" disabled>disable primary</x-button>
      <x-button type="warn" disabled>disable Delete</x-button>

      <divider>use :text and :disabled</divider>
      <x-button :text="submitText" :disabled="isDisable" @click="processBtn" type="primary"></x-button>

      <divider>combined with flexbox</divider>
      <flexbox>
        <flexbox-item>
          <x-button type="primary">primary</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn">Delete</x-button>
        </flexbox-item>
      </flexbox>
      <divider>combined with flexbox</divider>
      <flexbox>
        <flexbox-item>
          <x-button type="default">default</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary">primary</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="warn">Delete</x-button>
        </flexbox-item>
      </flexbox>
    </box>
  </div>
</template>

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

export default {
  components: {
    XButton,
    Box,
    Group,
    Flexbox,
    FlexboxItem,
    Divider,
  },
  data () {
    return {
      submitText: 'click me',
      isDisable: false,
    };
  },
  methods: {
    change (value) {
      console.log('change:', value);
    },
    processBtn () {
      this.submitText = 'processing';
      this.isDisable = true;
    },
  },
};
</script>
Props

按钮文字可以用text属性也可以用直接用默认slot

参数说明类型默认值
disabled可选，lable文字Boolean无
mini可选，lable文字Boolean无
plain可选，lable文字Boolean无
text可选，lable文字String无
type可选，lable文字Any无
Slots
名字说明
默认slot按钮文字

X-Input

命名为 x-input 避免与原生 input 标签渲染冲突

注意不要混淆：x-input 不是原生 input,不能使用 v-model,数据绑定语法为: value.sync, 也不支持大多数 input 上的事件如focus等，如果确实需要处理input事件，可以直接html标签。

XInput 需要与 Group 配合使用

Demo
<template>
  <div>
    <group title="Default">
      <x-input title="message" placeholder="I'm placeholder"></x-input>
    </group>

    <group title="不显示清除按钮">
      <x-input title="message" placeholder="I'm placeholder" :show-clear="false"></x-input>
    </group>

    <group title="set keyboard=number and is-type=china-mobile">
      <x-input title="手机号码" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>
    </group>

    <group title="set is-type=email">
      <x-input title="邮箱" placeholder="请输入邮箱地址" is-type="email"></x-input>
    </group>

    <group title="set min=2 and max=5">
      <x-input title="2-5个字符" placeholder="" :min="2" :max="5"></x-input>
    </group>
  </div>
</template>

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

export default {
  components: {
    XInput,
    Group,
  },
};
</script>
Props
参数说明类型默认值
required可选，是否为必填表单元素Booleantrue
max最大字符数Number无
min最小字符数Number无
is-type内置验证类型，支持email, china-mobile, china-nameString无
inline-desc标题下文字String无
keyboard只支持 number type, 用于激活数字键盘Stringfalse
readonly只读，不可修改Boolean无
placeholder输入提示String无
equal-with当前input需要与某input输入完全一致，用于确认填写String无
show-clear是否显示清除按钮Booleantrue
text-aligninput的对齐样式Stringleft
title标题String无
type设置组件内input的typeStringtext
value表单值，双向绑定String无
Events
自定义事件名参数描述
on-changevalue值变化时触发

X-Number

XNumber 需要与 Group 配合使用

Demo
<template>
  <div>
    <group title="Default">
      <x-number title="Number"></x-number>
    </group>

    <group title="listen to change events">
      <x-number title="Number" :value="0" :min="0" @on-change="change"></x-number>
    </group>

    <group title="set width=100">
      <x-number title="Number" :width="100"></x-number>
    </group>
  </div>
</template>

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

export default {
  components: {
    XNumber,
    Group,
  },
  methods: {
    change (val) {
      console.log('change', val);
    },
  },
};
</script>
Props
参数说明类型默认值
fillable可选，是否可以输入Booleantrue
max可选，数字范围最大值Number无
min可选，数字范围最小值Number无
step可选，步长Number1
title可选，标题String无
value当前输入框值Number0
width可选，输入框宽度Number50
Events
自定义事件名参数描述
on-changevalue值变化时触发