用 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