使用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跳轉