Quasar Input:type="number" 去掉上下小箭頭 實現加減按鈕樣式

實現效果

UI組件依然是使用 Quasar Framework。

先來看一下效果：

input type="number" 去掉上下小箭頭

去掉上下小箭頭，主要是css:

input::-webkit-outer-spin-button, 
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }

      input[type='number'] {
        -moz-appearance: textfield;
      }

實現加減按鈕樣式及功能

template：

<div class="row mg">
        <div class="col-5 text-right form-label-sm">
          <span class="number">數字</span>
          <span class="tips">(必填)</span>
        </div>
        <div class="col-6">
          <q-input v-model.number="model" type="number" outlined class="input">
            <template v-slot:prepend>
              <q-btn
                dense
                flat
                icon="remove"
                class="number-btn"
                @click="numberSub(model)"
              />
            </template>
            <template v-slot:append>
              <q-btn
                dense
                flat
                icon="add"
                class="number-btn"
                @click="numberAdd(model)"
              />
            </template>
          </q-input>
        </div>
      </div>

css:

<style lang="stylus">
.form-label-sm {
  font-weight: 400;
  font-size: 12px;
  line-height: 32px;
  padding-right: 16px;

  .number {
    font-weight: 500;
    font-size: 13px;
    display: block;
    line-height: 18px;
  }

  .tips {
    font-weight: 400;
    font-size: 12px;
    display: block;
    line-height: 13px;
    color: rgba(150, 156, 163, 1);
  }
}

.input {
  width: 200px;

  div {
    height: 32px !important;
    padding: 0 2px;
  }

  div.no-wrap, .q-btn__wrapper {
    padding: 0;
  }

  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  input {
    text-align: center;
  }

  .number-btn {
    background-color: #f5f7f9;
    border: 1px solid #ccc;
    height: 100%;
  }
}
</style>

data () {
    return {
      model: 10
    }
  }

methods:

numberAdd (val) {
      // console.log(val)
      val++
      this.model = Number.parseFloat(val)
    },
    numberSub (val) {
      // console.log(val)
      val--
      this.model =  Number.parseFloat(val)
    }

完整代碼

請查看：Quasar Input:type="number" 去掉上下小箭頭 實現加減按鈕樣式

文檔

Quasar Input of number type
<input type="number"> - HTML（超文本標記語言） | MDN