# 4.7 单选列表（Radio List）

单选组组件

# 实例

# 基础用法

<template>
  <div class="dof-demo">
    <dof-minibar
      title="Radio-list"
      background-color="#0092d7"
      text-color="#ffffff"
      :isImage="true"
      :left-button="leftButton"
    ></dof-minibar>
    <scroller class="scroller">
      <title title="dof-radio-list"></title>
      <dof-catalog title="Radio可选"></dof-catalog>
      <dof-radio-list :list="list" @dofRadioListChecked="dofRadioListChecked"></dof-radio-list>
      <text class="radio-text">checkedItem: {{ checkedInfo }}</text>
      <category title="Radio不可选"></category>
      <dof-radio-list :list="list2"></dof-radio-list>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
}

.scroller {
  flex: 1;
}

.radio-text {
  font-size: 30px;
  color: #333333;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 24px;
}
</style>

<script>
import { DofRadioList, DofMinibar, DofCatalog } from 'dolphin-intl-ui'
import Title from 'src/_mods/title.vue'
import { setTitle } from 'src/_mods/set-nav'

export default {
  components: { Title, DofCatalog, DofRadioList, DofMinibar },
  data: () => ({
    leftButton: '/assets/image/header/tab_back_white_1.png',
    list: [
      { title: '选项1', value: 1 },
      { title: '选项2', value: 2, checked: true },
      { title: '选项3', value: 3 },
      { title: '选项4', value: 4 }
    ],
    list2: [
      { title: '未选不可修改', value: 5, disabled: true },
      { title: '已选不可修改', value: 6, disabled: true, checked: true }
    ],
    config: {
      checkedIcon: 'https://gw.alicdn.com/tfs/TB1TARHdf6H8KJjSspmXXb2WXXa-31-30.png',
      disabledIcon: 'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png',
      checkedColor: '#000000'
    },
    checkedInfo: { title: '选项2', value: 2, oldIndex: -1, index: 1 }
  }),
  created() {
    setTitle('Radio')
  },
  methods: {
    dofRadioListChecked(e) {
      this.checkedInfo = e
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

# Attributes

Prop Type Required Default Description
list Array N [] 选项列表，注1
need-show-top-border Boolean N false 是否显示上边框
need-show-last-bottom-border Boolean N false 是否显示最后一项的下边框
type String N '' 主题类型，可选值如 smarthome、tsmartlife 等
is-rtl Boolean N false 是否开启RTL（从右到左）布局
is-full-border Boolean N false 是否显示完整边框
is-show-border Boolean N false 是否显示边框

注1: list

const list=[
        { title: '选项1', value: 1 },
        { title: '选项2', value: 2, checked: true },
        { title: '未选不可修改', value: 5, disabled: true },
        { title: '选项3', value: 3 },
        { title: '选项4', value: 4 },
        // 可传入 productImg 自定义图标
        { title: '选项5', value: 6, productImg: 'https://example.com/icon.png' }
      ];
1
2
3
4
5
6
7
8
9

注2: list 中每个 item 支持的字段

字段 类型 说明
title String 选项标题
value Any 选项值
checked Boolean 是否选中
disabled Boolean 是否禁用
productImg String 自定义选中/未选中图标地址（smarthome/tsmartlife 主题下生效）

# Events

事件名 说明 回调参数
dofRadioItemChecked 选择时触发 e e.value e.title e.oldIndex e.index

← 4.8 多选框（Check box） →