这是一个常用vue组件库，基于vue 2.0封装了web开发常用组件、常用方法、常用样式......

安装组件

• npm install comp-wrap

引入组件

 import compWrap from 'comp-wrap'
 import 'comp-wrap/lib/comp-wrap.css'  // 可选，是否引入基于4/8倍数的样式库

 Vue.use(compWrap, {
   namespace: 'project_platform_'  // 命名空间，用于隔离不同项目或模块的 Storage 和 Cookie 数据。
 })

• BarChartPlus 增强型柱状图组件，支持多种图表配置和交互功能。
• HorChartPlus 增强型横向图表组件，适用于数据横向展示场景。
• LineChartPlus 增强型折线图组件，支持动态数据更新和自定义样式。
• PieChartPlus 增强型饼图组件，支持数据占比展示和交互操作。
• MapMarkerListView 地图标记列表视图组件，用于展示地图标记点信息。
• MapPointPickerDialog 地图点选择对话框组件，支持地图点位选取功能。
• InputPlus 增强型输入框组件，修复了原生 input 的部分问题（如 maxlength 失效）。

   <!-- 基础用法 -->
   <bar-chart-plus 
     :seriesData="barLineChartOptions.seriesData"
     :xAxisData="barLineChartOptions.xAxisData"
   ></bar-chart-plus>

   <!-- 全量配置 -->
   <bar-chart-plus 
     :seriesData="barLineChartOptions.seriesData" 
     :xAxisData="barLineChartOptions.xAxisData"
     width="400px" 
     height="300px" 
     theme="light" 
     :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
     :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
     :colorCenter="['#999', 'rgba(255, 255, 0, 01)']" 
     textColor="#f0f"
     label 
     borderRadius 
     barWidth="10" 
     minSpan="50" 
     x_rotate="45" 
     y_name="金额" 
     y_axisLine 
     y_splitLine 
     y_type="value"
   ></bar-chart-plus>

   <!-- 基础用法 -->
   <hor-chart-plus 
     :seriesData="barLineChartOptions.seriesData"
     :xAxisData="barLineChartOptions.xAxisData"
   ></hor-chart-plus>

   <!-- 全量配置 -->
   <!-- 和上面差异是： y_axisLine/y_splitLine 变成 x_axisLine/x_splitLine -->
   <hor-chart-plus 
     :seriesData="barLineChartOptions.seriesData" 
     :xAxisData="barLineChartOptions.xAxisData"
     width="300px" 
     height="400px" 
     theme="light" 
     :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
     :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
     :colorCenter="['#999', 'rgba(255, 255, 0, 01)']" 
     textColor="#f0f"
     label 
     borderRadius 
     barWidth="30" 
     minSpan="50" 
     x_rotate="45" 
     x_axisLine 
     x_splitLine 
     y_name="金额" 
     y_type="value"
   ></hor-chart-plus>

   <!-- 基础配置 -->
   <line-chart-plus 
     :seriesData="barLineChartOptions.seriesData"
     :xAxisData="barLineChartOptions.xAxisData"
   ></line-chart-plus>

   <!-- 全量配置：相比折线图 -->
   <!-- 增加了: smooth/step/symbol="emptyCircle"/symbolSize=4 -->
   <!-- 去掉了: borderRadius/barWidth -->
   <line-chart-plus 
     :seriesData="barLineChartOptions.seriesData" 
     :xAxisData="barLineChartOptions.xAxisData"
     width="600px" 
     height="300px" 
     theme="light" 
     :colorStart="['#333', 'rgba(255, 0, 0, 0.1)']"
     :colorEnd="['#fff', 'rgba(255, 0, 0, 0.9)']" 
     :colorCenter="['#999', 'rgba(255, 255, 0, 01)']" 
     textColor="#f0f"
     label 
     smooth 
     step 
     symbol="emptyCircle" 
     symbolSize="10" 
     minSpan="50" 
     x_rotate="45" 
     y_name="金额" 
     y_axisLine 
     y_splitLine 
     y_type="value"
   ></line-chart-plus>

   <!-- 因为legend和title模拟圆心统计数据的变种太大，导致不太好提取变量 -->
   <!-- 调整width/height来处理legend的位置和现实更方便（调整center_x/center_y容易导致截断） -->
   <pie-chart-plus 
     :seriesData="pieChartOptions.seriesData"
   ></pie-chart-plus>

   <pie-chart-plus 
     :seriesData="pieChartOptions.seriesData" 
     width="800" 
     height="400" 
     theme="light" 
     :color="['#f00', '#0f0', '#00f']" 
     :radius="['30%', '75%']" 
     center_x="50%" 
     center_y="50%" 
     :legend="{ orient: 'vertical', bottom: 'center', right: 10 }" 
     titleType="场景1" 
     label 
     borderWidth="2" 
     roseType="radius"
   ></pie-chart-plus>

   <map-marker-list-view 
     :markerList="markerList">
   ></map-marker-list-view>

   <map-point-picker-dialog 
     :visible.sync="visible" 
     :mode="mode" 
     :in-point="inPoint" 
     @confirm="handlePointMapConfirm">
   </map-point-picker-dialog>

   <input-plus
     v-model="form.price"
     type="number"
     maxlength="10"
     :accept-minus="false"
     :decimal-limit="2"
   ></input-plus>

方法说明

• Vue.prototype.$localStoragePlus 增强型本地存储工具，支持命名空间隔离。

• Vue.prototype.$sessionStoragePlus 增强型会话存储工具，支持命名空间隔离。

• Vue.prototype.$cookiePlus 增强型 Cookie 操作工具，支持命名空间隔离。

• 提供以下方法，并内部通过序列化的判断，兼容存储字符串和js对象（原生方法只支持字符串）。

• setItem

• getItem

• removeItem

• clear

• length

• Vue.prototype.$tools 提供通用工具方法集合，如日期格式化、字符串处理等。

 return {
    // 判断类
    isNull, // 判空
    isArray,
    isObject,
    isFunction,
    isString,
    isNumber,
    isUrl,
    isWeixin, // 微信内置浏览器(无参)

    // 验证类--Reg
    validCreditCode,
    validPassWord,
    validEmail,
    validPhone, // 验证联系方式（座机+手机）
    validMobile,
    validCardNo(cardType = '01', cardNo), // 验证证件号码 01默认身份证
    validDate, // 判断是否为有效日期

    // 通用方法
    uniqueArray, // 数组去重
    deepClone, // 深度克隆
    copyText, // 复制文本到剪贴板
    sleep, // 休眠（Promise） (ms)
    maskedStr, // 掩码字符串（脱敏） (str, type = null, options = {})  type [mobile, idCard, name, email, bankCard, address]

    // 随机数
    getRandom, // 获取随机数(0,100)
    getUuid, // 获取uuid  无参，36位

    // 日期/时间处理
    getYearCurr, // 获取当前年份  (plus = 0)  偏移量
    getYearRange, // 获取指定时间范围  (length, plus = 0, step = 1)
    getDatePicker, // 日期格式处理 (timestamp, format = 'yyyy/MM/dd', defaultValue = '--')
    getIdCardInfo, // 身份证获取性别生日  (idCard, type)  1-生日，2-性别，3-年龄
    birthDateToYear, // 获取至今的年龄月龄  (birth, type = 'yy', appointDate = '')  appointDate为相对传入时刻

    // 金额处理
    formatMoney, // 金额格式化(千位加逗号)   (num, currency = '¥')  支持负数
    toChinesNum, // 数字转大写汉字  (num)

    // 系列化-反序列化
    parseQueryParams, // 获取url参数（不传获取当前url, 支持完整URL、相对路径、查询字符串）
    serializeParams, // 参数序列化(同parseQueryParams相反)

    // 设备信息
    getDeviceType,// 获取设备类型 tablet/mobile/desktop
    getBrowserInfo, // 获取浏览器信息(Chrome/Firefox/Safari/Edge/Internet Explorer)

    // 节流防抖
    throttle, // 节流函数（点击防重）————节流会先执行一次, 防抖不会
    debounce, // 防抖函数（窗口滚动）

    // 深层次对象操作
    deepMerge, // 深度合并对象（返回合并后对象，不修改原对象）
    deepEqual, // 深度比较对象是否相等
    deepGet, // 获取对象深层次属性值

    // 树形结构处理
    tranListToTreeData,  (arr, id = 'id', pId = 'pId')
    getTreeLastLevel,
 } 

这些工具方法也挂载到了全局对象 window 上，可以直接通过 window.tools、window.localStoragePlus 等方式访问。

样式说明

• 设计风格：0/4/8/12/16/(20)/24/(32) 4/8倍数非线性

• [p, t/r/b/l], [m, t/r/b/l], gap, 枚举[4/8倍数——0/4/8/12/16/20/24/32]

• radius枚举[radius-25/50-p, 4/8倍数——0/4/8/12/16/20/24/32]

• text(font-size)[10, 12, 14, 16, 18, 20, 22, 24]

• lh-x-x(line-height)枚举[0.8, 1, 1.2, 1.5, 1.8, 2]

• z(z-index)枚举[0, 10...50]

• flex枚举[none——定尺寸不伸缩, auto——内容自适应, full——占满, 1——纯比例分配, 2, 3]

• order枚举[first(-1), 1, 2, 3, last(999)] *-

• border-[方向]-[透明度], border border-t border-1 border-t-1

$spacings: 0, 4, 8, 12, 16, 20, 24, 28, 32;

@each $i in $spacings {
  .p-#{$i} {
    padding: #{$i}px;
  }
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
  .m-#{$i} {
    margin: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .gap-#{$i} {
    gap: #{$i}px;
  }
  .radius-#{$i} {
    border-radius: #{$i}px;
  }
}

$border-opacity: "", 1, 2, 3, 4, 5;
$border-directions: (
  "": "",
  "t": "-top",
  "r": "-right",
  "b": "-bottom",
  "l": "-left"
);

@each $dir-key, $dir-value in $border-directions {
  @each $opacity in $border-opacity {
    @if $dir-key =="" {
      @if $opacity =="" {
        .border {
          border: 1px solid rgb(128, 128, 128);
        }
      }
      @else {
        .border-#{$opacity} {
          border: 1px solid rgba(128, 128, 128, $opacity * 0.1);
        }
      }
    }
    @else {
      @if $opacity =="" {
        .border-#{$dir-key} {
          border#{$dir-value}: 1px solid rgb(128, 128, 128);
        }
      }
      @else {
        .border-#{$dir-key}-#{$opacity} {
          border#{$dir-value}: 1px solid rgba(128, 128, 128, $opacity * 0.1);
        }
      }
    }
  }
}

联系方式

• 邮箱：[email protected]
• 微信：tcheng8866