IView组件化之部署及按钮学习

IView是什么？

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

Npm安装IView

?

1	npm install iview

在main.js中配置Iview

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// 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，那我们可以写一个事件来将这个属性进行一个改变。下方为按钮的示例代码

 　　

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<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>