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 type="success" @click="finish">完成</BbButton>
<BbList
:content-arr="MenuList"
:type="3"
v-model="curListItem"
:default-actived="defaultMenuItem"
@click="handleClick"/>
<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
v-if="inputNumber"
:max="max"
:min="min"
:origin-val="originValSon"
style="display: inline-block"
@change="inputNumberChange"/>
BbInputNumber基于element-ui写的,当下暂时不能用
<BbCheckbox v-model="bbChecked">点击选中</BbCheckbox>
this.$toast({
message: '成功提示',
type: 'success'
})
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的写法
}
]
]
}
将 src/examples/index.html拖拽到浏览器中可以看到简单的组件样式.