<template>
<div>
<el-row class="ml-row">
全部地区:
<el-radio-group v-model="radio1" @change="getValue()">
<el-radio-button class="ml-top-button" :label="1" plain>全部</el-radio-button>
<el-radio-button class="ml-top-button" :label="2">内地</el-radio-button>
<el-radio-button class="ml-top-button" :label="3">韩剧</el-radio-button>
</el-radio-group>
</el-row>
<el-row class="ml-row">
全部年份:
<el-radio-group v-model="radio2" @change="getValue()">
<el-radio-button class="ml-top-button" :label="1" plain>全部</el-radio-button>
<el-radio-button class="ml-top-button" :label="2">2022</el-radio-button>
<el-radio-button class="ml-top-button" :label="3">2021</el-radio-button>
</el-radio-group>
</el-row>
<el-row class="ml-row">
全部资费:
<el-radio-group v-model="radio3" @change="getValue()">
<el-radio-button class="ml-top-button" :label="1" plain>全部</el-radio-button>
<el-radio-button class="ml-top-button" :label="2">免费</el-radio-button>
<el-radio-button class="ml-top-button" :label="3">付费</el-radio-button>
</el-radio-group>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
radio1: 1,
radio2: 1,
radio3: 1,
}
},
methods: {
getValue () {
console.log(this.radio);
},
}
};
</script>
<style lang="scss">
.ml-row {
margin-bottom: 5px;
}
.el-radio-button__inner {
// width: 82px;
height: 36px;
border-radius: 4px 0px 0px 4px;
border: 1px solid rgba(0, 0, 0, 0) !important;
border-radius: 2px !important;
background-color: rgba(0, 0, 0, 0);
font-size: 14px;
font-weight: 400;
color: #606677;
line-height: 14px;
outline: none;
box-shadow: none;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
background: rgba(0, 0, 0, 0);
border: 1px solid #3E7BFA !important;
color: #3E7BFA;
line-height: 14px;
outline: none;
box-shadow: none;
}
.ml-top-button {
border-color: #ffffff;
background: rgba(0, 0, 0, 0);
font-size: 16px;
margin: 0 10px 0 10px;
}
</style>

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现