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>