wang-cus

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

注意事项

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

第一步 npm 安装插件

npm i wang-cus

第二步 main.js 引入

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

页面使用

登录组件[logins]

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

地图[mapCus]

在public/index.html 引入：

    <link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css"/>
    <script type="text/javascript" src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=申请的ak&services=&t=20230529114224"></script>

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 `<div>
                    当前位置：${e.info}
                    </div>`
            }
        缩放层级   ZoomLevel Number  11
        是否开启滚轮缩放  ZoomBoo Boolean true 
        是否初始化显示标点marker，开启后会根据marker坐标移动视图  markerInitialShow Boolean true 
    <mapCus 
        @markerClick="markerClick" 
        :AddrList="AddrList" 
        cityName="丽江" 
        :isHtmlFun="isHtmlFun"
    ></mapCus>

表格[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 [] 

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