speiyou-components v1.6.0

blackboard common components.

using:

npm install speiyou-components

import Components from 'speiyou-components'
Vue.use(Components)

then you can use.

由于之前的组件样式基于rem，根元素font-size:100px的尺寸写的，直接用的话可能会有些样式错误。

BbButton

<BbButton type="success" @click="finish">完成</BbButton>

BbList

<BbList
  :content-arr="MenuList"
  :type="3"
  v-model="curListItem"
  :default-actived="defaultMenuItem"
  @click="handleClick"/>

BbTimeSelect

<BbTimeSelect
  v-if="inputTime"
  :init-time="initTimeSon"
  :start="start"
  :end="end"
  :start-unit="startUnit"
  :show-label="showLabel"
  style="display: inline-block"
  @change-time="inputTimeChange"
  @delete-all="deleteAllChange"/>

BbInputNumber

<BbInputNumber
  v-if="inputNumber"
  :max="max"
  :min="min"
  :origin-val="originValSon"
  style="display: inline-block"
  @change="inputNumberChange"/>

BbInputNumber基于element-ui写的，当下暂时不能用

checkbox

<BbCheckbox v-model="bbChecked">点击选中</BbCheckbox>

toast

this.$toast({
  message: '成功提示',
  type: 'success'
})

dialog

this.$dialog({
  title: '删除提示',
  text: '是否确定删除此标签？',
  showCancelBtn: true,
  confirmText: '确认',
  confirm(content) {
    alert('删除成功')
  }
})

按需加载

import {BbButton, toast } from 'speiyou-components' Vue.component('BbButton', BbButton) Vue.use(toast)

npm install babel-plugin-component

.babelrc

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "bbcomponentsnew",
        "style": false,
        "camel2Dash": false // 是否把驼峰转换成xx-xx的写法
      }
    ]
  ]
}

example

将 src/examples/index.html拖拽到浏览器中可以看到简单的组件样式.