1.生成foundation.js文件的命令
node vueapi.js
//替换开头部分
import axios from 'axios'换成
import axios from '../utils/request'
2.vue项目打包的命令
yarn build
3.npm安装yarn
npm install yarn -g
配置Yarn
//配置源
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
//检查源
yarn config get registry // https://registry.npm.taobao.org
yarn config get sass_binary_site // https://npm.taobao.org/mirrors/node-sass/
4.回车刷新
@keyup.enter.native="handleRefresh"
5.filter过滤
this.files.filter(item => item.uid == file.uid)
6.$Bus
this.$Bus.$on('refreshTable', () => {
if (this.$refs.table) {
this.$refs.table.refresh()
}
})
this.$Bus.$emit("refreshTable");
7.合并两个数组
arr1.push(...arr2)
//或者
arr1 = [...arr1,...arr2]
8.去重相关代码
let arr3 = Array.from(new Set(arr1)) //let arr3 = [...new Set(arr1)]
//去重然后转成对象
[...new Set(users)].map(item => { return { id: item } })
let orgusers = this.checkedKeys.map(item => { return { id: item } })
let roleusers = this.checkedKeysRoleUsers.map(item => { return { id: item } })
let users = [...orgusers, ...roleusers]
let res = new Map()
users = users.filter((item) => !res.has(item.id) && res.set(item.id, 1))
9.$forceUpdate
this.$forceUpdate()
10.$next
this.$nextTick(function() {})
11.AntDesign列表相关
pageNo: 0,
pageSize: 10,
this.pageNo = res.number
this.pageSize = res.size
{
title: '操作',
dataIndex: 'action',
width: '150px',
fixed: 'right',
scopedSlots: { customRender: 'action' }
}
customRender: (text, row, index) => {
if (text == 1) { return '有效' }
return '无效'
}
<span slot="serial" slot-scope="text, record, index">{{pageNo * pageSize + index + 1}}</span>
rowSelection() {
return {
selectedRowKeys: this.selectedRowKeys,
onChange: this.onSelectChange,
getCheckboxProps: (record) => ({
props: {
disabled: record.projectId_name.length == 0,
},
}),
};
},
12.vxe-grid相关
安装命令
npm install --save vxe-table
npm install --save xe-utils
//版本
"vxe-table": "^3.4.11",
"xe-utils": "^3.4.3",
1.固定至右侧,slot
{
title: this.$t("操作"),
fixed: "right",
//slots: { default: "action" },
slots: {
default: ({ row }) => {
if (row.valid === 1) {
return "有效";
} else {
return "无效";
}
},
},
}
//
slots: {
default: ({ row }) => {
return [
<span>
{row.secIdNo
? this.GLOBAL.decryptOfficeCode(row.secIdNo)
: ""}
</span>,
];
},
},
2.rowClassName
//:row-class-name="rowClassName" //也可
:rowClassName="
(record, index) => {
if (
record.remarks && record.remarks.length > 0
) {
return 'lineHightClass'
}
}
"
3.formatter
formatter: ({ cellValue, row, column }) => {
return cellValue === 1 ? "有效" : "无效";
},
formatter: ({ cellValue, row, column }) => {
return moment(new Date(cellValue)).format("YYYY-MM-DD HH:mm:ss");
},
4.columnConfig
columnConfig: {
minWidth: 120,
}
5.配置 multiple 启用多字段组合排序,如果是服务端排序,只需加上 sort-config.remote 和 sort-change 事件就可以实现
13.a-tabs
<template slot="footer">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="Details" />
<a-tab-pane key="2" tab="Rule" />
</a-tabs>
</template>
14.tab页标签关闭过滤
const includeName = this.pages.find(item => item.fullPath === targetKey).name
store.dispatch('delInclude', includeName)
this.pages = this.pages.filter(page => page.fullPath !== targetKey)
this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
// 判断当前标签是否关闭,若关闭则跳转到最后一个还存在的标签页
if (!this.fullPathList.includes(this.activeKey)) {
this.selectedLastPath()
}
15.input的label自定义必填
<span slot="label">
<span class="epc-required"></span>{{ $t("label") }}
</span>
.epc-required::before {
display: inline-block;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '*';
margin-right: 4px;
}
16.radio类型的ui
<a-form-item label="有效性">
<a-radio-group v-model="queryParam.majorparam.valid">
<a-radio :value="1">有效</a-radio>
<a-radio :value="0">无效</a-radio>
</a-radio-group>
</a-form-item>
<a-radio-group @change="decisionChange"
v-decorator="[
'test',
{
rules: [
{ required: true, message: this.$t('test') },
],
},
]"
></a-radio-group>
17.select类型
<a-select :disabled="!edit" v-decorator="['type']">
<a-select-option v-for="d in types" :key="d.id" :value="d.id">
{{ d.name }}
</a-select-option>
</a-select>
//
<a-select v-model="queryParam.dml.version" :allowClear="true">
<a-select-option
v-for="d in versions"
:key="d.id"
:value="d.id"
>
{{ d.name }}
</a-select-option>
</a-select>
//验证
:rules="rules"
rules: {
name: [
{ required: true, message: ''}
]}
设置分隔符
:token-separators="[',']"
设置空选项
开头插入的方法:unshift
字符:'\u{0}'
18.AntDesign日期组件
<a-date-picker
:disabled="!edit"
placeholder
style="width: 100%"
v-model="form.begindate"
/>
19.路由跳转
this.$router.push('/list/table-list')
20.computed
computed: {
files: {
get() {
return this.parames.files
},
set() {},
},
},
//
computed: {
columns() {
return '';
}
}
21.获取,设置form表单的某个值
this.form.setFieldsValue({ "check_up_user": '' })
this.form.getFieldsValue(['','']);
this.form.getFieldValue('');
22.vue2-datepicker
npm install vue2-datepicker --save
import DatePicker from 'vue2-datepicker'
import 'vue2-datepicker/index.css'
import 'vue2-datepicker/locale/zh-cn'
Vue.use(DatePicker)
日期范围控制
<date-picker
v-model="queryParam.vo.times"
style="width: 100%"
value-type="format"
range
:disabled-date="disabledDate"
@change="changeDate"
>
<template v-slot:footer="{ emit }">
<div style="text-align: center">
<button
class="mx-btn mx-btn-text"
@click="emit(new Date())"
>
今天
</button>
</div>
</template>
</date-picker>
import moment from "moment";
//mothed 当前日期的前后一周时间可选
disabledDate(current, date) {
if (!date) return;
date = new Date(date);
return (
current < moment(date).subtract(6, "days") ||
current > moment(date).add(6, "days")
);
},
changeDate() {
this.disabledDate(null, this.queryParam.vo.times[0]);
},
//前后一周,不算当前日期
(
current < moment(date).subtract(1, "weeks") ||
current > moment(date).add(1, "weeks")
)
23.await async
getlists () {
return new Promise((resolve, reject) => {
API.workMattersListUsingPOST({})).then(re => {
resolve(re)
})
})
}
24.流程-bpmn
https://github.com/miniclound/vue-bpmn
yarn add bpmn-js --save
yarn add bpmn-js-properties-panel --save
yarn add --save vue-color
npm install --save jquery
25.echarts
npm i v-charts echarts@4.9.0 -S
26.watch
watch: {
timer: {
deep: true,
immediate: true,
handler (newV, oldV) {
if (newV) {
if (this.visible) {
this.handleRefresh()
}
}
}
}
}
27.filters
filters: {
statusFilter(type) {
return statusMap[type].text;
},
statusTypeFilter(type) {
return statusMap[type].status;
},
},
28.鼠标放上去再显示全部内容
<a-form-item label="" class="epc-zj"><div class="epc-over-ellipsis">...</div></a-form-item>
.epc-zj .ant-form-item-control {
height: 32px;
line-height: 28px;
}
.epc-zj {
&:hover {
.ant-form-item-control {
max-height: 200px;
z-index: 1000;
.ant-select-selection--multiple {
height: auto;
overflow: auto;
}
.epc-over-ellipsis {
display: none;
}
}
}
}
.ant-modal-wrap {
z-index: 1001
}
.epc-over-ellipsis {
position: absolute;
right: 10px;
top: -18px;
}
.epc-table-select-over {
right: 24px;
top: 0px;
}
29.布局相关
:labelCol="{ span: 3 }"
:wrapperCol="{ span: 21 }"
const fcols_4 = { xxl: 6, xl: 8, lg: 12, md: 12, sm: 24 }
<a-col v-bind="GLOBAL.fcols_4">
//相当于
<a-col :xxl="GLOBAL.fcols.xxl" :xl="GLOBAL.fcols.xl" :lg="GLOBAL.fcols.lg"
:md="GLOBAL.fcols.md" :sm="GLOBAL.fcols.sm">
30.pdf-annotate相关的安装内容
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
"create-stylesheet": "^0.3.0",
"pdfjs-dist": "2.0.943",
"twitter-text": "^3.1.0",
"worker-loader": "^3.0.8",
31.npm命令
node_modules删除掉,重新npm run install 的时候报错用以下命令
npm cache clean --force//强制清除缓存
32.外网路由跳转
{
path: 'http://www.shipxy.com/',
meta: { title: '链接', keepAlive: false, target: '_blank' }
},
33.报错整理
1.动态表单less fade的报错解决:在vue.config.js文件中添加
css: {
loaderOptions: {
less: {
modifyVars: {
'primary-color': '#1890ff',
'link-color': '#1890ff',
'border-radius-base': '2px',
'layout-color': '#9867f7'//关键的内容
},
javascriptEnabled: true
}
}
},
34.for循环遍历公共的方法
for (let key in globalFns) {
this[key] = globalFns[key].bind(this);
}
35.声明公共的变量
import globalVariable from '@/api/global_variable'
Vue.prototype.GLOBAL = globalVariable
36.import其他模块的方法以及变量
import('doc/api/global_variable').then(({ default: obj }) => {
for (let key in obj) {
if (!result.hasOwnProperty(key)) {
result[key] = obj[key];
}
}
})
37.cmd命令
1.查找端口
netstat -noa |findstr 9091
2.删除node包
rmdir node_modules
38.识别字符串中的html标签
v-html="str"
39.手动添加错误的验证信息
:help="msg"
:validate-status="status"//‘error’
40.Number
:precision="0"//整数
:precision="2"//两位小数
41.重置路由的title
if (this.$route.query.title)
this.$route.meta.title = this.$route.query.title;
42.动态引入vue文件
const context = require.context("./", true, /\.vue$/);
const cmps = {};
context.keys().forEach((key) => {
if (key.includes("components")) {
const component = context(key).default;
cmps[component.name] = component;
}
});
43.中文转码
decodeURI('中文');