Radio

基础渲染

备选项1 备选项2

<template>
  <div>
    <d-radio v-model="radioVal1" :label="1">备选项1</d-radio>
    <d-radio v-model="radioVal1" :label="2">备选项2</d-radio>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radioVal1: 1
      }
    },

    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

禁用状态

备选项1 备选项2

<template>
  <div>
    <d-radio v-model="radioVal1" disabled :label="1">备选项1</d-radio>
    <d-radio v-model="radioVal1" disabled :label="2">备选项2</d-radio>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radioVal1: 1
      }
    },

    methods: {
      handleClick() {
        alert('hello');
      },
    },
  };
</script>

状态变化

备选项1 备选项2

<template>
  <div>
    <d-radio v-model="radioVal1" :label="1" @click="handleClick">备选项1</d-radio>
    <d-radio v-model="radioVal1" :label="2" @click="handleClick">备选项2</d-radio>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        radioVal1: 1
      }
    },

    methods: {
      handleClick(value) {
        alert(value);
      },
    },
  };
</script>

API

属性

名称	说明	类型	默认值
value v-model	当前选中项的标识符，与label值一致时呈选中状态	string | number | boolean	false
label	标识符，与v-model值一致时呈选中状态	string | number | boolean
disabled	是否禁用	boolean	false

插槽

无

事件

名称	说明	参数
click	点击时触发	名称 说明 类型 e 选中状态值 any

贡献者

无