使用方法

# npm
npm install kevin-vue-utils --save-dev
# yarn
yarn add kevin-vue-utils -s

import Vue from 'vue';
import KevinVue from 'kevin-vue-utils';
Vue.use(KevinVue);

注意事项

模块使用rem布局 rem依照基数为20,按照width = 375(iphone6)适配;

包含模块

• K-messageBox
• K-swipe
• K-toast

K-messageBox使用说明

<K-messageBox
  :visibility="true"
  cancleBtn="取消"
  confirmBtn="确认"
  content="说明内容"
  align="left"
  @cancel="messageCancel"
  @confirm="payOkconfirm">
</K-messageBox>

• visibility:true, // 控制显示隐藏 必需.
• cancleBtn: '取消' // 自定义取消文本 默认为取消 非必须.
• confirmBtn: '确定' // 自定义确定文本 默认为确定 非必须.
• content:['第1行','第2行'] //内容 通过数组 换行显示 string 或者 Array.
• align:'left' // 内容对其方式 默认居中.
• @cancel='cancel' // 取消时候接收事件.
• @confirm='confirm' // 确认时候接收事件.

K-swipe 使用说明

<K-swipe
	id="swipe"
	:images="images"
	:params="{
		minMoveDistance: 50,
		autoPlay:true,
		autoPlayInterval:2000,
		lazy:false}">
</K-swipe>

• images:[] // 图片连接地址数组 Array
• params
  • minMoveDistance:50, // 最小滑动距离px 默认50,
  • autoPlay:true, // 是否自动播放 默认true
  • autoPlayInterval:2000, // 自动播放时间 默认2000毫秒
  • lazy:false // 是否开启图片懒加载 开启lazy时 依赖 v-lazy

K-toast使用说明

<Toast ref="tosat"></Toast>

// 提示内容 自动关闭时间 是否开启loading图标
// 提示内容必填 其余非必填
Vue.$refs.tosat.show('提示内容', 2000, true);
Vue.$refs.tosat.hide();