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 属性:

参数类型说明可选值默认值
labelRadio 的 valuestring / number / boolean
disabled是否禁用booleanfalse
border是否显示边框booleanfalse
sizeRadio 的尺寸,仅在 border 为真时有效stringmedium / small / mini
name原生 name 属性string

el-radio 事件:

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

el-radio-group 属性:

参数类型说明可选值默认值
size单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效stringmedium / small / mini
disabled是否禁用booleanfalse
text-color按钮形式的 Radio 激活时的文本颜色stringffffff
fill按钮形式的 Radio 激活时的填充色和边框色string409EFF

el-radio-group 事件:

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

el-radio-button 属性:

参数类型说明可选值默认值
labelRadio 的 valuestring / number
disabled是否禁用booleanfalse
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">


  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值