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>