John Au-YeungSubscribe to my email list now at http://jauyeung.net/subscribe/
Follow me on Twitter at https://twitter.com/AuMayeung
Many more articles at https://medium.com/@hohanga
Even more articles at http://thewebdev.info/
Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how the best packages for adding QR codes, input masks, animation CSS, and file upload.
qrcode.vue
To add a QR code to our Vue app, we can use the qrcode.vue component.
To install it, we can run:
npm i qrcode.vue
Then we can use it by writing:
<template>
<div>
<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
</div>
</template>
<script>
import QrcodeVue from "qrcode.vue";
export default {
data() {
return {
value: "https://example.com",
size: 300
};
},
components: {
QrcodeVue
}
};
</script>
We use the qrcode-vue component.
size changes the size.
level is the level of error correction. L for low, M for medium, Q for quantile, and H for high.
The background and foreground can also change.
It can also be rendered as a SVG or canvas.
vue-image-crop-upload
The vue-image-crop-upload component lets us create an image cropper with upload capability.
To install it, we run:
npm i vue-image-crop-upload
Then we can use it by writing:
<template>
<div>
<my-upload
field="img"
[@crop](http://twitter.com/crop "Twitter profile for @crop")-success="cropSuccess"
[@crop](http://twitter.com/crop "Twitter profile for @crop")-upload-success="cropUploadSuccess"
[@crop](http://twitter.com/crop "Twitter profile for @crop")-upload-fail="cropUploadFail"
v-model="show"
:width="300"
:height="300"
url="/upload"
lang-type="en"
:params="params"
:headers="headers"
img-format="png"
></my-upload>
<img :src="imgDataUrl">
</div>
</template>
<script>
import myUpload from "vue-image-crop-upload";
export default {
data() {
return {
show: true,
params: {
token: "123456798",
name: "avatar"
},
headers: {
smail: "*_~"
},
imgDataUrl: ""
};
},
components: {
"my-upload": myUpload
},
methods: {
toggleShow() {
this.show = !this.show;
},
cropSuccess(imgDataUrl, field) {
this.imgDataUrl = imgDataUrl;
},
cropUploadSuccess(jsonData, field) {
console.log(jsonData, field);
},
cropUploadFail(status, field) {
console.log(status, field);
}
}
};
</script>
v-model is used for showing and hiding the cropper.
The events are for listening to various cropping events.
The format can be changed.
lang sets the language of the cropper.
vue2-animate for Vue.js 2
vue2-animate for Vue.js 2 is a CSS animation library.
To install it, we run:
npm i vue2-animate
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import "vue2-animate/dist/vue2-animate.min.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<button @click="show = !show">toggle</button>
<transition name="fade">
<p v-if="show" style="animation-duration: 0.3s">hello</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
We add the CSS so that we can use them instead of writing our own CSS code.
Now we can just add the transition or transition-group without adding our own CSS.
Vue Input Mask
Vue Input Mask lets us add an input mask to our Vue app.
To use it, we install it by running:
npm i vue-text-mask
Then we use it by writing:
<template>
<div>
<label>Number</label>
<masked-input
type="text"
name="phone"
class="form-control"
v-model="phone"
:mask="[/d/, /d/, /d/]"
:guide="false"
placeholderChar="#"
></masked-input>
</div>
</template>
<script>
import MaskedInput from "vue-text-mask";
export default {
components: {
MaskedInput
},
data() {
return {
phone: ""
};
}
};
</script>
We bind the value entered to the v-model with phone .
The mask prop sets the input format, and we set each character with a regex.
v-money
v-money is another input mask component, but it only works with entering currencies.
To install it, we run:
npm i v-money
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import money from "v-money";
Vue.use(money, { precision: 2 });
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<money v-model="price" v-bind="money"></money>
{{price}}
</div>
</template>
<script>
import { Money } from "v-money";
export default {
components: { Money },
data() {
return {
price: 0,
money: {
decimal: ",",
thousands: ".",
prefix: "$ ",
suffix: " US",
precision: 2,
masked: false
}
};
}
};
</script>
precision is the decimal number’s decision.
We set all the properties in money as props with v-bind="money" .
So we can set the decimal separator, thousands separator, prefix, suffix, and more.
Conclusion
qrcode.vue lets us add a QR code.
v-money lets us add a money input.
Vue Input Mask is a more versatile input mask component.
vue-image-crop-upload is an image cropper.
The post Top Vue Packages for Adding QR Codes, Input Masks, Animation CSS, and File Upload appeared first on The Web Dev.
