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 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
随机推荐
- php换行和<br />互转
使用场景:在后台处理textarea换行的时候出现了问题, textarea里面的换行就是/n, 在textarea里面是有换行效果的,但是输出到其它地方没有效果,这时候就要用到PHP的神奇的nl2b ...
- mongodb不断刷日志的问题
项目启动不断的循环刷日志. 在log4j.properties的配置文件中加上一行关闭即可 log4j.logger.org.mongodb.driver=OFF
- [转]HTML5 script 标签的 crossorigin 属性到底有什么用?
HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...
- 视频播放—— H5同层播放器接入规范
H5同层播放器接入规范 x5-video-player-type 启用H5同层播放器 通过video属性“x5-video-player-type”声明启用同层H5播放器 x5-video-playe ...
- Android应用程序支持不同屏幕(尺寸、密度)
how to build a user interface using Android layouts for all types of devices 使用Android布局设计的UI接口用于不同的 ...
- user-agent | what is the "user-agent" ?
User Agent(用户代理) UA是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等 通过抓包可以得到 下面是几个 ...
- css 制作导航条布局
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- dedecms自定义模型内容调用多个Ueditor
关于dedecms后台如何整合百度编辑器(ueditor)网上有很多了,本站就不再赘述了,主要问题是,涉及到如果有内容模型的修改,则按照网络上介绍的方法会发现有BUG.当修改过默认的文章模型或者其他模 ...
- Spring源码学习-容器BeanFactory(三) BeanDefinition的创建-解析Spring的默认标签
写在前面 上文Spring源码学习-容器BeanFactory(二) BeanDefinition的创建-解析前BeanDefinition的前置操作中Spring对XML解析后创建了对应的Docum ...
- CASE WHEN 高阶用法?
两个表做关联时,以左表为准,若左表某列不为空,则与右表对应列进行关联匹配,为空则不做匹配. 以上做法,有一种说不出来的感觉,不管怎样,问题是解决了. 如有更好的解决思路,请留言告知,不甚感激!