Emui

# 使用

# 基本使用

要使用radio组件，只需要设置emui-radio-group v-model绑定变量，选中意味着变量的值为相应radio label属性的值，label可以是String、Number或Boolean。

  <emui-radio-group v-model="address">
          <emui-radio label="上海"></emui-radio>
          <emui-radio label="北京"></emui-radio>
 </emui-radio-group>

<script>
  export default {
    data () {
      return {
        address:""
      };
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Expand Copy

# 禁用状态

只要在emui-radio元素中设置disabled属性即可，它接受一个Boolean，true为禁用。

  <emui-radio-group v-model="address">
          <emui-radio label="上海" disabled></emui-radio>
          <emui-radio label="北京" disabled></emui-radio>
 </emui-radio-group>

<script>
  export default {
    data () {
      return {
        address:""
      };
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Expand Copy

# 子项垂直排放

只需设置emui-radio-group的vertical属性为true

  <emui-radio-group v-model="address" vertical>
          <emui-radio label="上海"></emui-radio>
          <emui-radio label="北京"></emui-radio>
 </emui-radio-group>

<script>
  export default {
    data () {
      return {
        address:""
      };
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Expand Copy

# 单选按钮

   <emui-radio-group v-model="address">
          <emui-radio-button label="北京"></emui-radio-button>
          <emui-radio-button label="上海"></emui-radio-button>
          <emui-radio-button label="西安"></emui-radio-button>
          <emui-radio-button label="杭州"></emui-radio-button>
    </emui-radio-group>

<script>
  export default {
    data () {
      return {
        address:""
      };
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Expand Copy

# Attributes

# 1、radio

属性 属性值 说明
label string / number / boolean radio 的 value
value / v-model string / number / boolean 绑定值
disabled true/false 是否禁用表单
name string 原生 name 属性

# 2、radio-button

属性 属性值 说明
label string / number / boolean radio-button 的 value
disabled true/false 是否禁用表单
value / v-model string / number / boolean 绑定值

# 3、radio-group

属性 属性值 说明
disabled true/false 是否禁用表单
value / v-model string / number / boolean 绑定值
vertical true/false 子项是否垂直排列

← checkbox →