Vue是通过webpack实现的模块化，因此可以使用import来引入模块，例如：
import Vue from 'vue'
import Router from 'vue-router'
import util from '@assets/js/util'
以上导入相应的模块，此外，你还可以在 webpack.conf.js 文件中修改相关配置：
resole:{
extensions:['.js','.vue','.json'], // 文件扩展名
alias:{
'vue$':'vue/dist/vue.esm.js',
'@':resolve('src'),
}
},上面意思是，你的模块可以省略 ".js"，".vue"，“.json” 后缀，webpack 静态模块打包工具会自动添加上这些后缀名；可以用 "@" 符号代替 "src" 字符串等。
export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。
export 和export default 的区别在于：export 可以导出多个命名模块，例如：
// Acomponent.js 文件中定义了常量str语法函数add(); 并导出该文件中的str,add()函数,以便其他的js文件使用;
// str,add() 作用域为该文件,其他文件不能使用,根据ES6语法,通过export导出str,add(),以便其他.js文件可以使用改变量;
export const str = 'hello world'
export function add(a){
return a+1
}如在Bcomponent.js文件中使用str常量,add函数,需要通过import引入Acomponent.js模块；
// 引入Acomponent.js文件或者模块中的常量str,函数add; 注意需要使用大括号{}符；
import { str, add } from 'Acomponent'export default 只能导出一个默认模块，这个模块可以匿名，例如：
// Acomponent.js
导出 包含a,b两个常量的匿名对象;
export default {
a: 'hello',
b: 'world'
}//Bcomponent.js 在Bcomponent.js文件中引入Acomponent.js文件中功能对象
import obj from 'Acomponent'
切记，一个js文件中，只能有一个export default；具体理解为：Acomponent.js文件中只能定义一个export default {} 这样的代码块;
但是，一个js文件中，可以有多个export
实例一(定义各种异常码)：
// 在errorcode.js文件中
// 定义一个对象,匿名导出
export default {
'000': '操作太频繁，请勿重复请求',
'401': '当前操作没有权限',
'403': '当前操作没有权限',
'404': '资源不存在',
'417': '未绑定登录账号，请使用密码登录后绑定',
'423': '演示环境不能操作，如需了解联系冷冷',
'426': '用户名不存在或密码错误',
'428': '验证码错误,请重新输入',
'429': '请求过频繁',
'479': '演示环境，没有权限操作',
'default': '系统未知错误,请反馈给管理员'
}实例二(定义阿里云图标)：
// iconList.js文件
// 定义阿里云图标集合
export default [
{
label: '阿里云图标',
list: [
'iconfont icon-quanxianguanli',
'iconfont icon-yonghuguanli',
'iconfont icon-jiaoseguanli',
'iconfont icon-web-icon-',
'iconfont icon-xitongguanli',
'iconfont icon-rizhiguanli',
'iconfont icon-navicon-zdgl',
'iconfont icon-weibiaoti46',
'iconfont icon-miyue',
'iconfont icon-shouji',
'iconfont icon-miyue',
'iconfont icon-denglvlingpai',
'iconfont icon-luyou',
'iconfont icon-msnui-supervise',
'iconfont icon-server',
'iconfont icon-wendang',
'iconfont icon-gtsquanjushiwufuwuGTS',
'iconfont icon-caidanguanli',
'iconfont icon-guanwang',
'iconfont icon-guanwangfangwen',
'iconfont icon-guiji',
'iconfont icon-fensiguanli',
'iconfont icon-gongzhonghao',
'iconfont icon-anniu_weixincaidanlianjie',
'iconfont icon-weixincaidan',
'iconfont icon-xiaoxiguanli',
'iconfont icon-zhexiantu',
'iconfont icon-canshu',
'iconfont icon-erji-zuhushouye',
'iconfont icon-pay6zhifu',
'iconfont icon-zhifuqudaoguanli',
'iconfont icon-dingdan',
'iconfont icon-tuikuan',
'iconfont icon-webicon14',
'iconfont icon-shouyintai',
'iconfont icon-wenjianguanli',
'iconfont icon-mysql',
'iconfont icon-shejiyukaifa-',
'iconfont icon-record',
'iconfont icon-biaodanbiaoqian'
]
}
]例子三(定义对象)
/**一个文件只能定义一个export default{},不能定义其他的export default代码块;**/
// 定义website.js模块文件,在webpack中一切文件都是模块
export default {
title: 'TPLN',
logo: 'TPLN',
key: 'tpln', //配置主键,目前用于存储
indexTitle: '托普朗宁(背景)基础能力平台',
whiteList: ['/login', '/404', '/401', '/lock'], // 配置无权限可以访问的页面
whiteTagList: ['/login', '/404', '/401', '/lock' ], // 配置不添加tags页面 （'/advanced-
router/mutative-detail/*'——*为通配符）
lockPage: '/lock',
tokenTime: 6000,
infoTitle: '托普朗宁 基础能力平台',
statusWhiteList: [428],
// 配置首页不可关闭
isFirstPage: false,
fistPage: {
label: '首页',
value: '/wel/index',
params: {},
query: {},
group: [],
close: false
},
// 配置菜单的属性
menu: {
props: {
label: 'label',
path: 'path',
icon: 'icon',
children: 'children'
}
}
}
严格遵循ES6语法
--------------------------------------------------前端校验工具组件------------------------------------------------------
// validate.js 工具模块
/**
* 邮箱
* @param {*} s
*/
export function isEmail (s) {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}
/**
* 手机号码
* @param {*} s
*/
export function isMobile (s) {
return /^1[0-9]{10}$/.test(s)
}
/**
* 电话号码
* @param {*} s
*/
export function isPhone (s) {
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}
/**
* URL地址
* @param {*} s
*/
export function isURL (s) {
return /^http[s]?:\/\/.*/.test(s)
}
export function isvalidUsername (str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri */
export function validateURL (textval) {
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return urlregex.test(textval)
}
/* 小写字母 */
export function validateLowerCase (str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/* 大写字母 */
export function validateUpperCase (str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/* 大小写字母 */
export function validatAlphabets (str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/* 验证pad还是pc */
export const vaildatePc = function () {
const userAgentInfo = navigator.userAgent
const Agents = ['Android', 'iPhone',
'SymbianOS', 'Windows Phone',
'iPad', 'iPod'
]
let flag = true
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
return flag
}
/**
* validate email
* @param email
* @returns {boolean}
*/
export function validateEmail (email) {
const re = /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return re.test(email)
}
/**
* 判断身份证号码
*/
export function cardid (code) {
let list = []
let result = true
let msg = ''
var city = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江 ',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北 ',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏 ',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外 '
}
if (!validatenull(code)) {
if (code.length == 18) {
if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
msg = '证件号码格式错误'
} else if (!city[code.substr(0, 2)]) {
msg = '地址编码错误'
} else {
// 18位身份证需要验证最后一位校验位
code = code.split('')
// ∑(ai×Wi)(mod 11)
// 加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
// 校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
var sum = 0
var ai = 0
var wi = 0
for (var i = 0; i < 17; i++) {
ai = code[i]
wi = factor[i]
sum += ai * wi
}
if (parity[sum % 11] != code[17]) {
msg = '证件号码校验位错误'
} else {
result = false
}
}
} else {
msg = '证件号码长度不为18位'
}
} else {
msg = '证件号码不能为空'
}
list.push(result)
list.push(msg)
return list
}
/**
* 判断手机号码是否正确
*/
export function isvalidatemobile (phone) {
let list = []
let result = true
let msg = ''
var isPhone = /^0\d{2,3}-?\d{7,8}$/
// 增加134 减少|1349[0-9]{7}，增加181,增加145，增加17[678]
if (!validatenull(phone)) {
if (phone.length == 11) {
if (isPhone.test(phone)) {
msg = '手机号码格式不正确'
} else {
result = false
}
} else {
msg = '手机号码长度不为11位'
}
} else {
msg = '手机号码不能为空'
}
list.push(result)
list.push(msg)
return list
}
/**
* 判断姓名是否正确
*/
export function validatename (name) {
var regName = /^[\u4e00-\u9fa5]{2,4}$/
if (!regName.test(name)) return false
return true
}
/**
* 判断是否为整数
*/
export function validatenum (num, type) {
let regName = /[^\d.]/g
if (type == 1) {
if (!regName.test(num)) return false
} else if (type == 2) {
regName = /[^\d]/g
if (!regName.test(num)) return false
}
return true
}
/**
* 判断是否为小数
*/
export function validatenumord (num, type) {
let regName = /[^\d.]/g
if (type == 1) {
if (!regName.test(num)) return false
} else if (type == 2) {
regName = /[^\d.]/g
if (!regName.test(num)) return false
}
return true
}
/**
* 判断是否为空
*/
export function validatenull (val) {
if (typeof val === 'boolean') {
return false
}
if (typeof val === 'number') {
return false
}
if (val instanceof Array) {
if (val.length == 0) return true
} else if (val instanceof Object) {
if (JSON.stringify(val) === '{}') return true
} else {
if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return true
return false
}
return false
}
再添一实例：
import {getDetails} from '@/api/acct/acctTradeRecord'
// #slot: true, 该属性设置为true时候,不会显示该字段的表格数据
export const tableOption = {
border: true,
index: true,
indexLabel: '编号',
searchIndex: 5,
stripe: true,
menuAlign: 'center',
searchMenuSpan: 6,
editTitle: "冲账",
editBtn: false,
delBtn: false,
align: 'center',
addBtn: false,
column: [{
fixed: true,
label: 'id',
prop: 'id',
span: 24,
hide: true,
editDisplay: false,
addDisplay: false
}, {
width: 150,
label: '客户编号',
prop: 'cusNo',
overHidden: true,
search: true,
searchSpan: 4,
overHidden:true,
span: 100,
editDisabled: true,
addDisplay: false,
span: 24
}, {
width: 150,
label: '客户名称',
prop: 'cusName',
editDisabled: false,
addDisplay: true,
overHidden:true,
span: 24
}, {
width: 160,
label: '订单编号',
prop: 'refTransNo',
editDisabled: true,
editDisplay: false,
search: true,
searchSpan: 4,
overHidden:true,
addDisplay: false,
span: 24
}, {
width: 160,
label: '交易流水号',
prop: 'refTransId',
editDisabled: false,
addDisplay: true,
editDisplay: false,
span: 24
},{
width: 80,
label: '状态',
editDisplay: false,
prop: 'status',
overHidden:true,
type: 'select',
dicData: [{
label: '初始化',
value: 10
}, {
label: '记账成功',
value: 100
}, {
label: '已冲账',
value: 110
}, {
label: '记账失败',
value: -100
}]
}, {
width: 140,
label: '订单交易时间',
prop: 'transTime',
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
editDisabled: true,
overHidden:true,
editDisplay: false,
addDisplay: false,
span: 28
}, {
width: 140,
label: '凭证号',
editDisplay: false,
prop: 'voucherNo',
editDisabled: true,
addDisplay: false,
overHidden:true,
search:true,
searchSpan:4,
span: 24
}, {
label: '账套编码',
overHidden:true,
prop: 'osbCode',
editDisplay: false,
editDisabled: false,
addDisplay: false,
span: 24
}, {
width: 170,
label: '交易类型',
prop: 'trxCode',
overHidden:true,
dicData: [
{
label: '流量豆充值',
value: 'V00001'
},{
label: '流量豆支出',
value: 'V00002'
},{
label: '流量豆退款冻结',
value: 'V00003'
},{
label: '流量豆退款成功',
value: 'V00004'
},{
label: '流量豆退款失败',
value: 'V00005'
},{
label: '复活豆充值',
value: 'V00101'
},{
label: '复活豆支出',
value: 'V00102'
},{
label: '复活豆退款冻结',
value: 'V00103'
},{
label: '复活豆退款成功',
value: 'V00104'
},{
label: '复活豆退款失败',
value: 'V00105'
},{
label: '借贷调账',
value: 'C00001'
},{
label: '会员余额充值',
value: '040001'
},{
label: '会员结算户充值',
value: '040002'
},{
label: '结算户余额支付',
value: '010001'
},{
label: '余额支付',
value: '010002'
},{
label: '其他支付方式支付',
value: '010003'
},{
label: '垫资借款',
value: '050001'
},{
label: '收款通知',
value: '020001'
},{
label: '会员资金清算',
value: '020002'
},{
label: '资金结算',
value: '020003'
},{
label: '垫资还款',
value: '050002'
},{
label: '结算在途资金解冻',
value: '020005'
},{
label: '结算户提现到银行卡',
value: '030001'
},{
label: '结算户提现到余额',
value: '030002'
},{
label: '余额户提现',
value: '030003'
},{
label: '提现成功',
value: '030004'
},{
label: '余额户转结算户',
value: '060001'
},{
label: '余额户转营销户',
value: '060002'
},{
label: '营销户转结算户',
value: '060003'
},{
label: '头寸资金清算',
value: '020004'
}
],
editDisabled: false,
editDisplay: false,
addDisplay: false,
span: 24
}, {
width: 180,
label: '备注',
prop: 'memo',
overHidden: true,
editDisabled: false,
editDisplay: false,
addDisplay: false,
span: 24
}, {
label: '币种',
prop: 'currType',
editDisabled: false,
editDisplay: false,
overHidden:true,
addDisplay: false,
span: 24
}, {
width: 120,
label: '入账金额(元)',
prop: 'amount',
sortable: true,
overHidden:true,
slot:true,
editDisabled: false,
editDisplay: false,
addDisplay: false,
span: 24
}, {
width: 120,
label: '付方手续费',
prop: 'payerFee',
slot: true,
editDisplay: false,
sortable: true,
editDisabled: false,
addDisplay: false,
span: 24
}, {
width: 120,
label: '付方账套编码',
prop: 'payerOsbCode',
editDisplay: false,
editDisabled: false,
addDisplay: false,
span: 24
}, {
label: '付方性质',
prop: 'payerAcctNature',
editDisabled: false,
editDisplay: false,
addDisplay: false,
span: 24
},{
width: 120,
label: '付方载体类型',
prop: 'payerAcctCaType',
editDisabled: false,
sortable: false,
editDisplay: false,
addDisplay: false,
span: 24
},{
width: 120,
label: '付方账户类型',
prop: 'payerAcctType',
sortable: false,
editDisabled: false,
editDisplay: false,
addDisplay: false,
span: 24
},{
width: 190,
label: '付方账户',
overHidden: true,
prop: 'payerAcctNo',
editDisabled: false,
editDisplay: false,
addDisplay: false,
span: 24
}, {
width: 90,
label: '收方手续费',
prop: 'payeeFee',
span: 24,
slot: true,
editDisabled: false,
editDisplay: false,
addDisplay: false
}, {
width: 120,
label: '收方账套编码',
prop: 'payeeOsbCode',
span: 24,
overHidden: true,
editDisabled: false,
editDisplay: false,
addDisplay: false
}, {
label: '收方性质',
prop: 'payeeAcctNature',
span: 24,
overHidden: true,
editDisabled: false,
editDisplay: false,
addDisplay: false
}, {
width: 160,
label: '冲账凭证号',
editDisplay: false,
prop: 'catpVoucherNo',
span: 24,
},{
width: 150,
label: '冲账时间',
prop: 'catpTime',
type: 'datetime',
overHidden: true,
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
editDisabled: true,
editDisplay: false,
addDisplay: false,
span: 24
}, {
width: 120,
label: '收方载体类型',
prop: 'payeeAcctCaType',
span: 24,
editDisabled: false,
editDisplay: false,
addDisplay: false
}, {
width: 120,
label: '收方账户类型',
prop: 'payeeAcctType',
span: 24,
editDisabled: false,
editDisplay: false,
addDisplay: false
}, {
width: 190,
label: '收方账户',
prop: 'payeeAcctNo',
span: 24,
overHidden: true,
editDisabled: false,
editDisplay: false,
addDisplay: false
}, {
label: '返回码',
editDisplay: false,
prop: 'retCode',
span: 24,
}, {
width: 160,
label: '返回描述',
overHidden: true,
editDisplay: false,
prop: 'retMsg',
span: 24,
}, {
width: 120,
label: '创建时间',
prop: 'createTime',
type: 'datetime',
overHidden: true,
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
editDisabled: true,
editDisplay: false,
addDisplay: false,
span: 24
}]
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
