Merge branch 'v3-dev' of https://github.com/jdf2e/nutui into v3-dev

src/packages/leftslip/doc.md

@@ -67,7 +67,7 @@ export default {
           <nut-cell class="cell-item" :title="item.title" :sub-title="item.subTitle">
             <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
             <div slot="desc">
-              <p class="timer">{{item.time}}</p>
+              <p class="timer">{{item.time} }</p>
               <p class="badge"><nut-badge :is-dot="item.isDot" :value="item.value" :max="99" top="0px" right="15px"></nut-badge></p>
             </div>
           </nut-cell>
@@ -107,7 +107,7 @@ export default {
 ###  禁止滑动
 ```html
 <div>
-    <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'}}</button>
+    <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'} }</button>
     <nut-leftslip :disabled="isDisable">
         <div slot="slip-main" class="slip-main">左滑触发删除</div>
         <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>

src/packages/radio/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-list">
-    <h4>Radio基本用法</h4>
+    <!-- <h4>Radio基本用法</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -129,40 +129,66 @@
           <nut-radio class="my-radio" v-model="radioVal5" label="b">备选项2</nut-radio>
         </span>
       </nut-cell>
-    </div>    
-    <h4>标签样式</h4>
+    </div> -->
+    <h4>按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
-        <span slot="title">
-          <nut-radio 
-          :type="'list'"           
-          :name="demo6name" 
-          :value="1"
-          :checked="false"
-          >
-          备选项1
-          </nut-radio>
-          <nut-radio 
-          :type="'list'"           
-          :name="demo6name" 
-          :value="2"
-          :checked="false"
-          >
-          备选项2
-          </nut-radio>
-          <nut-radio 
-          :type="'list'"           
-          :name="demo6name" 
-          :value="3"
-          :checked="false"
-          >
-          备选项3
-          </nut-radio>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :name="'test'"
+            :styleType="'label'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="1"    
+            :reslout-attr="'value'"   
+            v-model="labelReslut"                 
+          />
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 value: {{labelReslut}}</span>
+      </nut-cell>
+      <h4>按钮单选组输出属性为 text 的值</h4>
+      <nut-cell>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :styleType="'label'"
+            :name="'test2'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'text'"   
+            v-model="labelReslut2"                 
+          />
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 text: {{labelReslut2}}</span>
+      </nut-cell>
+      <h4>列表单选组输出属性为 value 的值</h4>
+      <nut-cell>
+        <span slot="title">        
+          <group 
+            :list="labelList"
+            :styletype="'list'"
+            :name="'test3'"
+            :effect-key = "'value'"
+            :effect-text="'text'"
+            :checkedIndex="0"    
+            :reslout-attr="'text'"   
+            v-model="labelReslut3"                 
+          />
         </span>
       </nut-cell>
+      <nut-cell>
+        <span slot="title"> 选择结果 text: {{labelReslut3}}</span>
+      </nut-cell>
   </div>
 </template>
 
 <script>
+import group from './index.vue';
 export default {
   data() {
     return {
@@ -172,15 +198,63 @@ export default {
       radioVal3: 'b',
       radioVal4: 'b',
       radioVal5: 'a',
-      demo6value:1,
       demo6name:'test',
+      demo6value:1,     
+      test:'',
       radioGroupVal1: 'b',
       radioGroupVal2: '2',
       radioGroupVal3: '2',
-      radioGroupVal4: 'c'      
+      radioGroupVal4: 'c',
+      labelList:[
+        {
+          name:'test',
+          value:1,
+          text:'亚瑟'
+        },
+        {
+          name:'test',
+          value:2,
+          text:'廉颇'
+        },
+        {
+          name:'test',
+          value:3,
+          text:'东皇太一'
+        },
+        {
+          name:'test',
+          value:4,
+          text:'吕布'
+        },
+        {
+          name:'test',
+          value:5,
+          text:'黑切'
+        },
+        {
+          name:'test',
+          value:6,
+          text:'冰心'
+        }
+      ],
+      labelReslut:"",
+      labelReslut2:"",
+      labelReslut3:""   
     };
   },
-  methods: {}
+  components:{
+    group
+  },
+  watch:{
+    test(val){
+      console.log(val)
+    }
+  },
+  methods: {    
+  },
+  mounted(){
+    
+  }
 };
 </script>
 

src/packages/radio/index.scss

@@ -0,0 +1,10 @@
+.nut-radio{
+    .nut-label{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;        
+        .warper{
+            margin: 5px;
+        }
+    }
+}

src/packages/radio/index.vue

@@ -0,0 +1,69 @@
+<template >
+<div class="nut-radio">
+    <div    class="nut-label" 
+            v-if="list&&list.length>0">
+        <nut-radio   v-for="(item,index) in list" 
+            :key="item[effectKey]"
+            :type="'list'"           
+            :name="name" 
+            :text="item[effectText]"
+            :value="item[effectKey]"  
+            :radioData="item"          
+            :checked="checkedIndex===index"    
+            @radioChange="radioChange"
+            :disabled="disabledValue | disabledFilter"          
+            />
+    </div>
+</div>    
+</template>
+<script>
+export default {
+    name:"radio-group",    
+    props:{     
+        type:String, // radio 展示    
+        list:Array,  // radio 需要的数据信息 
+        checkedIndex:Number, // 初始化选中数组第几个从 0 开始
+        effectKey:String,    // 绑定有效值对应属性 key
+        effectText:String,   // 有效显示文案对应属性 key
+        resloutAttr:String,  // 选择结果展示属性值类型 key 
+        name:String, // radio 标签 name         
+        disabledValue:[String, Number, Boolean,Array] // 禁用的 radio 需要传一个数组
+    },    
+    mounted(){
+        if(this.list&&this.list.length>0){
+            this.$emit('input',this.list[this.checkedIndex][this.resloutAttr])
+        }
+        
+    },
+    methods:{
+        radioChange(obj){            
+            this.$emit('input',obj[this.resloutAttr])
+        }
+    },
+    watch:{
+        list(val){
+            if(val&&val.length>0){
+            this.$emit('input',val[this.checkedIndex][this.resloutAttr])
+        }
+        }
+    },
+    filters:{
+        disabledFilter(obj){
+            if( Object.prototype.toString.apply(obj) === '[object Number]' ) {
+
+            }else if( Object.prototype.toString.apply(obj) === '[object Array]' ) {
+                
+            }else if( Object.prototype.toString.apply(obj) === '[object String]' ) {
+                
+            }else if( Object.prototype.toString.apply(obj) === '[object Boolean]' ) {
+
+            }else{
+
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/packages/radio/radio.scss

@@ -100,7 +100,9 @@
 	line-height: 28px;
 	height: 28px;	
 	position: relative;
-	font-size: 14px;
+	font-size: 14px;	
+	padding:0 15px;
+	cursor: pointer;
 	label{
 		display: inline-block;		
 		padding:0 15px;
@@ -123,6 +125,7 @@
 		color:#969696;
 	}
 	.box-border{
+		box-sizing: border-box;
 		top:0;
 		left: 0;
 		position: absolute;
@@ -141,6 +144,5 @@
 	input:checked +.text-box + .box-border{
 		background: rgba(255,239,235,1);
 		border: 1px solid rgba(225,37,27,1);
-	}
-	
+	}	
 }

src/packages/radio/radio.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="warper">
-  <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
+  <!-- <label v-if="type === 'radio'" :class="['nut-radio', 'nut-radio-size-' + currentSize]" @click="clickEvt">
     <input
       type="radio"
       :value="currentValue"
@@ -10,11 +10,12 @@
       :label="label"
     />
     <span class="nut-radio-label">
+      
       <slot></slot>
     </span>
-  </label>
+  </label> -->
   <div v-if="type === 'list'" class="nut-radio-list">
-      <label for="">
+     
           
           <input
             type="radio"
@@ -24,10 +25,11 @@
             :disabled="isDisabled"
             :label="label"
             :name="name"
+            @input="valChange"
           />
-          <div class="text-box"><slot></slot></div>
+          <div class="text-box">{{text}}<slot></slot></div>
           <div class="box-border"></div>
-      </label>
+      
   </div>
 </div>
   
@@ -40,7 +42,7 @@ export default {
   mixins: [findCptUpward],
   props: {
     value: {
-      type: [String, Number, Boolean],
+      type: [String, Number, Boolean,Function],
       default: false
     },
     checked:{
@@ -66,6 +68,13 @@ export default {
     },
     name:{
       type:String
+    },
+    text:String,
+    radioData:{
+      type:Object,
+      default(){
+
+      }
     }
   },
   data() {
@@ -102,6 +111,16 @@ export default {
         return false;
       }
       this.currentValue = this.label;
+    },
+    valChange(e){  
+
+      // {
+      //   el:e.target,
+      //   value:e.target.value,
+      //   name:e.target.name,
+      // }   
+      let radioData = this.radioData;      
+      this.$emit('radioChange',radioData)
     }
   }
 };