├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── publish.sh
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        ├── OtpInput.vue
        ├── SingleOtpInput.vue
        └── index.js
    └── main.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/airbnb',
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-otp-input
  2 | 
  3 | > A fully customizable, OTP(one-time password) input component built with Vue 2.x.
  4 | 
  5 | ![Gifphy](https://media.giphy.com/media/W4RTzsjgQF447EfNPX/giphy.gif)
  6 | 
  7 | [Live Demo](https://zlx025mxpp.codesandbox.io/)
  8 | 
  9 | ## Installation
 10 | 
 11 | To install the latest stable version:
 12 | 
 13 | ```
 14 | npm install --save @bachdgvn/vue-otp-input
 15 | ```
 16 | 
 17 | Import to main.js:
 18 | 
 19 | ```javascript
 20 | import OtpInput from "@bachdgvn/vue-otp-input";
 21 | 
 22 | Vue.component("v-otp-input", OtpInput);
 23 | ```
 24 | 
 25 | 
 26 | Code example:
 27 | 
 28 | ```javascript
 29 | <template>
 30 |   <div style="display: flex; flex-direction: row;">
 31 |     <v-otp-input
 32 |       ref="otpInput"
 33 |       input-classes="otp-input"
 34 |       separator="-"
 35 |       :num-inputs="4"
 36 |       :should-auto-focus="true"
 37 |       :is-input-num="true"
 38 |       @on-change="handleOnChange"
 39 |       @on-complete="handleOnComplete"
 40 |     />
 41 | 
 42 |     <button @click="handleClearInput()">Clear Input</button>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | export default {
 48 |   name: 'App',
 49 | 
 50 |   methods: {
 51 |     handleOnComplete(value) {
 52 |       console.log('OTP completed: ', value);
 53 |     },
 54 |     handleOnChange(value) {
 55 |       console.log('OTP changed: ', value);
 56 |     },
 57 |     handleClearInput() {
 58 |       this.$refs.otpInput.clearInput();
 59 |     },
 60 |   },
 61 | };
 62 | </script>
 63 | 
 64 | <style lang="less">
 65 |   .otp-input {
 66 |     width: 40px;
 67 |     height: 40px;
 68 |     padding: 5px;
 69 |     margin: 0 10px;
 70 |     font-size: 20px;
 71 |     border-radius: 4px;
 72 |     border: 1px solid rgba(0, 0, 0, 0.3);
 73 |     text-align: center;
 74 |     &.error {
 75 |       border: 1px solid red !important;
 76 |     }
 77 |   }
 78 |   .otp-input::-webkit-inner-spin-button,
 79 |   .otp-input::-webkit-outer-spin-button {
 80 |     -webkit-appearance: none;
 81 |     margin: 0;
 82 |   }
 83 | </style>
 84 | ```
 85 | 
 86 | ## Props
 87 | 
 88 | <table>
 89 |   <tr>
 90 |     <th>Name<br></th>
 91 |     <th>Type</th>
 92 |     <th>Required</th>
 93 |     <th>Default</th>
 94 |     <th>Description</th>
 95 |   </tr>
 96 |   <tr>
 97 |     <td>num-inputs</td>
 98 |     <td>number</td>
 99 |     <td><strong>true</strong></td>
100 |     <td>4</td>
101 |     <td>Number of OTP inputs to be rendered.</td>
102 |   </tr>
103 |   <tr>
104 |     <td>separator</td>
105 |     <td>component<br></td>
106 |     <td>false</td>
107 |     <td></td>
108 |     <td>Provide a custom separator between inputs by passing a component. For instance, <code>&lt;span&gt;-&lt;/span&gt;</code> would add <code>-</code> between each input</td>
109 |   </tr>
110 |   <tr>
111 |     <td>input-classes</td>
112 |     <td>className (string)</td>
113 |     <td>false</td>
114 |     <td>none</td>
115 |     <td>Style applied or class passed to each input.</td>
116 |   </tr>
117 |   <tr>
118 |       <td>input-type</td>
119 |       <td>string</td>
120 |       <td>false</td>
121 |       <td>"tel"</td>
122 |       <td>Input type. Optional value: "password", "number", "tel".</td>
123 |     </tr>
124 |   <tr>
125 |       <td>input-mode</td>
126 |       <td>string</td>
127 |       <td>false</td>
128 |       <td>"text"</td>
129 |       <td>Input type. Optional value: "text", "numeric", "decimal", "none".</td>
130 |   </tr>
131 |   <tr>
132 |     <td>should-auto-focus</td>
133 |     <td>boolean</td>
134 |     <td>false</td>
135 |     <td>false</td>
136 |     <td>Auto focuses input on initial page load.</td>
137 |   </tr>
138 | </table>
139 | 
140 | ## Methods
141 | 
142 | <table>
143 |   <tr>
144 |     <th>Name<br></th>
145 |     <th>Description</th>
146 |   </tr>
147 |   <tr>
148 |      <td>clearInput()</td>
149 |      <td>Use with $refs for clearing all otp inputs, see code example section.</td>
150 |   </tr>
151 | </table>
152 | 
153 | ## Events
154 | 
155 | <table>
156 |   <tr>
157 |     <th>Name<br></th>
158 |     <th>Description</th>
159 |   </tr>
160 |   <tr>
161 |      <td>on-change</td>
162 |      <td>Return OTP code was changing when we made a change in inputs.</td>
163 |     </tr>
164 |   <tr>
165 |     <td>on-complete</td>
166 |     <td>Return OTP code typed in inputs.</td>
167 |   </tr>
168 | </table>
169 | 
170 | ## Changelog
171 | * **v1.0.8** - Fix #30: Support input type: "password"
172 | * **v1.0.7** - Fix #23: Not accepting numbers from numeric keypad in external keyboard
173 | * **v1.0.6** - Add feature to disallow certain characters like "." or "e".
174 | * **v1.0.5** - Support clearInput() methods for clearing all otp inputs.
175 | * **v1.0.4** - Support @on-change event and fix bug for firing @on-complete every time we press keyboard.
176 | * **v1.0.3** - Fix first and last character not being modified and pasting OTP codes.
177 | * **v1.0.2** - Update first stable version.
178 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@bachdgvn/vue-otp-input",
 3 |   "version": "1.0.8",
 4 |   "description": "A fully customizable, one-time password input component for the web built with Vue 2.x.",
 5 |   "author": "Bach Duong <bachdgvn@gmail.com>",
 6 |   "repository": "https://github.com/bachdgvn/vue-otp-input",
 7 |   "keywords": [
 8 |     "vueotpinput",
 9 |     "vue",
10 |     "otp",
11 |     "input",
12 |     "otpinput"
13 |   ],
14 |   "license": "MIT",
15 |   "scripts": {
16 |     "serve": "vue-cli-service serve",
17 |     "build": "vue-cli-service build",
18 |     "build-bundle": "vue-cli-service build --target lib --name vueOtpInput ./src/components/index.js",
19 |     "lint": "vue-cli-service lint"
20 |   },
21 |   "main": "./dist/vueOtpInput.common.js",
22 |   "unpkg": "./dist/vueOtpInput.umd.min.js",
23 |   "files": [
24 |     "dist/*",
25 |     "src/*",
26 |     "public/*",
27 |     "*.json",
28 |     "*.js"
29 |   ],
30 |   "dependencies": {
31 |     "vue": "^2.5.22"
32 |   },
33 |   "devDependencies": {
34 |     "@vue/cli-plugin-babel": "^3.4.0",
35 |     "@vue/cli-plugin-eslint": "^3.4.0",
36 |     "@vue/cli-service": "^3.4.0",
37 |     "@vue/eslint-config-airbnb": "^4.0.0",
38 |     "babel-eslint": "^10.0.1",
39 |     "eslint": "^5.8.0",
40 |     "eslint-plugin-vue": "^5.0.0",
41 |     "less": "^3.0.4",
42 |     "less-loader": "^4.1.0",
43 |     "vue-template-compiler": "^2.5.21"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bachdgvn/vue-otp-input/685b3d165ec5faa3950f54880b434ba40b9078c6/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-otp-input</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-otp-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | npm run build-bundle && npm publish --access public
3 | 
4 | echo "Publish finished!";
5 | read -n1 -r -p "Press space to continue..." key
6 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Input type default = "tel"</h2>
 4 |     <div style="display: flex; flex-direction: row;">
 5 |       <v-otp-input
 6 |         ref="otpInput0"
 7 |         input-classes="otp-input"
 8 |         separator="-"
 9 |         :num-inputs="4"
10 |         :should-auto-focus="true"
11 |         @on-change="handleOnChange"
12 |         @on-complete="handleOnComplete"
13 |       />
14 |       <button @click="handleClearInput('otpInput0')">Clear Input</button>
15 |     </div>
16 | 
17 |     <h2>Input type = "number"</h2>
18 |     <div style="display: flex; flex-direction: row;">
19 |       <v-otp-input
20 |         ref="otpInput1"
21 |         input-classes="otp-input"
22 |         separator="-"
23 |         :num-inputs="4"
24 |         :should-auto-focus="true"
25 |         input-type="number"
26 |         @on-change="handleOnChange"
27 |         @on-complete="handleOnComplete"
28 |       />
29 |       <button @click="handleClearInput('otpInput1')">Clear Input</button>
30 |     </div>
31 | 
32 |     <h2>Input type = "password"</h2>
33 |     <div style="display: flex; flex-direction: row; margin-top: 40px;">
34 |       <v-otp-input
35 |         ref="otpInput2"
36 |         input-classes="otp-input"
37 |         separator="-"
38 |         :num-inputs="4"
39 |         :should-auto-focus="true"
40 |         input-type="password"
41 |         @on-change="handleOnChange"
42 |         @on-complete="handleOnComplete"
43 |       />
44 |       <button @click="handleClearInput('otpInput2')">Clear Input</button>
45 |     </div>
46 |   </div>
47 | </template>
48 | 
49 | <script>
50 | import OtpInput from './components';
51 | 
52 | export default {
53 |   name: 'App',
54 |   components: {
55 |     'v-otp-input': OtpInput,
56 |   },
57 |   methods: {
58 |     handleOnComplete(value) {
59 |       console.log('OTP completed: ', value);
60 |     },
61 |     handleOnChange(value) {
62 |       console.log('OTP changed: ', value);
63 |     },
64 |     handleClearInput(ref) {
65 |       this.$refs[ref].clearInput();
66 |     },
67 |   },
68 | };
69 | </script>
70 | 
71 | <style lang="less">
72 |   .otp-input {
73 |     width: 40px;
74 |     height: 40px;
75 |     padding: 5px;
76 |     margin: 0 10px;
77 |     font-size: 20px;
78 |     border-radius: 4px;
79 |     border: 1px solid rgba(0, 0, 0, 0.3);
80 |     text-align: center;
81 |     &.error {
82 |       border: 1px solid red !important;
83 |     }
84 |   }
85 |   .otp-input::-webkit-inner-spin-button,
86 |   .otp-input::-webkit-outer-spin-button {
87 |     -webkit-appearance: none;
88 |     margin: 0;
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bachdgvn/vue-otp-input/685b3d165ec5faa3950f54880b434ba40b9078c6/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/OtpInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="display: flex">
  3 | <!--    To turn off autocomplete when otp-input is password-->
  4 |     <input v-if="inputType === 'password'"
  5 |            autocomplete="off"
  6 |            name="hidden"
  7 |            type="text"
  8 |            style="display:none;">
  9 |     <SingleOtpInput
 10 |       v-for="(item, i) in numInputs"
 11 |       :key="i"
 12 |       :focus="activeInput === i"
 13 |       :value="otp[i]"
 14 |       :separator="separator"
 15 |       :input-type="inputType"
 16 |       :input-classes="inputClasses"
 17 |       :input-mode="inputMode"
 18 |       :is-last-child="i === numInputs - 1"
 19 |       :should-auto-focus="shouldAutoFocus"
 20 |       @on-change="handleOnChange"
 21 |       @on-keydown="handleOnKeyDown"
 22 |       @on-paste="handleOnPaste"
 23 |       @on-focus="handleOnFocus(i)"
 24 |       @on-blur="handleOnBlur"
 25 |     />
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import SingleOtpInput from './SingleOtpInput.vue';
 31 | 
 32 | // keyCode constants
 33 | const BACKSPACE = 8;
 34 | const LEFT_ARROW = 37;
 35 | const RIGHT_ARROW = 39;
 36 | const DELETE = 46;
 37 | 
 38 | export default {
 39 |   name: 'OtpInput',
 40 |   components: {
 41 |     SingleOtpInput,
 42 |   },
 43 |   props: {
 44 |     numInputs: {
 45 |       default: 4,
 46 |     },
 47 |     separator: {
 48 |       type: String,
 49 |       default: '**',
 50 |     },
 51 |     inputClasses: {
 52 |       type: String,
 53 |     },
 54 |     inputType: {
 55 |       type: String,
 56 |       validator(value) {
 57 |         return ['number', 'tel', 'password'].includes(value);
 58 |       },
 59 |     },
 60 |     inputMode: {
 61 |       type: String,
 62 |       validator(value) {
 63 |         return ['text', 'numeric', 'tel', 'none'].includes(value);
 64 |       },
 65 |     },
 66 |     shouldAutoFocus: {
 67 |       type: Boolean,
 68 |       default: false,
 69 |     },
 70 |   },
 71 |   data() {
 72 |     return {
 73 |       activeInput: 0,
 74 |       otp: [],
 75 |       oldOtp: [],
 76 |     };
 77 |   },
 78 | 
 79 |   methods: {
 80 |     handleOnFocus(index) {
 81 |       this.activeInput = index;
 82 |     },
 83 |     handleOnBlur() {
 84 |       this.activeInput = -1;
 85 |     },
 86 |     // Helper to return OTP from input
 87 |     checkFilledAllInputs() {
 88 |       if (this.otp.join('').length === this.numInputs) {
 89 |         return this.$emit('on-complete', this.otp.join(''));
 90 |       }
 91 |       return 'Wait until the user enters the required number of characters';
 92 |     },
 93 |     // Focus on input by index
 94 |     focusInput(input) {
 95 |       this.activeInput = Math.max(Math.min(this.numInputs - 1, input), 0);
 96 |     },
 97 |     // Focus on next input
 98 |     focusNextInput() {
 99 |       this.focusInput(this.activeInput + 1);
100 |     },
101 |     // Focus on previous input
102 |     focusPrevInput() {
103 |       this.focusInput(this.activeInput - 1);
104 |     },
105 |     // Change OTP value at focused input
106 |     changeCodeAtFocus(value) {
107 |       this.oldOtp = Object.assign([], this.otp);
108 |       this.$set(this.otp, this.activeInput, value);
109 |       if (this.oldOtp.join('') !== this.otp.join('')) {
110 |         this.$emit('on-change', this.otp.join(''));
111 |         this.checkFilledAllInputs();
112 |       }
113 |     },
114 |     // Handle pasted OTP
115 |     handleOnPaste(event) {
116 |       event.preventDefault();
117 |       const pastedData = event.clipboardData
118 |         .getData('text/plain')
119 |         .slice(0, this.numInputs - this.activeInput)
120 |         .split('');
121 |       if (this.inputType === 'number' && !pastedData.join('').match(/^\d+$/)) {
122 |         return 'Invalid pasted data';
123 |       }
124 |       // Paste data from focused input onwards
125 |       const currentCharsInOtp = this.otp.slice(0, this.activeInput);
126 |       const combinedWithPastedData = currentCharsInOtp.concat(pastedData);
127 |       this.$set(this, 'otp', combinedWithPastedData.slice(0, this.numInputs));
128 |       this.focusInput(combinedWithPastedData.slice(0, this.numInputs).length);
129 |       return this.checkFilledAllInputs();
130 |     },
131 |     handleOnChange(value) {
132 |       this.changeCodeAtFocus(value);
133 |       this.focusNextInput();
134 |     },
135 |     clearInput() {
136 |       if (this.otp.length > 0) {
137 |         this.$emit('on-change', '');
138 |       }
139 |       this.otp = [];
140 |       this.activeInput = 0;
141 |     },
142 |     // Handle cases of backspace, delete, left arrow, right arrow
143 |     handleOnKeyDown(event) {
144 |       switch (event.keyCode) {
145 |         case BACKSPACE:
146 |           event.preventDefault();
147 |           this.changeCodeAtFocus('');
148 |           this.focusPrevInput();
149 |           break;
150 |         case DELETE:
151 |           event.preventDefault();
152 |           this.changeCodeAtFocus('');
153 |           break;
154 |         case LEFT_ARROW:
155 |           event.preventDefault();
156 |           this.focusPrevInput();
157 |           break;
158 |         case RIGHT_ARROW:
159 |           event.preventDefault();
160 |           this.focusNextInput();
161 |           break;
162 |         default:
163 |           break;
164 |       }
165 |     },
166 |   },
167 | };
168 | </script>
169 | 


--------------------------------------------------------------------------------
/src/components/SingleOtpInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="display: flex; align-items: center;">
  3 |     <input
  4 |       ref="input"
  5 |       :type="inputType"
  6 |       :inputmode="inputMode"
  7 |       min="0"
  8 |       max="9"
  9 |       maxlength="1"
 10 |       pattern="[0-9]"
 11 |       v-model="model"
 12 |       :class="inputClasses"
 13 |       @input="handleOnChange"
 14 |       @keydown="handleOnKeyDown"
 15 |       @paste="handleOnPaste"
 16 |       @focus="handleOnFocus"
 17 |       @blur="handleOnBlur"
 18 |     />
 19 |     <span v-if="!isLastChild && separator">
 20 |       <span v-html="separator"></span>
 21 |     </span>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   name: 'SingleOtpInput',
 28 |   props: {
 29 |     value: {
 30 |       type: String,
 31 |     },
 32 |     separator: {
 33 |       type: String,
 34 |     },
 35 |     focus: {
 36 |       type: Boolean,
 37 |     },
 38 |     inputClasses: {
 39 |       type: String,
 40 |     },
 41 |     shouldAutoFocus: {
 42 |       type: Boolean,
 43 |     },
 44 |     inputType: {
 45 |       type: String,
 46 |       default() {
 47 |         return 'tel';
 48 |       },
 49 |     },
 50 |     inputMode: {
 51 |       type: String,
 52 |       default() {
 53 |         return 'text';
 54 |       },
 55 |     },
 56 |     isLastChild: {
 57 |       type: Boolean,
 58 |     },
 59 |   },
 60 |   data() {
 61 |     return {
 62 |       model: this.value || '',
 63 |     };
 64 |   },
 65 |   mounted() {
 66 |     if (this.$refs.input && this.focus && this.shouldAutoFocus) {
 67 |       this.$refs.input.focus();
 68 |     }
 69 |   },
 70 |   watch: {
 71 |     value(newValue, oldValue) {
 72 |       if (newValue !== oldValue) {
 73 |         this.model = newValue;
 74 |       }
 75 |     },
 76 |     // whenever question changes, this function will run
 77 |     focus(newFocusValue, oldFocusValue) {
 78 |       // Check if focusedInput changed
 79 |       // Prevent calling function if input already in focus
 80 |       if (oldFocusValue !== newFocusValue && (this.$refs.input && this.focus)) {
 81 |         this.$refs.input.focus();
 82 |         this.$refs.input.select();
 83 |       }
 84 |     },
 85 |   },
 86 |   methods: {
 87 |     handleOnChange() {
 88 |       if (this.model.length > 1) {
 89 |         this.model = this.model.slice(0, 1);
 90 |       }
 91 |       return this.$emit('on-change', this.model);
 92 |     },
 93 |     handleOnKeyDown(event) {
 94 |       // Only allow characters 0-9, DEL, Backspace, Enter, Right and Left Arrows, and Pasting
 95 |       const keyEvent = (event) || window.event;
 96 |       const charCode = (keyEvent.which) ? keyEvent.which : keyEvent.keyCode;
 97 |       if (this.isCodeNumeric(charCode) || [8, 9, 13, 37, 39, 46, 86].includes(charCode)) {
 98 |         this.$emit('on-keydown', event);
 99 |       } else {
100 |         keyEvent.preventDefault();
101 |       }
102 |     },
103 |     isCodeNumeric(charCode) {
104 |       // numeric keys and numpad keys
105 |       return (charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105);
106 |     },
107 |     handleOnPaste(event) {
108 |       return this.$emit('on-paste', event);
109 |     },
110 |     handleOnFocus() {
111 |       this.$refs.input.select();
112 |       return this.$emit('on-focus');
113 |     },
114 |     handleOnBlur() {
115 |       return this.$emit('on-blur');
116 |     },
117 |   },
118 | };
119 | </script>
120 | 


--------------------------------------------------------------------------------
/src/components/index.js:
--------------------------------------------------------------------------------
1 | import OtpInput from './OtpInput.vue';
2 | 
3 | export default OtpInput;
4 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app');
9 | 


--------------------------------------------------------------------------------