如何将cleave.js与Vue中的元素结合使用？

我在元素中使用了Vue.js 2，我想利用Cleave.js进行掩蔽。如何将cleave.js与Vue中的元素结合使用？

我明白如何使用数据和计算属性在Vue中制作一个基本的遮罩。但是我不想重做Cleave所做的所有优秀工作。

我也发现vue-cleave。这似乎是使用Vue使用Cleave的好方法。虽然vue-cleave广告标准input元素的页面。我正在使用Element，所以我需要一种使用el-input的方法。

这是大多数Vue maskers的常见问题，它们似乎在页面中添加了标准input元素。

所以，我的问题是：什么是使用Element时整合Cleave.js的Vue方式？

参考文献：

元素：http://element.eleme.io

Cleave.js：https://github.com/nosir/cleave.js

Vue公司 - 顺劈斩：https://github.com/vue-bulma/cleave

来源

2017-08-10 Daryn

我发现这篇文章：https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

这解释了如何使用JQuery与Vue。我跟着这个模式和集成的Vue公司与顺劈斩如下：

SmartCleave.vue

<template> 
    <input /> 
</template> 

<script> 
/* eslint-disable no-new */ 
import Cleave from 'cleave.js' 

export default { 
    mounted() { 
    new Cleave(this.$el, { 
     date: true, 
     datePattern: ['d', 'm', 'Y'] 
    }) 

    this.$el.oninput = (e) => { 
     console.log('oninput the field', e.target.value) 
     this.$emit('oninput', e.target.value) 
    } 
    } 
} 
</script>

App.vue

<template> 
    <div id="app"> 
    <smart-cleave @oninput="logIt"></smart-cleave> 
    <div>{{date}}</div> 
    </div> 
</template> 

<script> 

/* eslint-disable no-new */ 
import Cleave from 'cleave.js' 
import SmartCleave from './components/SmartCleave' 

new Cleave('#plain-input', { 
    date: true, 
    datePattern: ['d', 'm', 'Y'] 
}) 

export default { 
    name: 'app', 
    components: { 
    SmartCleave 
    }, 
    data() { 
    return { 
     date: '' 
    } 
    }, 
    methods: { 
    logIt (val) { 
     console.log('cahnged', val) 
     this.date = val 
    } 
    } 
} 
</script> 

<style> 
#app { 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    /* text-align: center; */ 
    color: #2c3e50; 
    margin-top: 60px; 
} 
</style>

来源

2017-08-18 10:13:34 Daryn

如何将cleave.js与Vue中的元素结合使用？

回答

相关问题