GG

# gg-radio-tag 单选框 - 标签

gg-radio-tag

单选标签，一般和表单配合使用，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggRadioTag from '@/components/gg-radio-tag/gg-radio-tag.vue'
export default {
    components: {ggRadioTag}
}
1
2
3
4

在 template 中使用组件

# 标签

 <gg-radio-tag label="单选" v-model="formData.radio" :dataLists="radioLists"  />
1
  • 本组件一般用单项选择

script

export default {
  data() {
    return {
      formData: {
        radio: '',
      },
      radioLists: [
          { value: 0, text: '橘子' },
          { value: 1, text: '柠檬' },
          { value: 2, text: '香蕉' },
          { value: 3, text: '苹果' },
          { value: 4, text: '榴莲' }
      ],
    };
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 属性说明

属性名 类型 默认值 说明
label String - 字段名
v-model String - 数据双向绑定
labelWidth Number 60 字段区域宽度，上下排列无效
layout String row 排列方式 ['row','col']
dataType String value 数据类型['value','text']
tip String - 提示
must Boolean false 是否必填
message String - 错误提示
messageDisplay Boolean false 错误提示是否显示
dataLists Array - 选项,有dataUrl时无效
dataUrl String - dataLists的网络请求地址
dataValue String value dataLists中value的标识
datatext String text dataLists中text的标识

# 插件预览地址

← 性别选择 →