用 vue + iview写项目遇到的一些问题

1、menu导航手动展开制定的子菜单

在此处先自定义了一个变量数组 openedNames

最开始想的是 监听route路径，路径变化时，改变openedNames值，值是改变了，但是并没有按照name值来展开对应的子菜单。查看文档，发现有个方法updateOpened，就直接写上去了，还是无效。最后的解决办法如下：

1、监听openedNames值：

2、监听route路径变化：

updateOpenName函数：

2、Vue的render函数

多看文档多看文档多看文档！！

2.1、 slot的使用

头疼了一天最后才解决，不得不承认自己确实很菜啊==
使用render函数时，在给元素添加slot时，不能像正常的属性添加，官方文档中有专门给出这一项，slot是和props、on并列的，

render: (h, params) => {
   return h("Dropdown",[
      h("Button", "..."),
      h( "DropdownMenu", 
        {
           slot: 'list'
        },
        this.dropDownMenu.map(function(item, index) {
          return h("DropdownItem", {
            attrs: { name: item.name }
          }, item.title);
        })
     )
     //顺序一定一定一定要写对
    // h("标签", { props、slot、on事件等 }, 标签内容);
  ]
}

链接: render函数的使用（ VUE官方文档 ）.

2.2、render中遍历循环的使用

3、select组件传入其他参数

<Select v-model="model" @on-change="logVal($event, params)"></Select>	

方法接收值：

4、级联选择Cascader的使用

<Cascader :data="schoolList" filterable ></Cascader>

第一次用这个组件，没完全看清文档，只知道加上filterable属性可以搜索，做项目的时候，有个需求是可以选择中间层级，网上搜也搜不到，就很头疼，只好求助朋友，当朋友给我发来iview中cascader的属性时，我是懵逼的，想锤自己，又不认真看文档！文档中完全有这个属性，可以随便选择某个层级都行。

iview中级联选择文档：

最后加上了这个属性实现了想要的效果，哇，在心里狠狠骂了自己两句==

<Cascader :data="schoolList" filterable change-on-select ></Cascader>

5、使用组件upload上传图片时，附带token传给后台

<Upload
    ref="uploadImg"
    action="http://*********/images"
    :headers="{Authorization: token }"
    accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp"
    :on-success="handleProfileSuccess"
    name="img"
>
// token 为在data中定义的一个变量，需要自己从自己存的地方取出来
// handleProfileSuccess 为上传成功之后的回调函数
    <Button type="text" ghost>上传头像</Button>
</Upload>

6、父组件获取子组件中的值

给子组件设置ref属性 父组件在事件中调用ref值即可

<!-- 父组件中调用子组件  -->
<div class="flex flex-row">
   <info-edit ref="edit_info" :set="routeName == 'set-edit' ? setInfo : addInfo"></info-edit>
</div>

// 父组件中的方法
addSet() {
   console.log(this.$refs.edit_info.setInfo);
}

7、vue项目在IE浏览器上加载不出来

IE 报错如下：[vuex] vuex requires a Promise polyfill in this browser.
因为IE浏览器暂不支持es6语言，要安装包解析成es5语言来让IE识别

1、 `npm install babel-polyfill -S
2、 在webpack.base.config.js文件中更改module.exports中的export值
3、 重启项目

更改为：

小备注：在网上查方法的时候也按照这种方法来走一遍，但是还是报错，不好使，隔天想到把node-modules文件夹全部删除，之后重新安装包，再走这个流程，就行得通了，咱也不知道为啥，也不敢问谁=.=

8、跳转到新页面

this.$router.resolve({});window.open()

9、跳转页面之后返回之前的页面 数据传输

问题：A页面跳转到一个空页面B之后，想把在B页面上获取到的数据，在A页面上显示出来，此时，A页面一直未动。
解决：
① 在B页面上获取到数据之后利用localStorage缓存到本地

②在A页面监听storage事件，获取到storage事件返回的newValue值即可

10、左右切换tag ＋ 鼠标在元素上滑动，tag也滚动

页面代码及data中的数据：

methods方法：

11、vue监听滚动事件

12、dropdown下拉菜单 设置transfer为true时，必须设置transfer-class-name属性值才可以自定义样式

13、父子组件不通过事件相互获取值

可以先console.log 打印出来看都是什么值

13.1 父组件主动获取子组件的数据和方法

父组件调用子组件 <child ref="child"></child>
获取子组件数据方法
this.$refs.child.属性
this.$refs.child.方法

13.2 子组件主动获取父组件的数据和方法

在子组件里面通过this.$parent.属性 this.$parent.方法获取子组件的数据

14、获取两个时间点之间的间隔

 const d1 = new Date("2019-06-04 10:00:00");
 const d2 = new Date();
 console.log(parseInt(d2 - d1) / 60000 + '分钟'); //125分钟
 //获取两个时间点之间的分钟数

15、滚动到某元素的位置

this.$nextTick(() => {
   document.getElementById("timeline").scrollIntoView({block: 'center', inline: 'end'});
   // block: 'center', inline: 'end' 表示将该元素居中显示
});

16、modal组件点击确认默认关闭模态框

解决方法：
① 在ivu-modal-body中自定义按钮操作

② 给自定义的按钮添加样式，然后设置ivu-modal-footer不显示

17、将某些方法或图片或其他设置为公共的

以方法为例：
1、在某个js文件中定义该方法

2、在main.js中引用该方法并使用Vue.prototype挂在至vue实例上

3、在使用文件中直接this.$xx调用该方法

18、判断两个日期的大小

得到日期值并转化成日期格式，replace(/-/g, “/”)是根据验证表达式把日期转化成长日期格式

new Date("日期值".replace(/\-/g, "\/"))

19、Html设置图标icon

<link rel="shortcut icon" href="src/assets/logo.ico" type="image/x-icon"/>

20、npm run build之后页面空白

修改config中的index文件中的build中的assetsPublicPath
之前的值为’/’ 修改为’./’

21、打包后ivew的字体图标找不到

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

添加 publicPath: ‘…/…/’, 完美解决问题

22、vue项目中cdn方式调用vue、iview等

参考地址：https://webpack.docschina.org/configuration/externals/
① 在index.html中引入vue和iview的cdn地址（包括iview.css）

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link href="https://cdn.bootcss.com/iview/3.4.2-rc.1/styles/iview.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/iview/3.4.2-rc.1/iview.min.js"></script>

iview 的cdn地址: https://www.bootcdn.cn/iview/
②在build/webpack.base.conf.js文件添加externals属性，将引用的外部模块导入

  externals: {
    "iview": "iview",
    "vue": "Vue"
  }

③ 如果已经npm安装vue和iview了，在package.json文件中把vue和iview两项删除，然后删除node-modules文件夹，最后重新npm install即可

23、npm run build之后js文件夹中出现内存很大的map文件

修改config/index中build属性下的productionSourceMap值为false即可

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
	productionSourceMap: false
}

24、iview弹出对话框的input框想要每次都自动聚焦focus

① 为input设置ref值

<Input ref="inputScan" autofocus />

② 为对话框Modal添加事件on-visible-change

<Modal @on-visible-change="checkStatus" >

③ 在checkStatus事件中判断模态框的显示隐藏

checkStatus(val) {
   let a = this;
   setTimeout(function() {
     if (val) {
       a.$refs["inputScan"].focus();
     }
   }, 200);
}
// 不知为何不加setTimeout就不管用，是非加不可

25、每次刷新页面项目都会请求sockjs-node/info?t=…

注：build之后的项目不会请求这个接口，所以也不会影响build之后的项目

1. 找到/node_modules/sockjs-client/dist/sockjs.js
2. 找到代码的 1605行

try {
//  self.xhr.send(payload); 把这里注掉
} catch (e) {
  self.emit('finish', 0, '');
  self._cleanup(false);
}

3.刷新，搞定。

26、使用vue+iview Form组件 按enter键阻止页面刷新

使用form组件 页面中input输入框回车之后路由会多出如下：

其实是因为在一个Form组件中只使用了一个Input组件，当该Input组件获取焦点的时候，我们按enter键，整个页面会刷新
解决办法：

方法一、
<Form ref="formInline" :model="jigouInfo"  inline :label-width="80" @keydown.native.enter.prevent ="searchHandle">
 
</Form>
 
方法二、
 
//也可以直接在Input组件上阻止刷新，记得要用keydown事件，不要用keyup事件哦，亲测keyup事件不起作用
<Form ref="formInline" :model="jigouInfo"  inline :label-width="80">
    <FormItem label="出版机构名称" :label-width="120">
        <Input v-model="jigouInfo.jigou_name" placeholder="" 
               @keydown.enter.native.prevent="searchHandle"></Input>
    </FormItem>
</Form>

如果想要实现按enter键检索的功能，那就采用方法二，如果只是为了阻止页面刷新的问题，就采用方法一即可
参考链接：https://blog.csdn.net/lhjuejiang/article/details/84844727