no message

components/en-checkbox/en-checkbox.vue

@@ -126,9 +126,6 @@ export default {
 
 <style lang="scss" scoped>
   @import url("../static/css/en-common.css");
-  .iconfont {
-    color: #3169FA;
-  }
   .box{
     .input-box {
       display: flex;
@@ -146,6 +143,13 @@ export default {
           flex-wrap: wrap;
           .checkbox-item{
             margin: 6rpx 20rpx 0 6rpx;
+            .iconfont{
+              color: #333333;
+              padding-right: 6rpx;
+            }
+            .icon-ok{
+              color: #3169FA;
+            }
             checkbox{
               display: none;
             }

components/en-radio/en-radio.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left">
+        {{ label }}
+      </view>
+      <view class="input-box-right">
+          <radio-group class="radio-data" @change="radioChange">
+            <label class="radio-item" v-for="(radioItem,index) in radioArr">
+              <radio  :id="name+index" :value="radioItem.id"  />
+              <text  class="iconfont icon-ok" v-if="inputValue===radioItem.id">&#xe608;</text>
+              <text  class="iconfont" v-else> &#xead9;</text>
+              {{radioItem.name}}
+            </label>
+          </radio-group>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-radio',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    label: {
+      type: String,
+      default: '标题'
+    },
+    radioData: {
+      type: Array,
+      default: []
+    },
+    radioKey:{
+      type:String,
+      default:'id'
+    },
+    radioValue:{
+      type:String,
+      default:'name'
+    },
+    disabled: {
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'text'
+    },
+    value: {
+      default: '1'
+    }
+  },
+  data() {
+    return {
+      inputValue: [],
+      radioArr:[],
+    }
+  },
+  components: {},
+  mounted() {
+    this.setValue()
+    this.setRadioData()
+  },
+  watch: {
+    'value': function () {
+      if (this.inputValue !== this.value) {
+        this.setValue()
+      }
+    },
+    'inputValue': function () {
+      this.$emit('input', this.inputValue)
+    }
+  },
+  methods: {
+    radioChange(e){
+      this.inputValue=e.detail.value
+      console.log(this.inputValue)
+    },
+    setRadioData(){
+      if(this.radioData.length<=0){
+        return ;
+      }
+      this.radioData.forEach((item)=>{
+        if(item[this.radioKey] && item[this.radioValue]){
+          this.radioArr.push({
+            'id':item[this.radioKey]+'',
+            'name':item[this.radioValue]
+          })
+        }
+      })
+    },
+    setValue(){
+      this.inputValue = this.value
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+  @import url("../static/css/en-common.css");
+  .box{
+    .input-box {
+      display: flex;
+      align-items: center;
+      .input-box-left {
+        width: 210rpx;
+        min-width: 210rpx;
+        color: #333333;
+      }
+      .input-box-right{
+        display: flex;
+        align-items: center;
+        .radio-data{
+          display: flex;
+          flex-wrap: wrap;
+          .radio-item{
+            margin: 6rpx 20rpx 0 6rpx;
+            .iconfont{
+              color: #333333;
+              padding-right: 6rpx;
+            }
+            .icon-ok{
+              color: #3169FA;
+            }
+            radio{
+              display: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+</style>

pages/index/index.vue

@@ -5,6 +5,7 @@
     <enInput v-model="text" label="用户姓名"></enInput>
     <enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
     <enCheckbox v-model="type"  label="用户爱好" :checkboxData="checkboxData"></enCheckbox>
+    <enRadio v-model="sex"  label="用户性别" :radioData="radioData"></enRadio>
 	</view>
 
 </template>
@@ -13,8 +14,10 @@
   import enInput from "components/en-input/en-input"
   import enSend from "components/en-send/en-send"
   import enCheckbox from "components/en-checkbox/en-checkbox"
+  import enRadio from "components/en-radio/en-radio"
 	export default {
 		components: {
+      enRadio,
       enCheckbox,
       enInput,
       enSend
@@ -24,8 +27,10 @@
         phone:'13900139001',
         text:'asdsa',
         type:[],
+        sex:'1',
         // checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'},{'id':'4','name':'羽毛球'},{'id':'5','name':'乒乓球'},{'id':'6','name':'铅球'},{'id':'7','name':'棒球'},{'id':'8','name':'冰球'},{'id':'9','name':'网球'},{'id':'10','name':'乒乓球'}]
-        checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'}]
+        checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'}],
+        radioData:[{'id':'1','name':'男'},{'id':'2','name':'女'}]
 			}
 		},
     watch:{