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-desc	cell的子标题	String	无
list	地址库， 可通过异步接口取回， 或者静态化为list.json文件放到本地	Array	无
placeholder	水印，可作为占位符	String	无
raw-value	是否传入中文字面值	Boolean	false
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

参数	说明	类型	默认值
title	cell标题	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	是否隐藏星期列表	Boolean	false
replace-text-list	替换列表，可以将任意默认的日期换成对应的自定义文字，比如今天的日期替换成今，{ 'TODAY': '今' }	Object	{ }
start-date	可选起始日期，格式为'YYYY-MM-dd'	String	无
show-last-month	是否显示上个月的日期	Boolean	true
show-next-month	是否显示下个月的日期	Boolean	true
highlight-weekend	是否高亮周末	Boolean	false
return-six-rows	是否总是渲染6行日期	Boolean	true
hide-header	是否隐藏日历头部	Boolean	false
render-month	可选，只渲染指定月份的日历，如[2016, 10]，即只渲染2016年10月份的日历，其他月份不渲染	Array	无
end-date	可选结束日期，格式为'YYYY-MM-dd'，即为日历指定范围	String	无
custom-slot-fn	可选，用于为特定日期添加额外的html内容，参数为(行index,列index,日期详细属性)	Function	无
render-on-value-change	当日期变化时是否重新渲染日历，如果是渲染了多个日历的话需要设为false	Boolean	true
disable-past	是否禁止选择过去的日期，该选项可以与start-date同时使用	Boolean	false
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会自动设置为true	Boolean	false
primary	可选，可选值为title和content，对应的div会加上为weui_cell_primary类名实现内容宽度自适应	String	title

Slots

名字	说明
默认slot	value区域
icon	title前，用于定义icon区域
after-title	after-title
value	value区域，同默认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-class	disabled状态时，check-item的样式	String	无
selected-item-class	选中时，check-item的样式	String	无
value	check-item的值，双向绑定	String or Number	无

Slots

名字	说明
默认slot	check-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	可选，是否打乱条目排序	Boolean	false
required	可选，是否为必选项	Boolean	true
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	{value}
cancel-text	取消按钮文本	String	cancel
confirm-text	确认按钮文本	String	ok
format	显示格式	String	'YYYY-MM-DD'
day-row	日期显示格式	String	{value}
placeholder	提示文字	String	无
min-year	最小可选年	Number	无
max-year	最大可选年	Number	无
month-row	月份显示格式	String	{value}
minute-row	分钟显示格式	String	{value}
title	显示标题	String	无
year-row	年份显示格式	String	{value}

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	是否增加自定义输入框	Boolean	false
fill-label	自定义输入框标签	String	无
options	选项列表, 支持简单数组及key=>value键值对，使用键值对时表单值为key	Array	无
value	表单值，必选，双向绑定	String	无

Events

自定义事件名	参数	描述
on-change	value	值变化时触发

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	可选，滑动步长	Number	0
decimal	可选，是否开启小数支持	Boolean	false
disabled	可选，是否为禁止状态	Boolean	false
disabled-opacity	可选，禁止状态下控件的透明度	Number	0.75
min	可选，取值范围最小值	Number	0
max	可选，取值范围最大值	Number	100
min-HTML	可选，最小值定制内容	String	无
max-HTML	可选，最大值定制内容	String	无
range-bar-height	可选，状态条的高度	Number	1
range-handle-height	可选，滑柄位置	Number	30
value	可选，当前选择值	Number	0

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	可选，不可点击	Boolean	false
active-color	可选，激活时颜色	String	#FFAC38
font-size	可选，图标大小	Number	25
margin	可选，图标间距离	Number	2
max	可选，最高评分值	Number	5
star	可选，评分图标样式	String	★
value	可选，评分值，双向绑定	Number	0

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键值对，使用键值对时表单值为key	Array	无
placeholder	指示文本	String	无
readonly	只读	Boolean	false
title	标题	String	无
value	表单值，双向绑定	String	无

Events

自定义事件名	参数	描述
on-change	value	值变化时触发

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	是否禁止操作	Boolean	false
inline-desc	副标题	String	无
title	cell标题, 支持传入HTML	String	无
value	表单值,双向绑定	Boolean	false

Events

自定义事件名	参数	描述
on-change	value	值变化时触发

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	可选，是否为必填表单元素	Boolean	true
max	最大字符数	Number	无
min	最小字符数	Number	无
is-type	内置验证类型，支持email, china-mobile, china-name	String	无
inline-desc	标题下文字	String	无
keyboard	只支持 number type, 用于激活数字键盘	String	false
readonly	只读，不可修改	Boolean	无
placeholder	输入提示	String	无
equal-with	当前input需要与某input输入完全一致，用于确认填写	String	无
show-clear	是否显示清除按钮	Boolean	true
text-align	input的对齐样式	String	left
title	标题	String	无
type	设置组件内input的type	String	text
value	表单值，双向绑定	String	无

Events

自定义事件名	参数	描述
on-change	value	值变化时触发

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	可选，是否可以输入	Boolean	true
max	可选，数字范围最大值	Number	无
min	可选，数字范围最小值	Number	无
step	可选，步长	Number	1
title	可选，标题	String	无
value	当前输入框值	Number	0
width	可选，输入框宽度	Number	50

Events

自定义事件名	参数	描述
on-change	value	值变化时触发