gxd-uni-new

1、自定义uni-app组件功能，支持h5,mp-weixin平台已自测（竖屏），（文档尚未完善），
2、根据自己的项目需要持续更新。
3、提bug或者需要技术交流加：QQ:149648746  微信：15110208397
4、预览地址：http://uni.e56buy.com/

安装

npm install gxd-uni-new --save --registry  https://registry.npm.taobao.org

#在package.json文件中加入拷贝脚本

"scripts": {
    ...
        "copy:gxd-uni-new": "cp -rf node_modules/gxd-uni-new/src/components/ src/components && cp -rf node_modules/gxd-uni-new/src/utils/ src/utils && cp -rf node_modules/gxd-uni-new/xd.less ./",
    ...
}

然后运行 npm run copy:gxd-uni-new 将插件拷贝到当前项目下

插件全局引用

import Vue from 'vue';
import gxdUniNew from 'gxd-uni-new';

//初始化自定义插件
gxdUniNew(Vue, websetting);

websetting配置文件
/**
 * @description 网址配置文件
 * @attr websetting.mainColor 主色调
 * @attr websetting.btnColor 按钮主色调
 * @attr websetting.subBtnColor 次级按钮主色调
 * @attr websetting.home //首页路径默认为：/pages/index/index
 * @attr websetting.color tabbar文字颜色
 *
 * @attr websetting.selectedColor tabbar当前选中文字颜色
 * @attr websetting.backgroundColor tabbar背景颜色值
 * @attr websetting.showIcon tabbar图标类型 false=》图片（本地路径与base64）推荐使用base64 true=》iconfont图标（需要自己自定义）
 * @attr websetting.list tabbar列表
 * @attr websetting.list.text tabbar文案（4个汉字）
 * @attr websetting.list.iconPath tabbar图标图片路径
 * @attr websetting.list.selectedIconPath tabbar当前路径图标图片路径
 * @attr websetting.list.pagePath 链接路径
 * @attr websetting.list.icon iconfont图标
 */
export const websetting = {
  "color": "#333",//文字颜色
  "selectedColor": "#f00", //tabbar选中颜色
  "backgroundColor": "#fff", //tabbar背景颜色
  "showIcon": true, //icon 获取 图片
  "mainColor": '#f00', //主色调
  "btnColor": '#f00', //按钮主色调
  "subBtnColor": '#FF4304', //次级按钮主色调
  "home": '/pages/index/index', //首页路径默认为：/pages/index/index
  "list": [ //tabbar配置项
    {
      "pagePath": "/pages/index/index",
      "icon": "cakeiconfont cakeshouye",
      'size': 38,
      "customPath": '/pages/rightnow/index',
      "text": "首页"
    },
    {
      "pagePath": "/pages/category/index",
      "icon": 'cakeiconfont cakefenlei1',
      'size': 44,
      "text": "品牌列表"
    },
    {
      "pagePath": "/pages/card/index",
      "icon": "cakeiconfont cakegouwuche",
      'size': 44,
      "text": "购物车"
    },
    {
      "pagePath": "/pages/my/index",
      "icon": "cakeiconfont cakewode2",
      "text": "我的",
      'size': 42,
    }
  ]
};

展示地址

预览地址：http://uni.e56buy.com/

工具函数

#$vm.$xdUniHelper 工具类 
 - checkVarType(obj:Any) //判断变量类型 返回字符串(boolean|number|string|function|array|date|regExp|undefined|null|object)
 - cloneDeep(json:Object) //简单深拷贝
 - random(min:Number, max:Number) //随机数字值
 - romdomArray(arr:Arrar = []) //随机数组的值
 - getTime(lastDay:Number = 30) //获取最近某时间断内的时间
 - inArray(sourceArray:Array = [], findArray:Array = []) 检测查找数组是否在原数组中,返回boolean
 - repeatArray(sourceArray:Array = [], findArray:Array = []) 数组去重复
 - unionArray(sourceArray:Array = [], findArray:Array = []) 数组并集
 - intersectionArray(sourceArray:Array = [], findArray:Array = []) 数组交集
 - differenceArray(sourceArray:Array = [], findArray:Array = []) 数组差集
 - isEmpty(obj:Array|Object) 检查对象或者数组是否为空,返回boolean
 - idToSelectData(data:Array|Object, name:String = 'name', id:String = 'id', force:Boolean = true) 转化为vue element UI选择插件数据格式（{value: 'value' ,label: 'label'}）
 - isKeyInLists(list:Array|Object, value:Any, keyName:String='id') 检查值是否在数组中或者对象中并返回结果
 - getListKeyForValue(list:Array|Object, keyName:String = 'id') 获取数组或者对象中的某个key的value值
 - deleteParamEmptyKey(source:Object, ignoreKey:Array = []) 删除参数中[all|''|null|undefined] ignoreKey被忽略的Key
 - paramsBase64Decode(base64Str:String) //把Base64转化为对象
 - paramsBase64Encode(row:Object) //把对象转化为可传输的Url Base64安全格式
 - jsonToParams(params:String) //把对象解析成请求参数格式
 - cutStringLen(val:String, len:Number = 10) //截断字符串长短（汉字2个字符串，英文1个）
 - parseURL(url:String?) //解析链接地址 或者 获取当前url地址
 - getParmater(key:String)  //获取Url参数
 - addFloatNumber(currentNum:Number, targetNum:Number) //浮点型加法
 - cutFloatNumber(currentNum:Number, targetNum:Number) //浮点型减法
 - multiplyFloatNumber(currentNum:Number, targetNum:Number) //浮点型乘法
 - divisionFloatNumber(currentNum:Number, targetNum:Number) //浮点型除法
 - getCurrentPages() //获取当前页面对象
 - getWindowHeight(ele:Array, this) //获取指定元素元素属性信息,ele为: .xxx or #xxx,返回Promise
    例如：this.$xdUniHelper.getWindowHeight(['.seat-online__info','.seat-online__area',], this).then(res=>{}).catch()
 - tirmL(str:String, replaceStr:String?) //去掉左边指定字符
 - tirmR(str:String, replaceStr:String?) //去掉右边指定字符串
 - tirm(str:String, replaceStr:String?) //去掉两部指定字符串
 - searchHigh(str:String, keyword:String|Array, options:Object? = {}) 
 - navigateTo(obj:Object[url:String],redirect:Boolean = true) //obj与uni.navigateTo的Object参数相同，功能相同，在H5平台的时候可以跳转到外站（需要带http路径）
 - navigateBack() //返回页面处理与navigateTo成对使用
 - setTabbarBadge($vm:Vue, index:Number,num:Number) //设置footerTabbar数字显示 index：为索引位 num：显示数字 最大99，大于99显示99+
 - stringToNumber(str:String) //强制把字符字符串强转为数字
 - randomChar(len:length) //获取任意位随机字符串（大小写字母，数字组合）
 - removeArrayIndex(arr：Array, value:number|string) //删除数组中的某一个值（前提值是唯一值）

插件功能

1、图标插件

  /**
    * UniIcons 图标
    * @description 用于展示 icons 图标
    * @tutorial https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons
    * @property {Number} size 图标大小
    * @property {String} type 图标图案，参考示例
    * @property {String} color 图标颜色
    * @event {Function} click 点击 Icon 触发事件
    */

##例子:

<uni-icons 
    type="search" 
    size="16" 
    color="#999"
>
</uni-icons>

2、自定义Iconfont图标插件

  /**
     * XdFontIcon 全局Ui
     * @description 兼容iconfont图标功能
     * @tutorial
     * @property {Number} size          图标大小（可选） 默认：32rpx
     * @property {Number|String} width  图标宽度（可选）
     * @property {Number|String} height 图标高度（可选）
     * @property {String} icon          图标样式名字 （必选） 默认为: xxxiconfont xxx
     * @event {Function} click          点击是事件
     */

##例子:

内置
<xd-font-icon size="32" color="#999" icon="iconduigou1"></xd-font-icon>

自定义
<xd-font-icon size="32" color="#999" icon="cakeiconfont cakedistribution"></xd-font-icon>

3、星星选中得分

/**
 * XdStar 评分
 * @description 评分组件
 * @tutorial https://ext.dcloud.net.cn/plugin?id=33
 * @property {Boolean} 	isFill = [true|false] 		星星的类型，是否为实心类型, 默认为实心
 * @property {String} 	color 						未选中状态的星星颜色，默认为 "#ececec"
 * @property {String} 	activeColor 				选中状态的星星颜色，默认为 "#ffca3e"
 * @property {String} 	disabledColor 				禁用状态的星星颜色，默认为 "#c0c0c0"
 * @property {Number} 	size 						星星的大小
 * @property {Number} 	value/v-model 				当前评分
 * @property {Number} 	max 						最大评分评分数量，目前一分一颗星
 * @property {Number} 	margin 						星星的间距，单位 px
 * @property {Boolean} 	disabled = [true|false] 	是否为禁用状态，默认为 false
 * @property {Boolean} 	readonly = [true|false] 	是否为只读状态，默认为 false
 * @property {Boolean} 	allowHalf = [true|false] 	是否实现半星，默认为 false
 * @property {Boolean} 	touchable = [true|false] 	是否支持滑动手势，默认为 true
 * @event {Function} change 						uniRate 的 value 改变时触发事件，e={value:Number}
 */

##例子:

<xd-star
    v-model="readonlyStar"
    :active-color="$mainColor"
></xd-star>

4、自定义按钮UI

   /**
    * XdButton 按钮UI
    * @description 按钮组件
    * @tutorial
    * @property {Boolean} disabled = [true|false]    是否禁用
    * @property {String}  btnType                    按钮颜色类型（primary,default,subPrimary,danger,info,warning,success）
    * @property {String}  radius                     圆角处理
    * @property {String}  size                       按钮大小（default，mini）
    * @event {Function} click                        按钮点击事件e
    */

##例子:

<xd-button 
    btn-type="subPrimary" 
    @click="dialogVisible=true"
>开启弹出{{dialogVisible}}</xd-button>

5、支付元宝UI

/**
  * XdCoins 支付元宝
  * @description 元宝ui
  * @tutorial
  * @property {Number} size        元宝被放大倍数，值为0.1 - 1.5 之间， 默认值为0.5
  * @event {Function} click|tap    点击元宝事件
  */

##例子:
<xd-coins size="0.4"></xd-coins>

6、图片作为icon插件

/**
   * XdImageIcon 全局Ui
   * @description 图片作为icon插件
   * @tutorial
   * @property {Number} size        元宝被放大倍数，值为0.1 - 2 之间， 默认值为0.5
   * @property {String} src         图片地址(本地图片或者base64)
   * @event {Function} click|tap    点击元宝事件
   */

##例子:
<xd-image-icon size="2" src="/static/follow.png"></xd-image-icon>

7、图片自动缩放

/**
   * XdLogo 按钮UI
   * @description 图片自动缩放
   * @tutorial
   * @property {String} image                      图片地址 （必填）
   * @property {String|Number}  height             图片最大高度 （选填） 默认：100rpx
   * @property {String|Number}  width              图片最大宽度 （选填） 默认：100rpx
   * @property {String}  mode                      图片展示模式 （选填） 与uni 图片模式保持一致，默认：aspectFit
   *
   * @event {Function} click                       按钮点击事件e
   */

##例子:
<xd-logo image="/static/logo2.png" width="50" height="50"></xd-logo>

8、底部tabbar功能

/**
   * XdFooterTabbar 全局Ui
   * @description 底部tabbar功能
   * @tutorial
   * @property {Number} zIndex          层级数字 （可选）默认: 1500
   * @property {Number} height          tabbar高度（可选） 默认: 100rpx
   * @property {Object} tabbar
   *  tabbar.selectedColor  {String} tabbar当前选中文字颜色
   *  tabbar.backgroundColor  {String} tabbar背景颜色值
   *  tabbar.showIcon tabbar图标类型 false=》图片（本地路径与base64）推荐使用base64 true=》iconfont图标（需要自己自定义）
   *  tabbar.list {Array} tabbar列表
   *  tabbar.list.text  {String} tabbar文案（4个汉字）
   *  tabbar.list.iconPath  {String} tabbar图标图片路径
   *  tabbar.list.selectedIconPath  {String} tabbar当前路径图标图片路径
   *  tabbar.list.pagePath  {String} 链接路径
   *  tabbar.list.icon  {String} iconfont图标
   * @property {Function} click          点击是事件
   */

##例子:
<xd-footer-tabbar
    :tabbar="tabbar"
    :height="info.bottomTabbar"
    :z-index="info.zIndex"
></xd-footer-tabbar>

9、显示没有更多样式，支持插槽

/**
* XdMore 全局Ui
* @description 显示没有更多样式，支持插槽    默认插槽：没有更多了
* @property {String} background 背景颜色值
*/

##例子:
<xd-more></xd-more>

10、数量输入插件

/**
* XdNumber 按钮UI
* @description 数量输入插件
* @tutorial
* @property {Number} value/v-model              双向绑定值 默认：null
* @property {String} label                      label名称 （选填） 默认：购买数量 值为空不显示
* @property {Boolean} focus                     输入框是否聚焦 （选填）
* @property {Number}  min                       默认最小值 （选填） 默认：1
* @property {Number}  width                     输入框最大宽度 （选填） 默认：100rpx
* @property {String}  placeholder               提示文案
*
* @v-model {Number} value
* @event {Function} change                      点击加减按钮事件
*/

##例子:
<xd-number v-model="num"></xd-number>

11、选择是否插件（Switch）

/**
   * XdSwitch 
   * @description 选择是否插件
   * @tutorial
   * @property {Boolean} disabled = [true|false]    是否禁用     默认：false
   * @property {String}  size                       支持尺寸大小（small,mini,lag,default）   默认:default
   * @property {Boolean}  isShowText                支持显示是否文本    默认：false
   * @property {Boolean}  checked                   是否选中    默认：true
   * @property {String}  openText                   选择文本    默认：开 （isShowText=>true 生效）
   * @property {String}  closeText                  未选择文本    默认：关 （isShowText=>true 生效）
   * @property {String}  color                      按钮选择颜色   默认：主色调
   *
   * @v-model 单向绑定 是否选择通过checked进行绑定
   *
   * @event {Function} change                       状态改变事件
   */

##例子:
<xd-switch
  size="mini"
  :is-show-text="true"
  open-text="开启"
  close-text="关闭"
  color="green"
  :checked="false"
  :disabled="false"
></xd-switch>

12、自定义标签，支持插槽

/**
* XdTagsBg
* @description 自定义标签，支持插槽
*/

##例子:
<xd-tags-bg>噢耶</xd-tags-bg>

13、标签,用于展示1个或多个文字标签，可点击切换选中、不选中的状态

/**
 * XdTag 标签
 * @description 用于展示1个或多个文字标签，可点击切换选中、不选中的状态
 * @property {String} text 标签内容
 * @property {String} size = [normal|small] 大小尺寸
 * 	@value normal 正常
 * 	@value small 小尺寸
 * @property {String} type = [default|primary|success｜warning｜error｜royal]  颜色类型
 * 	@value default 灰色
 * 	@value primary 蓝色
 * 	@value success 绿色
 * 	@value warning 黄色
 * 	@value error 红色
 * 	@value royal 紫色
 * @property {String}  radius  圆角处理 默认为30rpx
 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
 * @property {Boolean} circle = [true|false] 是否为圆角
 * @event {Function} click 点击 Tag 触发事件
 */

##例子:
<xd-tag type="primary">正常标签</xd-tag>
<xd-tag type="primary" radius="10rpx" inverted>正常标签</xd-tag>
<xd-tag type="primary" size="small" circle>小号标签</xd-tag>

14、单位显示插件

/**
* XdUint 
* @description 单位显示插件
* @tutorial
* @property {Number} fontSize                    支付金额文字大小 （选填） 默认：32rpx
* @property {Number|String}  price               支付金额 （必选）
* @property {String}  color                      支付金额文本颜色 （选填） 默认：主色调
* @property {String}  unit                       支付金额单位 （选填） 默认：空，选上元宝样式
* @property {Number}  iocnSize                   支付元宝样式大小  （选填） 默认：0.35  备注：unit单位为空时候生效
*/


##例子:
<xd-uint color="red" :font-size="32" price="200" unit="元"></xd-uint>
<xd-uint color="red" :font-size="32" price="200" unit="点"></xd-uint>
<xd-uint color="red" :font-size="32" price="200" :iocn-size="0.3"></xd-uint>