หลังจากพยายามเขียนตัว Format input เองสำหรับ Vuejs แล้วพบว่าไม่ค่อยเวิร์คเท่าไหร่ เช่นตอนกรอกเครื่องหมายจุดแล้วตรวจสอบไม่ละเอียดลบได้บ้างไม่ได้บ้างเป็นต้น เลยหา lib คนอื่นมาใช้ดีกว่าเจอตัวนี้น่าสนใจดีอย่างแรกเลยก็ตอบโจทย์ที่กำลังหาพอดีเลยเอามาใช้แล้วพบว่ามีปัญหากับ vuetify เล็กน้อยเลยแงะจนมันใช้งานได้บันทึกไว้
DEMO
https://mrchoke.github.io/vuetify-cleave/
Source
Create VueJs & Veutify Project
vue create vuetify-cleave
cd vuetify-cleave
vue add vuetify
Add Cleave.js
yarn add cleave.js
Add Global Directive
main.js
import Cleave from 'cleave.js';
Vue.directive('cleave', {
inserted: (el, binding) => {
el.cleave = new Cleave(el, binding.value || {})
},
update: (el) => {
const event = new Event('input', {bubbles: true});
setTimeout(function () {
el.value = el.cleave.properties.result
el.dispatchEvent(event)
}, 100);
}
})
link: https://github.com/nosir/cleave.js/blob/master/doc/vue.md
ตอนนี้ Vue จะเห็น directive cleave แล้วลองสร้าง text field ดูครับ
<v-text-field v-model="comma" label="Number with Comma" **v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"** > </v-text-field>
ถ้าลอง input จะมี error ขึ้นมา แต่ถ้าใช้ input ปกติของ HTML จะไม่มีปัญหา
<input type="text" v-model="comma2" **v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"** />
ลองค้นหาข้อมูลพบว่า input ของ vuetify นั้นเป็นแบบ component สิ่งที่เห็นนั้นประกอบไปด้วย element ต่างๆ มากมายมันไม่ใช่ input ที่แท้จริงผมเลยไปแกะ directive ที่เค้าทำมาแล้วใช้ได้กับ Vuetify ซึ่งเค้าจำหา element ที่แท้จริงส่งให้นั่นเองเอาแบบง่ายๆ แก้ที่ main.js โดยสร้าง function เพิ่มมาแล้วเรียกใช้
**function getInput(el) {
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
const els = el.getElementsByTagName('input')
if (els.length !== 1) {
throw new Error(`v-cleave requires 1 input, found ${els.length}`)
} else {
el = els[0]
}
}
return el
}**
Vue.directive('cleave', {
inserted: (el, binding) => {
**el = getInput(el)**
el.cleave = new Cleave(el, binding.value || {})
},
update: el => {
**el = getInput(el)**
const event = new Event('input', { bubbles: true })
setTimeout(function() {
el.value = el.cleave.properties.result
el.dispatchEvent(event)
}, 100)
}
})
TypeScript
สำหรับ TypeScript จะมีปัญหาเรื่อง properties ที่ Cleave.js แปะเข้าไปใน HTMLElement ทำให้เกิดการเตือนหรืออาจจะใช้งานไม่ได้
ขั้นแรกเพิ่ม @type/cleave.js ก่อน
yarn add -D @types/cleave.js
หลังจากนั้นให้สร้าง interface โดย extents HTMLElement เช่น
import Cleave from 'cleave.js'
import { CleaveOptions } from 'cleave.js/options'
class Cl extends Cleave {
properties?: Record<string, string>
constructor(selector: string | HTMLElement, options: CleaveOptions) {
super(selector, options)
}
}
export interface HTMLElementA extends HTMLElement {
cleave?: Cl
value?: string
}
แล้วแก้ในส่วนของการประกาศ directive ใน main.ts
function getInput(el: **HTMLElementA** ) {
if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
const els = el.getElementsByTagName('input')
if (els.length !== 1) {
throw new Error(`v-cleave requires 1 input, found ${els.length}`)
} else {
el = els[0]
}
}
return el
}
Vue.directive('cleave', {
inserted: (el: **HTMLElementA** , binding) => {
el = getInput(el)
el.cleave = new Cleave(el, binding.value || {})
},
update: (el: **HTMLElementA** ) => {
el = getInput(el)
const event = new Event('input', { bubbles: true })
setTimeout(function() {
el.value = **el.cleave?.properties?.result**
el.dispatchEvent(event)
}, 100)
}
})
ก็จะประมาณนี้ครับ
Top comments (0)