radio

基础用法

ykc-radio 的基础用法。

江苏 浙江 上海

<template>    
  <ykc-radio
    :data="defauleData"
    :widthArr="[2, 5, 6]"
    v-model="radioVal.radioVal01"
    @change="radioChange"></ykc-radio>
</template>

<script>
  export default {
     data() {
      return {
        // 初始值
        radioVal: {
          radioVal01: '0',
        },
        // 默认数据
        defauleData: [
          { name: '江苏', id: '0' },
          { name: '浙江', id: '1' },
          { name: '上海', id: '2' },
        ],
      };
    },
    methods:{
      radioChange: val => {
        console.log(val);
      },
    }
  };
</script>

显示代码 复制代码 复制代码

单个禁用

ykc-radio 单个禁用。

江苏 浙江 上海

<template>
  <ykc-radio
    :data="disabledData"
    :widthArr="[2, 5, 6]"
    v-model="radioVal.radioVal02"
    @change="radioChange"></ykc-radio>
</template>

<script>
  export default {
    data() {
      return {
        // 初始值
        radioVal: {
          radioVal02: '1',
        },
        // 禁用数据
        disabledData: [
          { name: '江苏', id: '0' },
          { name: '浙江', id: '1', disabled: true },
          { name: '上海', id: '2' },
        ],
        disabled: true,
      };
    },
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      radioChange: val => {
        console.log(val);
      },
    },
  }
</script>

显示代码 复制代码 复制代码

全部禁用

ykc-radio 全部禁用。

江苏 浙江 上海

<template>
  <ykc-radio
    :data="defauleData"
    :widthArr="[2, 5, 6]"
    v-model="radioVal.radioVal03"
    :disabled="disabled"></ykc-radio>
</template>

<script>
  export default {
    data() {
      return {
        // 初始值
        radioVal: {
          radioVal03: '0',
        },
        defauleData: [
          { name: '江苏', id: '0' },
          { name: '浙江', id: '1' },
          { name: '上海', id: '2' },
        ],
        disabled: true,
      };
    },
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      radioChange: val => {
        console.log(val);
      },
    },
  }
</script>

显示代码 复制代码 复制代码

使用配置configSet

ykc-button 使用配置configSet。

<template>
  <ykc-radio
    :data="configData"
    :widthArr="[2, 5, 6]"
    v-model="radioVal.radioVal04"
    :configSet="configSet"
    @change="radioChange"></ykc-radio>
</template>

<script>
  export default {
    data() {
      return {
        // 初始值
        radioVal: {
          radioVal04: '0',
        },
        // 配置数据
        configData: [
          { label: '江苏', value: '0' },
          { label: '浙江', value: '1' },
          { label: '上海', value: '2' },
        ],
        // 配置项
        configSet: {
          label: 'name',
          value: 'value',
        },
      };
    },
    methods: {
      /**
       * 组件change方法调用信息提示
       */
      radioChange: val => {
        console.log(val);
      },
    },
  };
</script>

显示代码 复制代码 复制代码

Attributes

参数	必填	说明	类型	可选值	默认值	备注
data	是	数据源	Array	—	[]	[ {value:"xxx",id:"xxx",disabled:true/false }, ] value,id:对应的值,disabled:true 表示禁用
widthArr	是	跟数据源对应一致。需要调整样式的 如数据源[{value:'1',id:'1'},{value:'2',id:'2'}]需要调整第二个的宽度为6个字符长度，则widthArr传入[null, 6]	—	—	—	—
v-model	是	绑定值	string	' '	—	—
disabled	否	全部置灰	Boolean	true/false	false	—
configSet	否	配置选项，具体看备注说明	object	—	value,id	配置项为Object,配置数据key,包含label,value属性，列如：{label:'value',value:'id'}

Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	返回选择的value值