Radio单选框

标准单选框

使用 med-s-radio 标签来定义基本的radio按钮

<template>
  <div>
    <div class="base">
      <med-s-radio :formLayout="formLayout" :optionList="optionList"></med-s-radio>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formLayout:{"labelCol":{"span":6},"wrapperCol":{"span":18}},
        optionList:[{"label":"点不了我","value":"0","disabled":true},{"label":"选项2","value":"1"}]
      }
    }
  }
</script>
<style>

</style>

显示代码

按钮单选框

分开：

连续：

使用 med-s-radio 标签来定义基本的radio按钮

<template>
  <div>
    <div class="base">
      分开：<med-s-radio :formLayout="formLayout" :optionList="optionList" buttonType></med-s-radio>
    </div>
    <div class="base">
      连续：<med-s-radio :formLayout="formLayout" :optionList="optionList" buttonType continuous></med-s-radio>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formLayout:{"labelCol":{"span":6},"wrapperCol":{"span":18}},
        optionList:[{"label":"你点不了我","value":"0","disabled":true},{"label":"选项2","value":"1"}]
      }
    }
  }
</script>
<style>

</style>

显示代码

选中事件回调

我是被点击的那个的值：

使用 med-s-radio 标签来定义基本的radio按钮

<template>
  <div>
    <div class="base">
      <med-s-radio :formLayout="formLayout" :optionList="optionList" @change="handleChange"></med-s-radio>
      <div v-show="val">我是被点击的那个的值：{{val}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formLayout:{"labelCol":{"span":6},"wrapperCol":{"span":18}},
        optionList:[{"label":"选项1","value":"0"},{"label":"选项2","value":"1"}],
        val:''
      }
    },
    methods:{
      handleChange(val) {
        console.log(val)
        this.val=val
      }
    }
  }
</script>
<style>

</style>

显示代码

参数列表

参数	方式	示例	解释
optionList	Prop	optionList="[]"	【必填项】选项列表
isFormItem	Prop	isFormItem="false" || 默认值false	是否是用于表单的，参考表单文档中传参
formLayout	Prop	formLayout="{ labelCol: { span: 6 }, wrapperCol: { span: 18 }}"	isFormItem = true生效，用于表单时的布局，标签和选框的布局
validator	Prop	validator="(rule, value, cb) => {if (!value) {cb('必填')}cb()}"	isFormItem = true生效，用于表单时的校验
initialValue	Prop	initialValue="1"	初始选中的值
change	Emit	@change="onChange"	选中事件