更新记录

v2.0.0（2020-05-18）

break change

• 为支持easycom模式，修改组件位置

  新特性

• 增加evan-radio-popup组件

  问题修复

• 修复uni-icons更新导致的图标偏大的问题

v1.1.0（2020-03-03）

• 增加clearable属性，如果为true当再次点击选中的选项可以取消选中状态

v1.0.0（2020-01-19）

• 第一个版本

平台兼容性

evan-radio

uniapp单选框组件，支持双向数据绑定，支持自定义icon
测试过微信小程序、app（包括nvue模式）、h5
试过支付宝小程序暂不支持
其他未说明平台也可理解为暂不支持

1.基本用法

<template>
    <evan-radio v-model="baseValue" label="base1">基础用法1</evan-radio>
    <evan-radio v-model="baseValue" label="base2">基础用法2</evan-radio>
    <evan-radio-group v-model="color">
        <evan-radio v-for="item in colorList" :key="item.value" :label="item.value">{{item.label}}</evan-radio>
    </evan-radio-group>
</template>
<script>
export default{
    data(){
        return{
            baseValue:'base1',
            color: 'red',
            colorList: [{
                    label: '红色',
                    value: 'red'
                },
                {
                    label: '绿色',
                    value: 'green'
                },
                {
                    label: '蓝色',
                    value: 'blue'
                },
                {
                    label: '粉色',
                    value: 'pink'
                },
                {
                    label: '黑色',
                    value: 'black'
                }
            ]
        }
    }
}
</script>

2.更多用法

参考github demo中的用法

3.注意点

1.nvue模式下radio的文本需要包裹在text组件中

<evan-radio v-model="value">单选框1</evan-radio>
<evan-radio v-model="value"><text class="your-class">单选框2</text></evan-radio>

2.通过slot方式自定义图标时两种状态如果是某个图标的显示与隐藏，在外层套一个view，不然在h5下有问题

<evan-radio v-model="value">
   <text>完全自定义图标</text>
    <template slot="icon">
        <uni-icons type="chat" size="20" :color="value==='value1'?'#108ee9':'#c8c9cc'"></uni-icons>
    </template>
</evan-radio>

<evan-radio v-model="value">
    <text>完全自定义图标</text>
    <template slot="icon">
        <view>
            <uni-icons v-if="value==='value1'" type="checkmarkempty" size="30" color="#108ee9"></uni-icons>
        </view>
    </template>
</evan-radio>

3.EvanRadioPopup中使用到了解构插槽，目前uniapp似乎在这一块问题还比较多，如果要在同一个页面使用多个EvanRadioPopup组件时记得要import多个，不然目前slot中的内容的样式除了第一个都会被最后一个影响，预计官方在下个版本修复，参考这里

<evan-radio-popup></evan-radio-popup>
<evan-radio-popup2></evan-radio-popup2>
<evan-radio-popup3></evan-radio-popup3>

import EvanRadioPopup from '@/components/evan-checkbox/evan-checkbox-popup.vue'
import EvanRadioPopup2 from '@/components/evan-checkbox/evan-checkbox-popup.vue'
import EvanRadioPopup3 from '@/components/evan-checkbox/evan-checkbox-popup.vue'
export default{
    components:{
        EvanRadioPopup,
        EvanRadioPopup2,
        EvanRadioPopup3
    }
}

4.如果层级出现问题去调一下uniPopup组件的层级试试（uniPopup组件推荐将popup写在其他元素后面，但是目前是在组件中的，因此如果嵌套比较深可能无法弹出）

evan-radio props

evan-radio methods

evan-radio slot

evan-radio-group props

evan-radio-group events

evan-radio-popup props

evan-radio-popup slot

evan-radio-popup events