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>