Browse Source

fix: 修改 radio demo

lilinsen 5 years ago
parent
commit
472a8dc561
1 changed files with 5 additions and 158 deletions
  1. 5 158
      src/packages/radio/demo.vue

+ 5 - 158
src/packages/radio/demo.vue

@@ -1,136 +1,6 @@
 <template>
   <div class="demo-list">
-    <!-- <h4>Radio基本用法</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio v-model="radioVal" :label="2">备选项</nut-radio>
-        </span>
-      </nut-cell>
-    </div>
-
-    <h4>组合使用Radio</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio v-model="radioVal1" :label="1">备选项1</nut-radio>
-          <nut-radio v-model="radioVal1" :label="2">备选项2</nut-radio>
-        </span>
-        <div slot="desc">radioVal1: {{ radioVal1 }}</div>
-      </nut-cell>
-    </div>
-    <p>组合使用 Radio 时推荐使用 radiogroup 组件,见下方示例</p>
-
-    <h4>RadioGroup基本用法</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radiogroup v-model="radioGroupVal1">
-            <nut-radio label="a">备选项1</nut-radio>
-            <nut-radio label="b">备选项2</nut-radio>
-          </nut-radiogroup>
-        </span>
-      </nut-cell>
-    </div>
-
-    <h4>Radio禁用</h4>
-    <div>
-      <nut-cell>
-        <span slot="title"> 未选中时的禁用状态:<nut-radio :disabled="true" v-model="radioVal2" label="禁用">备选项1</nut-radio> </span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title"> 已选中时的禁用状态:<nut-radio :disabled="true" v-model="radioVal2" label="选中且禁用">备选项2</nut-radio> </span>
-      </nut-cell>
-    </div>
-
-    <h4>RadioGroup整体禁用</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radiogroup v-model="radioGroupVal2" :disabled="true">
-            <nut-radio label="1">备选项1</nut-radio>
-            <nut-radio label="2">备选项2</nut-radio>
-            <nut-radio label="3">备选项3</nut-radio>
-          </nut-radiogroup>
-        </span>
-      </nut-cell>
-    </div>
-
-    <h4>Radio自定义尺寸</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio size="small">小号</nut-radio>
-        </span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio size="base">默认</nut-radio>
-        </span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio size="large">大号</nut-radio>
-        </span>
-      </nut-cell>
-      <p>size可选值:'small', 'base', 'large'</p>
-    </div>
-
-    <h4>RadioGroup整体定义尺寸</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radiogroup v-model="radioGroupVal3" size="large">
-            <nut-radio label="1">备选项1</nut-radio>
-            <nut-radio label="2">备选项2</nut-radio>
-            <nut-radio label="3">备选项3</nut-radio>
-          </nut-radiogroup>
-        </span>
-      </nut-cell>
-    </div>
-
-    <h4>Radio禁用动效</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio :animated="false" v-model="radioVal3" label="a">备选项1</nut-radio>
-        </span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio :animated="false" v-model="radioVal3" label="b">备选项2</nut-radio>
-        </span>
-      </nut-cell>
-      <p>animated 属性值为 false 时,禁用自带动效</p>
-    </div>
-
-    <h4>RadioGroup禁用动效</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radiogroup v-model="radioGroupVal4" :animated="false">
-            <nut-radio label="a">备选项1</nut-radio>
-            <nut-radio label="b">备选项2</nut-radio>
-            <nut-radio label="c">备选项3</nut-radio>
-          </nut-radiogroup>
-        </span>
-      </nut-cell>
-    </div>
-
-    <h4>自定义Class</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio class="my-radio" v-model="radioVal5" label="a">备选项1</nut-radio>
-        </span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title">
-          <nut-radio class="my-radio" v-model="radioVal5" label="b">备选项2</nut-radio>
-        </span>
-      </nut-cell>
-    </div> -->
-    <h4>基本样式</h4>
+    <h4>1. 基本样式</h4>
     <nut-cell>
       <span slot="title">
         <radio-group 
@@ -148,7 +18,7 @@
     <nut-cell>
         <span slot="title"> 选择结果 value: {{labelReslut0}}</span>
       </nut-cell>
-    <h4>按钮单选组输出属性为 value 的值</h4>
+    <h4>2. 按钮单选组输出属性为 value 的值</h4>
     <nut-cell>
         <span slot="title">        
           <radio-group 
@@ -166,7 +36,7 @@
       <nut-cell>
         <span slot="title"> 选择结果 value: {{labelReslut}}</span>
       </nut-cell>
-      <h4>按钮单选组输出属性为 text 的值</h4>
+      <h4>3. 按钮单选组输出属性为 text 的值</h4>
       <nut-cell>
         <span slot="title">        
           <radio-group 
@@ -184,7 +54,7 @@
       <nut-cell>
         <span slot="title"> 选择结果 text: {{labelReslut2}}</span>
       </nut-cell>
-      <h4>列表单选组输出属性为 text 的值</h4>
+      <h4>4. 列表单选组输出属性为 text 的值</h4>
       <nut-cell>
         <span slot="title">        
           <radio-group 
@@ -209,20 +79,7 @@
 import group from './index.vue';
 export default {
   data() {
-    return {
-      radioVal: 1,
-      radioVal1: 2,
-      radioVal2: '选中且禁用',
-      radioVal3: 'b',
-      radioVal4: 'b',
-      radioVal5: 'a',
-      demo6name:'test',
-      demo6value:1,     
-      test:'',
-      radioGroupVal1: 'b',
-      radioGroupVal2: '2',
-      radioGroupVal3: '2',
-      radioGroupVal4: 'c',
+    return {      
       labelList:[
         {
           name:'test',
@@ -263,16 +120,6 @@ export default {
   },
   components:{
     'radio-group':group
-  },
-  watch:{
-    test(val){
-      console.log(val)
-    }
-  },
-  methods: {    
-  },
-  mounted(){
-    
   }
 };
 </script>