demo 原始链接:https://vux.li/demos/v2/#/component/radio
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group title=\"default\">\n <radio :options=\"radio001\" @on-change=\"change\"></radio>\n </group>\n\n <group :title=\"$t('pre-select China(disabled)')\">\n <radio :options=\"radio001\" value=\"China\" disabled></radio>\n </group>\n\n <group :title=\"'fill mode value is '+radio001Value\">\n <radio :selected-label-style=\"{color: '#FF9900'}\" fill-mode :options=\"radio001\" v-model=\"radio001Value\" @on-change=\"change\"></radio>\n </group>\n\n <group title=\"fill mode with custom placeholder and label\">\n <radio fill-mode fill-label=\"Other\" fill-placeholder=\"填写其他的哦\" :options=\"radio001\" @on-change=\"change\"></radio>\n </group>\n\n <group title=\"object options\">\n <radio fill-mode fill-label=\"Other\" fill-placeholder=\"other\" :options=\"radio003\" @on-change=\"change\"></radio>\n </group>\n\n <group title=\"slot:each-item\">\n <radio :options=\"radio001\">\n <template slot-scope=\"props\" slot=\"each-item\"><!-- use scope=\"props\" when vue < 2.5.0 -->\n <p>\n V{{ props.index + 1 }} <img src=\"http://dn-placeholder.qbox.me/110x110/FF2D55/000\" class=\"vux-radio-icon\"> {{ props.label }}\n </p>\n </template>\n </radio>\n </group>\n </div>\n</template>\n\n\n\n<script>\nimport { Radio, Group } from 'vux'\n\nexport default {\n components: {\n Radio,\n Group\n },\n data () {\n return {\n radio001: [ 'China', 'Japan' ],\n radio001Value: 'China',\n radio002Value: 'Japan',\n radio003: [{\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '001',\n value: 'radio001'\n }, {\n icon: 'http://dn-placeholder.qbox.me/110x110/FF2D55/000',\n key: '002',\n value: 'radio002'\n }]\n }\n },\n methods: {\n change (value, label) {\n console.log('change:', value, label)\n }\n }\n}\n</script>\n\n
\n