vue组件 - 多级互斥按钮的实现

多级互斥按钮的实现

本案例自定义了一个按钮组件, 按钮主要提供了多级点击效果, 按钮组间的按钮是互斥关系.

实现功能:

  1. 按钮互斥效果, 只有一个按钮处于激活状态
  2. 当功能按钮处于未选中时, 默认选中按钮(default-checked)处于激活状态
  3. 按钮可以设置多级点击, 并派发出 1, 2, 3...
  4. 可以设置快捷键,本例为 ESC, f1...
  5. 本文的按钮样式也可参考, 渐变圆角边框以及斜切实现

按钮组件采用 typescript 编写

按钮组件




应用

在按钮组中,即按钮的父组件中

代码中省略了组件引入的相关代码

// 当然这里可以定义一个数组,使用v-for循环, 可以更加方便的配置快捷键
 
重置 边缘增强 平滑处理 有机物剔除 无机物剔除 黑白 反色 超级增强 高能穿透 低能穿透

以上几个按钮是互斥关系, 并且实现了多级点击效果

效果如下:

grade_button.gif

你可能感兴趣的:(vue.js,javascript,typescript,按钮标签,组件库)