IView組件化之部署及按鈕學習

IView是什麼？

iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品。

Npm安裝IView

npm install iview

在main.js中配置Iview

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　IView按鈕

顏色：

經過設置type爲primary、dashed、text、info、success、warning、error建立不一樣樣式的按鈕，不設置爲默認樣式。

注意：非 template/render 模式下，需使用 i-button。ghost爲幽靈模式  即沒有樣式 只有邊框

圓形及icon內嵌：

icon直接寫在標籤內，原型直接shape="circle"，如何按鈕的內容過長的時候就再也不是圓形了，拉長了。

 按鈕大小：

經過設置size爲large和small將按鈕設置爲大和小尺寸，不設置爲默認（中）尺寸,長按鈕可直接long 這樣就達到了100%，固然你也能夠直接style進行修飾。

 按鈕狀態:

經過添加disabled屬性可將按鈕設置爲不可用狀態。

按鈕組合:

將多個Button放入ButtonGroup內，可實現按鈕組合的效果。

經過設置ButtonGroup的屬性size爲large和small，可將按鈕組尺寸設置爲大和小，不設置size，則爲默認（中）尺寸。

經過設置ButtonGroup的屬性shape爲circle，可將按鈕組形狀設置爲圓角。

 加載狀態:

經過loading能夠讓按鈕處於一個加載的狀態，你在標籤上直接寫一個loading是在加載狀態的，其底層的值就是一個true，那咱們能夠寫一個事件來將這個屬性進行一個改變。下方爲按鈕的示例代碼

 　　

<template>
  <div id="app">
   <div>
     <modulesview></modulesview>
       <RadioGroup v-model="buttonsize" type="button">
            <Radio label="large">Large</Radio>
            <Radio label="default">Default</Radio>
            <Radio label="small">small</Radio>
        </RadioGroup>
     <Button type="success" icon="ios-search" :size="buttonsize" :loading="loading2" @click="activeState">臥槽</Button>
   </div>
  </div>
</template>

<script>
import modulesview from './views/mydemo.vue'
export default {
  name: 'App',
  data(){
    return {
      buttonsize : 'large',
      loading2 : false
    }
  },
  components:{
    modulesview
  },methods:{
    activeState(){
      this.loading2= true;
    }
  }
}
</script>