jeejioh5

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>