vue脚手架搭建和iview踩坑 "vue": "^2.5.2"
程序员文章站
2022-03-11 15:02:50
*****先要安装node.js，使用npm包管理工具 node.js安装方法如下*****https://blog.csdn.net/shiyaru1314/article/details/54963027https://blog.csdn.net/qq_42564846/article/details/82688266大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里......
*****先要安装node.js，使用npm包管理工具 node.js安装方法如下*****
https://blog.csdn.net/shiyaru1314/article/details/54963027
https://blog.csdn.net/qq_42564846/article/details/82688266
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue-cli 版本 "vue": "^2.5.2"
npm install vue-cli -g
1. cd 工程所在路径
2. vue init webpack fuxi (fuxi是项目名字) 命令: 初始化项目环境
(1)作者.版本. eslint(语法检查) test2 unit (测试环境)
注意: 初始化一个vue脚手架项目 需要(nodeJS环境nodexxx.exe, webpack环境, vue-cli功能性插件(全局))
命令输入后会有如下问题：
Generate project in current directory? (Y/n)
→ 在当前目录中生成项目？
Project name (vueTset2)
→ 项目名字
Project description (A Vue.js project)
→ 项目描述
Author
→ 作者
Vue build
→ 打包方式 选择第一个
Install vue-router? (Y/n)
→ 是否要安装 vue-router，项目中肯定要使用到 所以Y回车
Use ESLint to lint your code? (Y/n)
→ 使用ESLint来编写代码? 选择第一个
Pick an ESLint preset (Use arrow keys)
→ 选择ESLint预设(使用箭头键)
Set up unit tests (Y/n) 选择 n
→ 设置单元测试
Setup e2e tests with Nightwatch? (Y/n) 选择 n
→ 是否需要 端到端测试工具 目前我们不需要 所以 n 回车
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
→ 我们是否应该在项目创建后为您运行' npm install ' ?(推荐)(使用方向键)
3. (工程里应该有一个node_modules的文件夹, 里面装的都是第三方插件) 如果没有这个文件夹, 需要运行命令 cnpm install
安装jquery cnpm install jquery
4. npm (专门用于管理 第三方插件)
npm install 第三方js (下载)
npm uninstall 第三方js(卸载/删除)
5. npm install webpack -g (-g全局安装)
(nodejs 安装在哪个盘符下, 全局安装的node_modules就在哪个盘符下)
6. npm install webpack —save-dev (把你要安装的依赖第三方插件名字 自动配置到 package.json里生产环境列表里
8. npm install webpack 什么参数都不加, 默认配置到 package.json的发布环境列表里
9. npm install 不加-g 默认安装到的是 命令行所在的文件夹的位置
Vuex 是什么？（可以设置全局变量）
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
VUE -- 全局变量的几种实现方式
https://www.cnblogs.com/mafeng/p/7723179.html
1.iView框架的table表格取user对象下面的moble字段的解决办法
{
title: "用户手机号",
align: "center",
render:(h,parmas)=>{
let text = parmas.row.user.mobile
console.log(text)
return h('span',text)
}
}
根据type的数字显示对应文字 type : 类型1：系统红包 2：转发红包
{
title: "类型",
minWidth: 100,
key: "type",
render: (h,parmas) => {
console.log( parmas.row)
let text = null
parmas.row.type == 1 ? text = "系统红包" : text = "转发红包"
return h('span',text)
}
},
2.vue报错
vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Number, got String.
<InputNumber
v-model="formItem.winningNum"
:min="0"
placeholder="请输入"
style="width:186px"
></InputNumber>
解决：v-model="formItem.winningNum" 的formItem.winningNum设为number型
3.iview模态框里的表单验证
<!-- 新活动模态框 -->
<Modal
v-model="addModal"
title="新活动"
:loading="loading"
width="500"
>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="活动名称" prop="name">
<Input v-model="formValidate.name" clearable placeholder="请输入活动名称" style="width:200px"></Input>
</FormItem>
<FormItem label="领取金额（￥）" prop="getMoney">
<InputNumber v-model="formValidate.getMoney" placeholder="请输入领取金额（￥）" style="width:200px" ></InputNumber>
</FormItem>
<FormItem label="帮拆金额（￥）" prop="openMoney">
<InputNumber v-model="formValidate.openMoney" placeholder="请输入帮拆金额（￥）" style="width:200px"></InputNumber>
</FormItem>
<FormItem label="帮拆人数（人）" prop="helpPersonNum">
<InputNumber v-model="formValidate.helpPersonNum" placeholder="请输入帮拆人数（人）" style="width:200px"></InputNumber>
</FormItem>
</Form>
<!-- 自定义模态框页脚 -->
<div slot="footer">
<Button @click="addCancel('formValidate')">取消</Button>
<Button type="primary" @click="addOk('formValidate')">确定</Button>
</div>
</Modal>
// 新活动模态框 表单
formValidate: {
name: null,
getMoney: null,
openMoney: null,
helpPersonNum: null
},
// 新活动模态框 表单验证
ruleValidate: {
name: [
{
required: true,
message: "活动名称不能为空",
trigger: "change"
}
],
getMoney: [
{
required: true,
type: 'number',
message: "领取金额（￥）不能为空",
trigger: "change"
}
],
openMoney: [
{
required: true,
type: 'number',
message: "帮拆金额（￥）不能为空",
trigger: "change"
}
],
helpPersonNum: [
{
required: true,
type: 'number',
message: "帮拆人数（人）不能为空",
trigger: "change"
}
]
},
4.iview表格列操作 里面 写几个button按钮 写法
{
title: "操作",
key: "action",
align: "center",
minWidth: 200,
fixed: "right",
render: (h, parmas) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.addModal = true;
console.log(parmas.row);
this.formValidate.name = parmas.row.name;
this.formValidate.getMoney = parmas.row.getMoney;
this.formValidate.openMoney = parmas.row.openMoney;
this.formValidate.helpPersonNum =
parmas.row.helpPersonNum;
this.formInline.id = parmas.row.id;
}
}
},
"编辑活动"
),
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
this.detailModal = true;
this.activityId = parmas.row.id;
let data = {
activityId: parmas.row.id,
pageIndex: this.detailPageIndex,
pageSize: this.detailPageSize
};
this.$http.post("/redBagRecord/list", data).then(res => {
// this.detailTotal = res.data.total;
console.log(res);
this.dataListDetail = res.data.list;
});
}
}
},
"明细"
)
]);
}
}
5.vue项目 前端实现图片下载功能
<Modal v-model="model" title="图片预览" class="show-img" footer-hide>
<div class="pic">
<img :src="record.url">
</div>
<!-- <a :href="record.url" download=record.id.jpg>点击下载</a> -->
<Button type="primary" @click="upload" class="mgTop20">点击下载图片</Button>
</Modal>
upload() {
const image = new Image();
// 解决跨域 canvas 污染问题
image.setAttribute('crossOrigin','anonymous');
image.onload = function(){
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image,0,0,image.width,image.height);
const url = canvas.toDataURL('image/png');
// 生成一个 a 标签
const a = document.createElement('a');
// 创建一个点击事件
const event = new MouseEvent('click');
// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
a.download = name || '图片';
// 将生成的 URL 设置为 a.href 属性
a.href = url;
// 触发 a 的点击事件
a.dispatchEvent(event);
};
image.src = this.record.url
}
网页中使用例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h3>测试下载图片</h3>
<img
id="images"
src="https://g.bcwcdn.com/Fp2IZUu83KB20MqPZDiLeirWXZJL"
alt=""
width="30"
/>
<button onclick="upload()">点击下载图片</button>
</body>
<script>
// ********************************方案一 图片刷新就下载***********************************************
function downloadImage(selector, name) {
const image = new Image();
// 解决跨域 canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
const url = canvas.toDataURL("image/png");
// 生成一个 a 标签
const a = document.createElement("a");
// 创建一个点击事件
const event = new MouseEvent("click");
// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
a.download = name || "图片";
// 将生成的 URL 设置为 a.href 属性
a.href = url;
// 触发 a 的点击事件
a.dispatchEvent(event);
// return a;
};
image.src = document.getElementById(selector).src;
}
// 调用方式
// 参数一： 选择器，代表 img 标签
// 参数而： 图片名称，可选
downloadImage("images");
// **********************************方案二 点击下载按钮下载*********************************************
function upload() {
console.log(111);
const image = new Image();
// 解决跨域 canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
const url = canvas.toDataURL("image/png");
// 生成一个 a 标签
const a = document.createElement("a");
// 创建一个点击事件
const event = new MouseEvent("click");
// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
a.download = name || "图片";
// 将生成的 URL 设置为 a.href 属性
a.href = url;
// 触发 a 的点击事件
a.dispatchEvent(event);
// return a;
};
image.src = document.getElementById("images").src;
}
</script>
</html>
6.js中的数据类型及其转换
https://www.cnblogs.com/wuxiaoshang/p/5835627.html
7.get请求写法（axios）
// 抽奖明细 导出excel
excel() {
let data = this.luckDrawId
console.log(data)
this.$http.get(`/luckDrawDetail/export?luckDrawId=${data}`).then(res => {
console.log(res);
});
},
8.post请求写法（axios）
// 抽奖明细 查询
searchDetail() {
let data = {
luckDrawId: this.luckDrawId,
participantName: this.formInlineDetail.user,
colonelName: this.formInlineDetail.colonel,
isWinning: this.winningDetailModel,
agglomerationType: this.clusteringModel
};
console.log(data);
this.$http.post("/luckDrawDetail/list", data).then(res => {
console.log(res);
this.dataListDetail = res.data.list;
});
},
9.导出excel
打开这个网址：http://localhost:8080/api/luckDrawDetail/export?luckDrawId=20，然后执行下载excel表格
// 抽奖明细 导出excel
excel() {
let data = this.luckDrawId
console.log(data)
window.open(`${config.excelPort}/luckDrawDetail/export?luckDrawId=${data}`);
},
10.清除字符串空格
let arr = " 2018-11-11 05 "
console.log(arr)
// 清除左右空格
console.log(arr.trim())
console.log(arr.replace(/(^\s*)|(\s*$)/g, ""))
// 清除全部空格
console.log(arr.replace(/\s+/g,""))
11.字符串拼接
let mystr1="Hello";
let mystr2=" world,";
let mystr3="Hello";
let mystr4="guoxiansheng";
let newStr=mystr1.concat(mystr2+mystr3+" "+mystr4); //Hello world,Hello guoxiansheng
js 字符串操作函数
https://www.cnblogs.com/guoyeqiang/p/8178336.html
12.字符串截取（0到12位）
string.substring(from, to)：从from位置截取到to-1的位置
let text = parmas.row.runLotteryTime.substring(0,13);
13.vue2.0 子组件和父组件之间的传值（转载）
https://www.cnblogs.com/daiwenru/p/6694530.html
14.sessionStorage的使用
sessionStorage.setItem('age',18);//数据存入session 写法1
sessionStorage.age = 18;//数据存入session 写法2
console.log(sessionStorage.getItem('age'));//获取session中的数据 写法1
console.log(sessionStorage.age);//获取session中的数据 写法2
sessionStorage.removeItem('age');//删除session中名为"age"的值
//localStorage和sessionStorage的存储数据大小一般都是：5MB
// 当用户关闭页面时，sessionStorage被销毁
//清除当前域名+端口号 下的 所有SessionStorage数据 （慎用）
// sessionStorage.clear();
//重要：*****
//相同域名+端口号 在不同浏览器标签之间可以共享SessionStorage信息
//如果域名/端口号不同，则无法共享SessionStorage信息
localStorage的使用
localStorage.setItem('age',18);//数据存入localStorage 写法1
localStorage.age = 18;//数据存入localStorage 写法2
console.log(localStorage.getItem('age'));//获取localStorage中的数据 写法1
console.log(localStorage.age);//获取localStorage中的数据 写法2
localStorage.removeItem('age');//删除localStorage中名为"age"的值
//localStorage和sessionStorage的存储数据大小一般都是：5MB
// localStorage永久存在，除非手动销毁
//清除当前域名+端口号 下的 所有localStorage数据 （慎用）
// localStorage.clear();
//重要：*****
//相同域名+端口号 在不同浏览器标签之间可以共享localStorage信息
//如果域名/端口号不同，则无法共享localStorage信息
16.switch case语句 js
switch (this.form.category) {
case "2001":
this.selectBoxList.map(v => {
ids.push(v.id);
console.log(ids);
});
break;
case "2002":
this.selectShopList.map(v => {
ids.push(v.pId);
console.log(ids);
});
break;
case "2004":
this.selectAwardList.map(v => {
ids.push(v.id);
console.log(ids);
console.log(ids);
});
break;
case "2005":
this.selectRedPackageList.map(v => {
ids.push(v.id);
console.log(ids)
});
break;
}
17.map()的用法 除了for...of...方法是es6的，其他都是es5的
this.roleSelect.map(v => {
if(role == v.code){
role = v.name
}
})
ES5和ES6数组遍历方法详解
https://segmentfault.com/a/1190000010203337
18.vue iview 的表格选项的双向绑定
this.orderList.map((v, i) => {
this.$refs.table2.$refs.tbody.objData[i]._isChecked = false
row.preferentials.map(x => {
if (v.id == x.preferentialId) {
this.$refs.table2.$refs.tbody.objData[i]._isChecked = true;
}
})
})
19.iview的表格选择过滤器（把表格中选过的数据从原表格中过滤掉）
addShop() {
this.$refs.clearTable1.selectAll(false);
let arr = this.shopList;
let arr1 = [...this.selectShopList];
arr = arr.filter(item => {
let list = arr1.map(v => v.pId);
return !list.includes(item.pId);
});
this.shopList = arr;
console.log(this.shopList)
this.modelShop = true;
},
20.JS几种数组遍历方式以及性能分析对比
for(let i = 0,len=arr.length; i < len; i++) {
}
//简要说明:
//使用临时变量，将长度缓存起来，避免重复获取数组长度，
//当数组较大时优化效果才会比较明显。
//这种方法基本上是所有循环遍历方法中性能最高(速度最快)的一种
https://www.cnblogs.com/lvmh/p/6104397.html
21.Moment.js 2.10.6 JavaScript 日期处理类库（vue中使用）
要安装moment插件
import moment from 'moment'
export default {
install: function (Vue) {
Object.defineProperty(Vue.prototype, '$moment', {value: moment})
}
}
let time = this.$moment(this.startWinningTime).format('YYYY-MM-DD HH:mm:ss')
22.vue中过滤器的使用
<span>{{ detailData.status | payStatusFilter}}</span>
下面的写的位置 和 methods: {} 同级
filters: {
payStatusFilter: (value)=> {
switch (value) {
case 1:
return "待支付";
break;
case 10:
return "已支付";
break;
case 2:
return "退款审核中";
break;
case 3:
return "退款中";
break;
case 4:
return "已退款";
break;
case 5:
return "已取消";
break;
case 6:
return "过期未支付";
break;
case 20:
return "配送中";
break;
case 30:
return "已完成";
break;
default:
return "未知";
}
}
}
23.数组对象的双重循环去重
// 初始化
if (selectShops.length == 0) {
for (let i in shops) {
selectShops.push(shops[i]);
}
return;
}
// 去重
for (let i = 0, len = shops.length; i < len; i++) {
for (let j = 0, len = selectShops.length; j < len; j++) {
if (shops[i].pId == selectShops[j].pId) {
shops[i]["is"] = true;
}
}
if (!shops[i]["is"]) {
selectShops.push(shops[i]);
}
}
24.iview中的表格的全选中方法和单个选中
this.$refs.clearTable2.selectAll(false);
this.boxList.map((v,i) => {
this.$refs.clearTable2.$refs.tbody.objData[i]._isChecked = false;
})
25.iview的Modal对话框与表单验证冲突解决
https://blog.csdn.net/amanda_wmy/article/details/79026940
<1>办法1 (建议使用办法1)
<template>
<Layout class="layout-main">
<Breadcrumb class="layout-bread">
<BreadcrumbItem>数据字典</BreadcrumbItem>
</Breadcrumb>
<Content class="layout-content">
<Menu :active-name="activeName" class="left" @on-select="change" style="width: 180px">
<MenuItem :name="v.id" v-for="(v,i) in book">{{v.name}}</MenuItem>
</Menu>
<div class="right">
<Button type="primary" @click="showModel" style="margin-left: 10px">添加字典</Button>
<Table :columns="columns" :data="data" class="mgTop20"></Table>
</div>
<!-- 添加字典模态框 -->
<Modal
v-model="model"
title="添加字典"
@on-ok="ok('modelList')"
@on-cancel="cancel('modelList')"
:loading="loading"
>
<Form
label-position="right"
:label-width="90"
ref="modelList"
:model="modelList"
:rules="ruleValidate"
>
<FormItem label="字典项名称" prop="name">
<Input v-model="modelList.name"></Input>
</FormItem>
<FormItem label="字典项代码" prop="code">
<Input v-model="modelList.code"></Input>
</FormItem>
<FormItem label="字典项排序" prop="sort">
<Input v-model="modelList.sort"></Input>
</FormItem>
</Form>
</Modal>
</Content>
</Layout>
</template>
<script>
export default {
data() {
return {
ruleValidate: {
name: [
{
required: true,
message: "字典项名称不能为空",
trigger: "blur"
}
],
code: [
{
required: true,
message: "字典项代码不能为空",
trigger: "blur"
}
],
sort: [
{
// 当输入的值为数字时，加上这个属性 type: "number"
required: true,
message: "字典项排序不能为空",
trigger: "blur"
// 当元素的值发生改变时，会发生 change 事件。
// 当元素失去焦点时发生 blur 事件。
}
]
},
// loading一定要设置为true，否则第一次提交表单，modal还是会被隐藏
loading: true,
activeName: "0",
parent: 0,
// 左侧字典列表
book: [],
id: "1",
model: false,
modelList: {},
data: [],
columns: [
{
type: "index",
title: "序号",
align: "center",
width: 100
},
{
title: "字典项名称",
key: "name",
align: "center"
},
{
title: "字典项代码",
key: "code",
align: "center"
},
{
title: "字典项排序",
key: "sort",
align: "center",
sortable: true
},
{
title: "操作",
width: 200,
align: "center",
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
let id = params.row.id;
this.$http
.post("/dic/deleteDic", {
id: id
})
.then(res => {
this.getDicList();
});
}
}
},
"删除"
),
h(
"Button",
{
props: {
type: "primary",
size: "small"
},
style: {
marginRight: "5px"
},
on: {
click: () => {
let id = params.row.id;
// console.log(params.row);
this.modelList = {
name: params.row.name,
code: params.row.code,
sort: params.row.sort,
id: params.row.id
};
this.model = true;
}
}
},
"编辑"
)
]);
}
}
]
};
},
created() {
this.list();
this.getDicList();
},
methods: {
// 模态框的确认按钮
ok(name) {
this.$refs[name].validate(valid => {
if (valid) {
if (this.modelList.id == undefined) {
let data = {
parentId: this.id,
name: this.modelList.name,
code: this.modelList.code,
sort: String(this.modelList.sort)
};
console.log(data);
this.$http.post("/dic/add", data).then(res => {
this.getDicList();
});
} else {
let data = {
id: this.modelList.id,
name: this.modelList.name,
code: this.modelList.code,
sort: String(this.modelList.sort)
};
console.log(data);
this.$http.post("/dic/update", data).then(res => {
this.getDicList();
});
}
// 对整个表单进行重置，将所有字段值重置为空并移除校验结果
this.$refs[name].resetFields();
this.model = false;
}
});
setTimeout(() => {
this.loading = false;
this.$nextTick(() => {
this.loading = true;
});
}, 1000);
},
// 模态框的取消按钮
cancel(name) {
// 对整个表单进行重置，将所有字段值重置为空并移除校验结果
this.$refs[name].resetFields();
},
showModel() {
this.model = true;
},
change(res) {
this.id = res;
this.getDicList();
},
// 拿到的是表格数据数组
getDicList() {
this.$http
.post("/dic/getDicList", {
id: Number(this.id)
})
.then(res => {
this.data = res.dic;
});
},
/*拿到的是左侧字典列表数组*/
list() {
this.$http
.post("/dic/list", {
parentId: this.parent
})
.then(res => {
this.book = res.dic;
});
}
}
};
</script>
<style scoped lang="less">
.left {
float: left;
}
.right {
float: left;
margin-left: 20px;
width: 78%;
}
</style>
<2>办法2
<template>
<!-- 新活动模态框 -->
<Modal v-model="addModal" title="新活动" :loading="loading" width="500">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="活动名称" prop="name">
<Input
:maxlength="50"
v-model="formValidate.name"
clearable
placeholder="请输入活动名称"
style="width:200px"
></Input>
</FormItem>
<FormItem label="领取金额（￥）" prop="getMoney">
<InputNumber
:min="1"
:max="100000000000"
v-model="formValidate.getMoney"
placeholder="请输入领取金额（￥）"
style="width:200px"
></InputNumber>
</FormItem>
<FormItem label="帮拆金额（￥）" prop="openMoney">
<InputNumber
:min="0"
:max="100000000000"
v-model="formValidate.openMoney"
placeholder="请输入帮拆金额（￥）"
style="width:200px"
></InputNumber>
</FormItem>
<FormItem label="帮拆人数（人）" prop="helpPersonNum">
<InputNumber
:min="0"
:max="100000000000"
v-model="formValidate.helpPersonNum"
placeholder="请输入帮拆人数（人）"
style="width:200px"
></InputNumber>
</FormItem>
</Form>
<!-- 自定义模态框页脚 -->
<div slot="footer">
<Button @click="addCancel('formValidate')">取消</Button>
<Button type="primary" @click="addOk('formValidate')">确定</Button>
</div>
</Modal>
</template>
<script>
export default {
data () {
return {
// 新活动模态框
addModal: false,
loading: true, // 一定要设置为true，否则第一次提交表单，modal还是会被隐藏
// 新活动模态框 表单
formValidate: {
name: null,
getMoney: null,
openMoney: null,
helpPersonNum: null,
id: null
},
// 新活动模态框 表单验证
ruleValidate: {
name: [
{
required: true,
message: "活动名称不能为空",
trigger: "change"
}
],
getMoney: [
{
required: true,
type: "number",
message: "领取金额（￥）不能为空",
trigger: "change"
}
],
openMoney: [
{
required: true,
type: "number",
message: "帮拆金额（￥）不能为空",
trigger: "change"
}
],
helpPersonNum: [
{
required: true,
// 当输入的值为数字时，加上这个属性 type: "number"
type: "number",
message: "帮拆人数（人）不能为空",
trigger: "change"
}
]
},
}
},
methods: {
// 新活动模态框 确认 取消
addOk(name) {
this.$refs[name].validate(valid => {
if (valid) {
// 添加
if (this.formInline.id == null) {
let data = {
name: this.formValidate.name,
getMoney: this.formValidate.getMoney,
openMoney: this.formValidate.openMoney,
helpPersonNum: this.formValidate.helpPersonNum
};
console.log(data);
this.add(data);
} else {
//修改
let data = {
name: this.formValidate.name,
getMoney: this.formValidate.getMoney,
openMoney: this.formValidate.openMoney,
helpPersonNum: this.formValidate.helpPersonNum,
id: this.formInline.id
};
this.update(data);
}
this.$refs[name].resetFields();
this.getList();
this.addModal = false;
} else {
setTimeout(() => {
this.loading = false;
}, 2000);
}
});
},
// 新活动模态框 取消
addCancel(name) {
// 对整个表单进行重置，将所有字段值重置为空并移除校验结果
this.$refs[name].resetFields();
this.addModal = false;
},
}
}
</script>
26.String() 转换为字符串类型
let data = {
sort: String(this.modelList.sort)
};
27.浅谈JS中String()与 .toString()的区别
https://blog.csdn.net/huang100qi/article/details/80543045
28.ivew实现导入excel表格文件
<!-- 导入excel -->
<FormItem>
<Upload action="/api/roster/import" :on-success="addExcel">
<Button type="primary">导入Excel</Button>
</Upload>
</FormItem>
// excel上传成功的事件
addExcel(){
this.whiteList();
}
30.在vuejs中实现a标签href tel的打电话功能
<div v-for="p in persons">
<p>
name: {{ p.name }}
</p>
<p>
//正确做法，拼接字符串
tel: <a :href="'tel:' + p.phone">call me</a>
</p>
</div>
persons: [
{
name: 'arron',
phone: 13811112222
},{
name: 'jack',
phone: 13900088822
},{
name: 'steven',
phone: 13711119909
}
]
//遍历persons，实现tel功能
https://blog.csdn.net/wq18512847606/article/details/80137171
31.Vue生命周期activated之实现返回上一页不重新请求数据
方法一：
利用sessionStorage存储状态
方法二：
activated配合keep-alive
https://blog.csdn.net/brand2014/article/details/81981548
32.vue中如何清除计时器
vue中的this不指向window，所以自己在清除计时器前加一个window
vue中在最上面声明一个全局的变量 let Timer = null，方便清除计时器获取到它
<script>
import { Helper2} from '../../static/js/myHelper.js';
import { getData,getData_add } from "~/plugins/axios";
import {mapState,mapMutations} from "vuex";
import { clearInterval } from 'timers';
let Timer = null//在上面声明一个变量
js(){
var that=this;
Timer=setInterval(function(){
var time=that.time;
if(time>0){
that.time-=1;
console.log('计时器')
}
if(time==0){
window.clearInterval(Timer)
}
},1000);
},
33.vue.js中内联样式style、class三元表达式
:style 是v-bind:style的简写
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）
<i class="iconfont " :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>
<p :style="{'color':checkIndex3==m.txt ? '#3d8cff':'#BBBBBB'}">{{m.txt}}</p>
本文地址：https://blog.csdn.net/qq_43258252/article/details/85990583