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>
IView组件化之部署及按钮学习的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- GitHub标星8k,字节跳动高工熬夜半月整理的“组件化实战学习手册”,全是精髓!
前言 什么是组件化? 最初的目的是代码重用,功能相对单一或者独立.在整个系统的代码层次上位于最底层,被其他代码所依赖,所以说组件化是纵向分层. 为什么要使用组件化? 当我们的项目越做越大的时候,有时间 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- 4.VUE前端框架学习记录四:Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三:Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 学习 | jQuery移动端页面组件化开发(一)
最近在学习移动端组件化开发web页面,其中有好多小细节,值的去思考. 主要介绍JS的思路,具体的代码就不贴了,主要是想表达出一种思路 总体来说 1.入口文件,在入口文件中导入插件,插件样式,jquer ...
- vue学习笔记(1)—— 组件化实现todoList
一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install ...
- 偏前端-vue.js学习之路初级(二)组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
随机推荐
- UOJ#103. 【APIO2014】Palindromes PAM模板题
原文链接www.cnblogs.com/zhouzhendong/p/UOJ103.html 前言 我终于会PAM啦 感谢CLY大佬手把手教我PAM 题解 建个 PAM. 统计一下每一个节点的 Rig ...
- XYZZY spfa 最长路 判环
题意: 有n个点 m条边 每个边有权值 一开始有一百血 每次经过一条路都会加上其权值 判断是否能够到达n 显然 有正环的时候肯定能够到达 最短路好题!!!!!!! 显用folyed判断是否联通 ...
- maya cmds pymel 'ESC' 退出 while, for 循环
maya cmds pymel 'ESC' 退出 while, for 循环 import maya.cmds as cmds cmds.progressWindow(isInterruptable= ...
- base加密解密工具类
public class MLDUtil { public static Key DEFAULT_KEY = null; public static final String DEFAULT_SECR ...
- python一些好文章链接收藏
程序员之路:python3+PyQt5+pycharm桌面GUI开发 python-nmap的函数学习 python标准库中socket模块详解 python队列Queue 简单认识python cm ...
- Scrapy框架之CrawlSpider
提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二:基 ...
- <算法图解>读书笔记:第4章 快速排序
第4章 快速排序 4.1 分而治之 "分而治之"( Divide and conquer)方法(又称"分治术") ,是有效算法设计中普遍采用的一种技术. 所谓& ...
- vue插件官方文档,做个记录
vue的插件,组件都可以按照这种方式添加 官方文档 https://cn.vuejs.org/v2/guide/plugins.html 做个记录用
- spring ref &history&design philosophy
Spring Framework Overview Spring是开发java application的通用框架,分为多个模块(modules),核心是core container,包括configu ...
- History of program
第一阶段:1950与1960年代 1.三个现代编程语言: (1)Fortran (1955),名称取自"FORmula TRANslator"(公式翻译器),由约翰·巴科斯等人所发 ...