0.0.1 • Published 3 years ago

jeejioh5 v0.0.1

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

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默认绑定值booleanfalse / truefalse
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加载显示隐藏booleanfalse/truefalse
loadingTextShow加载提示语的显隐stringfalse/truefalse
loadingText加载提示语string-加载中
loadingType加载 类型stringjeeCircle / jeeImg / jeeSlotjeeCircle
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弹出抽屉位置stringtop/ left / bottom / rightleft
jeeSize弹出窗口大小可见高度stringpx / rem / %6rem
jeeIsHide弹出窗口显示隐藏booleanfalse/truefalse
jeeBgOpacity全局浮层背景透明图度颜色string* rgbargba(0,0,0,0.2)
jeeBorderRadiusVal圆角大小stringpx / 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弹出停留几时间numbers3s
tipsIsShow默认显示隐藏booleanfalse/truefalse
tipsTimeShow是否显示隐藏 时间倒计时booleanfalse/truefalse
tipsText提示语内容string--
tipsTop弹出框 位置stringrem / px / %上下左右居中
jeeBg背景颜色string-rgba(0, 0, 0, 0.6)
jeeColor字体颜色string-#fff
tipsImgShow显示右边自定义关闭 按钮booleanfalse/truefalse
tipsOffImg显示右边自定义关闭 按钮 图片string--
tipsImg显示左边自定义icon 图片string--
tipsBackShow右面自定义显隐booleanfalse/truefalse

事件

事件说明回调参数
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标题字体大小stringrem / px / %0.3rem
navigationLeftBack返回图片icon---
navigationBtnIsHide右边显示隐藏booleanfalse/truefalse
navigationRight右边内容string-刷新

事件

事件说明回调参数
callbackNavigationBack返回回调-
callbackNavigationBtn右边 预留回调-

slot

 <Navigation :navigation='navigation'>
    <div slot="right">自定义右边</div>
 </Navigation>