欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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功能性插件(全局))

vue脚手架搭建和iview踩坑       "vue": "^2.5.2"

 

命令输入后会有如下问题:

 

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