demo 原始链接:https://vux.li/demos/v2/#/component/checklist
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <checklist :title=\"$t('Basic Usage')\" :label-position=\"labelPosition\" required :options=\"commonList\" v-model=\"checklist001\" @on-change=\"change\"></checklist>\n <div style=\"padding:15px;\">\n <x-button @click.native=\"labelPosition = labelPosition === 'left' ? '' : 'left'\" type=\"primary\"> {{ $t('Switch the position of labels') }} </x-button>\n <x-button @click.native=\"selectFirst\" type=\"primary\"> {{ $t('Select first option') }} </x-button>\n <x-button @click.native=\"selectFirstTwo\" type=\"primary\"> {{ $t('Select first two') }} </x-button>\n <x-button @click.native=\"selectLeft\" type=\"primary\"> {{ $t('Select the remaining values') }}</x-button>\n </div>\n\n <checklist :title=\"$t('Preselect China and Japan (disabled)')\" disabled label-position=\"left\" :options=\"commonList\" v-model=\"checklist002\" @on-change=\"change\"></checklist>\n\n <checklist :title=\"$t('Set max=2')\" :options=\"commonList\" v-model=\"checklist003\" :max=2 @on-change=\"change\"></checklist>\n\n <checklist :title=\"$t('Set max=1 (radio mode)')\" :options=\"commonList\" v-model=\"radioValue\" :max=\"1\" @on-change=\"change\"></checklist>\n\n <checklist :title=\"$t('Set random order')\" random-order :options=\"checklist005\" v-model=\"checklist005Value\" @on-change=\"change\"></checklist>\n\n <checklist ref=\"demoObject\" :title=\"$t('Option Array with key and value (key must be string)')\" :options=\"objectList\" v-model=\"objectListValue\" @on-change=\"change\"></checklist>\n <group>\n <cell-box>{{ fullValues }}</cell-box>\n </group>\n <div style=\"padding:15px;\">\n <x-button type=\"primary\" @click.native=\"fullValues = $refs.demoObject.getFullValue()\">getFullValue()</x-button>\n </div>\n\n <checklist :title=\"$t('Option is Object with InlineDesc')\" :options=\"inlineDescList\" v-model=\"inlineDescListValue\" @on-change=\"change\"></checklist>\n\n <checklist :title=\"$t('Async list')\" :max=\"3\" :options=\"asyncList\" v-model=\"asyncListValue\" @on-change=\"change\"></checklist>\n\n <divider> {{ $t('Reference')}} </divider>\n <group :title=\"$t('See also')\">\n <cell title=\"Checker\" is-link link=\"/component/checker\"></cell>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { Group, CellBox, Checklist, Cell, Divider, XButton } from 'vux'\nimport _ from 'lodash'\n\nexport default {\n mounted () {\n setTimeout(() => {\n this.asyncList = ['A', 'B', 'C', 'D']\n }, 3000)\n },\n components: {\n Group,\n Checklist,\n Cell,\n Divider,\n XButton,\n CellBox\n },\n methods: {\n change (val, label) {\n console.log('change', val, label)\n },\n selectFirst () {\n this.checklist001 = ['China']\n },\n selectFirstTwo () {\n this.checklist001 = ['China', 'Japan']\n },\n selectLeft () {\n const left = _.without.apply(_, [this.commonList].concat(this.checklist001))\n this.checklist001 = left\n }\n },\n data () {\n return {\n fullValues: [],\n labelPosition: '',\n error: '',\n commonList: [ 'China', 'Japan', 'America' ],\n checklist001: [],\n checklist0011: [],\n checklist002: [ 'China', 'Japan' ],\n checklist003: [ 'China', 'Japan' ],\n checklist005: [ '01', '02', '03' ],\n checklist005Value: [],\n objectList: [{key: '1', value: '001 value'}, {key: '2', value: '002 value'}, {key: '3', value: '003 value'}],\n objectListValue: ['1', '2'],\n inlineDescList: [\n {key: '1', value: 'Tiger is good', inlineDesc: 'Tiger is the king of mountain'},\n {key: '2', value: 'Lion is better', inlineDesc: 'Lion is the king of woods'},\n {key: '3', value: 'Camel is best, no inline-desc'}\n ],\n inlineDescListValue: [1],\n asyncList: [],\n asyncListValue: [],\n radioValue: ['China']\n }\n }\n}\n</script>\n\n<style scoped>\n.error {\n padding-left: 15px;\n line-height: 28px;\n color: #888;\n font-size: 12px;\n}\n</style>\n\n
\n