@42sol/v-format 中文文档教程
Vue input format directive
基于 cleave.js
Why?
的 vue.js 微型输入格式库 想法是提供一种简单的方法来提高输入字段的可读性通过格式化您输入的数据。 通过使用这个库，您不需要编写任何令人兴奋的正则表达式或掩码模式 格式化输入文本。
但是，这并不意味着要替换任何验证或掩码库，您仍然应该清理 并在后端验证您的数据。
Initialization
import Vue from 'vue';
// As plugin (globally)
import VueFormat from '@42sol/v-format';
Vue.use(VueFormat);
// Or as a global directive
import { VueFormatDirective } from '@42sol/v-format'
Vue.directive('format', VueFormatDirective);
// Or as a component directive
import { VueFormatDirective } from '@42sol/v-format'
export default {
directives: {
format: VueFormatDirective
}
}
Usage
<input type="text" v-model="value" v-format="{ creditCard: true }">
<!-- OR -->
<input type="text" v-model="value" v-format="variableWithOptions">
<!-- OR -->
<input type="text" v-model="value" v-format="numeral">
<!-- OR -->
<InputComponent v-model="value" v-format="{ selector: '.innerInput', creditCard: true }" />
Configuration
所有指令选项必须匹配 cleave.js 选项。 有关详细信息，请参阅官方文档。
Input selector
您可以通过 selector 选项来查询嵌套的 元素。 这对于结构复杂的组件很有帮助。
默认选择器是 'input'。
Vue input format directive
Tiny input format library for vue.js based on cleave.js
Why?
The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.
However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.
Initialization
import Vue from 'vue';
// As plugin (globally)
import VueFormat from '@42sol/v-format';
Vue.use(VueFormat);
// Or as a global directive
import { VueFormatDirective } from '@42sol/v-format'
Vue.directive('format', VueFormatDirective);
// Or as a component directive
import { VueFormatDirective } from '@42sol/v-format'
export default {
directives: {
format: VueFormatDirective
}
}
Usage
<input type="text" v-model="value" v-format="{ creditCard: true }">
<!-- OR -->
<input type="text" v-model="value" v-format="variableWithOptions">
<!-- OR -->
<input type="text" v-model="value" v-format="numeral">
<!-- OR -->
<InputComponent v-model="value" v-format="{ selector: '.innerInput', creditCard: true }" />
Configuration
All directive options must match cleave.js options. See official documentation for details.
Input selector
You can pass selector option to query nested <input> element. This can be helpful in components with difficult structure.
Default selector is 'input'.
