1. Home
  2. Forum
  3. Vue
  4. How to hide spin button when hover at textbox type number?

How to hide spin button when hover at textbox type number?


this is my textbox component 
<template>
    <div>
                <ejs-textbox
                      :floatLabelType='floatLabelType'
                      :placeholder='placeholder'
                      :required='required'
                      v-model='value'
                      :readonly='readonly'
                      :multiline='multiline'
                      :showClearButton='showClearButton'
                      :type='type'
                    ></ejs-textbox>
    </div>
</template>

<script>
import Vue from "vue"; 
import {
  TextBoxPlugin,
} from "@syncfusion/ej2-vue-inputs";
Vue.use(TextBoxPlugin);

export default {
   name:"EvoTextField",
   props:{
        placeholder:{
            type:String,
            default:''
        },
        value:{
            type: String,
            default:''
        },
        readonly:{
            type: Boolean,
            default:false
        },
        required:{
            type: Boolean,
            default:false
        },
        multiline:{
            type: Boolean,
            default:false
        },
        type:{
            type: String,
            default:"text"
        }
   },
   data(){
    return {
      floatLabelType:"Auto",  
      showClearButton:false,
    } 
   },
   methods:{
   }
};
</script>






1 Reply 1 reply marked as answer
BC Berly Christopher Syncfusion Team June 10, 2021 03:13 PM UTC

Hi Ivan, 
  
Greetings from Syncfusion support. 
  
We have implemented the NumericTextBox component and having the property named as “showSpinButton” which is used to disable/enable the spin button in the numeric textbox component. Kindly refer the below demo and documentation below. 
  
Here, we have hidden the spin button on initially and showcase the spin button on focus the component again.  
  
<template> 
  <div id="app"> 
    <ejs-numerictextbox 
      ref="numeric" 
      :showSpinButton="showSpinButton" 
      value="10" 
      :focus="onFocus" 
      :blur="onBlur" 
    ></ejs-numerictextbox> 
  </div> 
</template> 
 
<script> 
import Vue from "vue"; 
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs"; 
 
Vue.use(NumericTextBoxPlugin); 
export default Vue.extend({ 
  data: function () { 
    return { 
      showSpinButton: false, 
    }; 
  }, 
  methods: { 
    onFocus: function (e) { 
      this.showSpinButton = true; 
    }, 
    onBlur: function (e) { 
      this.showSpinButton = false; 
    }, 
  }, 
}); 
</script> 
 
  
  
  
  
  
Regards, 
Berly B.C 


Marked as answer
Loader.
Up arrow icon