gxd-uni

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

安装

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

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

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

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

插件全局引用

import Vue from 'vue'
import gxdUniTest from 'gxd-uni';

//自动加载components中的插件
import components from "@/components/autoload";
Object.keys(components).map((key) => {
   Vue['component'](components[key].name, components[key]);
});


//初始化自定义插件
gxdUniTest(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>

gxd-uni

gxd-uni

安装

插件全局引用

展示地址

工具函数

插件功能

1、图标插件

2、自定义Iconfont图标插件

3、星星选中得分

4、自定义按钮UI

5、支付元宝UI

6、图片作为icon插件

7、图片自动缩放

8、底部tabbar功能

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

10、数量输入插件

11、选择是否插件（Switch）

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

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

14、单位显示插件

Readme

Keywords

Package Sidebar

Install

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

gxd-uni

gxd-uni

安装

插件全局引用

展示地址

工具函数

插件功能

1、图标插件

2、自定义Iconfont图标插件

3、星星选中得分

4、自定义按钮UI

5、支付元宝UI

6、图片作为icon插件

7、图片自动缩放

8、底部tabbar功能

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

10、数量输入插件

11、选择是否插件（Switch）

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

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

14、单位显示插件

Readme

Keywords

Package Sidebar

Install

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads