vue-framework

例子没怎么写完等以后有时间再补充吧

some components by Vue.js

Build Setup

# 下载
npm install vue-framework

# install dependencies
npm install

# serve with hot reload at localhost:8088
npm run dev

# build for production with minification
npm run build

用法

公共模板

vue_framework/src/components

• 模板目录
  • framework 框架
    • phone
      • LeftSlideMenu.vue
  • tools
    • popup 弹框组件

framework 框架

布局框架

phone

提供移动端框架

LeftSlideMenu.vue

左侧滑动菜单

使用方法:

导入LeftSlideMenu 给Vue对象添加components 引用

	import LeftSlideMenu from '~ LeftSlideMenu.vue';
	
	var vm = {
		components: {
			LeftSlideMenu
		}
	}

在模板中引用

	<left-slide-menu></left-slide-menu>

LeftSlideMenu需要提供一个配置 option 和一个展示内容的 slot, slol 为 content

option 配置:

	{
		title: '',   //标题
		letfBtn: {
			icon : '',	//左上的按钮,默认为展开左侧的菜单栏
			click : fn 	//修改左上按钮后,触发该回掉
		},
		menus: [	 //左侧展示的菜单列表
			{
				title: '菜单名',
				url: '路由地址'
			}
		]
	}

引用实例:

	<left-slide-menu :options="options">
		<div slot="content" style="height: 100%;">
			<router-view :title.sync="options.title">
			</router-view>
		</div>
	</left-slide-menu>

默认样式

	//菜单背景颜色
	$color: #006600 !default;
	
	//头部背景色
	$topColor: #2cb300 !default;
	
	//头部高度
	$titleHight: 60px !default;
	
	//左侧菜单宽度
	$menuWidth: 160px !default;
	
	//菜单字体大小
	$menuFontSize: 16px !default;
	
	//头部字体大小
	$titleFontSize: 14px !default;
	
	//左侧logo高度
	$logoHeight: 100px !default;
	
	//左侧logo宽度
	$logoWidth: 100px !default;
	
	//组测logo背景图
	$logo: url(../../../assets/logo.png) !default;
	
	//左侧按钮字体大小
	$menuEnlarger: 1em !default;

tools

工具组件

popup

弹框组件

使用方法

导入 popup

	import {
		MessageBox,
		Loading,
		Prompt
	} from '~ popup'

1. MessageBox 提示框

   具体参考: vue-msgbox

   alert

   	MessageBox.alert(message, title, options).then(function(action) {
   	...
   	});

   confirm

   	MessageBox.confirm(message, title, options).then(function(action) {
   	  ...
   	});

   prompt

   	MessageBox.prompt(message, title, options).then(function(value, action) {
   	  ...
   	});

2. Loading 加载框

      
   	//显示加载框
   	Loading.show();
   	//隐藏加载框
   	Loading.hide();

3. Prompt 漂浮提示框

   	Prompt('msg');

js 资源

vue_framework/src/library

• js目录
  • dataSource 数据加载
  • paging 分页加载
  • directive Vue指令
    • barCode 条码
    • citySelect 城市选择
    • mobiscroll 日期组件(手机滚动基础组件)
    • validate 数据校验
  • filter Vue过滤器
    • city 城市过滤器
    • curreny.js 城市过滤器
    • date.js 城市过滤器
    • gender.js 城市过滤器
    • language.js 城市过滤器
  • SDK SDK工具
    • wangpos jsSDK

dataSource

提供数据加载的配置

使用方法

导入

	import dataSource from '~ dataSource'

初始化

	let urlList = {
		getCoupon: {
			//默认 false
			isTest: true,
			//allUrl: "http://aaaa",	 可选配置,配置不同域名下的调用,不支持测试,配置后url失效
			url: "/getCoupon",
			//配置缓存的次数,当参数和url一样的时候从缓存获取数据,缓存数据可以使用的次数
			//默认0 不缓存
			cacheCount: 20,
			//配置同url下不同参数的缓存个数
			//默认1缓存1个
			cacheMore: 2,
			//默认post
			type: 'post'
		}
	}
	let test = 'http://120.26.221.15/mockjsdata/5';
	let bulid = '/scrm-pe-wechat';
	dataSource.init(urlList, bulid, test);

调用

	getData('getCoupon', paramet, successFn, errorFn);

监听

	dataSource.before(function() {
		...
	});
	dataSource.after(function(data) {
		...
	});

paging

导入

	import paging from '~ paging'

初始化

	paging(option);

初始化参数

dataSource 参考这里

	{	
		//错误监听
		error() {},
		//成功监听
		success() {},
		//调用后台数据使用的方法
		dataSource() {},
		//调用参数
		params: {},
		//页码
		pageNo: 1,
		//每页条数
		pageSize: 10,
		//dataSource,调用使用,参考dataSource
		urlKey: '',
		//后台返回数据的拼接路径
		dataFrom: null
	}

初始化对象提供的属性方法

	//请求的所有分页数据
	paging.dataList
	
	//最后一次请求的完整数据
	paging.data
	
	//获取下一页数据
	paging.next()

directive

指令

参考Vue指令,指令基本都是全局的引用

barCode

使用方法

参数为需要生成二维码的内容

	<svg v-bar-code="888888"></svg>

20116-7-5 修改ios不能现实数字的问题

	<div v-bar-code="888888"></div>

如需要现实条码下侧数字则使用

	<svg v-bar-code.val="888888"></svg>

20116-7-5 修改ios不能现实数字的问题

	<div v-bar-code.val="888888"></div>

citySelect

使用方法

请配合city filter 一起使用展示数据

	<input v-city-scroll type="text" placeholder="点击选择城市" readonly="" />

mobiscroll

使用方法

创建初始化参数

 	let data = {
		theme: 'mobiscroll',
		display: 'bottom',
		lang: 'zh',
		defaultValue: new Date(),
		max: new Date()
	}

添加指令,请配合 date filter 一起使用展示数据

	<input type="text"  v-date-scroll="date" placeholder="点击选择日期" readonly="" />

filter

Vue 过滤器

city

geoId 转换 省市,双向过滤

	<span>{{geoId | city}}</span>

curreny

转换保留两位小数, 双向过滤

	<span>{{288 | currencyDisplay}}</span>

date

参数为转换的格式

1. date

   	<span>{{date | date 'yyyy-mm-dd'}}</span>

2. yyyymmdd

   支持8位和14位

   	<span>{{'19990811' | date 'yyyy-mm-dd'}}</span>

gender

性别转换,1 -> 男, 其他 -> 女

	<span>{{1 | gender}}</span>

language

语言现实转换,en -> 英文, 其他 -> 中文

	<span>{{1 | language}}</span>

SDK

第三方设备相关

wangpos

使用说明

导入

	import {
		Scaner,
		Print,
		MagneticReader
	} from '../../library/sdk/wangpos'

1. Scaner

   调用扫码组件,扫码成功后进入会掉函数

   	Scaner(function(value) {
   	...
   	});

2. Print

   调用打印组件

   	Print('printText');

3. MagneticReader

   调用磁条拉卡

   启用

   第一个参数是监听的唯一key, 建议采用时间戳

   参数2是回调函数返回拉卡的结果

   	MagneticReader(timeStamp, function(value) {
   	...
   	});

   停用

   参数是启用时传入的唯一key

   	MagneticReader.stop(timeStamp);