说明文档(Documentation)
xitech-utils
一个将项目中用到的公用js和公用组件发布到npm的工具包
目录结构(Directory Structure)
/xitech-utils/ # 项目根目录
├── /dist/ # 编译生成文件目录
├── /src/ # 源码目录
│ ├── /components/ # 公共组件目录
│ │ ├── /Button/ # 具体的组件
│ │ ├── /CountTo/ # 具体的组件
│ │ ├── /Pagination/ # 具体的组件
│ │ └── /ToolTips/ # 具体的组件
│ ├── /lang/ # 国际化目录
│ ├── /styles/ # 样式文件目录
│ │ ├── index.scss # 公共样式
│ │ ├── mixin.scss # 样式混入方法
│ │ ├── transition.scss # 过渡样式
│ │ └── variables.scss # 样式变量
│ ├── /utils/ # 公共方法文件目录
│ ├── App.vue # 组件示例页面
│ ├── index.js # 打包脚本入口
│ └── main.js # dev运行入口
├── .babelrc # 编译器配置
├── .editorconfig # 定义代码格式
├── .gitignore # git忽略文件
├── .babel.config.js # babel配置
├── index.html # dev页面入口
├── LICENCE # LICENCE
├── package-lock.json # 项目依赖锁定版本
├── package.json # 项目依赖
├── README.md # 项目文档
└── webpack.config.js # Webpack配置
构建(Build Setup)
## 进入项目目录
cd xitech-utils
## 安装依赖
npm install
### 建议不要直接使用cnpm安装依赖(会有各种诡异的 bug)。可以通过如下设置淘宝镜像的方式解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
## 启动服务
npm run dev
### 浏览器访问 [http://localhost:8080](http://localhost:8080)
发布(Publish)
## 构建生产环境
npm run build
## 发布到 npm
### 根目录执行登录命令
npm login --registry https://registry.npmjs.org
### 输入用户名 Username:
### 输入密码 Password:
### 输入邮箱 Email:
### 根目录执行发布命令
npm publish --registry https://registry.npmjs.org
安装使用(Installation and Use)
##进入项目目录执行安装命令
npm install xitech-utils
## Example
```js
<template>
<div id="bgCanvas"></div>
<xi-button size="mini" type="danger" @click="handlerClick">按钮</xi-button>
<xitech-count-to :startVal='startVal' :endVal='endVal' :duration='3000'></xitech-count-to>
<xi-pagination :pagination-config="paginationConfig" @putPagination="getPagination"></xi-pagination>
<xi-table-list
:table-config="tableConfig"
@putSort="getSort"
@putSelectData="getSelectData"
>
<template v-slot:header="header">
<xi-tool-tips
:title="header.headerData.label"
:overflow-tooltip="tableConfig.overflowTooltip"
></xi-tool-tips>
</template>
<template v-slot:content="content">
<span v-if="content.headerData.prop == 'index'">{{
content.listData.row[content.headerData.prop]
}}</span>
<span v-if="content.headerData.prop == 'operation'"
><el-button type="danger" @click="View(content.listData.row)"
>查看</el-button
></span
>
<span v-else>{{
content.listData.row[content.headerData.prop]
? content.listData.row[content.headerData.prop]
: '--'
}}</span>
</template>
</xi-table-list>
</template>
<script>
import XiUtils from 'xitech-utils'
const XiButton = XiUtils.Button
const XiCountTo = XiUtils.CountTo
const XiPagination = XiUtils.Pagination
const XiTableList = XiUtils.TableList
const XiToolTips = XiUtils.ToolTips
export default {
components: { XiButton, XiCountTo, XiPagination, XiTableList, XiToolTips },
data () {
return {
startVal: 0,
endVal: 2017,
paginationConfig: {
hideSinglePage: false,
page: 1,
size: 15,
sizeList: [10, 15, 30, 50],
layout: 'total, sizes, prev, pager, next, jumper',
total: 30,
refresh: true,
},
tableConfig: {
loading: false,
stripe: true,
border: true,
height: '60vh',
listData: [
{index: 1,name: '李达1',projectId: 'evidence0001',hash: 'hash00001',startTime: '2021-11-9 08:36:42',upChainTime: '2021-11-09 08:42:56'},
{index: 2,name: '李达2',projectId: 'evidence0002',hash: 'hash00002',startTime: '2021-11-9 08:36:42',upChainTime: '2021-11-09 08:42:56'},
{index: 3,name: '李达3',projectId: 'evidence0003',hash: 'hash00003',startTime: '2021-11-9 08:36:42',upChainTime: '2021-11-09 08:42:56'},
{index: 4,name: '李达4',projectId: 'evidence0004',hash: 'hash00004',startTime: '2021-11-9 08:36:42',upChainTime: '2021-11-09 08:42:56'},
],
loadingText: this.$t('common.loading'),
canSelectAll: true,
showSelect: true,
headerData: [
{ label: '序号', prop: 'index' },
{ label: '用户名',prop: 'name',sortable: 'custom'},
{ label: '证据id',prop: 'projectId',sortable: 'custom'},
{ label: '文件hash',prop: 'hash',sortable: 'custom'},
{ label: '开始时间',prop: 'startTime',sortable: 'custom'},
{ label: '上链时间',prop: 'upChainTime',sortable: 'custom'},
{ label: '详情',prop: 'details',sortable: 'custom'},
{ label: '操作',prop: 'operation',sortable: 'custom'},
],
overflowTooltip: true,
},
}
},
mounted() {
let lineConfig = {
zIndex: 1, // 线条显示层级
opacity: 0.8, // 线条透明度
color: '255,255,255', // 线条颜色
number: 100, // 线条数量
length: 5000, // 线条长度
mouseArea: 5000, // 鼠标影响范围
}
XiUtils.Lines('bgCanvas', lineConfig)
let starsConfig = {
angle: 135, // 星星运行方向
minSpeed: 8, // 速度最小值
maxSpeed: 12, // 速度最大值
intervalTime: 4000, // 流星出现间隔时间
lifeTime: 1000, // 流星生命周期
maxLength: 120, // 最大轨迹长度
baseRadius: 2, //星基半径
shootingRadius: 3, // 流星半径
}
XiUtils.Stars('bgCanvas', starsConfig)
XiUtils.Fishes('bgCanvas')
},
created(){
console.log('version:' + XiUtils.version) // 1.0.15
console.log(
'DES3.encrypt:' +
XiUtils.DES3.encrypt('753d137c40b6425a9cc441442cf13a67', '123456')
) // eZcO8z9l4oA=
console.log(
'DES3.decrypt:' +
XiUtils.DES3.decrypt('753d137c40b6425a9cc441442cf13a67', 'eZcO8z9l4oA=')
) // 123456
console.log('BASE64.encode:' + XiUtils.BASE64.encode('zhaochangjun')) // emhhb2NoYW5nanVu
console.log('BASE64.decode:' + XiUtils.BASE64.decode('emhhb2NoYW5nanVu')) // zhaochangjun
console.log(
'parseTime {y}-{m}-{d}:' +
XiUtils.parseTime(new Date().getTime(), '{y}-{m}-{d}')
) // ****-**-**(2021-11-03)
console.log(
'parseTime {h}:{i}:{s}:' +
XiUtils.parseTime(new Date().getTime(), '{h}:{i}:{s}')
) // **:**:**(14:26:34)
console.log(
'parseTime {y}-{m}-{d} {h}:{i}:{s}:' +
XiUtils.parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
) // ****-**-** **:**:**(2021-11-03 14:26:34)
console.log(
'parseTime {y}-{m}-{d} {h}:{i}:{s} {t}:' +
XiUtils.parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s} {t}')
) // ****-**-** **:**:** ***** (2021-11-03 14:26:34 +0800)
console.log(
'parseTime {y}-{m}-{d} {a}:' +
XiUtils.parseTime(new Date().getTime(), '{y}-{m}-{d} {a}')
) // ****-**-** 周* (2021-11-03 周三)
console.log(
'parseTime {a}:' + XiUtils.parseTime(new Date().getTime(), '{a}')
) // 周* (周三)
console.log(
'parseTime {e}:' + XiUtils.parseTime(new Date().getTime(), '{e}')
) // **** (Wednesday)
console.log(
'parseTime {y}/{m}/{d} to {y}-{m}-{d}:' +
XiUtils.parseTime('2021/11/17', '{y}-{m}-{d}')
) // ****-**-**(2021/11/03 -> 2021-11-03)
console.log(
'parseTime {y}-{m}-{d} to {y}/{m}/{d}:' +
XiUtils.parseTime('2021-11-17', '{y}/{m}/{d}')
) // ****/**/**(2021-11-03 -> 2021/11/03)
console.log(
'parseTime 2021-11-17 10:35:28 +0900:' +
XiUtils.parseTime(
'2021-11-17 10:35:28 +0900',
'{y}-{m}-{d} {h}:{i}:{s} {t}'
)
) // 2021-11-17 10:35:28 +0900 -> 2021-11-17 09:35:28 +0800
console.log(
'parseTime:' +
XiUtils.parseTime('Wed Nov 17 2021 14:09:16 GMT+0800 (中国标准时间)')
) // 2021-11-17 14:09:16
console.log('parseTime:' + XiUtils.parseTime(1637129356466)) // 2021-11-17 14:09:16
console.log('parseTime:' + XiUtils.parseTime(1637129356)) // 2021-11-17 14:09:16
console.log('formatTime:' + XiUtils.formatTime(new Date().getTime())) // 刚刚( 小于30秒)
console.log(
'formatTime:' + XiUtils.formatTime(new Date().getTime() - 30 * 60 * 1000)
) // 30分钟前(小于1小时)
console.log(
'formatTime:' + XiUtils.formatTime(new Date().getTime() - 60 * 60 * 1000)
) // 1小时前(小于24小时)
console.log(
'formatTime:' +
XiUtils.formatTime(new Date().getTime() - 24 * 60 * 60 * 1000)
) // 1天前(小于48小时)
console.log(
'formatTime:' +
XiUtils.formatTime(new Date().getTime() - 2 * 24 * 60 * 60 * 1000)
) // ****年**月**日**时**分**秒(大于2天)
console.log(
'formatTime:' +
XiUtils.formatTime(
new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
'{y}-{m}-{d} {h}:{i}:{s}'
)
) // ****-**-** **:**:**(大于2天)
console.log(
'formatTime:' +
XiUtils.formatTime('Wed Nov 17 2021 14:09:16 GMT+0800 (中国标准时间)')
) // 19分钟前
console.log('formatTime:' + XiUtils.formatTime(1637129356466)) // 19分钟前
console.log('formatTime:' + XiUtils.formatTime(1637129356)) // 19分钟前
console.log('getTimeZoneTime 7:' + XiUtils.getTimeZoneTime(7)) // 东7区时间(2021-11-17 09:47:16)
console.log('getTimeZoneTime 8:' + XiUtils.getTimeZoneTime(8)) // 东8区时间(2021-11-17 10:47:16)
console.log('getTimeZoneTime 9:' + XiUtils.getTimeZoneTime(9)) // 东9区时间(2021-11-17 11:47:16)
console.log('getTimeZoneTime -7:' + XiUtils.getTimeZoneTime(-7)) // 西7区时间(2021-11-16 19:47:16)
console.log('getTimeZoneTime -8:' + XiUtils.getTimeZoneTime(-8)) // 西8区时间(2021-11-16 18:47:16)
console.log('getTimeZoneTime -9:' + XiUtils.getTimeZoneTime(-9)) // 西9区时间(2021-11-16 17:47:16)
console.log('howMuchTime:' + XiUtils.howMuchTime('2022-11-17 11:47:33')) // 365天00时11分33秒
console.log('howMuchTime:' + XiUtils.howMuchTime('2021-11-18 11:47:33')) // 1天00时11分33秒
console.log('howMuchTime:' + XiUtils.howMuchTime('2021-11-17 16:47:33')) // 05时11分33秒
console.log('howMuchTime:' + XiUtils.howMuchTime('2021-11-17 11:47:33')) // 11分33秒
console.log('howMuchTime:' + XiUtils.howMuchTime('2021-11-17 11:36:33')) // 33秒
console.log('howMuchTime:' + XiUtils.howMuchTime('2021-11-17 11:36:00')) // 00时00分00秒
console.log(
'howMuchTime:' +
XiUtils.howMuchTime('2022-11-17 11:47:33', '{d}天{h}:{i}:{s}')
) // 365天00:11:33
console.log(
'howMuchTime:' +
XiUtils.howMuchTime('2021-11-17 16:47:33', '{d}天{h}:{i}:{s}')
) // 03:11:33
console.log(
'howMuchTime:' +
XiUtils.howMuchTime('Wed Nov 17 2021 14:09:16 GMT+0800 (中国标准时间)')
) // 00时00分00秒
console.log('howMuchTime:' + XiUtils.howMuchTime(1637129356466)) // 00时00分00秒
console.log('howMuchTime:' + XiUtils.howMuchTime(1637129356)) // 00时00分00秒
console.log(
'compareTime:' + XiUtils.compareTime('2021-11-17', '2021-11-16')
) // bigger
console.log(
'compareTime:' +
XiUtils.compareTime('2021-11-17 11:36:00', '2021-11-17 11:35:59')
) // bigger
console.log(
'compareTime:' +
XiUtils.compareTime(
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:16 GMT+0800 (中国标准时间)'
)
) // bigger
console.log(
'compareTime:' + XiUtils.compareTime(1637129356467, '1637129356466')
) // bigger
console.log(
'compareTime:' + XiUtils.compareTime('2021-11-17', '2021-11-17')
) // equal
console.log(
'compareTime:' +
XiUtils.compareTime('2021-11-17 11:36:00', '2021-11-17 11:36:00')
) // equal
console.log(
'compareTime:' +
XiUtils.compareTime(
'Wed Nov 17 2021 14:09:16 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:16 GMT+0800 (中国标准时间)'
)
) // equal
console.log(
'compareTime:' + XiUtils.compareTime('1637129356466', 1637129356466)
) // equal
console.log(
'compareTime:' + XiUtils.compareTime('2021-11-17', '2021-11-18')
) // smaller
console.log(
'compareTime:' +
XiUtils.compareTime('2021-11-17 11:36:00', '2021-11-17 11:37:01')
) // smaller
console.log(
'compareTime:' +
XiUtils.compareTime(
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:18 GMT+0800 (中国标准时间)'
)
) // smaller
console.log(
'compareTime:' + XiUtils.compareTime('1637129356467', '1637129356468')
) // smaller
console.log(
'timeInArea:' +
XiUtils.timeInArea(
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)'
)
) // true
console.log(
'timeInArea:' +
XiUtils.timeInArea(
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
1637129356468,
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)'
)
) // true
console.log(
'timeInArea:' +
XiUtils.timeInArea('2021-11-15', '2021-11-18', '2021-11-17')
) // true
console.log(
'timeInArea:' +
XiUtils.timeInArea('1637129356467', '1637129356467', 1637129356467)
) // true
console.log(
'timeInArea:' +
XiUtils.timeInArea('1637129356467', '1637129356469', 1637129356468)
) // true
console.log(
'timeInArea:' +
XiUtils.timeInArea(
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)'
)
) // false
console.log(
'timeInArea:' +
XiUtils.timeInArea(
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
'Wed Nov 17 2021 14:09:17 GMT+0800 (中国标准时间)',
1637129356468
)
) // false
console.log(
'timeInArea:' +
XiUtils.timeInArea('1637129356467', '1637129356468', 1637129356466)
) // false
console.log(
'timeInArea:' + XiUtils.timeInArea('1637129356467', '1637129356468')
) // false
console.log(
'timeInArea:' +
XiUtils.timeInArea('2021-11-15', '2021-11-18', '2021-11-19')
) // false
console.log('getConstellation:' + XiUtils.getConstellation(1, 19)) // 摩羯
console.log('getConstellation:' + XiUtils.getConstellation(1, 20)) // 水瓶
console.log('getConstellation:' + XiUtils.getConstellation(2, 18)) // 水瓶
console.log('getConstellation:' + XiUtils.getConstellation(2, 20)) // 双鱼
console.log('getConstellation:' + XiUtils.getConstellation(3, 20)) // 双鱼
console.log('getConstellation:' + XiUtils.getConstellation(3, 21)) // 白羊
console.log('getConstellation:' + XiUtils.getConstellation(4, 19)) // 白羊
console.log('getConstellation:' + XiUtils.getConstellation(4, 20)) // 金牛
console.log('getConstellation:' + XiUtils.getConstellation(5, 20)) // 金牛
console.log('getConstellation:' + XiUtils.getConstellation(5, 21)) // 双子
console.log('getConstellation:' + XiUtils.getConstellation(6, 21)) // 双子
console.log('getConstellation:' + XiUtils.getConstellation(6, 22)) // 巨蟹
console.log('getConstellation:' + XiUtils.getConstellation(7, 22)) // 巨蟹
console.log('getConstellation:' + XiUtils.getConstellation(7, 23)) // 狮子
console.log('getConstellation:' + XiUtils.getConstellation(8, 22)) // 狮子
console.log('getConstellation:' + XiUtils.getConstellation(8, 23)) // 处女
console.log('getConstellation:' + XiUtils.getConstellation(9, 22)) // 处女
console.log('getConstellation:' + XiUtils.getConstellation(9, 23)) // 天秤
console.log('getConstellation:' + XiUtils.getConstellation(10, 23)) // 天秤
console.log('getConstellation:' + XiUtils.getConstellation(10, 24)) // 天蝎
console.log('getConstellation:' + XiUtils.getConstellation(11, 22)) // 天蝎
console.log('getConstellation:' + XiUtils.getConstellation(11, 23)) // 射手
console.log('getConstellation:' + XiUtils.getConstellation(12, 21)) // 射手
console.log('getConstellation:' + XiUtils.getConstellation(12, 22)) // 摩羯
console.log(
'param2Obj:' +
JSON.stringify(
XiUtils.param2Obj('www.xichian.com?code=code&version=version')
)
) // {code: 'code', version: 'version'}
console.log(
'compareParams:' + XiUtils.compareParams({ a: 1, b: 2 }, { a: 1, b: 2 })
) // true
console.log(
'compareParams:' + XiUtils.compareParams({ a: 1, b: 2 }, { a: 2, b: 2 })
) // false
console.log(
'removeArrayObj:' +
JSON.stringify(
XiUtils.removeArrayObj(
[
{ a: 1, b: 2 },
{ a: 2, b: 2 },
{ a: 2, b: 2 },
],
{ a: 2, b: 2 }
)
)
) // [{ a: 1, b: 2 }]
console.log(
'removeArrayObj:' +
JSON.stringify(
XiUtils.removeArrayObj(
[
{ a: 1, b: 2 },
{ a: 2, b: 2 },
{ a: 2, b: 2 },
],
{ a: 1, b: 2 }
)
)
) // [{ a: 2, b: 2 },{ a: 2, b: 2 }]
console.log(
'repeatArrayObj:' +
JSON.stringify(
XiUtils.repeatArrayObj([
{ a: 1, b: 2 },
{ a: 2, b: 2 },
{ a: 1, b: 2 },
])
)
) // [{ a: 1, b: 2 },{ a: 2, b: 2 }]
console.log(
'repeatArrayObj:' +
JSON.stringify(
XiUtils.repeatArrayObj([
{ a: 1, b: 2 },
{ a: 2, b: 2 },
{ a: 1, b: 2 },
{ b: 1, c: 2 },
])
)
) // [{ a: 1, b: 2 },{ a: 2, b: 2 },{ b: 1, c: 2 }]
console.log('bytesToSize:' + XiUtils.bytesToSize(0)) // 0 B
console.log('bytesToSize:' + XiUtils.bytesToSize(50)) // 50.00 B
console.log('bytesToSize:' + XiUtils.bytesToSize(1024)) // 1.00 KB
console.log('bytesToSize:' + XiUtils.bytesToSize(1024,1024,3)) // 1.000 KB
console.log('bytesToSize:' + XiUtils.bytesToSize(1024,1000,3)) // 1.024 KB
console.log('bytesToSize:' + XiUtils.bytesToSize(1 * 1024 * 1024)) // 1.00 MB
console.log('bytesToSize:' + XiUtils.bytesToSize(1 * 1024 * 1024,1024,3)) // 1.000 MB
console.log('bytesToSize:' + XiUtils.bytesToSize(1 * 1024 * 1024,1000,3)) // 1.049 MB
console.log('bytesToSize:' + XiUtils.bytesToSize(2 * 1024 * 1024 * 1024)) // 2.00 GB
console.log(
'bytesToSize:' + XiUtils.bytesToSize(50 * 1024 * 1024 * 1024 * 1024)
) // 50.00 TB
console.log(
'bytesToSize:' +
XiUtils.bytesToSize(50 * 1024 * 1024 * 1024 * 1024 * 1024)
) // 50.00 PB
console.log('desensitize:' + XiUtils.desensitize('18716408472')) // ***********
console.log('desensitize:' + XiUtils.desensitize('18716408472', 0, 1)) // **********2
console.log('desensitize:' + XiUtils.desensitize('18716408472', 1, 2)) // 1********72
console.log('desensitize:' + XiUtils.desensitize('18716408472', 2, 3)) // 18******472
console.log('desensitize:' + XiUtils.desensitize('18716408472', 3, 4)) // 187****8472
console.log('desensitize:' + XiUtils.desensitize('18716408472', 5, 5)) // 18716*08472
console.log('desensitize:' + XiUtils.desensitize('18716408472', 6, 5)) // 18716408472
console.log('desensitize:' + XiUtils.desensitize('18716408472', 7)) // 18716408***
console.log('desensitize:' + XiUtils.desensitize('18716408472', 10)) // 1871640847*
console.log(
'desensitize:' + XiUtils.desensitize('510922199911115811', 3, 3)
) // 510************811
console.log('toChinesNum:' + XiUtils.toChinesNum(999999999999.1)) // TooLarge
console.log('toChinesNum:' + XiUtils.toChinesNum(999999999999)) // 九千九百九十九亿九千九百九十九万九千九百九十九
console.log('toChinesNum:' + XiUtils.toChinesNum(9999999.99)) // 九百九十九万九千九百九十九点九九
console.log('toChinesNum:' + XiUtils.toChinesNum(98.99)) // 九十八点九九
console.log('toChinesNum:' + XiUtils.toChinesNum(0.99)) // 零点九九
console.log('toChinesNum:' + XiUtils.toChinesNum(0)) // 零
console.log('toChinesNum:' + XiUtils.toChinesNum(999999999999, true)) // 玖仟玖佰玖拾玖亿玖仟玖佰玖拾玖万玖仟玖佰玖拾玖元整
console.log('toChinesNum:' + XiUtils.toChinesNum(9999999.99, true)) // 玖佰玖拾玖万玖仟玖佰玖拾玖元玖角玖分
console.log('toChinesNum:' + XiUtils.toChinesNum(98.99, true)) // 玖拾捌元玖角玖分
console.log('toChinesNum:' + XiUtils.toChinesNum(0.99, true)) // 零元玖角玖分
console.log('toChinesNum:' + XiUtils.toChinesNum(0, true)) // 零元整
console.log('keepTwoDecimal:' + XiUtils.keepTwoDecimal(0)) // 0.00
console.log('keepTwoDecimal:' + XiUtils.keepTwoDecimal(0.1)) // 0.10
console.log('keepTwoDecimal:' + XiUtils.keepTwoDecimal(0.16)) // 0.16
console.log('keepTwoDecimal:' + XiUtils.keepTwoDecimal(10)) // 10.00
console.log('keepTwoDecimal:' + XiUtils.keepTwoDecimal(10.1)) // 10.10
console.log('keepTwoDecimal:' + XiUtils.keepTwoDecimal(10.15)) // 10.15
console.log('0.1 + 0.2 =' + (0.1 + 0.2)) // 0.30000000000000004
console.log('0.1 + 0.7 =' + (0.1 + 0.7)) // 0.7999999999999999
console.log('0.2 + 0.4 =' + (0.2 + 0.4)) // 0.6000000000000001
console.log('arithmetics-add: 0.1 + 0.2 =' + XiUtils.arithmetics(0.1, 0.2)) // 0.3
console.log('arithmetics-add: 0.1 + 0.7 =' + XiUtils.arithmetics(0.1, 0.7)) // 0.8
console.log(
'arithmetics-add: 0.2 + 0.4 =' + XiUtils.arithmetics(0.2, 0.4, 'add')
) // 0.6
console.log('0.3 - 0.2 =' + (0.3 - 0.2)) // 0.09999999999999998
console.log('1.5 - 1.2 =' + (1.5 - 1.2)) // 0.30000000000000004
console.log(
'arithmetics-sub: 0.3 - 0.2 =' + XiUtils.arithmetics(0.3, 0.2, 'sub')
) // 0.1
console.log(
'arithmetics-sub: 1.5 - 1.2 =' + XiUtils.arithmetics(1.5, 1.2, 'sub')
) // 0.3
console.log('0.8 * 3 =' + 0.8 * 3) // 2.4000000000000004
console.log('19.9 * 100 =' + 19.9 * 100) // 1989.9999999999998
console.log('arithmetics-mul: 0.8 * 3 =' + XiUtils.arithmetics(0.8, 3)) // 2.4
console.log(
'arithmetics-mul: 19.9 * 100 =' + XiUtils.arithmetics(19.9, 100, 'mul')
) // 1990
console.log('0.3 / 0.1 =' + 0.3 / 0.1) // 2.9999999999999996
console.log('0.69 / 10 =' + 0.69 / 10) // 0.06899999999999999
console.log(
'arithmetics-div: 0.3 / 0.1 =' + XiUtils.arithmetics(0.3, 0.1, 'div')
) // 3
console.log(
'arithmetics-div: 0.69 / 10 =' + XiUtils.arithmetics(0.69, 10, 'div')
) // 0.069
console.log('uuid:' + XiUtils.uuid()) // 随机 uuid:********************************
console.log('getToken:' + XiUtils.getToken('token')) // undefined -> getToken:随机 uuid
XiUtils.setToken('token', '753d137c40b6425a9cc441442cf13a67')
console.log('setToken-getToken:' + XiUtils.getToken('token')) // setToken-getToken:753d137c40b6425a9cc441442cf13a67
XiUtils.removeToken('token')
console.log('removeToken-getToken:' + XiUtils.getToken('token')) // undefined -> removeToken-getToken:随机 uuid
console.log('isExternal:' + XiUtils.isExternal('https://www.xichian.com')) // true
console.log('isExternal:' + XiUtils.isExternal('www.xichian.com')) // false
console.log('validEmail:' + XiUtils.validEmail('316942423@qq.com')) // true
console.log('validEmail:' + XiUtils.validEmail('316942423.qq.com')) // false
console.log('validPhone:' + XiUtils.validPhone('18716408472')) // true
console.log('validPhone:' + XiUtils.validPhone('12345678910')) // false
console.log('validCode:' + XiUtils.validCode('123456')) // true
console.log('validCode:' + XiUtils.validCode('1234')) // false
console.log('validName:' + XiUtils.validName('zhaochangjun')) // true
console.log('validName:' + XiUtils.validName('@zhaochangjun')) // false
console.log('validPwd:' + XiUtils.validPwd('zhaochangjun')) // true
console.log('validPwd:' + XiUtils.validPwd('1234')) // false
console.log('validIdNo:' + XiUtils.validIdNo('510922199911115811')) // true
console.log('validIdNo:' + XiUtils.validIdNo('51092219991111581')) // false
console.log('validIP:' + XiUtils.validIP('192.168.0.1')) // true
console.log('validIP:' + XiUtils.validIP('192.168.1')) // false
},
methods: {
handlerClick(type) {
if (type) {
this.$message[type]('点击了按钮!')
} else {
this.$alert('你点击了这个按钮!', '点击事件', {
confirmButtonText: '确定',
callback: (action) => {},
})
}
},
getPagination(data) {
console.log(data)
this.paginationConfig = data
},
getSort(column) {
console.log(column)
if (column.prop == 'projectNum') {
this.orderSortName = 'project_num '
} else if (column.prop == 'projectUserName') {
this.orderSortName = 'cert_name'
} else {
this.orderSortName = column.prop
}
this.orderSortType = column.order == 'descending' ? 'desc' : 'asc'
// this.getData()
},
// 获取选中数据
getSelectData(data) {
console.log(data)
},
// 查看
View(data) {
console.log(data)
this.$confirm(data.name, '查看', {
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(() => {
this.$message.success(data.name)
})
.catch(() => {
this.$message.info('已取消')
})
},
}
}
</script>
组件(Components)
Property | Description |
---|
Button | Button按钮组件 |
CountTo | CountTo计数组件 |
Pagination | 基于element-ui的Pagination的分页组件 |
TableList | 基于element-ui的Table组件 |
ToolTips | 基于element-ui的Table的header表头文字内容超出显示...组件 |
方法(Functions)
Function Name | Description |
---|
version | 版本号 |
install | 组件挂载 |
DES3 | 3des加解密(encrypt、decrypt) |
BASE64 | BASE64加解密(encode、decode) |
Stars | canvas动画-流星 |
Lines | canvas动画-线条 |
Fishes | Fishes动画-鱼儿 |
parseTime | 各类型时间格式化 |
formatTime | 时间格式化 |
getTimeZoneTime | 获取指定时区的当前时间(默认值为:东八区北京时间) |
howMuchTime | 获取指定未来时间距当前时间还有多久 |
compareTime | 比较两个日期大小(time1相对于time2的大小关系) |
timeInArea | 当前时间是否在某段时间内(time是否在time1和time2之间) |
getConstellation | 根据生日的月份和日期计算星座 |
param2Obj | url参数转对象 |
compareParams | 比较两个对象是否相同(键值都相同才相同) |
removeArrayObj | 删除对象数组中指定对象 |
repeatArrayObj | 对象数组去重(键值都不相同才去) |
bytesToSize | 数据容量单位转换(B KB B MB GB TB PB EB ZB YB) |
desensitize | 内容加密处理(默认全部加密) |
toChinesNum | 阿拉伯数字转换成中文大写,可支持金额转换(最大可转换值为999999999999,最多两位小数) |
keepTwoDecimal | 保留两位小数(位数不足自动补位) |
arithmetics | 四则运算(js的四则运算结果会有误差,在两个浮点数进行四则运算时会比较明显,这个函数用来得到精确的运算结果) |
getQueryString | 获取地址栏参数 |
openUrl | 打开url |
ElMessage | element-ui中的message去重 |
uuid | 前端uuid |
getToken | 获取token |
setToken | 设置token |
removeToken | 移除token |
isExternal | 验证是否是外链接 |
validEmail | 验证是否是邮箱 |
validPhone | 验证是否是手机号 |
validCode | 验证是否是6位数字验证码 |
validName | 验证是否是没带'@'的名称 |
validPwd | 验证是否是6~18位的密码 |
validIdNo | 验证是否是身份证号 |
validIP | 验证是否是ip地址 |