例子没怎么写完等以后有时间再补充吧
some components by Vue.js
# 下载
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
布局框架
提供移动端框架
左侧滑动菜单
导入LeftSlideMenu 给Vue对象添加components 引用
import LeftSlideMenu from '~ LeftSlideMenu.vue';
var vm = {
components: {
LeftSlideMenu
}
}
<left-slide-menu></left-slide-menu>
LeftSlideMenu需要提供一个配置 option 和一个展示内容的 slot, slol 为 content
{
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;
工具组件
弹框组件
导入 popup
import {
MessageBox,
Loading,
Prompt
} from '~ popup'
-
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) { ... });
-
Loading 加载框
//显示加载框 Loading.show(); //隐藏加载框 Loading.hide();
-
Prompt 漂浮提示框
Prompt('msg');
vue_framework/src/library
- js目录
提供数据加载的配置
导入
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) {
...
});
导入
import paging from '~ paging'
初始化
paging(option);
初始化参数
{
//错误监听
error() {},
//成功监听
success() {},
//调用后台数据使用的方法
dataSource() {},
//调用参数
params: {},
//页码
pageNo: 1,
//每页条数
pageSize: 10,
//dataSource,调用使用,参考dataSource
urlKey: '',
//后台返回数据的拼接路径
dataFrom: null
}
初始化对象提供的属性方法
//请求的所有分页数据
paging.dataList
//最后一次请求的完整数据
paging.data
//获取下一页数据
paging.next()
指令
参考Vue指令,指令基本都是全局的引用
参数为需要生成二维码的内容
<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>
请配合city filter 一起使用展示数据
<input v-city-scroll type="text" placeholder="点击选择城市" readonly="" />
创建初始化参数
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="" />
Vue 过滤器
geoId 转换 省市,双向过滤
<span>{{geoId | city}}</span>
转换保留两位小数, 双向过滤
<span>{{288 | currencyDisplay}}</span>
参数为转换的格式
-
date
<span>{{date | date 'yyyy-mm-dd'}}</span>
-
yyyymmdd
支持8位和14位
<span>{{'19990811' | date 'yyyy-mm-dd'}}</span>
性别转换,1 -> 男, 其他 -> 女
<span>{{1 | gender}}</span>
语言现实转换,en -> 英文, 其他 -> 中文
<span>{{1 | language}}</span>
第三方设备相关
导入
import {
Scaner,
Print,
MagneticReader
} from '../../library/sdk/wangpos'
-
Scaner
调用扫码组件,扫码成功后进入会掉函数
Scaner(function(value) { ... });
-
Print
调用打印组件
Print('printText');
-
MagneticReader
调用磁条拉卡
启用
第一个参数是监听的唯一key, 建议采用时间戳
参数2是回调函数返回拉卡的结果
MagneticReader(timeStamp, function(value) { ... });
停用
参数是启用时传入的唯一key
MagneticReader.stop(timeStamp);