Верхние пакеты VUE для добавления QR -кодов, масок ввода, анимации CSS и загрузки файлов

Подписаться на мой список адресов электронной почты сейчас в http://jauyeung.net/subscribe/

Следуй за мной в Твиттере в https://twitter.com/AuMayeung

Еще много статей в https://medium.com/@hohanga

Еще больше статей в http://thewebdev.info/

Vue.js – это простая в использовании платформу веб -приложений, которую мы можем использовать для разработки интерактивных приложений переднего конечного конечности.

В этой статье мы рассмотрим, как лучшие пакеты для добавления QR -кодов, масок ввода, анимации CSS и загрузки файлов.

qrcode.vue

Чтобы добавить QR -код в наше приложение VUE, мы можем использовать компонент QRCode.vue.

Чтобы установить его, мы можем запустить:

npm i qrcode.vue

Тогда мы можем использовать его, написав:

Мы используем qrcode-vue составная часть.

размер меняет размер.

Уровень это уровень коррекции ошибок. L для низкого, m для среднего, q для квантиля и h для высокого.

Фон и передний план также могут измениться.

Его также можно отображать как SVG или холст.

VUE-IMAGE-CROP-UPLAYD

Компонент Vue-image-crop-upload позволяет нам создавать обрезку изображения с возможностью загрузки.

Чтобы установить его, мы запускаем:

npm i vue-image-crop-upload

Тогда мы можем использовать его, написав:

V-модель используется для показы и скрытия урожая.

События предназначены для прослушивания различных событий обрезки.

Формат может быть изменен.

lang Устанавливает язык Cropper.

vue2-animate для vue.js 2

VUE2-ANIMET для VUE.JS 2-библиотека анимации CSS.

Чтобы установить его, мы запускаем:

npm i vue2-animate

Тогда мы можем использовать его, написав:

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

Мы добавляем CSS, чтобы мы могли использовать их вместо того, чтобы писать наш собственный код CSS.

Теперь мы можем просто добавить Переход или Переходная группа не добавляя наш собственный CSS.

Входная маска VUE

Входная маска VUE позволяет нам добавить входную маску в наше приложение VUE.

Чтобы использовать его, мы устанавливаем, работая:

npm i vue-text-mask

Затем мы используем его, написав:

Мы связываем значение, введенное в V-модель с Телефон Анкет

Маска Опора устанавливает входной формат, и мы устанавливаем каждый символ с помощью корпорации.

V-Money

V-Money является еще одним компонентом входной маски, но он работает только с входом валют.

Чтобы установить его, мы запускаем:

npm i v-money

Тогда мы можем использовать его, написав:

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

точность это решение десятичного числа.

Мы устанавливаем все свойства в Деньги как реквизит с v-bind = "money" Анкет

Таким образом, мы можем установить десятичный сепаратор, сепаратор тысяч, префикс, суффикс и многое другое.

Вывод

qrcode.vue позволяет нам добавить QR -код.

V-Money позволяет нам добавить деньги.

Входная маска VUE – более универсальный компонент входной маски.

Vue-image-crop-upload-это обрезка изображения.

Пост Верхние пакеты VUE для добавления QR -кодов, масок ввода, анимации CSS и загрузки файлов появился первым на Веб -разработчик Анкет

Оригинал: “https://dev.to/aumayeung/top-vue-packages-for-adding-qr-codes-input-masks-animation-css-and-file-upload-12dk”