demo 原始链接:https://vux.li/demos/v2/#/component/checker
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div style=\"padding: 15px 0;\">\n <divider>{{ $t('Radio: no default value') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo1\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item value=\"1\">{{ $t('潘') }}</checker-item>\n <checker-item value=\"2\">{{ $t('闲') }}</checker-item>\n <checker-item value=\"3\">{{ $t('邓') }}</checker-item>\n <checker-item value=\"4\">{{ $t('小') }}</checker-item>\n <checker-item value=\"5\">{{ $t('驴') }}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{ demo1 }}</span>\n <br>\n </div>\n\n <divider>{{ $t('radioRequired') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo1Required\" radio-required default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item value=\"1\">{{ $t('潘') }}</checker-item>\n <checker-item value=\"2\">{{ $t('闲') }}</checker-item>\n <checker-item value=\"3\">{{ $t('邓') }}</checker-item>\n <checker-item value=\"4\">{{ $t('小') }}</checker-item>\n <checker-item value=\"5\">{{ $t('驴') }}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{ demo1Required }}</span>\n <br>\n </div>\n\n <divider>{{ $t('Radio: object value') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo11\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item :value=\"item\" v-for=\"(item, index) in items1\" :key=\"index\">{{item.value}}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo11}}</span>\n <br>\n <br>\n <checker v-model=\"demo12\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item :value=\"item\" v-for=\"(item, index) in items1\" :key=\"index\">{{item.value}}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo12}}</span>\n <br>\n </div>\n\n <divider>{{ $t('Checkbox: object value') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo21\" type=\"checkbox\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item :value=\"item\" v-for=\"(item, index) in items1\" :key=\"index\">{{item.value}}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo21}}</span>\n <br>\n <br>\n <checker v-model=\"demo22\" type=\"checkbox\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item :value=\"item\" v-for=\"(item, index) in items1\" :key=\"index\">{{item.value}}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo22}}</span>\n <br>\n <br>\n <checker v-model=\"demo23\" type=\"checkbox\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\" :max=\"2\">\n <checker-item :value=\"item\" v-for=\"(item, index) in items1\" :key=\"index\">{{item.value}}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo23}}</span>\n <br>\n </div>\n\n\n <divider>{{ $t('Checkbox') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo1Checkbox\" type=\"checkbox\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item :value=\"1\">{{ $t('白') }}</checker-item>\n <checker-item :value=\"2\">{{ $t('富') }}</checker-item>\n <checker-item :value=\"3\">{{ $t('美') }}</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo1Checkbox}}</span>\n <br>\n </div>\n\n <divider>{{ $t('Checkbox with max limit 2') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo1CheckboxMax\" :max=\"2\" type=\"checkbox\" default-item-class=\"demo1-item\" selected-item-class=\"demo1-item-selected\">\n <checker-item value=\"1\">1</checker-item>\n <checker-item value=\"2\">2</checker-item>\n <checker-item value=\"3\">3</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo1CheckboxMax}}</span>\n <br>\n </div>\n\n <divider>{{ $t('Default value 2') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo2\" default-item-class=\"demo2-item\" selected-item-class=\"demo2-item-selected\">\n <checker-item value=\"1\">1</checker-item>\n <checker-item value=\"2\">2</checker-item>\n <checker-item value=\"3\">3</checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo2}}</span>\n <br>\n </div>\n\n <divider>{{ $t('Custom styles') }}</divider>\n <div class=\"box\">\n <checker v-model=\"demo3\" default-item-class=\"demo3-item\" selected-item-class=\"demo3-item-selected\">\n <checker-item value=\"one\">\n <img src=\"http://placeholder.qiniudn.com/80x50/FF3B3B/ffffff\" alt=\"\">\n </checker-item>\n <checker-item value=\"two\">\n <img src=\"http://placeholder.qiniudn.com/80x50/FFEF7D/ffffff\" alt=\"\">\n </checker-item>\n <checker-item value=\"three\">\n <img src=\"http://placeholder.qiniudn.com/80x50/8AEEB1/ffffff\" alt=\"\">\n </checker-item>\n </checker>\n <br>\n <span>{{ $t('Current value is') }}: {{demo3}}</span>\n <br>\n </div>\n\n <divider>{{ $t('Used in a popup') }}</divider>\n <group>\n <cell :title=\"$t('Select color')\" :value=\"demo4\" is-link @click.native=\"showPopup=true\"></cell>\n </group>\n <div v-transfer-dom>\n <popup v-model=\"showPopup\" class=\"checker-popup\">\n <div style=\"padding:10px 10px 40px 10px;\">\n <p style=\"padding: 5px 5px 5px 2px;color:#888;\">Colors</p>\n <checker\n v-model=\"demo4\"\n default-item-class=\"demo4-item\"\n selected-item-class=\"demo4-item-selected\"\n disabled-item-class=\"demo4-item-disabled\">\n <checker-item :value=\"$t('花跟叶')\" @on-item-click=\"onItemClick\"> {{ $t('花跟叶') }} </checker-item>\n <checker-item :value=\"$t('鸟与树')\" @on-item-click=\"onItemClick\"> {{ $t('鸟与树') }} </checker-item>\n <checker-item :value=\"$t('我和你')\" @on-item-click=\"onItemClick\"> {{ $t('我和你') }} </checker-item>\n <checker-item :value=\"$t('全套礼品装')\" disabled @on-item-click=\"onItemClick\"> {{ $t('全套礼品装') }} </checker-item>\n </checker>\n </div>\n </popup>\n </div>\n\n <divider>{{ $t('A real world radio example') }} {{demo5}}</divider>\n <checker\n v-model=\"demo5\"\n default-item-class=\"demo5-item\"\n selected-item-class=\"demo5-item-selected\"\n >\n <checker-item v-for=\"i in [1, 2, 3]\" :key=\"i\" :value=\"i\">¥{{i*300}}</checker-item>\n </checker>\n <br/>\n <divider>{{ $t('A real world checkbox example') }} {{demo6}}</divider>\n <checker\n v-model=\"demo6\"\n type=\"checkbox\"\n default-item-class=\"demo5-item\"\n selected-item-class=\"demo5-item-selected\"\n >\n <checker-item v-for=\"i in [1, 2, 3]\" :key=\"i\" :value=\"i\">{{[$t('good'), $t('nice'),$t('awesome')][i - 1]}}</checker-item>\n </checker>\n </div>\n</template>\n\n\n\n<script>\nimport { Checker, CheckerItem, Divider, Group, Cell, Popup, TransferDom } from 'vux'\n\nexport default {\n directives: {\n TransferDom\n },\n components: {\n Checker,\n CheckerItem,\n Divider,\n Group,\n Cell,\n Popup\n },\n methods: {\n onItemClick (value, disabled) {\n console.log(value, disabled)\n if (!this.disabled) {\n this.showPopup = false\n }\n }\n },\n data () {\n return {\n items1: [{\n key: '1',\n value: 'A'\n }, {\n key: '2',\n value: 'B'\n }, {\n key: '3',\n value: 'C'\n }],\n demo1: '',\n demo1Required: '',\n demo11: null,\n demo12: {key: '2', value: 'B'},\n demo21: null,\n demo22: [{key: '2', value: 'B'}],\n demo23: null,\n demo1Checkbox: [2, 1],\n demo1CheckboxMax: ['2', '3'],\n demo2: '2',\n demo3: '',\n demo4: this.$t('花跟叶'),\n showPopup: false,\n demo5: 1,\n demo6: [2, 3]\n }\n }\n}\n</script>\n\n<style scoped>\n.box {\n padding: 0 15px;\n}\n.demo1-item {\n border: 1px solid #ececec;\n padding: 5px 15px;\n}\n.demo1-item-selected {\n border: 1px solid green;\n}\n.demo2-item {\n width: 40px;\n height: 40px;\n border: 1px solid #ccc;\n display: inline-block;\n border-radius: 50%;\n line-height: 40px;\n text-align: center;\n}\n.demo2-item-selected {\n border-color: green;\n}\n.demo3-item {\n padding: 5px 5px;\n font-size: 0;\n}\n.demo3-item-selected {\n outline: 1px solid #8B8AEE;\n}\n.demo4-item {\n background-color: #ddd;\n color: #222;\n font-size: 14px;\n padding: 5px 10px;\n margin-right: 10px;\n line-height: 18px;\n border-radius: 15px;\n}\n.demo4-item-selected {\n background-color: #FF3B3B;\n color: #fff;\n}\n.demo4-item-disabled {\n color: #999;\n}\n.demo5-item {\n width: 100px;\n height: 26px;\n line-height: 26px;\n text-align: center;\n border-radius: 3px;\n border: 1px solid #ccc;\n background-color: #fff;\n margin-right: 6px;\n}\n.demo5-item-selected {\n background: #ffffff url(../assets/demo/checker/active.png) no-repeat right bottom;\n border-color: #ff4a00;\n}\n</style>\n\n
\n