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

.grade-button-component{显示：flex；对齐项目：居中；证明内容：居中；//border:2pxsolid#DCDFE6;背景：线性渐变（向右，#0d90c3，#0358ad）；边界半径：5px；溢出：隐藏；游标：指针；变换：倾斜（-20deg）；.content{显示：flex;宽度：计算（100%-4px）；高度：计算（100%-4px）；背景：#0E1829；边界半径：8px；框阴影：0025pxrgba(7,117,188,0.8)插图；//溢出：隐藏；.text{变换：倾斜（20度）；宽度：100%；高度：100%；显示：弹性；证明内容：居中；对齐-项目：中心；颜色：#ffffff；字体大小：14px；字母间距：1px；文本对齐：居中；跨度{颜色：#28e3ff；字母间距：0；}}.grade{宽度：8%；高度：100%；显示：弹性；弹性方向：列反转；&-item{高度：100%；border-left:1pxsolid#0d92cb;border-top:1pxsolid#0d92cb;&:first-of-type(){border-bottom:none}&:last-of-type{border-top:none}}}}}.active-class{//border:1pxsolidrgb(37,64,132);//背景：rgba(37,64,132,0.2);背景：线性渐变（向右，#ffbb38，#713b0c）；.content{box-shadow:0020pxrgba(255,187,56,.7)inset;.text{跨度{颜色：#ffb849；}}.grade{&-item{border-left:1pxsolid#eeac34;border-top:1pxsolid#eeac34;}}}}多级互斥按钮的实现本例自定义一个按钮组件。按钮主要提供多级点击效果，按钮组之间的按钮是互斥的。实现的功能：按钮互斥效果，只有一个按钮激活，当功能按钮未选中时，激活默认选中的按钮（default-checked）。按钮可以设置多级点击，发送1,2,3...设置快捷键，本例为ESC,f1...本文按钮样式也可以参考。渐变圆角边框和斜角用于实现按钮组件。Typescript用于编写按钮组件.grade-button-component{显示：flex；对齐项目：居中；证明内容：居中；//border:2pxsolid#DCDFE6;背景：线性渐变（向右，#0d90c3，#0358ad）；边界半径：5px；溢出：隐藏；游标：指针；变换：倾斜（-20deg）；.content{显示：flex;宽度：计算（100%-4px）；高度：计算（100%-4px）；背景：#0E1829；边界半径：8px；框阴影：0025pxrgba(7,117,188,0.8)插图；//溢出：隐藏；.text{变换：倾斜（20度）；宽度：100%；高度：100%；显示：弹性；证明内容：居中；对齐-项目：中心；颜色：#ffffff；字体大小：14px；字母间距：1px；文本对齐：居中；跨度{颜色：#28e3ff；字母间距：0；}}.grade{宽度：8%；高度：100%；显示：弹性；弹性方向：列反转；&-item{高度：100%；border-left:1pxsolid#0d92cb;border-top:1pxsolid#0d92cb;&:first-of-type(){border-bottom:none}&:last-of-type{border-top:none}}}}}.active-class{//border:1pxsolidrgb(37,64,132);//背景：rgba(37,64,132,0.2);背景：线性渐变（向右，#ffbb38，#713b0c）；.content{box-shadow:0020pxrgba(255,187,56,.7)inset;.text{跨度{颜色：#ffb849；}}.grade{&-item{border-left:1pxsolid#eeac34;border-top:1pxsolid#eeac34;}}}}应用在按钮组中，即在按钮的父组件代码中省略组件引入的相关代码//当然这里也可以定义一个数组，配置快捷键更方便使用v-for循环重置边缘增强平滑有机物去除无机物去除黑白反色超级增强高能量穿透低能量穿透