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

[Ivan Halim]

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>

[Berly Christopher]

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> 

 

  

Sample: https://codesandbox.io/s/competent-pine-7p6xp   

  

Demo: https://ej2.syncfusion.com/vue/demos/#/material/numerictextbox/default.html  

  

UG Link: https://ej2.syncfusion.com/vue/documentation/numerictextbox/getting-started/  

  

API Link: https://ej2.syncfusion.com/vue/documentation/api/numerictextbox#showspinbutton  

  

Regards, 

Berly B.C