使用vue iview遇到的一些問題

使用阿里巴巴圖標庫

下載代碼

這五個文件

iconfount.css

若是導入多個文件記得把@font-face複製到裏面

改爲./路徑

//main.js
import './assets/font/iconfont.css'

能夠直接使用了

<Icon custom="icon iconfont
icon_dingtalk_line
icon-icon_dingtalk_line" size="small" />
注意 記得上上 icon iconfont
後面的複製的時候要注意有沒有.   
由於這樣我找了好久沒發現是這個緣由
修改class就好了
<Icon class="iconfont icon-search-1-copy" slot="suffix" />
    
記得若是失效  注意是否帶上  icon 和 iconfout

柵格佈局

None （自動）	750px	970px	1170px
xs	sm	md	lg

雖然參照Boostrap響應式可是是24柵格

Layout 佈局下面的案例沒懂?? 先看後面

使用Switch 出現命名衝突,報錯

Vue.component('i-switch', Switch)
不用Switch  使用i-switch標籤

根據當前路由自動選中對應的菜單

<Menu :active-name="activeName">
      <MenuItem name="/home" to="/home">Home</MenuItem>
      <MenuItem name="/about" to="/about">About</MenuItem>
    </Menu>
      <router-view></router-view>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    data(){
      return{
        activeName:this.$route.path
      }
    },
    watch:{
      '$route'(){
        this.activeName=this.$route.path
      }
    },

Switch: i-switch
Circle: i-circle   使用這兩個要用後面的否則報錯

Col要是裏面沒有寫內容,須要寫個div佔位

深度選擇器

.a >>> .b      //css
/deep/ .a{}    //scss

不要再computed  中使用ajax 請求
$watch  deep:true  深度監控
watch 第一次綁定時是不會執行的, 加上這個 immediate: true 就能夠了
this.$parent.fight('xxx')// 子組件觸發
fught(res){
    res
}
經過props 從父組件傳入的數據
//能夠經過  computed 進行操做
props: ['oldData'], // 非對象或數組類型
computed: {
  newData () {
    return this.oldData.trim().toLowerCase()
  }
}

Card

dis-hover 禁用鼠標懸停 ,默認是false,默認是有陰影的,若是不要就加上

shadow 卡片陰影,默認是不加的

webpack 不支持多行溢出隱藏

子元素繼承父元素透明度問題

父元素使用rgba 就能夠啦

iView經常使用組件清空技巧

https://blog.csdn.net/lihefei_coder/article/details/88187343

命名路由的跳轉方式

<Button :to="{name:'homeB'}">homeB</Button>
記住在定義路由的時候要帶name,經過name跳轉