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

• 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

• m-select 选择