vue-numeric
Version:
Input field component to display currency value based on Vue.
173 lines (163 loc) • 5.66 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>vue-numeric demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<section class="hero is-primary is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">
Vue Numeric
</h1>
<h2 class="subtitle">
Input field component to display currency value based on Vue.js
</h2>
</div>
</div>
</section>
<div class="section container">
<div class="columns is-multiline is-mobile">
<div class="column is-12 has-text-centered">
<p class="control">
<label class="label"> Value: {{ money }} </label>
<vue-numeric
class="input is-large"
v-model="money"
:allow-clear="allowClear"
:empty-value="emptyValue"
:min="minValue"
:max="maxValue"
:currency="currency"
:separator="separator"
:precision="decimals"
:read-only="readOnly"
read-only-class="test"
>
</vue-numeric>
</p>
</div>
</div>
<hr>
<h1 class="title is-4">
Config:
</h1>
<div class="columns is-multiline is-mobile">
<div class="column is-12">
<p class="control">
<label class="label"> Currency symbol </label>
<input class="input" v-model="currency">
</p>
</div>
<div class="column is-12">
<p class="control">
<label class="label"> Minimum Value </label>
<input class="input" type="number" v-model.number="minValue">
</p>
</div>
<div class="column is-12">
<p class="control">
<label class="label"> Maximum Value </label>
<input class="input" type="number" v-model.number="maxValue">
</p>
</div>
<div class="column is-12">
<p class="control">
<label class="label"> Decimals digits </label>
<input class="input" type="number" v-model.number="decimals">
</p>
</div>
<div class="column is-12">
<p class="control">
<label class="label"> Empty Value </label>
<input class="input" type="text" v-model="emptyValue">
</p>
</div>
<div class="column is-12">
<label class="label"> Separator </label>
<p class="control">
<label class="radio">
<input type="radio" value="," v-model="separator">
use ',' as separator
</label>
<label class="radio">
<input type="radio" value="." v-model="separator">
use '.' as separator
</label>
<label class="radio">
<input type="radio" value="space" v-model="separator">
use space as separator
</label>
</p>
</div>
<div class="column is-12">
<p class="control">
<input type="checkbox" v-model="readOnly">
Read Only
</p>
</div>
<div class="column is-12">
<p class="control">
<input type="checkbox" v-model="allowClear">
Allow clear
</p>
</div>
</div>
</div>
<br>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Vue Numeric</strong> by <a href="http://kevinongko.com">Kevin Ongko</a>. The source code is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>
</p>
<p>
<a href="https://www.npmjs.com/package/vue-numeric" target="_blank">
<img src="https://img.shields.io/npm/v/vue-numeric.svg">
<img src="https://img.shields.io/npm/dt/vue-numeric.svg">
<img src="https://img.shields.io/npm/dm/vue-numeric.svg">
<img src="https://img.shields.io/npm/l/vue-numeric.svg">
</a>
</p>
<p>
<a href="https://github.com/kevinongko/vue-numeric" target="_blank">
<img src="https://img.shields.io/github/stars/kevinongko/vue-numeric.svg?style=social&label=Star">
<img src="https://img.shields.io/github/forks/kevinongko/vue-numeric.svg?style=social&label=Fork">
</a>
</p>
</div>
</div>
</footer>
</div>
<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/vue-numeric"></script>
<script>
Vue.use(VueNumeric.default)
new Vue({
el: '#app',
data: {
money: 1000,
allowClear: true,
emptyValue: '',
minValue: 0,
maxValue: 999999,
currency: '$',
decimals: 2,
separator: ',',
readOnly: false
}
})
</script>
</body>
</html>