cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

v1.0

Browse Source
This commit is contained in:
hupeng
2023-10-11 11:27:47 +08:00
commit d0b337c596
659 changed files with 67106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
uni_modules/uv-tabbar/changelog.md Normal file
View File

@ -0,0 +1,14 @@
## 1.0.5（2023-07-17）
1. 优化文档
2. 优化其他
## 1.0.4（2023-06-13）
1. 底部安全距离依赖添加
## 1.0.3（2023-06-09）
1. 增加iconSize参数
## 1.0.2（2023-06-01）
1. 修复点击触发两次事件的BUG
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-tabbar 底部导航栏

40
uni_modules/uv-tabbar/components/uv-tabbar-item/props.js Normal file
View File

@ -0,0 +1,40 @@
export default {
props: {
// item标签的名称，作为与uv-tabbar的value参数匹配的标识符
name: {
type: [String, Number, null],
default: null
},
// uv-ui内置图标或者绝对路径的图片
icon: {
icon: String,
default: ''
},
// 图标大小，默认uv-tabbar的iconSize=20
iconSize: {
type: [String, Number],
default: ''
},
// 右上角的角标提示信息
badge: {
type: [String, Number, null],
default: null
},
// 是否显示圆点，将会覆盖badge参数
dot: {
type: Boolean,
default: false
},
// 描述文本
text: {
type: String,
default: ''
},
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
badgeStyle: {
type: [Object, String],
default: 'top: 6px;right:2px;'
},
...uni.$uv?.props?.tabbarItem
}
}

146
uni_modules/uv-tabbar/components/uv-tabbar-item/uv-tabbar-item.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<view
class="uv-tabbar-item"
:style="[$uv.addStyle(customStyle)]"
@tap="clickHandler"
>
<view class="uv-tabbar-item__icon">
<uv-icon
v-if="icon"
:name="icon"
:color="isActive? parentData.activeColor : parentData.inactiveColor"
:size="iconSize? iconSize: parentData.iconSize"
></uv-icon>
<template v-else>
<slot
v-if="isActive"
name="active-icon"
/>
<slot
v-else
name="inactive-icon"
/>
</template>
<uv-badge
absolute
:offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
:customStyle="badgeStyle"
:isDot="dot"
:value="badge || (dot ? 1 : null)"
:show="dot || badge > 0"
></uv-badge>
</view>
<slot name="text">
<text
class="uv-tabbar-item__text"
:style="{
color: isActive? parentData.activeColor : parentData.inactiveColor
}"
>{{ text }}</text>
</slot>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* TabbarItem 底部导航栏子组件
* @description 此组件提供了自定义tabbar的能力。
* @tutorial https://www.uvui.cn/components/tabbar.html
* @property {String | Number} name item标签的名称，作为与uv-tabbar的value参数匹配的标识符
* @property {String} icon uvui内置图标或者绝对路径的图片
* @property {String | Number} badge 右上角的角标提示信息
* @property {Boolean} dot 是否显示圆点，将会覆盖badge参数（默认 false ）
* @property {String} text 描述文本
* @property {Object | String} badgeStyle 控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）
* @property {Object} customStyle 定义需要用到的外部样式
*
* @example <uv-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><uv-tabbar-item text="首页" icon="home" dot ></uv-tabbar-item></uv-tabbar>
*/
export default {
name: 'uv-tabbar-item',
mixins: [mpMixin, mixin, props],
emits: ['click','change'],
data() {
return {
isActive: false, // 是否处于激活状态
parentData: {
value: null,
activeColor: '',
inactiveColor: '',
iconSize: 20
}
}
},
created() {
this.init()
},
methods: {
init() {
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
this.updateParentData()
if (!this.parent) {
this.$uv.error('uv-tabbar-item必须搭配uv-tabbar组件使用')
}
// 本子组件在uv-tabbar的children数组中的索引
const index = this.parent.children.indexOf(this)
// 判断本组件的name(如果没有定义name，就用index索引)是否等于父组件的value参数
this.isActive = (this.name || index) === this.parentData.value
},
updateParentData() {
// 此方法在mixin中
this.getParentData('uv-tabbar')
},
// 此方法将会被父组件uv-tabbar调用
updateFromParent() {
// 重新初始化
this.init()
},
clickHandler() {
this.$nextTick(() => {
const index = this.parent.children.indexOf(this)
const name = this.name || index
// 点击的item为非激活的item才发出change事件
if (name !== this.parent.value) {
this.parent.$emit('change', name)
}
this.$emit('click', name)
})
}
},
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-tabbar-item {
@include flex(column);
align-items: center;
justify-content: center;
flex: 1;
&__icon {
@include flex;
position: relative;
width: 150rpx;
justify-content: center;
}
&__text {
margin-top: 2px;
font-size: 12px;
color: $uv-content-color;
}
}
/* #ifdef MP */
// 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
:host {
flex: 1
}
/* #endif */
</style>

50
uni_modules/uv-tabbar/components/uv-tabbar/props.js Normal file
View File

@ -0,0 +1,50 @@
export default {
props: {
// 当前匹配项的name
value: {
type: [String, Number, null],
default: null
},
// 是否为iPhoneX留出底部安全距离
safeAreaInsetBottom: {
type: Boolean,
default: true
},
// 是否显示上方边框
border: {
type: Boolean,
default: true
},
// 元素层级z-index
zIndex: {
type: [String, Number],
default: 9
},
// 选中标签的颜色
activeColor: {
type: String,
default: '#1989fa'
},
// 未选中标签的颜色
inactiveColor: {
type: String,
default: '#7d7e80'
},
// 是否固定在底部
fixed: {
type: Boolean,
default: true
},
// fixed定位固定在底部时，是否生成一个等高元素防止塌陷
placeholder: {
type: Boolean,
default: true
},
// 图标大小
iconSize: {
type: [String, Number],
default: 20
},
...uni.$uv?.props?.tabbar
}
}

146
uni_modules/uv-tabbar/components/uv-tabbar/uv-tabbar.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<view class="uv-tabbar">
<view
class="uv-tabbar__content"
ref="uv-tabbar__content"
@touchmove.stop.prevent="noop"
:class="[border && 'uv-border-top', fixed && 'uv-tabbar--fixed']"
:style="[tabbarStyle]"
>
<view class="uv-tabbar__content__item-wrapper">
<slot />
</view>
<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
</view>
<view
class="uv-tabbar__placeholder"
v-if="placeholder"
:style="{
height: placeholderHeight + 'px',
}"
></view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* Tabbar 底部导航栏
* @description 此组件提供了自定义tabbar的能力。
* @tutorial https://www.uvui.cn/components/tabbar.html
* @property {String | Number} value 当前匹配项的name
* @property {Boolean} safeAreaInsetBottom 是否为iPhoneX留出底部安全距离（默认 true ）
* @property {Boolean} border 是否显示上方边框（默认 true ）
* @property {String | Number} zIndex 元素层级z-index（默认 1 ）
* @property {String} activeColor 选中标签的颜色（默认 '#1989fa' ）
* @property {String} inactiveColor 未选中标签的颜色（默认 '#7d7e80' ）
* @property {Boolean} fixed 是否固定在底部（默认 true ）
* @property {Boolean} placeholder fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
* @property {Object} customStyle 定义需要用到的外部样式
*
* @example <uv-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><uv-tabbar-item text="首页" icon="home" dot ></uv-tabbar-item></uv-tabbar>
*/
export default {
name: 'uv-tabbar',
mixins: [mpMixin, mixin, props],
data() {
return {
placeholderHeight: 0
}
},
computed: {
tabbarStyle() {
const style = {
zIndex: this.zIndex
}
// 合并来自父组件的customStyle样式
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
},
// 监听多个参数的变化，通过在computed执行对应的操作
updateChild() {
return [this.value, this.activeColor, this.inactiveColor]
},
updatePlaceholder() {
return [this.fixed, this.placeholder]
}
},
watch: {
updateChild() {
// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
this.updateChildren()
},
updatePlaceholder() {
// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
this.setPlaceholderHeight()
}
},
created() {
this.children = []
},
mounted() {
this.setPlaceholderHeight()
},
methods: {
updateChildren() {
// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
this.children.length && this.children.map(child => child.updateFromParent())
},
// 设置用于防止塌陷元素的高度
async setPlaceholderHeight() {
if (!this.fixed || !this.placeholder) return
// 延时一定时间
await this.$uv.sleep(20)
// #ifndef APP-NVUE
this.$uvGetRect('.uv-tabbar__content').then(({height = 50}) => {
// 修复IOS safearea bottom 未填充高度
this.placeholderHeight = height
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['uv-tabbar__content'], (res) => {
const {
size
} = res
this.placeholderHeight = size.height
})
// #endif
}
}
}
</script>
<style lang="scss" scoped>
$show-border: 1;
$show-border-top: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
.uv-tabbar {
@include flex(column);
flex: 1;
justify-content: center;
&__content {
@include flex(column);
background-color: #fff;
&__item-wrapper {
height: 50px;
@include flex(row);
}
}
&--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
</style>

90
uni_modules/uv-tabbar/package.json Normal file
View File

@ -0,0 +1,90 @@
{
"id": "uv-tabbar",
"displayName": "uv-tabbar 底部导航栏 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.5",
"description": "底部导航栏组件提供了自定义tabbar的能力，可以满足某些需要鉴权跳转等场景。",
"keywords": [
"uv-tabbar",
"uvui",
"uv-ui",
"tabbar",
"底部导航栏"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-icon",
"uv-badge",
"uv-safe-bottom"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

21
uni_modules/uv-tabbar/readme.md Normal file
View File

@ -0,0 +1,21 @@
## Tabbar 底部导航栏
> **组件名：uv-tabbar**
此组件提供了自定义`tabbar`的能力。
一般固定在底部，可以满足某些需要鉴权跳转等场景。一旦自定义底部导航栏后，为了达到不闪烁的效果，建议在`tabbar`页面进行组件切换。
# <a href="https://www.uvui.cn/components/tabbar.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <span style="font-size:14px;font-weight:700;">（请不要 下载插件ZIP）</span>
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>