Element-UI el-radio-group 组件事件详解与代码示例

Element-UI el-radio-group 组件事件详解

在使用 Element-UI 构建表单时，el-radio-group 组件是一个常用的选择器组件。了解其提供的事件，可以帮助我们更加灵活地处理用户交互，实现更丰富的功能。

本文将详细介绍 el-radio-group 组件的常用事件，并提供简洁易懂的代码示例。

1. 值改变事件

change: 当选中值发生变化时触发。
input: 与 change 事件类似，也用于监听选中值变化。

<template>
  <el-radio-group v-model='radioValue' @change='handleChange' @input='handleInput'>
    <el-radio label='选项一'></el-radio>
    <el-radio label='选项二'></el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      radioValue: ''
    };
  },
  methods: {
    handleChange(value) {
      console.log('change event:', value);
    },
    handleInput(value) {
      console.log('input event:', value);
    }
  }
};
</script>

2. 焦点事件

blur: 当 el-radio-group 失去焦点时触发。
focus: 当 el-radio-group 获得焦点时触发。

<template>
  <el-radio-group @blur='handleBlur' @focus='handleFocus'>
    </el-radio-group>
</template>

<script>
export default {
  methods: {
    handleBlur() {
      console.log('blur event');
    },
    handleFocus() {
      console.log('focus event');
    }
  }
};
</script>

3. 鼠标事件

click: 当 el-radio-group 被点击时触发。
dblclick: 当 el-radio-group 被双击时触发。
mouseover: 当鼠标移入 el-radio-group 时触发。
mouseout: 当鼠标移出 el-radio-group 时触发。
mouseenter: 当鼠标进入 el-radio-group 时触发。
mouseleave: 当鼠标离开 el-radio-group 时触发。
contextmenu: 当在 el-radio-group 上点击鼠标右键时触发。

<template>
  <el-radio-group @click='handleClick'></el-radio-group>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('click event');
    }
  }
};
</script>

4. 键盘事件

keydown: 当按下键盘按键时触发。
keyup: 当释放键盘按键时触发。
keypress: 当按下并释放键盘按键时触发。

<template>
  <el-radio-group @keydown.enter='handleSubmit'>
   </el-radio-group>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      console.log('submit!');
    }
  }
};
</script>

5. 其他事件

select: 当选中 el-radio-group 的某个选项时触发。

<template>
  <el-radio-group @select='handleSelect'>
   </el-radio-group>
</template>

<script>
export default {
  methods: {
    handleSelect(value) {
      console.log('selected:', value);
    }
  }
};
</script>

总结

本文介绍了 el-radio-group 组件的常用事件，并提供了相应的代码示例。希望这些内容能够帮助你更好地理解和使用 el-radio-group 组件，构建出功能更加完善的 Web 应用。