基于vue和elementui实现的radio选择框多款效果-html代码-BFW代码库

基于vue和elementui实现的radio选择框多款效果

代码语言：html

代码描述：基于vue和elementui实现的radio选择框多款效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>element-ui常用单选按钮元素</title>

    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/elementui.css">

</head>
<body>
    <div id="myVue">
        <h2>一款通用单选，基于element-ui</h2>
        <p>
            1.基础用法
        </p>
        <template>
            <el-radio v-model="radio" label="1">备选项</el-radio>
            <el-radio v-model="radio" label="2">备选项</el-radio>
        </template>
        <p>
            2.禁用状态
        </p>
        <template>
            <el-radio disabled v-model="radio1" label="禁用">禁用项</el-radio>
            <el-radio v-model="radio1" label="选中且禁用">备选项</el-radio>
        </template>
        <p>
            3.单选框组
        </p>
        <template>
            <el-radio-group v-model="radio2">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
                <el-radio :label="9">备选项</el-radio>
            </el-radio-group>
        </template>
        <p>
            4.按钮样式
        </p>
        <template>
            <div>
                <el-radio-group v-model="radio3">
                    <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="radio4" 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="radio5" size="small">
                    <el-radio-button label="上海"></el-radio-button>
                    <el-radio-button label="北京" disabled></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="ra.........完整代码请登录后点击上方下载按钮下载查看