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进行修饰。