根据状态更改button样式（vue）

最新推荐文章于 2024-07-31 11:41:46 发布

怎么那么菜

最新推荐文章于 2024-07-31 11:41:46 发布

阅读量734

点赞数

文章标签： vue.js 前端 javascript html css

本文链接：https://blog.csdn.net/qq_47686977/article/details/127120980

版权

CSS SCSS mixin 按钮样式设备状态

关键词由CSDN通过智能技术生成

哈哈哈其实就是Css操作

template

<template>
<button
              :class="
                device.type == '在线'
                  ? 'on-line'
                  : device.type == '离线'
                  ? 'off-line'
                  : 'unbound'
              "
            >
              {{ device.type }}
     </button>
</template>

script

export default {
  name: "app",
  data() {
    return {
    device:{
    type :'在线'
  },
};

CSS

<style scoped lang="scss">
@mixin status {
  width: 37px;
  height: 18px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 400;
  line-height: 15px;
  color: rgba(255, 255, 255, 1);
}
.on-line {
  background: rgba(67, 207, 124, 1);
  @include status();
}
.off-line {
  @include status();
  background: rgba(212, 48, 48, 1);
}
//unbound 未绑定的样式
.unbound {
  background: rgba(255, 141, 26, 1);
  width: 45px !important;
  @include status();
}
</style>