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>