在 Vue JS 中有条件地禁用数量

Question

我正在学习 Vue JS，并且正在尝试条件输入组功能。我做了如下代码。我有 3 种类型的输入组，radio button、select 和 quantity。我想 select 自定义，只有当我选择 type 1 时才启用数量。我已经成功 custom-select，但我做不到。我想当数量被禁用时，我不能点击 + 和 - 并且红色边框变成 #cacaca 颜色。谁能帮我解决这个问题？

Vue.component('base-quantity', {
  template: `
          <div class="quantity__toggle">
        <button type="button" @click="decrement" class="btn quantity__decrement">-</button>
        <input type="text" class="quantity__value" :value="quantity" readonly>
        <button type="button" @click="increment" class="btn quantity__increment">+</button>
    </div>
  `,
  data(){
        return{
            quantity: 0
        }
    },
  watch:{
        quantity :function(val){         this.$emit('updateQuantity',val);
        }
    },
  methods :{
     increment () {
       this.quantity++
     },
     decrement () {
       if(this.quantity === 0) {
          alert('Negative quantity not allowed')
        } else {
           this.quantity--
        }
      }
    }
});

var app = new Vue({
  el: '#app',
  data() {
    return {
      types: [
        {
          name: "Type 1",
          value: 60,
        },
        {
          name: "Type 2",
          value: 70,
        },
      ],
      selectedType: "",
    };
  },
});

.quantity__toggle {
    position: relative;
    border: 1px solid #ff4555;
    height: 30px;
    display: inline-flex;
    overflow: hidden;
}

.btn{
    width: 38px;
    padding: 0;
    background-color:transparent;
    border:none;
    cursor: pointer;
}


.quantity__value {
    border: none;
    margin: 0;
    padding: 0;
    width: 60px;
    text-align: center;
    font-size: 14px;
}

.quantity__value:focus, .btn:focus{
    box-shadow: none;
    outline: none;
}

select{
  margin: 20px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div
       class="form-check form-check-inline"
       v-for="data in types"
       v-bind:key="data.name"
     >
     <input
       class="form-check-input"
       type="radio"
       name="types"
       :id="'select-' + data.name.toLowerCase()"
       :value="data.name"
       v-model="selectedType"
       />
     <label
       class="form-check-label"
       :for="'select-' + data.name.toLowerCase()"
     >{{ data.name }}</label
     >
    </div>
    <select class="custom-select" id="inputGroupSelect02" :disabled="selectedType === 'Type 2' || selectedType === ''">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
     </select>
    <base-quantity :disabled="selectedType === 'Type 2' || selectedType === ''"></base-quantity>
    <base-quantity :disabled="selectedType === 'Type 2' || selectedType === ''"></base-quantity>
</div>

Answer 1

当您将 disabled 作为道具传递给基本数量组件时，您需要在组件中处理它，然后禁用道具值上的 + and - 按钮。此外，要更改边框颜色，您可以使用 vue 的 class 绑定概念。

Vue.component('base-quantity', {
  template: `
          <div :class="disabled ? 'quantity__untoggle' : 'quantity__toggle'">
        <button :disabled="disabled" type="button" @click="decrement" class="btn quantity__decrement">-</button>
        <input type="text" class="quantity__value" :value="quantity" readonly>
        <button :disabled="disabled" type="button" @click="increment" class="btn quantity__increment">+</button>
    </div>
  `,
  data(){
        return{
            quantity: 0
        }
    },
  watch:{
        quantity :function(val){         this.$emit('updateQuantity',val);
        }
    },
  props: ['disabled'],
  methods :{
     increment () {
       this.quantity++
     },
     decrement () {
       if(this.quantity === 0) {
          alert('Negative quantity not allowed')
        } else {
           this.quantity--
        }
      }
    }
});

var app = new Vue({
  el: '#app',
  data() {
    return {
      types: [
        {
          name: "Type 1",
          value: 60,
        },
        {
          name: "Type 2",
          value: 70,
        },
      ],
      selectedType: "",
    };
  },
});

.quantity__toggle {
    position: relative;
    border: 1px solid #ff4555;
    height: 30px;
    display: inline-flex;
    overflow: hidden;
}

.quantity__untoggle {
    position: relative;
    border: 1px solid #cacaca;
    height: 30px;
    display: inline-flex;
    overflow: hidden;
}

.btn{
    width: 38px;
    padding: 0;
    background-color:transparent;
    border:none;
    cursor: pointer;
}


.quantity__value {
    border: none;
    margin: 0;
    padding: 0;
    width: 60px;
    text-align: center;
    font-size: 14px;
}

.quantity__value:focus, .btn:focus{
    box-shadow: none;
    outline: none;
}

select{
  margin: 20px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div
       class="form-check form-check-inline"
       v-for="data in types"
       v-bind:key="data.name"
     >
     <input
       class="form-check-input"
       type="radio"
       name="types"
       :id="'select-' + data.name.toLowerCase()"
       :value="data.name"
       v-model="selectedType"
       />
     <label
       class="form-check-label"
       :for="'select-' + data.name.toLowerCase()"
     >{{ data.name }}</label
     >
    </div>
    <select class="custom-select" id="inputGroupSelect02" :disabled="selectedType === 'Type 2' || selectedType === ''">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
     </select>
    <base-quantity :disabled="selectedType === 'Type 2' || selectedType === ''"></base-quantity>
    <base-quantity :disabled="selectedType === 'Type 2' || selectedType === ''"></base-quantity>
</div>

在 Vue JS 中有条件地禁用数量

Disabled quantity conditionally in Vue JS

javascript

vue.js

vue-component

vuejs2