Radio单选框

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.    "vtu-radio": "/miniprogram_npm/vtuweapp/radio/radio/vtu-radio",
    3.    "vtu-radio-prop": "/miniprogram_npm/vtuweapp/prop/radio/prop/vtu-radio-prop",
    4.    "vtu-radio-prop-item": "/miniprogram_npm/vtuweapp/prop/radio/item/vtu-radio-prop-item"
    5. }
    6.

    代码演示

    基础用法

    1. <vtu-radio-group model="{{value1}}" bind:change="change">
    2.   <vtu-radio value="1" label="北京"></vtu-radio>
    3.   <vtu-radio value="2" label="上海"></vtu-radio>
    4.   <vtu-radio value="3" label="深圳"></vtu-radio>
    5.   <vtu-radio value="4" label="南京"></vtu-radio>
    6. </vtu-radio-group>
    8. Page({
    9.   data: {
    10.     value1: 1
    11.   },
    13.   change: function(e) {
    14.     this.setData({
    15.       value1: e.detail.value
    16.     })
    17.   }
    18. });
    19.  
    20.

    自定义

    1. <vtu-radio-group model="{{value1}}" align="right" active-color="red" radio-icon="iconfont icon-xuanze" active-radio-icon="iconfont icon-xuanze-danxuan" bind:change="change">
    2.   <vtu-radio value="1" label="北京"></vtu-radio>
    3.   <vtu-radio value="2" label="上海" disabled></vtu-radio>
    4.   <vtu-radio value="3" label="深圳"></vtu-radio>
    5.   <vtu-radio value="4" label="南京"></vtu-radio>
    6. </vtu-radio-group>
    7.

    自定义图标

    1. <vtu-radio-group model="{{value1}}" align="right" radio-icon="" active-color="orange" active-radio-icon="iconfont icon-duihao" active-radio-color="blue" bind:change="change">
    2.   <vtu-radio value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-radio>
    3.   <vtu-radio value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-radio>
    4.   <vtu-radio value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-radio>
    5.   <vtu-radio value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-radio>
    6. </vtu-radio-group>
    7.

    弹出单选框

    1. <vtu-btn type="primary" bind:click="openRadioProp">弹出单选框</vtu-btn>
    2. <vtu-radio-prop show="{{showProp}}" model="{{value1}}" align="right" active-color="red" radio-icon="iconfont icon-xuanze" active-radio-icon="iconfont icon-xuanze-danxuan" bind:change="change">
    3.   <vtu-radio-prop-item value="1" label="北京" icon="iconfont icon-biaoxing" ></vtu-radio-prop-item>
    4.   <vtu-radio-prop-item value="2" label="上海" icon="iconfont icon-xihuan" ></vtu-radio-prop-item>
    5.   <vtu-radio-prop-item value="3" label="深圳" icon="iconfont icon-sousuo"></vtu-radio-prop-item>
    6.   <vtu-radio-prop-item value="4" label="南京" icon="iconfont icon-shangchuan"></vtu-radio-prop-item>
    7. </vtu-radio-prop>
    9. Page({
    10.   data: {
    11.     value1: 1,
    12.     showProp: false
    13.   },
    15.   change: function(e) {
    16.     this.setData({
    17.       value1: e.detail.value
    18.     })
    19.   },
    21.   openRadioProp: function(){
    22.     this.setData({
    23.       showProp: true
    24.     })
    25.   }
    26. });
    27.  
    28.

    组件参数

    Radio 单选 - 图1