如何在引导 vue 上制作按钮减号和加号？

Posted 2023-02-23

【中文标题】如何在引导 vue 上制作按钮减号和加号？

【英文标题】：How can I make button minus and plus on the bootstrap vue?

【发布时间】：2019-03-10 13:25:59

【问题描述】：

我从这里得到教程：https://bootstrap-vue.js.org/docs/components/form-input

我想做这样的：

我尝试这样：

<template>
    ...
        <b-col class="pr-0 custom-control-inline">
            <b-btn variant="warning btn-sm mr-1 mt-1 mb-1"><i class="fa fa-minus-circle"></i></b-btn>
            <b-form-input type="number" class="col-md-3" v-model="quantity"></b-form-input>
            <b-btn variant="info btn-sm ml-1 mt-1 mb-1"><i class="fa fa-plus-circle"></i></b-btn>
        </b-col>
    ...
</template>
<script>
    export default 
        data () 
            return 
                quantity: null
            
        
    
</script>

结果如下：

如何让按钮加减号起作用？

所以如果点击按钮加号，数量会增加

【问题讨论】：

这现在是 BootstrapVue 2.5.0+ 版本的内置组件（参考：bootstrap-vue.js.org/docs/components/form-spinbutton）

【参考方案1】：

来自docs：

<b-input-group>
  <b-input-group-prepend>
    <b-btn variant="outline-info">-</b-btn>
  </b-input-group-prepend>

  <b-form-input type="number" min="0.00"></b-form-input>

  <b-input-group-append>
    <b-btn variant="outline-secondary">+</b-btn>
  </b-input-group-append>
</b-input-group>

只需为按钮设置样式，并将click 事件添加到按钮以用于输入数字 逻辑，例如：

new Vue(
  el: '#app',
  data: 
    num: 0
  
)

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-input-group>
    <b-input-group-prepend>
      <b-btn variant="outline-info" @click="num--">-</b-btn>
    </b-input-group-prepend>

    <b-form-input type="number" min="0.00" v-model="num"></b-form-input>

    <b-input-group-append>
      <b-btn variant="outline-secondary" @click="num++">+</b-btn>
    </b-input-group-append>
  </b-input-group>
</div>

【参考方案2】：

可能是这样的：

<template>
  <div class="quantity">
    <b-input-group>
      <b-input-group-prepend>
        <b-btn variant="info" @click="decrement()">-</b-btn>
      </b-input-group-prepend>

      <b-form-input type="number" min="0.00" :value="quantity"></b-form-input>

      <b-input-group-append>
        <b-btn variant="info" @click="increment()">+</b-btn>
      </b-input-group-append>
    </b-input-group>
  </div>
</template>

您可以使用type="number" 或type="text"。

简单的逻辑：

<script>
export default 
  name: "Quantity",
  data() 
    return 
      quantity: 1
    ;
  ,
  methods: 
    increment() 
      this.quantity++;
    ,
    decrement() 
      if (this.quantity === 1) 
        alert("Negative quantity not allowed");
       else 
        this.quantity--;
      
    
  
;
</script>

Codesandbox example