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

颜色:

通过设置typeprimarydashedtextinfosuccesswarningerror创建不同样式的按钮,不设置为默认样式。

注意:非 template/render 模式下,需使用 i-button。ghost为幽灵模式  即没有样式 只有边框

圆形及icon内嵌:

icon直接写在标签内,原型直接shape="circle",如何按钮的内容过长的时候就不再是圆形了,拉长了。

按钮大小:

通过设置sizelargesmall将按钮设置为大和小尺寸,不设置为默认(中)尺寸,长按钮可直接long 这样就达到了100%,当然你也可以直接style进行修饰。

按钮状态:

通过添加disabled属性可将按钮设置为不可用状态。

按钮组合:

将多个Button放入ButtonGroup内,可实现按钮组合的效果。

通过设置ButtonGroup的属性sizelargesmall,可将按钮组尺寸设置为大和小,不设置size,则为默认(中)尺寸。

通过设置ButtonGroup的属性shapecircle,可将按钮组形状设置为圆角。

加载状态:

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

  

  

IView组件化之部署及按钮学习的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  2. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  3. GitHub标星8k,字节跳动高工熬夜半月整理的“组件化实战学习手册”,全是精髓!

    前言 什么是组件化? 最初的目的是代码重用,功能相对单一或者独立.在整个系统的代码层次上位于最底层,被其他代码所依赖,所以说组件化是纵向分层. 为什么要使用组件化? 当我们的项目越做越大的时候,有时间 ...

  4. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  5. 4.VUE前端框架学习记录四:Vue组件化编码2

    VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  6. 3.VUE前端框架学习记录三:Vue组件化编码1

    VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...

  7. 学习 | jQuery移动端页面组件化开发(一)

    最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquer ...

  8. vue学习笔记(1)—— 组件化实现todoList

    一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...

  9. 偏前端-vue.js学习之路初级(二)组件化构建

    vue.js   组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...

随机推荐

  1. UOJ#103. 【APIO2014】Palindromes PAM模板题

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ103.html 前言 我终于会PAM啦 感谢CLY大佬手把手教我PAM 题解 建个 PAM. 统计一下每一个节点的 Rig ...

  2. XYZZY spfa 最长路 判环

    题意: 有n个点  m条边  每个边有权值 一开始有一百血  每次经过一条路都会加上其权值 判断是否能够到达n 显然  有正环的时候肯定能够到达 最短路好题!!!!!!! 显用folyed判断是否联通 ...

  3. maya cmds pymel 'ESC' 退出 while, for 循环

    maya cmds pymel 'ESC' 退出 while, for 循环 import maya.cmds as cmds cmds.progressWindow(isInterruptable= ...

  4. base加密解密工具类

    public class MLDUtil { public static Key DEFAULT_KEY = null; public static final String DEFAULT_SECR ...

  5. python一些好文章链接收藏

    程序员之路:python3+PyQt5+pycharm桌面GUI开发 python-nmap的函数学习 python标准库中socket模块详解 python队列Queue 简单认识python cm ...

  6. Scrapy框架之CrawlSpider

    提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二:基 ...

  7. <算法图解>读书笔记:第4章 快速排序

    第4章 快速排序 4.1 分而治之 "分而治之"( Divide and conquer)方法(又称"分治术") ,是有效算法设计中普遍采用的一种技术. 所谓& ...

  8. vue插件官方文档,做个记录

    vue的插件,组件都可以按照这种方式添加 官方文档 https://cn.vuejs.org/v2/guide/plugins.html 做个记录用

  9. spring ref &history&design philosophy

    Spring Framework Overview Spring是开发java application的通用框架,分为多个模块(modules),核心是core container,包括configu ...

  10. History of program

    第一阶段:1950与1960年代 1.三个现代编程语言: (1)Fortran (1955),名称取自"FORmula TRANslator"(公式翻译器),由约翰·巴科斯等人所发 ...