0.0.1 • Published 3 years ago
jeejioh5 v0.0.1
jeeweb 组件库的使用
使用与安装 vue2.0 使用
安装:
npm i v-jeejioeh5
使用:全局挂载
import vjeejio from 'jeejioeh5'
import 'jeejioeh5/lib/jeejioeh5.css'
Vue.use(vjeejio)
#组件的用法说明
1.checkbox 示例
<Checkbox @jeeChange="jeeChange" :jeeValue="jeeValue" ></Checkbox>
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
jeeValue | 默认绑定值 | boolean | false / true | false |
jeeDisabled | 是否禁止点击/勾选 | boolean | - | false |
事件
事件 | 说明 | 回调参数 |
---|---|---|
jeeChange | 点击当绑定值变化时触发的事件 | - |
2.button 示例
<Button :jeebg="jeebg" @jeeClick="jeeClick">按钮</Button>
...
data(){
jeebg:"#333"
}
...
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
jeebg | 背景颜色 | string | - | "ff7068" |
jeewidth | 宽度 | string | - | - |
jeeHeight | 高度 | string | - | - |
jeebr | 圆角 | string | - | - |
jeefs | 字体大小 | string | - | - |
事件
事件 | 说明 | 回调参数 |
---|---|---|
jeeClick | 点击当绑定值变化时触发的事件 | - |
3.loading 示例
<Loading :loading="loading"></Loading>
...
data(){
loading:{
loadingShow:false,
loadingTextShow:true,
loadingText:'自定义提示语内容'
}
}
...
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
loadingShow | 加载显示隐藏 | boolean | false/true | false |
loadingTextShow | 加载提示语的显隐 | string | false/true | false |
loadingText | 加载提示语 | string | - | 加载中 |
loadingType | 加载 类型 | string | jeeCircle / jeeImg / jeeSlot | jeeCircle |
loadingImg | 自定义自定义图片 | string | - | - |
loadingbg | 加载背景颜色 | string | - | - |
事件
事件 | 说明 | 回调参数 |
---|---|---|
- | - | - |
4.Drawer 示例
<Drawer :drawer="drawer"></Drawer>
...
data(){
drawer:{
jeeType:'bottom',
jeeSize:"6rem",
jeeIsHide:false,
jeeBgOpacity:"rgba(0,0,0,.2)"
jeeBackCallback:()=>{}
}
}
...
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
jeeType | 弹出抽屉位置 | string | top/ left / bottom / right | left |
jeeSize | 弹出窗口大小可见高度 | string | px / rem / % | 6rem |
jeeIsHide | 弹出窗口显示隐藏 | boolean | false/true | false |
jeeBgOpacity | 全局浮层背景透明图度颜色 | string | * rgba | rgba(0,0,0,0.2) |
jeeBorderRadiusVal | 圆角大小 | string | px / rem / % | 0 |
jeeBg | 背景颜色 | string | - | #fff |
事件
事件 | 说明 | 回调参数 |
---|---|---|
jeeBackCallback | 点击回调 | - |
slot
<Drawer :drawer="drawer">
<slot><slot>
</Drawer>
5.Drawer 示例
<Drawer :drawer="drawer"></Drawer>
...
data(){
return {
popup:{
tipsTime:3,
tipsIsShow:true,
tipsTimeShow:true,
tipsText:"提示语",
tipsBackShow:true,
tipsTop:"50px",
jeeBg:"green",
jeeColor:"#ff9",
tipsImgShow:true,
tipsOffImg:"url"
tipsImg:"url",
}
}
}
...
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
tipsTime | 弹出停留几时间 | number | s | 3s |
tipsIsShow | 默认显示隐藏 | boolean | false/true | false |
tipsTimeShow | 是否显示隐藏 时间倒计时 | boolean | false/true | false |
tipsText | 提示语内容 | string | - | - |
tipsTop | 弹出框 位置 | string | rem / px / % | 上下左右居中 |
jeeBg | 背景颜色 | string | - | rgba(0, 0, 0, 0.6) |
jeeColor | 字体颜色 | string | - | #fff |
tipsImgShow | 显示右边自定义关闭 按钮 | boolean | false/true | false |
tipsOffImg | 显示右边自定义关闭 按钮 图片 | string | - | - |
tipsImg | 显示左边自定义icon 图片 | string | - | - |
tipsBackShow | 右面自定义显隐 | boolean | false/true | false |
事件
事件 | 说明 | 回调参数 |
---|---|---|
jeeBackCallback | 点击回调 | - |
slot
<Drawer :drawer="drawer">
<slot><slot>
</Drawer>
6.navigation 示例
<Navigation :navigation='navigation'></Navigation>
...
data(){
return {
navigation:{
navigationHeight: "0.8rem",
navigationBg:"#fff",
navigationTitle:"文案内容",
navigationTitleColor:"#333",
navigationTitlefontSize:"0.3rem",
navigationLeftBack: require('./iconimg/fanhui.png') ,
navigationBtnIsHide:false,
navigationRight: "刷新",
callbackNavigationBack:()=>{},
callbackNavigationBtn:()=>{},
}
}
}
...
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
navigationHeight | 高度 | string | - | 0.8rem |
navigationBg | 背景颜色 | string | - | #fff |
navigationTitle | 标题文案 | string | - | 内容 |
navigationTitleColor | 标题颜色 | string | - | #333 |
navigationTitlefontSize | 标题字体大小 | string | rem / px / % | 0.3rem |
navigationLeftBack | 返回图片icon | - | - | - |
navigationBtnIsHide | 右边显示隐藏 | boolean | false/true | false |
navigationRight | 右边内容 | string | - | 刷新 |
事件
事件 | 说明 | 回调参数 |
---|---|---|
callbackNavigationBack | 返回回调 | - |
callbackNavigationBtn | 右边 预留回调 | - |
slot
<Navigation :navigation='navigation'>
<div slot="right">自定义右边</div>
</Navigation>
0.0.1
3 years ago