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. php换行和<br />互转

    使用场景:在后台处理textarea换行的时候出现了问题, textarea里面的换行就是/n, 在textarea里面是有换行效果的,但是输出到其它地方没有效果,这时候就要用到PHP的神奇的nl2b ...

  2. mongodb不断刷日志的问题

    项目启动不断的循环刷日志. 在log4j.properties的配置文件中加上一行关闭即可 log4j.logger.org.mongodb.driver=OFF

  3. [转]HTML5 script 标签的 crossorigin 属性到底有什么用?

    HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...

  4. 视频播放—— H5同层播放器接入规范

    H5同层播放器接入规范 x5-video-player-type 启用H5同层播放器 通过video属性“x5-video-player-type”声明启用同层H5播放器 x5-video-playe ...

  5. Android应用程序支持不同屏幕(尺寸、密度)

    how to build a user interface using Android layouts for all types of devices 使用Android布局设计的UI接口用于不同的 ...

  6. user-agent | what is the "user-agent" ?

    User Agent(用户代理) UA是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等 通过抓包可以得到 下面是几个 ...

  7. css 制作导航条布局

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. dedecms自定义模型内容调用多个Ueditor

    关于dedecms后台如何整合百度编辑器(ueditor)网上有很多了,本站就不再赘述了,主要问题是,涉及到如果有内容模型的修改,则按照网络上介绍的方法会发现有BUG.当修改过默认的文章模型或者其他模 ...

  9. Spring源码学习-容器BeanFactory(三) BeanDefinition的创建-解析Spring的默认标签

    写在前面 上文Spring源码学习-容器BeanFactory(二) BeanDefinition的创建-解析前BeanDefinition的前置操作中Spring对XML解析后创建了对应的Docum ...

  10. CASE WHEN 高阶用法?

    两个表做关联时,以左表为准,若左表某列不为空,则与右表对应列进行关联匹配,为空则不做匹配. 以上做法,有一种说不出来的感觉,不管怎样,问题是解决了. 如有更好的解决思路,请留言告知,不甚感激!