vue-component-easy

install

npm

npm install vue-component-easy --save

yarn

yarn add vue-component-easy

Usage

// main.js

import Vue from "vue";
import "vue-component-easy/lib/theme/index.css"; // 如已引入element或ant样式,则不用引入改样式

// 单独引用/alone
import { VueNumberEasy } from "vue-component-easy";
Vue.use(VueNumberEasy);

// 或/or

// 全部引用/all
import VueComponentEasy from "vue-component-easy";
Vue.use(VueComponentEasy);

<template>
  <VueNumberEasy v-model="value"></VueNumberEasy>
</template>

<script>

export default {
  data () {
    return {
      value: null
    }
  }
}
</script>

CDN

例如: 使用 jsdelivrCDN

<!-- index.html -->
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/vue-component-easy@latest/lib/theme/index.css"></link>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-component-easy@latest/lib/vue-component-easy.umd.min.js"></script>

如果 Vue 通过 npm 安装(不通过 CDN 引入),则需要加入下列代码

// main.js
Vue.use(window["vue-component-easy"]);

全局配置

在引入时，可以传入一个全局配置对象。该对象目前支持 UIClass 字段。UIClass 用于改变组件的默认样式。按照引入的方式，具体操作如下：

完整引入:

// main.js
import Vue from "vue";
import VueComponentEasy from "vue-component-easy";
Vue.use(VueComponentEasy, { UIClass: "ant" });

按需引入:

// main.js
import Vue from "vue";
import { VueNumberEasy } from "vue-component-easy";
Vue.prototype.$EASY = { UIClass: "ant" };
Vue.use(VueNumberEasy);

Options

Props

Props	Type	Default	Description
value / v-model	number	null	绑定值
numberType	String	positiveInt	类型; 例如:正整数(positiveInt), 整数(int), 正浮点数(positiveFloat), 浮点数(float)
decimal	number	2	小数点保留位数(需在positiveFloat或float模式下使用)
prepend	String	""	前置字符
append	String	""	后置字符
UIClass	String	"element"	使用样式: "element" 或 "ant"(需引入相应的框架样式)

event

event	Description	Callback Arguments
input	输入事件	value
focus	聚焦事件	value
blur	失焦事件	value
change	值变化事件	value