公共依赖文档
lodash
文档 lodash中文文档 (opens in a new tab)
所有工具方法优先使用 Lodash 所有关于计算不得使用 Lodash 统统使用 xe-utils
- 引入用法
// 示例1 (按需加载)
import throttle from 'lodash/throttle';
// 示例2 (按需加载)
import { throttle } from 'lodash';
// 错误示例
import _ from 'lodash';
// _.throttle;xe-utils
文档 xe-utils文档 (opens in a new tab)
所有计算相关必须使用 xe-utils
- 用法
// 正确示例
import XEUtils from 'xe-utils';
// 加法运算
XEUtils.add(num1, num2);
// 减法运算
XEUtils.subtract(num1, num2);
// 乘法运算
XEUtils.multiply(num1, num2);
// 除法运算
XEUtils.divide(num1, num2);dayjs
文档 Day.js (opens in a new tab)
所有日期相关 必须使用 dayjs
- 用法
// 正确示例
import day from 'dayjs';
day().format('YYYY-MM-DD'); // 2021-10-18 获取当前时间 并且转换为 YYYY-MM-DD 格式hotkeys-js
文档 HotKeys.js (opens in a new tab)
所有快捷键相关 必须使用 hotkeys-js;
import hotkeys from 'hotkeys-js';
// 按住 Ctrl + s 进行操作
hotkeys('ctrl+s', (event) => {
// 禁用默认事件
event.preventDefault();
// 需要做的操作
save();
});uuid
生成随机字符串
import { v4 as uuid } from 'uuid';
uuid() // 64fa7e0a-f332-4bcd-abb2-09dda67bcb48vxe-table
文档 vxe-table 3.x (opens in a new tab)
所有 table 必须使用 vxe-table
注意 不得使用 vxe-button、vxe-radio、vxe-checkbox、vxe-switch、 vxe-pulldown、vxe-pager、vxe-toolbar、vxe-form、vxe-modal、vxe-option、vxe-optgroup、vxe-checkbox-group、 vxe-form-item、vxe-form-gather、vxe-list、vxe-radio-button 后期会移除上面的功能
注意 vxe-table-column、vxe-textarea、vxe-input只允许在 vxe-table 中使用的
// VXETable 全局自定义配置
VXETable.setup({
zIndex: 3000,
size: 'mini',
table: {
stripe: true,
resizable: true,
align: 'center',
border: 'full',
size: 'mini',
showFooter: true,
showOverflow: 'tooltip',
highlightHoverRow: true,
tooltipConfig: {
enterable: true,
},
emptyRender: {
name: 'NotData',
},
},
input: {
controls: false,
},
textarea: {
autosize: {
minRows: 1.2,
maxRows: 1.2,
},
},
});基础用法
<template>
<vxe-table :data="tableData">
<vxe-column type="seq" width="60" />
<vxe-column field="name" title="Name" />
<vxe-column field="sex" title="Sex" />
<vxe-column field="age" title="Age" />
</vxe-table>
</template>
<script>
export default {
data () {
return {
tableData: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
]
}
}
}
</script>vxe-table1.x 升级到了 vxe-table3.x 会有写法变动 文档 (opens in a new tab)
<!--
1. v-slot:edit="scope" 改成 #edit="{ row, rowIndex }"
2. v-slot="{ row }" 改成 #default="{ row }"
3. 如果不对渲染数据有转换处理 应当删除 <template v-slot="{ row }">{{ row._amount }}</template>
4. 下标应当使用 rowIndex 不应使用 $rowIndex
-->
<!-- bad -->
<vxe-table-column field="_amount" title="到货数" width="80" :edit-render="{ name: '$input' }">
<template v-slot:edit="scope">
<vxe-input type="integer" :min="0" v-model="scope.row._amount" @blur="arrivalNumChange(scope.row)" />
</template>
<template v-slot="{ row }">{{ row._amount }}</template>
</vxe-table-column>
<!-- good -->
<vxe-table-column field="priceTax" title="含税单价" width="140" :edit-render="{ name: '$input' }">
<template #edit="{ row, rowIndex }">
<vxe-input
:min="0"
type="float"
v-model="row.priceTax"
/>
</template>
</vxe-table-column>
<!-- bad -->
<template v-slot="{ row }">{{ row.inDepotNum }}</template>
<!-- good -->
<template #default="{ row }">{{ row.inDepotNum }}</template>element-ui
文档 sht-element (opens in a new tab)
注意 项目Ui组件库 (该组件由SHT前端小分队维护)
注意 不得使用 el-table 组件 (后期会移除该组件)
echarts
文档 echarts (opens in a new tab)
所有图表必须使用该库
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);