<template>
<div :id="id">
   <ul>
      <li>
         <p>基础用法-双向绑定测试 {{radio}}</p>
         <poi-input class="disib w100" v-model="radio" placeholder="请输入内容" size="mini"></poi-input>
         <poi-radio v-model="radio" label="1">备选项</poi-radio>
         <poi-radio v-model="radio" label="2">备选项</poi-radio>
      </li>
      <li>
         <p>禁用状态 {{radio1}}</p>
         <poi-radio disabled v-model="radio1" label="1">备选项1</poi-radio>
         <poi-radio disabled v-model="radio1" label="2">备选项2</poi-radio>
         <poi-radio v-model="radio1" label="3">备选项3</poi-radio>
      </li>
      <li>
         <p>单选框组 {{radio2}}</p>
         <poi-radio-group v-model="radio2">
            <poi-radio label="1">备选项</poi-radio>
            <poi-radio label="2">备选项</poi-radio>
            <poi-radio label="3">备选项</poi-radio>
         </poi-radio-group>
      </li>
      <li>
         <p>按钮样式 {{radio3}}</p>
         <div style="margin-top: 20px">
            <poi-radio-group v-model="radio3" size="medium">
               <poi-radio-button label="上海" ></poi-radio-button>
               <poi-radio-button label="北京"></poi-radio-button>
               <poi-radio-button label="广州"></poi-radio-button>
               <poi-radio-button label="深圳"></poi-radio-button>
            </poi-radio-group>
         </div>
         <div style="margin-top: 20px">
            <poi-radio-group v-model="radio3" size="small">
               <poi-radio-button label="上海" ></poi-radio-button>
               <poi-radio-button label="北京"></poi-radio-button>
               <poi-radio-button label="广州"></poi-radio-button>
               <poi-radio-button label="深圳"></poi-radio-button>
            </poi-radio-group>
         </div>
         <div style="margin-top: 20px">
            <poi-radio-group v-model="radio3" size="mini">
               <poi-radio-button label="上海" ></poi-radio-button>
               <poi-radio-button label="北京"></poi-radio-button>
               <poi-radio-button label="广州"></poi-radio-button>
               <poi-radio-button label="深圳"></poi-radio-button>
            </poi-radio-group>
         </div>
      </li>
      <li>
         <p>带边框 {{radio4}}</p>
         <div>
            <poi-radio v-model="radio1" label="1" border>备选项1</poi-radio>
            <poi-radio v-model="radio1" label="2" border>备选项2</poi-radio>
         </div>
         <div style="margin-top: 20px">
            <poi-radio v-model="radio2" label="1" border size="medium">备选项1</poi-radio>
            <poi-radio v-model="radio2" label="2" border size="medium">备选项2</poi-radio>
         </div>
         <div style="margin-top: 20px">
            <poi-radio-group v-model="radio3" size="small">
               <poi-radio label="1" border>备选项1</poi-radio>
               <poi-radio label="2" border disabled>备选项2</poi-radio>
            </poi-radio-group>
         </div>
         <div style="margin-top: 20px">
            <poi-radio-group v-model="radio4" size="mini" disabled>
               <poi-radio label="1" border>备选项1</poi-radio>
               <poi-radio label="2" border>备选项2</poi-radio>
            </poi-radio-group>
         </div>
      </li>
   </ul>   
</div>   
</template>
<script>
export default {
   data(){
      return{
         id:'radioText',

         radio:"1",
         radio1:"2",
         radio2:"2",
         radio3:"北京",
         radio4:'1',
      }
   }
}
</script>
<style scoped>
#radioText{
   
}
#radioText .w100{
 width:100px;
}
</style>
