Jimu NPM | npm.io

JIMU

Material Design for Vue.js (IE10 +)

使用

npm install -S jimu

import Jimu from 'jimu'
// 引入css
import 'jimu/dist/jimu.all.min.css'
// OR
import 'jimu/dist/jimu.base.min.css'
import 'jimu/dist/jimu.theme.min.css'

Vue.use(Jimu)

CSS

html 默认字体为20px
h1~h6 分别为1.8rem 1.6rem 1.4rem 1.2rem 1rem 0.8rem
.no-outline 去掉外框
.vam,.vat,.vab 设置display为inline-block 及 vertical-align对应middle top bottom
.text-left 文本左对齐
.text-center 文本居中对齐
.text-right 文本右对齐
.text-justify 文本两端对齐
.text-nowrap 不换行
.left 左浮动
.right 右浮动
.clearfix 清除浮动
.block, .inline-block 设置display为块，行内块
[disabled] 设置禁用样式 结合mask可以设置遮罩 如 <div class="mask" disabled></div>
.z-d0~.z-d5 阴影级别
.caret 三角形
.close 关闭按钮

扩展css
- 颜色
- 主题

组件

button 按钮

<m-btn></m-btn>
props:
  href: String||Object 设置此属性将使用a标签
  target: String 打开方式 设置href有效
  hideWaves: Boolean 是否隐藏水波纹 默认false
  themeWaves: String 水波主题 默认 ''
  disabled: Boolean 是否禁止 默认false
  hover: Boolean 是否支持hover 默认false

button-group 按钮组

<m-btn-group></m-btn-group>
props: 
  idx: Number 当前按钮组选择的样式
  v-model: 与idx不能共存
 
event
  change: 按钮组变化

message 信息弹窗

this.$message({
  title: null, // 标题
  content: null, // 内容 支持vnode
  buttons: [],　// 按钮
  reference: null, //　参考元素
  options: {
    placement: 'bottom'
  }, // popper配置
  hasArrow: true, // 显示箭头
  hasMask: false, // 显示遮罩
  maskClose: true, // 遮罩是否可以点击关闭
  hasClose: true, // 显示关闭按钮
  animate: 'fade', // 动画效果
  visible: false, // 是否显示弹窗 请勿设置
  calcPostion: false, // 计算弹窗位置
  popperStyles: {}, // 弹窗样式 需要popper配置applyStyle.enabled 为false
  callback: null, // 回调函数
  themeClass: '' // class
})

confirm message的封装确认框

this.$confirm(option, callback)
option 和message参数相同 设置了一些默认值 一般只需要设置title content buttons即可

toast message的封装交互提示

this.$toast(content, positon, themeClass, delay, gutter)
content: String / vnode 显示内容
positon: String 显示位置 t b l r lt lb rt rb cc
themeClass: String class 默认 popper-toast
delay: Number 延迟 默认3000
gutter: Number 间隔 默认16

m-tip tooltip提示框

<m-tip>
  <div slot="label"></div>
  <div slot="popper"></div>
</m-tip>

slot:
label 标签卡槽 required
popper 弹窗卡槽 required

props:
options: Object popper.js 参数
animate: String 过渡动画 默认 'fade'
way: String 交互方式 默认 'hover' ['click']
popperMouse: Boolean 弹窗是支持鼠标悬停 默认 false
themeClass: String 弹窗主题 默认 'popper-tip'
hasArrow: Boolean 是否需要箭头 默认 false

events:
change 显示/关闭
  参数 true/false