<template>
|
<div class="lin-container">
|
<div class="lin-title">Radio 单选框</div>
|
<div class="lin-wrap-ui">
|
<el-card class="box-card" style="margin-bottom:50px;">
|
<div slot="header"><span>基础用法</span></div>
|
<el-row>
|
<el-col :span="12">
|
<el-radio v-model="radio" label="1">备选项</el-radio>
|
<el-radio v-model="radio" label="2">备选项</el-radio>
|
</el-col>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ base }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card class="box-card" style="margin-bottom:50px;">
|
<div slot="header"><span>禁用状态</span></div>
|
<el-row>
|
<el-col :span="12">
|
<el-radio disabled v-model="radio9" label="禁用">备选项</el-radio>
|
<el-radio disabled v-model="radio9" label="选中且禁用">备选项</el-radio>
|
</el-col>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ disabled }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card class="box-card" style="margin-bottom:50px;">
|
<div slot="header"><span>单选框组</span></div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-radio-group v-model="radio0">
|
<el-radio :label="3">备选项</el-radio>
|
<el-radio :label="6">备选项</el-radio>
|
<el-radio :label="9">备选项</el-radio>
|
</el-radio-group>
|
</el-col>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ group }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card class="box-card" style="margin-bottom:50px;">
|
<div slot="header"><span>按钮样式</span></div>
|
<el-row>
|
<el-col :span="12">
|
<div>
|
<el-radio-group v-model="radio1">
|
<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:20px 0px;">
|
<el-radio-group v-model="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:20px 0px;">
|
<el-radio-group v-model="radio3" 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>
|
<el-radio-group v-model="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>
|
</el-col>
|
</el-row>
|
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ button }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
|
<el-card class="box-card" style="margin-bottom:50px;">
|
<div slot="header"><span>尺寸</span></div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div>
|
<el-radio v-model="radio5" label="1" border>备选项1</el-radio>
|
<el-radio v-model="radio5" label="2" border>备选项2</el-radio>
|
</div>
|
<div style="margin: 20px 0px;">
|
<el-radio v-model="radio6" label="1" border size="medium">备选项1</el-radio>
|
<el-radio v-model="radio6" label="2" border size="medium">备选项2</el-radio>
|
</div>
|
<div style="margin: 20px 0px;">
|
<el-radio-group v-model="radio7" size="small">
|
<el-radio label="1" border>备选项1</el-radio>
|
<el-radio label="2" border disabled>备选项2</el-radio>
|
</el-radio-group>
|
</div>
|
<div>
|
<el-radio-group v-model="radio8" size="mini" disabled>
|
<el-radio label="1" border>备选项1</el-radio>
|
<el-radio label="2" border>备选项2</el-radio>
|
</el-radio-group>
|
</div>
|
</el-col>
|
</el-row>
|
<el-collapse>
|
<el-collapse-item title="查看代码" name="2">
|
<div style="white-space: pre-wrap;">{{ size }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: '',
|
components: {},
|
data() {
|
return {
|
radio: '1',
|
radio0: 3,
|
radio1: '上海',
|
radio2: '上海',
|
radio3: '上海',
|
radio4: '上海',
|
radio5: '1',
|
radio6: '1',
|
radio7: '1',
|
radio8: '1',
|
radio9: '选中且禁用',
|
base: `
|
<el-radio v-model="radio" label="1">备选项</el-radio>
|
<el-radio v-model="radio" label="2">备选项</el-radio>`,
|
disabled: `
|
<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
|
<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>`,
|
group: `
|
<el-radio-group v-model="radio">
|
<el-radio :label="3">备选项</el-radio>
|
<el-radio :label="6">备选项</el-radio>
|
<el-radio :label="9">备选项</el-radio>
|
</el-radio-group>`,
|
button: `
|
<el-radio-group v-model="radio1">
|
<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>
|
|
<el-radio-group v-model="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>
|
|
<el-radio-group v-model="radio3" 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>
|
|
<el-radio-group v-model="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>`,
|
size: `
|
<el-radio v-model="radio1" label="1" border>备选项1</el-radio>
|
<el-radio v-model="radio1" label="2" border>备选项2</el-radio>
|
|
<el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
|
<el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
|
|
<el-radio-group v-model="radio3" size="small">
|
<el-radio label="1" border>备选项1</el-radio>
|
<el-radio label="2" border disabled>备选项2</el-radio>
|
</el-radio-group>
|
|
<el-radio-group v-model="radio4" size="mini" disabled>
|
<el-radio label="1" border>备选项1</el-radio>
|
<el-radio label="2" border>备选项2</el-radio>
|
</el-radio-group>`,
|
}
|
},
|
// 计算属性设置
|
computed: {},
|
// 数据变更监听
|
watch: {},
|
mounted() {
|
this.init()
|
},
|
// 当页面使用路由参数时, 参数部分变化触发的动作在本函数中操作
|
// https://router.vuejs.org/zh/guide/advanced/navigation-guards.htmll#组件内的守卫
|
// beforeRouteUpdate(to, from, next) {
|
// // this.name = to.params.name
|
// // this.init()
|
// // next()
|
// },
|
methods: {
|
// 执行获取数据等初始化动作
|
init() {},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../assets/style/container.scss';
|
</style>
|
