ElementUI 是一个为 Vue.js 提供的一套基于 Vue 2.0 的桌面端组件库，它能够帮助开发者快速搭建美观、实用的 Web 界面。在使用 ElementUI 的过程中，我们经常会用到表单组件来收集用户的信息或输入。其中，el-radio 单选按钮组件允许用户从一组选项中选择一个。
在本篇文章中，将介绍如何在 Vue 项目中使用 ElementUI 的 el-radio 组件，并通过实例代码展示如何监听单选按钮组中选项的变化。同时，文章还涉及了使用 Vue 监听屏幕变化并根据变化来调整页面布局的技巧。
el-radio 组件的使用通常需要与 el-radio-group 组合使用，因为 el-radio-group 可以管理一组 el-radio 的状态。在 el-radio-group 中，可以使用 v-model 指令绑定当前选中的值，并通过 @change 事件来监听值的变化。
实例代码如下：
```html
<el-radio-group v-model="radioSex" @change="changeHandler">
<el-radio class="radio" label="man">男</el-radio>
<el-radio class="radio" label="woman">女</el-radio>
</el-radio-group>
```
在上面的代码中，el-radio-group绑定了一个名为radioSex的数据属性，该属性用于存储当前选中的单选按钮的值。当用户改变选中的单选按钮时，changeHandler方法会被触发，并打印出改变后的值。
```javascript
export default {
name: 'Radio',
data() {
return {
radioSex: 'man'
}
},
methods: {
changeHandler(value) {
console.log('改变之后的值是:' + value)
}
}
}
```
在 JavaScript 部分，我们定义了一个名为 Radio 的组件，并通过 data 函数返回了一个包含 radioSex 属性的对象。当 el-radio-group 的选中值变化时，changeHandler 方法就会被调用，并打印出新选中的值。
此外，文章还提到了如何监听屏幕大小的变化，并根据屏幕尺寸调整页面布局或样式。具体来说，可以在 Vue 组件的 mounted 钩子函数中添加一个 window resize 事件监听器，当窗口大小发生变化时执行回调函数来判断当前的屏幕宽度，并据此设置相应的页面样式。
```javascript
mounted() {
window.addEventListener('resize', () => {
if (document.body.clientWidth < 900) {
this.tabposition = 'top';
} else {
this.tabposition = 'left';
}
});
}
```
在这段代码中，我们在组件挂载后添加了一个 resize 事件监听器。该监听器会实时检查当前屏幕宽度，如果宽度小于900像素，则将某个状态属性 this.tabposition 设置为 'top'，否则设置为 'left'。这通常用于控制侧边栏或顶部导航栏的位置。
文章建议将这些处理屏幕变化的逻辑封装到单独的方法中，并在组件销毁前使用 beforeDestroy 钩子函数移除 window resize 事件监听器。这样可以避免在组件销毁后还存在对 window 对象的引用，从而避免内存泄漏的风险。
```javascript
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
}
```
通过上述操作，我们就完成了对 ElementUI el-radio 组件监听选中变化的详细实例代码介绍，同时讲解了监听屏幕变化并根据变化调整页面样式的相关操作。希望这些知识点能帮助到正在使用 Vue 和 ElementUI 开发项目的朋友。
- 1
- 2
前往页