demo 原始链接:https://vux.li/demos/v2/#/component/popup-radio
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group>\n <popup-radio title=\"options\" :options=\"options1\" v-model=\"option1\"></popup-radio>\n </group>\n\n <group>\n <popup-radio title=\"options\" :options=\"options2\" v-model=\"option2\" placeholder=\"placeholder\"></popup-radio>\n </group>\n\n <group>\n <popup-radio title=\"options\" :options=\"options3\" v-model=\"option3\">\n <p slot=\"popup-header\" class=\"vux-1px-b demo3-slot\">Please select</p>\n </popup-radio>\n </group>\n\n <group>\n <popup-radio title=\"readonly\" readonly :options=\"options3\" v-model=\"option4\">\n <p slot=\"popup-header\" class=\"vux-1px-b demo3-slot\">Please select</p>\n </popup-radio>\n </group>\n\n <group>\n <popup-radio title=\"slot:each-item\" :options=\"options3\" v-model=\"option5\">\n <template slot-scope=\"props\" slot=\"each-item\"><!-- use scope=\"props\" when vue < 2.5.0 -->\n <p>\n custom item <img src=\"http://dn-placeholder.qbox.me/110x110/FF2D55/000\" class=\"vux-radio-icon\"> {{ props.label }}\n <br>\n <span style=\"color:#666;\">{{ props.index + 1 }} another line</span>\n </p>\n </template>\n </popup-radio>\n </group>\n\n </div>\n</template>\n\n<script>\nimport { Group, PopupRadio } from 'vux'\n\nexport default {\n components: {\n Group,\n PopupRadio\n },\n data () {\n return {\n option1: 'A',\n options1: ['A', 'B', 'C'],\n option2: '',\n options2: [{\n key: 'A',\n value: 'label A'\n }, {\n key: 'B',\n value: 'label B'\n }],\n option3: 'C',\n options3: ['A', 'B', 'C'],\n option4: 'B',\n option5: 'B'\n }\n }\n}\n</script>\n\n<style scoped>\n.demo3-slot {\n text-align: center;\n padding: 8px 0;\n color: #888;\n}\n</style>\n\n
\n