按钮和开关组件

<template>

  <div :style="{ marginLeft, marginTop, marginBottom }">

    <div class="title">{{ title }}</div>

    <div class="div-buttons-button">

      <div

        :class="['button', item.disable ? 'disable' : '']"

        v-for="(item, index) in btnList"

        :key="index"

        @click="btnChange(item)"

      >

        {{ item.name }}

      </div>

    </div>

    <div class="div-buttons-switch">

      <el-switch

        v-model="value"

        active-color="#13ce66"

        inactive-color="#ff4949"

      >

      </el-switch>

      <span>开关</span>

    </div>

  </div>

</template>

<script>

export default {

  name: "buttons",

  data() {

    return {

      btnList: [

        {

          name: "自检",

          disable: false,

        },

        {

          name: "消音",

          disable: true,

        },

        {

          name: "复位",

          disable: false,

        },

      ],

      value: "",

    };

  },

  props: {

    title: {

      type: String,

      default: "远程控制",

    },

    marginLeft: {

      type: String,

      default: "0px",

    },

    marginTop: {

      type: String,

      default: "0px",

    },

    marginBottom: {

      type: String,

      default: "20px",

    },

  },

  mounted() {},

  methods: {

    btnChange(item) {

      if (item.disable) return;

      console.log(1234);

    },

  },

};

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.title {

  font-size: 18px;

  color: #05e6ff;

  display: flex;

  align-items: center;

  margin-bottom: 30px;

  &:before {

    content: "";

    display: block;

    width: 4px;

    height: 18px;

    margin-right: 10px;

    background-color: #05e6ff;

  }

}

.div-buttons-button {

  display: inline-block;

  .button {

    display: inline-block;

    height: 30px;

    line-height: 30px;

    padding: 0px 20px;

    margin-left: 20px;

    // border-radius: 20px;

    cursor: pointer;

    color: #a3afe0;

    background: #203661;

    // border: 1px solid #0293d9;

  }

  .disable {

    color: #666;

    background: #ccc;

  }

  //   .button:hover {

  //     color: #0293d9;

  //     // border: 1px solid #a3afe0;

  //   }

  //   .disable:hover {

  //     color: #666;

  //   }

}

.div-buttons-button :first-child {

  margin-left: 0px;

}

.div-buttons-switch {

  display: inline-block;

  height: 30px;

  line-height: 30px;

  color: #0293d9;

  .el-switch {

    margin-left: 20px;

  }

}

</style>