Element-Ui组件之Radio 单选框（点击和el-tabs点击）

基础用法

单选框组

<el-radio-group v-model="radio1">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
 </el-radio-group>

• 
  

按钮形式的单选框组

 <el-radio-group v-model="radio2">
    <el-radio-button label="上海"></el-radio-button>
    <el-radio-button label="北京"></el-radio-button>
    <el-radio-button label="广州"></el-radio-button>
    <el-radio-button label="深圳"></el-radio-button>
</el-radio-group>

• 
  

el-radio 属性：

参数	类型	说明	可选值	默认值
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—

el-radio 事件：

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

el-radio-group 属性：

参数	类型	说明	可选值	默认值
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按钮形式的 Radio 激活时的文本颜色	string	—	ffffff
fill	按钮形式的 Radio 激活时的填充色和边框色	string	—	409EFF

el-radio-group 事件：

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

el-radio-button 属性：

参数	类型	说明	可选值	默认值
label	Radio 的 value	string / number	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 属性	string	—	—

<el-radio-button>点击

<el-tab-pane label="By channel" name="second">
 <div class="dashboard-chartjs">
  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
   <el-radio-button  @click.native.prevent="clickBar(1)" label="Recent 7 days"></el-radio-button>
   <el-radio-button  @click.native.prevent="clickBar(2)" label="Recent 30 days"></el-radio-button>
   <el-radio-button  @click.native.prevent="clickBar(3)" label="Recent 12 months"></el-radio-button>
  </el-radio-group>
  <p>Transaction by channel ($)</p>
  <canvas id="canvasq" width="300" height="60"></canvas>
 </div>
</el-tab-pane>

<el-tabs> 点击 

<el-tabs v-model="activeName2" type="card" @tab-click="changeTab">