Element UI之Radio单选框组样式 radio单选框组实现

转载

mob64ca13f87273 2024-02-17 17:55:05

文章标签 javascript css3 html 单选框可选值 文章分类 机器学习人工智能

1. Radio单选框

1.1. 在一组备选项中进行单选。

1.2. Radio属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	无	无
label	Radio的value	string / number / boolean	无	无
disabled	是否禁用	boolean	无	false
border	是否显示边框	boolean	无	false
size	单选框组尺寸, 仅对按钮形式的Radio或带有边框的Radio有效	string	medium / small / mini	无
name	原生name属性	string	无	无

1.3. Radio事件

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的Radio label值

1.4. Radio-group属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string / number / boolean	无	无
size	单选框组尺寸, 仅对按钮形式的Radio或带有边框的Radio有效	string	medium / small / mini	无
disabled	是否禁用	boolean	无	false
text-color	按钮形式的Radio激活时的文本颜色	string	无	#ffffff
fill	按钮形式的Radio激活时的填充色和边框色	string	无	#409EFF

1.5. Radio-group事件

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的Radio label值

1.6. Radio-button属性

参数	说明	类型	可选值	默认值
label	Radio的value	string / number	无	无
disabled	是否禁用	boolean	无	false
name	原生name属性	string	无	无

2. Radio单选框例子

2.1. 使用脚手架新建一个名为element-ui-radio的前端项目, 同时安装Element插件。

Element UI之Radio单选框组样式 radio单选框组实现_单选框

2.2. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Radio from '../components/Radio.vue'
import ButtonRadio from '../components/ButtonRadio.vue'
import BorderRadio from '../components/BorderRadio.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Radio' },
  { path: '/Radio', component: Radio },
  { path: '/ButtonRadio', component: ButtonRadio },
  { path: '/BorderRadio', component: BorderRadio }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Radio.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>要使用Radio组件, 只需要设置v-model绑定变量, 选中意味着变量的值为相应Radio label属性的值, label可以是String、Number或Boolean。</h4>
    <template>
      <el-radio v-model="base_radio" label="男" @change="radioChange">男</el-radio>
      <el-radio v-model="base_radio" label="女" @change="radioChange">女</el-radio>
    </template>

    <h1>禁用状态-单选框不可用的状态</h1>
    <h4>只要在el-radio元素中设置disabled属性即可, 它接受一个Boolean, true为禁用。</h4>
    <template>
      <el-radio disabled v-model="disabled_radio" :label="true">男</el-radio>
      <el-radio disabled v-model="disabled_radio" :label="false">女</el-radio>
    </template>

    <h1>单选框组-适用于在多个互斥的选项中选择的场景</h1>
    <h4>结合el-radio-group元素和子元素el-radio可以实现单选组, 在el-radio-group中绑定v-model, 在el-radio中设置好label即可, 无需再给每一个el-radio绑定变量, 另外, 还提供了change事件来响应变化, 它会传入一个参数value。</h4>
    <template>
      <el-radio-group v-model="group_radio">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
        <el-radio :label="3">未知</el-radio>
      </el-radio-group>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      base_radio: '男',
      disabled_radio: false,
      group_radio: 3
    }
  },
  methods: {
    radioChange (val) {
      console.log(val)
    }
  }
}
</script>

2.4. 在components下创建ButtonRadio.vue

<template>
  <div>
    <h1>按钮样式</h1>
    <h4>只需要把el-radio元素换成el-radio-button元素即可, 此外, Element 还提供了size属性。</h4>
    <div>
      <el-radio-group v-model="button_radio1" text-color="#F56C6C" fill="#67C23A" @change="radioGroupChange">
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="button_radio2" size="medium">
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="上海" ></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="button_radio3" size="small">
        <el-radio-button label="北京" disabled ></el-radio-button>
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="button_radio4" disabled size="mini">
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      button_radio1: '北京',
      button_radio2: '上海',
      button_radio3: '广州',
      button_radio4: '深圳'
    }
  },
  methods: {
    radioGroupChange (val) {
      console.log(val)
    }
  }
}
</script>

2.5. 在components下创建BorderRadio.vue

<template>
  <div>
    <h1>带有边框</h1>
    <h4>设置border属性可以渲染为带有边框的单选框。</h4>
    <div>
      <el-radio v-model="border_radio1" label="男" border>男</el-radio>
      <el-radio v-model="border_radio1" label="女" border>女</el-radio>
    </div>
    <div style="margin-top: 20px">
      <el-radio v-model="border_radio2" label="男" border size="medium">男</el-radio>
      <el-radio v-model="border_radio2" label="女" border size="medium">女</el-radio>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="border_radio3" size="small">
        <el-radio label="男" border>男</el-radio>
        <el-radio label="女" border disabled>女</el-radio>
      </el-radio-group>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="border_radio4" size="mini" disabled>
        <el-radio label="男" border>男</el-radio>
        <el-radio label="女" border>女</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      border_radio1: '男',
      border_radio2: '男',
      border_radio3: '男',
      border_radio4: '男'
    }
  }
}
</script>

2.6. 运行项目, 访问http://localhost:8080/#/Radio

Element UI之Radio单选框组样式 radio单选框组实现_单选框_02