wang-cus

常用大组件，方便日常使用开发；

注意事项



 基于elementui，实际使用，请先安装elementui



第一步 npm 安装插件



npm i wang-cus



第二步 main.js 引入



import wangCus from 'wang-cusui'

import 'wang-cusui/wang-cusui.css'



$3

#### 登录组件[logins]



    参数说明

        登录系统名     String    loginTitle

        忘记密码的地址 String    forgetUrl

        注册的地址     String    registryUrl  

        字段中转       Object    prop  默认  {  account:'uName',  password:'uPass' }

        忘记密码的回调  function forgetPassFun

        注册的回调  function  registry

            loginTitle="登录" 

        @subLogin="subLogin" 

        :prop="{account:'cus',password:'pwd'}"

    >



##### 地图[mapCus]

    在public/index.html 引入：



        

        



    tips:需要自行申请akid

 

###### 基于BmapGL，做定位、标点



        高度        height      String      '400px'

        宽度        width       String      '100%' 

        初始城市名  cityName    String      '成都' 

        标点数据    AddrList    Array        []           

                    参考： {

                                longitude:'104.051399',

                                latitude:'30.640425',

                                title:'测试',

                                info:'这是一家店'

                            },

        滚动高亮  isScorll Boolean false

        自定义显示详情信息  isHtmlFun Function  (e)=>{

                return

当前位置：${e.info}



            }

        缩放层级   ZoomLevel Number  11

        是否开启滚轮缩放  ZoomBoo Boolean true 

        是否初始化显示标点marker，开启后会根据marker坐标移动视图  markerInitialShow Boolean true 

            @markerClick="markerClick" 

        :AddrList="AddrList" 

        cityName="丽江" 

        :isHtmlFun="isHtmlFun"

    >



###### 表格[tableCus]，结合了dialog，可以双向使用；页面直接使用 + 弹出使用

    参数说明：

        是否是弹出表格  isDialog      Boolean false 

        是否打开弹框    isOpenDialog  Boolean false

        锁定滚动        lockScroll    Boolean true 

        是否点击遮罩关闭 closeOnClickModal Boolean false 

        是否关闭销毁    destroyOnClose Boolean false 

        标题            title   String  '标题'

        是否需要分页器  needPagination Boolean true 

        分页条数范围 pageSizes Array [20, 30, 50]

        分页的可见基本参数  pageLayout  String "total, sizes, prev, pager, next, jumper" 

        总条数    pageTotal Number 300 

        每页条数  pageSize Number 100 

        表格的其他配置 tableConfig Object  {   style:{width:'100%'} }

        表格列   tableColumn Array [] 

        表格数据 tableData Array []



    示例：

          @handleSelectionChange="handleSelectionChange"

      @handleSizeChange="handleSizeChange" 

      @handleCurrentChange="handleCurrentChange"

      :isOpenDialog="isOpenDialog" 

      :isDialog="false" 

      @update:isOpenDialog="updateDialog" 

      :tableData="tableData"

      :tableColumn="tableColumn" 

      :needPagination="true" 

      >

注意事项

基于elementui，实际使用，请先安装elementui

第一步 npm 安装插件

npm i wang-cus

第二步 main.js 引入

import wangCus from 'wang-cusui'
import 'wang-cusui/wang-cusui.css'

$3

#### 登录组件[logins]

参数说明
登录系统名 String loginTitle
忘记密码的地址 String forgetUrl
注册的地址 String registryUrl
字段中转 Object prop 默认 { account:'uName', password:'uPass' }
忘记密码的回调 function forgetPassFun
注册的回调 function registry
loginTitle="登录"
@subLogin="subLogin"
:prop="{account:'cus',password:'pwd'}"
>

##### 地图[mapCus]
在public/index.html 引入：

tips:需要自行申请akid

###### 基于BmapGL，做定位、标点

高度 height String '400px'
宽度 width String '100%'
初始城市名 cityName String '成都'
标点数据 AddrList Array []
参考： {
longitude:'104.051399',
latitude:'30.640425',
title:'测试',
info:'这是一家店'
},
滚动高亮 isScorll Boolean false
自定义显示详情信息 isHtmlFun Function (e)=>{
return

当前位置：${e.info}

}
缩放层级 ZoomLevel Number 11
是否开启滚轮缩放 ZoomBoo Boolean true
是否初始化显示标点marker，开启后会根据marker坐标移动视图 markerInitialShow Boolean true
@markerClick="markerClick"
:AddrList="AddrList"
cityName="丽江"
:isHtmlFun="isHtmlFun"
>

###### 表格[tableCus]，结合了dialog，可以双向使用；页面直接使用 + 弹出使用
参数说明：
是否是弹出表格 isDialog Boolean false
是否打开弹框 isOpenDialog Boolean false
锁定滚动 lockScroll Boolean true
是否点击遮罩关闭 closeOnClickModal Boolean false
是否关闭销毁 destroyOnClose Boolean false
标题 title String '标题'
是否需要分页器 needPagination Boolean true
分页条数范围 pageSizes Array [20, 30, 50]
分页的可见基本参数 pageLayout String "total, sizes, prev, pager, next, jumper"
总条数 pageTotal Number 300
每页条数 pageSize Number 100
表格的其他配置 tableConfig Object { style:{width:'100%'} }
表格列 tableColumn Array []
表格数据 tableData Array []

示例：
@handleSelectionChange="handleSelectionChange"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
:isOpenDialog="isOpenDialog"
:isDialog="false"
@update:isOpenDialog="updateDialog"
:tableData="tableData"
:tableColumn="tableColumn"
:needPagination="true"
>