|
| 1 | +<template lang="jade"> |
| 2 | + input.form-control(type="text") |
| 3 | +</template> |
| 4 | + |
| 5 | +<script> |
| 6 | +import abstractField from "./abstractField"; |
| 7 | +import { defaults } from "lodash"; |
| 8 | +
|
| 9 | +export default { |
| 10 | + mixins: [abstractField], |
| 11 | +
|
| 12 | + data() { |
| 13 | + return { |
| 14 | + cleave: null |
| 15 | + }; |
| 16 | + }, |
| 17 | +
|
| 18 | + watch: { |
| 19 | + /*model: { |
| 20 | + get(){ |
| 21 | + if (window.Cleave) { |
| 22 | + console.log("get model", this.model); |
| 23 | + } |
| 24 | + }, |
| 25 | + set(value) { |
| 26 | + if (window.Cleave) { |
| 27 | + console.log("set model", this.model, value); |
| 28 | + |
| 29 | + } |
| 30 | + } |
| 31 | + }*/ |
| 32 | + }, |
| 33 | +
|
| 34 | + methods: { |
| 35 | + /*formatValueToField(){ |
| 36 | + console.log(" 1 formatValueToField",this.cleave); |
| 37 | + if (this.cleave) { |
| 38 | +
|
| 39 | + return this.cleave.getRawValue(); |
| 40 | + }else{ |
| 41 | + console.log("fail") |
| 42 | + // this.cleave.element.value = ""; |
| 43 | + return ""; |
| 44 | + } |
| 45 | + },*/ |
| 46 | + /*formatValueToModel(newValue){ |
| 47 | + console.log(" 2 formatValueToModel"); |
| 48 | + this.cleave.setRawValue(newValue); |
| 49 | + return newValue; |
| 50 | + }*/ |
| 51 | + // onCreditCardTypeChanged(type){ |
| 52 | + // let onCreditCardTypeChanged = this.schema.onCreditCardTypeChanged; |
| 53 | + // if (typeof(onNewTag) == "function") { |
| 54 | + // onNewTag(newTag, id, this.options, this.value); |
| 55 | + // } |
| 56 | + // } |
| 57 | + /*onChange(value) { |
| 58 | + console.log(value); |
| 59 | + if (value.length === 1) { |
| 60 | + // Single value |
| 61 | + this.value = parseFloat(value[0]); |
| 62 | + } else { |
| 63 | + // Array (range) |
| 64 | + this.value = [parseFloat(value[0]), parseFloat(value[1])]; |
| 65 | + } |
| 66 | + }*/ |
| 67 | + }, |
| 68 | +
|
| 69 | + ready() { |
| 70 | + if (window.Cleave) { |
| 71 | + this.cleave = new Cleave(this.$el, defaults(this.schema.cleaveOptions || {}, { |
| 72 | + // Credit Card |
| 73 | + creditCard: false, |
| 74 | + // onCreditCardTypeChanged: onCreditCardTypeChanged.bind(this), |
| 75 | + // Phone |
| 76 | + phone: false, |
| 77 | + phoneRegionCode: 'AU', |
| 78 | + // Date |
| 79 | + date: false, |
| 80 | + datePattern: ['d', 'm', 'Y'], |
| 81 | + // Numerals |
| 82 | + numeral: false, |
| 83 | + numeralThousandsGroupStyle: 'thousand', |
| 84 | + numeralDecimalScale: 2, |
| 85 | + numeralDecimalMark: '.', |
| 86 | + // General |
| 87 | + blocks: [], |
| 88 | + delimiter: ' ', |
| 89 | + prefix: null, |
| 90 | + numericOnly: false, |
| 91 | + uppercase: false, |
| 92 | + lowercase: false |
| 93 | + })); |
| 94 | + } else { |
| 95 | + console.warn("Cleave is missing. Please download from https://github.com/nosir/cleave.js/ and load the script in the HTML head section!"); |
| 96 | + } |
| 97 | + } |
| 98 | +}; |
| 99 | +</script> |
| 100 | + |
| 101 | +<style lang="sass"> |
| 102 | + .vue-form-generator .field-cleave {} |
| 103 | +</style> |
0 commit comments