xsl/meida_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fittingRoom): 新增试衣间功能

Browse Source 
- 添加 fittingRoom 存储模块，用于管理试衣间状态和数据
- 实现试衣间页面布局和基础功能，包括轮播图、标签页、衣服网格等组件
- 开发选择模特和上传衣服功能
- 优化页面样式和交互
This commit is contained in:
liguigong
2025-09-19 19:27:22 +08:00
parent cb434a532c
commit 4ea873c1bd
74 changed files with 7963 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.js
+1 -3
View File
@@ -2,11 +2,9 @@ import App from './App';
import { createSSRApp } from 'vue';
import { setupPinia } from './sheep/store';
export function createApp() {
const app = createSSRApp(App);
setupPinia(app);
return {
pages/fittingRoom/components/STabs.vue
+95
View File
@@ -0,0 +1,95 @@
<!--
* @Author: liguigong liguigong@shopline.com
* @Date: 2025-09-19 16:26:36
* @LastEditors: liguigong liguigong@shopline.com
* @LastEditTime: 2025-09-19 17:56:16
* @FilePath: pages/fittingRoom/components/STabs.vue
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
-->
<template>
<view class="tabContainer">
<view class="tab-top">
<view class="parent-tab" @click="() => fittingRoom.changeType()"
>{{ !fittingRoom.type ? '我的衣橱' : '衣服库' }}
</view>
<view class="title">赴宴试衣间</view>
</view>
<view class="tab-bottom">
<view class="mainTitle"
>{{ fittingRoom.type ? '我的衣橱' : '衣服库' }}
<view class="slash">/</view>
</view>
<v-tabs
v-model="fittingRoom.tab"
:lineScale="0.2"
:tabs="fittingRoom.tabs"
activeColor="#fff"
bgColor="#000000"
color="#fff"
fontSize="24rpx"
height="50rpx"
lineColor="#fff"
lineHeight="2rpx"
paddingItem="0 18rpx"
@change="changeTab"
></v-tabs>
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const fittingRoom = sheep.$store('fittingRoom');
function changeTab(index) {
console.log('当前选中的项：' + index);
}
</script>
<style lang="scss" scoped>
.tabContainer {
height: 130rpx;
background: #000;
width: 100%;
.tab-top {
margin: 18rpx 0 14rpx;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: relative;
.parent-tab {
position: absolute;
font-size: 20rpx;
left: 0;
top: 0;
width: 180rpx;
text-align: center;
}
.title {
font-size: 24rpx;
}
}
.tab-bottom {
display: flex;
align-items: center;
.mainTitle {
flex: 0 0 180rpx;
color: #ffffff;
font-size: 26rpx;
text-align: center;
position: relative;
.slash {
position: absolute;
top: 0;
right: 0;
}
}
}
}
</style>
pages/fittingRoom/components/s-grid-clothes.vue
+104
View File
@@ -0,0 +1,104 @@
<!--
* @Author: liguigong liguigong@shopline.com
* @Date: 2025-09-19 16:26:36
* @LastEditors: liguigong liguigong@shopline.com
* @LastEditTime: 2025-09-19 19:17:22
* @FilePath: pages/fittingRoom/components/s-grid-clothes.vue
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
-->
<template>
<view class="tabContainer">
<uni-grid :column="4" :highlight="true" :square="false" borderColor="#000" @change="change">
<uni-grid-item v-for="(item, index) in 7" :key="index" :index="index + 100">
<view class="grid-item-box" style="background-color: #fff">
<view v-if="index == 3" class="inUse">
<view class="edit" @click="goEdit">编辑</view>
</view>
<template v-if="fittingRoom.canUpload && index === 0">
<image
class="clothes"
mode="aspectFill"
src="/static/uploads/1.png"
@click="uploadFile"
></image>
<uni-file-picker
:auto-upload="false"
:del-icon="false"
:disable-preview="true"
:image-styles="imageStyle"
:sizeType="sizeType"
class="upload"
limit="1"
mode="grid"
@select="selectPic"
>选择</uni-file-picker
></template
>
<image v-else class="clothes" mode="aspectFill" src="/static/yifu1.png"></image>
</view>
</uni-grid-item>
</uni-grid>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const fittingRoom = sheep.$store('fittingRoom');
function selectPic(...data) {
console.log(fittingRoom.tab);
console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
}
function uploadFile() {}
const sizeType = ['original'];
const imageStyle = {
width: 200,
height: 200,
};
function goEdit() {
sheep.$router.go('/pages/report/index', {});
}
function change(e) {
fittingRoom.changeClothes();
console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
}
</script>
<style lang="scss" scoped>
.grid-item-box {
height: 272rpx;
overflow: hidden;
position: relative;
}
.clothes {
width: 100%;
height: 100%;
}
.upload {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
opacity: 0;
}
.inUse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 3;
.edit {
color: #000;
right: 14rpx;
top: 12rpx;
font-size: 24rpx;
position: absolute;
}
}
</style>
pages/fittingRoom/components/s-select-mote.vue
+79
View File
@@ -0,0 +1,79 @@
<!-- 商品信息：满减送等营销活动的弹窗 -->
<template>
<view :class="['mote', { unfold: fittingRoom.visable }]">
<view class="item" @click="expansion">
<view class="item-text">模特</view>
<image class="item-image" mode="widthFix" src="/static/mote.png"></image>
</view>
<view class="item">
<image class="shangchuan" mode="heightFix" src="/static/shangchuan.png"></image>
</view>
<view class="item">
<view class="item-text"></view>
<image class="item-image" mode="widthFix" src="/static/mote.png"></image>
</view>
</view>
</template>
<script setup>
import sheep from '../../../sheep';
const fittingRoom = sheep.$store('fittingRoom');
console.log('🚀 ~ 🐶9 ~ fittingRoom: ', fittingRoom);
function expansion(e) {
fittingRoom.setVisable();
}
</script>
<style lang="scss" scoped>
.mote {
position: absolute;
top: 50rpx;
left: 20rpx;
overflow: hidden;
height: 76rpx;
transition: height 0.3s ease-in-out;
}
.unfold {
height: 700rpx;
}
.item {
width: 86rpx;
height: 76rpx;
margin-bottom: 16rpx;
overflow: hidden;
position: relative;
}
.item-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
//font-family: Molengo;
font-size: 20rpx;
font-style: normal;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
line-height: 76rpx;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.shangchuan {
width: 86rpx;
height: 76rpx;
}
.item-image {
width: 100%;
height: 100%;
}
</style>
pages/fittingRoom/index.vue
+37 -32
View File
@@ -1,30 +1,42 @@
<!-- 首页，支持店铺装修 -->
<template>
<view v-if="template">
<uni-swiper-dot :info="state.info" :current="state.current" field="content" :mode="'default'">
<uni-swiper-dot :current="state.current" :info="state.info" :mode="'default'" field="content">
<view class="uni-margin-wrap">
<swiper
class="swiper"
circular
:autoplay="true"
:interval="2000"
:duration="500"
:interval="5000"
circular
class="swiper"
@change="swiperChange"
>
<swiper-item v-for="(item, index) in state.info" :key="index">
<view class="swiper-item uni-bg-red">{{ item.content }}</view>
<view class="swiper-item uni-bg-red">
<image class="swiper-image" mode="heightFix" src="/static/mote.png"></image>
</view>
</swiper-item>
</swiper>
<s-select-mote />
</view>
</uni-swiper-dot>
<uv-sticky :customNavHeight="0" :offset-top="0">
<s-tabs />
</uv-sticky>
<s-grid-clothes />
<view class="height1"></view>
</view>
</template>
<script setup>
import { computed, reactive } from 'vue';
import { computed, reactive, ref } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import SSelectMote from './components/s-select-mote.vue';
import STabs from './components/STabs.vue';
import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar
const fittingRoom = sheep.$store('fittingRoom');
sheep.$helper.toast('请选择是否同意协议');
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
@@ -45,32 +57,10 @@
current: 0,
});
const swiperChange = (e) => {
console.log('🚀 ~ swiperChange 🐶40 ~ e: ', e);
state.current = e.detail.current;
};
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
// (async function() {
// console.log('原代码首页定制化数据',template)
// let {
// data
// } = await index2Api.decorate();
// console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
// 改变首页底部数据 但是没有通过数组id获取商品数据接口
// let {
// data: datas
// } = await index2Api.spids();
// template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
// template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
// return {
// src: item.picUrl,
// url: item.url,
// title: item.name,
// type: "image"
// }
// })
// }())
onLoad((options) => {
// #ifdef MP
@@ -109,32 +99,47 @@
onPageScroll(() => {});
</script>
<style>
<style lang="scss" scoped>
.uni-margin-wrap {
width: 100%;
}
.swiper {
height: 680rpx;
}
.swiper-item {
display: block;
height: 680rpx;
line-height: 300rpx;
text-align: center;
background: green;
background: #ffffff;
}
.swiper-image {
width: 100%;
height: 100%;
}
.height1 {
height: 2000px;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
pages/report/component/CustomSwiper/CustomSwiper.vue
+284 -286
View File
@@ -21,10 +21,7 @@
<div class="right">
<view class="good-img">
<div class="good-img-box good-img-top"></div>
<div
class="good-img-box good-img-bottom"
@click="toGoodsInfo(item[4])"
>
<div class="good-img-box good-img-bottom" @click="toGoodsInfo(item[4])">
<img :src="item[4].file_name" class="good-img-detail" />
</div>
</view>
@@ -48,316 +45,317 @@
</template>
<script setup>
import { defineProps, ref, watchEffect } from "vue";
import { defineProps, ref, watchEffect } from 'vue';
const autoplay = ref(true);
const autoplay = ref(true);
const props = defineProps({
items: {
type: Array,
default: [],
},
});
const current = ref(0);
const animationfinish = (e) => {
// console.log('e: ', e.detail.current);
current.value = e.detail.current;
};
// weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&query=id=
const toMini = (item) => {
console.log(wx, "微信miniProgram");
wx.miniProgram.navigateTo({
url: `/pages/fitRoom/index?id=${item.id}`,
success: function () {
// alert('成功')
},
fail(error) {
// alert('错误', error)
console.log("navigateTo error: ", error);
const props = defineProps({
items: {
type: Array,
default: [],
},
});
/**小程序内跳转 */
// uni.webView.navigateTo({ url: `/pages/fitRoom/index&id=${item.id}` });
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
const toGoodsInfo = (item) => {
wx.miniProgram.navigateTo({
url: "/pages/goods/goodsDetail/index?goods_id=" + item.goods_id,
});
//先去请求后端接口获取数据
// uni.request({
// url: "https://llshop.zglvling.com/soapi/text/ceshi1",
// method: "POST",
// data: {
// id: 123
// },
// header: {
// "Content-Type": "application/json"
// },
// success: (res) => {
// const config = res.data;
// // #ifdef H5
// // 1. 检查是否在微信浏览器中
// const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
// console.log("是否在微信浏览器", isWechatBrowser);
const current = ref(0);
// if (!isWechatBrowser) {
// uni.showToast({
// title: "请在微信中打开",
// icon: "none"
// });
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
const animationfinish = (e) => {
// console.log('e: ', e.detail.current);
current.value = e.detail.current;
};
// // #endif
// },
// fail: (err) => {
// console.error("请求失败:", err);
// uni.showToast({
// title: "网络错误",
// icon: "none"
// });
// },
// });
// weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&query=id=
const toMini = (item) => {
console.log(wx, '微信miniProgram');
wx.miniProgram.navigateTo({
url: `/pages/fitRoom/index?id=${item.id}`,
success: function () {
// alert('成功')
},
fail(error) {
// alert('错误', error)
console.log('navigateTo error: ', error);
},
});
/**小程序内跳转 */
// uni.webView.navigateTo({ url: `/pages/fitRoom/index&id=${item.id}` });
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
const toGoodsInfo = (item) => {
wx.miniProgram.navigateTo({
url: '/pages/goods/goodsDetail/index?goods_id=' + item.goods_id,
});
//先去请求后端接口获取数据
// uni.request({
// url: "https://llshop.zglvling.com/soapi/text/ceshi1",
// method: "POST",
// data: {
// id: 123
// },
// header: {
// "Content-Type": "application/json"
// },
// success: (res) => {
// const config = res.data;
// 初始化微信 JS-SDK
// function initWechatSDK(config) {
// console.log("阿拉啦啦", wx);
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// // #ifdef H5
// // 1. 检查是否在微信浏览器中
// const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);
// console.log("是否在微信浏览器", isWechatBrowser);
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
// if (!isWechatBrowser) {
// uni.showToast({
// title: "请在微信中打开",
// icon: "none"
// });
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
// // #endif
// },
// fail: (err) => {
// console.error("请求失败:", err);
// uni.showToast({
// title: "网络错误",
// icon: "none"
// });
// },
// });
// 初始化微信 JS-SDK
// function initWechatSDK(config) {
// console.log("阿拉啦啦", wx);
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ["miniProgram"], // 需要用到的 API
// });
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: "/pages/goods/goodsDetail/index",
// success: () => console.log("跳转成功"),
// fail: (err) => {
// console.error("跳转失败:", err);
// uni.showToast({
// title: "跳转失败",
// icon: "none"
// });
// },
// });
// });
// wx.error((err) => {
// console.error("微信 SDK 配置失败:", err);
// });
// }
// uni.request({
// url: 'https://llshop.zglvling.com/soapi/text/ceshi1', // 接口地址
// method: 'POST', // 请求方式（GET/POST/PUT/DELETE）
// data: { id: 123 }, // 请求参数（GET 用 params，POST 用 data）
// header: {
// 'Content-Type': 'application/json', // 请求头
// },
// success: (res) => {
// console.log('请求成功:', res.data);
// var config = res.data;
// const wx = window.wx;
// // 动态加载微信 JS-SDK
// if (typeof wx === 'undefined') {
// const script = document.createElement('script');
// script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
// script.onload = () => {
// initWechatSDK(config); // 加载完成后初始化
// };
// document.body.appendChild(script);
// } else {
// initWechatSDK(config); // 如果已存在，直接初始化
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ['miniProgram'], // 需要用到的 API
// });
// // 4. 配置完成后跳转小程序
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: '/pages/home/index?id=123', // 小程序路径 + 参数
// success: () => console.log('跳转成功'),
// fail: (err) => {
// console.error('跳转失败:', err);
// uni.showToast({ title: '跳转失败，请在微信中打开', icon: 'none' });
// },
// });
// });
// },
// fail: (err) => {
// console.error('请求失败:', err);
// uni.showToast({ title: '网络错误', icon: 'none' });
// },
// complete: () => {
// console.log('请求完成');
// },
// });
// const appid = 'wx32d8423809b8d7d4';
// const path = `/pages/goods/goodsDetail/index`;
// const scheme = `weixin://dl/business/?appid=${appid}&path=${encodeURIComponent(path)}`;
// console.log('地址: ', scheme);
// // 方法1：动态创建 <a> 标签（兼容 iOS）
// const a = document.createElement('a');
// a.href = scheme;
// a.style.display = 'none';
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// location.href = scheme;
// // 可添加失败回调（通过监听页面跳转失败）
// setTimeout(() => {
// alert('跳转失败，请手动打开小程序');
// }, 1000);
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
// wx.error((err) => {
// console.error("微信 SDK 配置失败:", err);
// });
// }
// uni.request({
// url: 'https://llshop.zglvling.com/soapi/text/ceshi1', // 接口地址
// method: 'POST', // 请求方式（GET/POST/PUT/DELETE）
// data: { id: 123 }, // 请求参数（GET 用 params，POST 用 data）
// header: {
// 'Content-Type': 'application/json', // 请求头
// },
// success: (res) => {
// console.log('请求成功:', res.data);
// var config = res.data;
// const wx = window.wx;
// // 动态加载微信 JS-SDK
// if (typeof wx === 'undefined') {
// const script = document.createElement('script');
// script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
// script.onload = () => {
// initWechatSDK(config); // 加载完成后初始化
// };
// document.body.appendChild(script);
// } else {
// initWechatSDK(config); // 如果已存在，直接初始化
// }
// wx.config({
// debug: true, // 调试模式
// appId: config.appId,
// timestamp: config.timestamp,
// nonceStr: config.nonceStr,
// signature: config.signature,
// jsApiList: ['miniProgram'], // 需要用到的 API
// });
// // 4. 配置完成后跳转小程序
// wx.ready(() => {
// wx.miniProgram.navigateTo({
// path: '/pages/home/index?id=123', // 小程序路径 + 参数
// success: () => console.log('跳转成功'),
// fail: (err) => {
// console.error('跳转失败:', err);
// uni.showToast({ title: '跳转失败，请在微信中打开', icon: 'none' });
// },
// });
// });
// },
// fail: (err) => {
// console.error('请求失败:', err);
// uni.showToast({ title: '网络错误', icon: 'none' });
// },
// complete: () => {
// console.log('请求完成');
// },
// });
// const appid = 'wx32d8423809b8d7d4';
// const path = `/pages/goods/goodsDetail/index`;
// const scheme = `weixin://dl/business/?appid=${appid}&path=${encodeURIComponent(path)}`;
// console.log('地址: ', scheme);
// // 方法1：动态创建 <a> 标签（兼容 iOS）
// const a = document.createElement('a');
// a.href = scheme;
// a.style.display = 'none';
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// location.href = scheme;
// // 可添加失败回调（通过监听页面跳转失败）
// setTimeout(() => {
// alert('跳转失败，请手动打开小程序');
// }, 1000);
// location.href = `weixin://dl/business/?appid=wx32d8423809b8d7d&path=/pages/fitRoom/index&id=${item.id}`
};
// }
</script>
<style scoped>
.uni-margin-wrap {
width: 100%;
/* height: 330px; */
padding: 16px 8px;
box-sizing: border-box;
}
.uni-margin-wrap {
width: 100%;
/* height: 330px; */
padding: 16px 8px;
box-sizing: border-box;
position: relative;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #031c24;
width: 336px;
margin: 0 auto;
margin-bottom: 16px;
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #031c24;
width: 336px;
margin: 0 auto;
margin-bottom: 16px;
}
.flex .arrow-icon {
width: 24px;
}
.flex .arrow-icon {
width: 24px;
}
.swiper {
width: 336px;
height: 330px;
margin: 0 auto;
}
.swiper {
width: 336px;
height: 330px;
margin: 0 auto;
}
.swiper-item {
width: 336px;
height: 330px;
display: flex;
justify-content: space-between;
}
.swiper-item {
width: 336px;
height: 330px;
display: flex;
justify-content: space-between;
}
.swiper-item .left {
width: 223px;
height: 330px;
overflow: hidden;
}
.swiper-item .left {
width: 223px;
height: 330px;
overflow: hidden;
}
.swiper-item .left .left-img {
height: 330px;
/* width: 100%; */
object-fit: scale-down;
}
.swiper-item .left .left-img {
height: 330px;
/* width: 100%; */
object-fit: scale-down;
}
.swiper-item .right {
width: 102px;
height: 330px;
overflow: hidden;
.swiper-item .right {
width: 102px;
height: 330px;
overflow: hidden;
display: flex;
flex-direction: column;
}
display: flex;
flex-direction: column;
}
.swiper-item .right .good-img {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 15px;
}
.swiper-item .right .good-img {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 15px;
}
.swiper-item .right .good-img .good-img-box {
height: 134px;
overflow: hidden;
/* background-color: red; */
}
.swiper-item .right .good-img .good-img-box {
height: 134px;
overflow: hidden;
/* background-color: red; */
}
.swiper-item .right .good-img .good-img-box .good-img-detail {
height: 100%;
object-fit: scale-down;
}
.swiper-item .right .good-img .good-img-box .good-img-detail {
height: 100%;
object-fit: scale-down;
}
.swiper-item .right .btn {
height: 24px;
background-color: #031c24;
color: #ffffff;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-item .right .btn {
height: 24px;
background-color: #031c24;
color: #ffffff;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 22px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 22px;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.dots .dot {
width: 5px;
height: 2px;
background-color: #edf0f0;
margin-left: 5px;
}
.dots .dot {
width: 5px;
height: 2px;
background-color: #edf0f0;
margin-left: 5px;
}
.dots .dot:first-of-type {
margin-left: 0;
}
.dots .dot:first-of-type {
margin-left: 0;
}
.dots .active {
width: 10px;
background-color: #031c24;
}
.dots .active {
width: 10px;
background-color: #031c24;
}
</style>
sheep/store/fittingRoom.js
+44
View File
@@ -0,0 +1,44 @@
import { defineStore } from 'pinia';
import app from './app';
const fittingRoom = defineStore({
id: 'fittingRoom',
state: () => ({
visable: false, // 上传模特, 选模特的
type: true, // true: 我的衣橱, false: 衣服库
tab: 0, // 对应下面tabs的序号
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '发型'],
currentClothes: [], // 当前选的衣服
}),
getters: {
// 能上传图片的场景
canUpload(state) {
console.log(this.type, this.tab, state.type, '123');
return this.type && this.tab > 0;
},
},
actions: {
setVisable(visable) {
console.log('🚀 ~ setVisable 🐶15 ~ visable: ', visable);
this.visable = visable ?? !this.visable;
},
changeType(visable) {
console.log('🚀 ~ setVisable 🐶15 ~ visable: ', visable);
this.type = visable ?? !this.type;
},
// 点击衣服
changeClothes() {
console.log('切换衣服');
},
},
persist: {
enabled: true,
strategies: [
{
key: 'fittingRoom-store',
},
],
},
});
export default fittingRoom;
static/mote.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

static/shangchuan.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

static/uploads/1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

static/yifu.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

static/yifu1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

uni_modules/uni-file-picker/changelog.md
+89
View File
@@ -0,0 +1,89 @@
## 1.1.2（2025-09-17）
- 修复 设置readonly属性后内容插槽失效的问题。
## 1.1.1（2025-09-03）
- 修复 动态dir目录，不生效的问题
## 1.1.0（2025-09-02）
- 新增 dir 属性，可以选择上传目录
## 1.0.13（2025-08-18）
- 修复 删除文件后，返回信息不包含file对象的问题
## 1.0.12（2025-04-14）
- 修复 支付宝小程序 上传样式问题
## 1.0.10（2024-07-09）
- 优化 vue3兼容性
## 1.0.9（2024-07-09）
- 修复 value 属性不兼容vue3的bug
## 1.0.8（2024-03-20）
- 补充 删除文件时返回文件下标
## 1.0.7（2024-02-21）
- 新增 微信小程序选择视频时改用chooseMedia,并返回视频缩略图
## 1.0.6（2024-01-06）
- 新增 微信小程序不再调用chooseImage,而是调用chooseMedia
## 1.0.5（2024-01-03）
- 新增 上传文件至云存储携带本地文件名称
## 1.0.4（2023-03-29）
- 修复 手动上传删除一个文件后不能再上传的bug
## 1.0.3（2022-12-19）
- 新增 sourceType 属性, 可以自定义图片和视频选择的来源
## 1.0.2（2022-07-04）
- 修复 在uni-forms下样式不生效的bug
## 1.0.1（2021-11-23）
- 修复 参数为对象的情况下，url在某些情况显示错误的bug
## 1.0.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-file-picker](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
## 0.2.16（2021-11-08）
- 修复 传入空对象 ，显示错误的Bug
## 0.2.15（2021-08-30）
- 修复 return-type="object" 时且存在v-model时，无法删除文件的Bug
## 0.2.14（2021-08-23）
- 新增 参数中返回 fileID 字段
## 0.2.13（2021-08-23）
- 修复 腾讯云传入fileID 不能回显的bug
- 修复 选择图片后，不能放大的问题
## 0.2.12（2021-08-17）
- 修复 由于 0.2.11 版本引起的不能回显图片的Bug
## 0.2.11（2021-08-16）
- 新增 clearFiles(index) 方法，可以手动删除指定文件
- 修复 v-model 值设为 null 报错的Bug
## 0.2.10（2021-08-13）
- 修复 return-type="object" 时，无法删除文件的Bug
## 0.2.9（2021-08-03）
- 修复 auto-upload 属性失效的Bug
## 0.2.8（2021-07-31）
- 修复 fileExtname属性不指定值报错的Bug
## 0.2.7（2021-07-31）
- 修复 在某种场景下图片不回显的Bug
## 0.2.6（2021-07-30）
- 修复 return-type为object下，返回值不正确的Bug
## 0.2.5（2021-07-30）
- 修复（重要） H5 平台下如果和uni-forms组件一同使用导致页面卡死的问题
## 0.2.3（2021-07-28）
- 优化 调整示例代码
## 0.2.2（2021-07-27）
- 修复 vue3 下赋值错误的Bug
- 优化 h5平台下上传文件导致页面卡死的问题
## 0.2.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 0.1.1（2021-07-02）
- 修复 sourceType 缺少默认值导致 ios 无法选择文件
## 0.1.0（2021-06-30）
- 优化 解耦与uniCloud的强绑定关系 ，如不绑定服务空间，默认autoUpload为false且不可更改
## 0.0.11（2021-06-30）
- 修复 由 0.0.10 版本引发的 returnType 属性失效的问题
## 0.0.10（2021-06-29）
- 优化 文件上传后进度条消失时机
## 0.0.9（2021-06-29）
- 修复 在uni-forms 中，删除文件 ，获取的值不对的Bug
## 0.0.8（2021-06-15）
- 修复 删除文件时无法触发 v-model 的Bug
## 0.0.7（2021-05-12）
- 新增 组件示例地址
## 0.0.6（2021-04-09）
- 修复 选择的文件非 file-extname 字段指定的扩展名报错的Bug
## 0.0.5（2021-04-09）
- 优化 更新组件示例
## 0.0.4（2021-04-09）
- 优化 file-extname 字段支持字符串写法，多个扩展名需要用逗号分隔
## 0.0.3（2021-02-05）
- 调整为uni_modules目录规范
- 修复 微信小程序不指定 fileExtname 属性选择失败的Bug
uni_modules/uni-file-picker/components/uni-file-picker/choose-and-upload-file.js
+287
View File
@@ -0,0 +1,287 @@
'use strict';
const ERR_MSG_OK = 'chooseAndUploadFile:ok';
const ERR_MSG_FAIL = 'chooseAndUploadFile:fail';
function chooseImage(opts) {
const {
count,
sizeType = ['original', 'compressed'],
sourceType,
extension
} = opts
return new Promise((resolve, reject) => {
// 微信由于旧接口不再维护，针对微信小程序平台改用chooseMedia接口
// #ifdef MP-WEIXIN
uni.chooseMedia({
count,
sizeType,
sourceType,
mediaType: ['image'],
extension,
success(res) {
res.tempFiles.forEach(item => {
item.path = item.tempFilePath;
})
resolve(normalizeChooseAndUploadFileRes(res, 'image'));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
});
},
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseImage({
count,
sizeType,
sourceType,
extension,
success(res) {
resolve(normalizeChooseAndUploadFileRes(res, 'image'));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseImage:fail', ERR_MSG_FAIL),
});
},
});
// #endif
});
}
function chooseVideo(opts) {
const {
count,
camera,
compressed,
maxDuration,
sourceType,
extension
} = opts;
return new Promise((resolve, reject) => {
// 微信由于旧接口不再维护，针对微信小程序平台改用chooseMedia接口
// #ifdef MP-WEIXIN
uni.chooseMedia({
count,
compressed,
maxDuration,
sourceType,
extension,
mediaType: ['video'],
success(res) {
const {
tempFiles,
} = res;
resolve(normalizeChooseAndUploadFileRes({
errMsg: 'chooseVideo:ok',
tempFiles: tempFiles.map(item => {
return {
name: item.name || '',
path: item.tempFilePath,
thumbTempFilePath: item.thumbTempFilePath,
size:item.size,
type: (res.tempFile && res.tempFile.type) || '',
width:item.width,
height:item.height,
duration:item.duration,
fileType: 'video',
cloudPath: '',
}
}),
}, 'video'));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
});
},
})
// #endif
// #ifndef MP-WEIXIN
uni.chooseVideo({
camera,
compressed,
maxDuration,
sourceType,
extension,
success(res) {
const {
tempFilePath,
duration,
size,
height,
width
} = res;
resolve(normalizeChooseAndUploadFileRes({
errMsg: 'chooseVideo:ok',
tempFilePaths: [tempFilePath],
tempFiles: [{
name: (res.tempFile && res.tempFile.name) || '',
path: tempFilePath,
size,
type: (res.tempFile && res.tempFile.type) || '',
width,
height,
duration,
fileType: 'video',
cloudPath: '',
}, ],
}, 'video'));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseVideo:fail', ERR_MSG_FAIL),
});
},
});
// #endif
});
}
function chooseAll(opts) {
const {
count,
extension
} = opts;
return new Promise((resolve, reject) => {
let chooseFile = uni.chooseFile;
if (typeof wx !== 'undefined' &&
typeof wx.chooseMessageFile === 'function') {
chooseFile = wx.chooseMessageFile;
}
if (typeof chooseFile !== 'function') {
return reject({
errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。',
});
}
chooseFile({
type: 'all',
count,
extension,
success(res) {
resolve(normalizeChooseAndUploadFileRes(res));
},
fail(res) {
reject({
errMsg: res.errMsg.replace('chooseFile:fail', ERR_MSG_FAIL),
});
},
});
});
}
function normalizeChooseAndUploadFileRes(res, fileType) {
res.tempFiles.forEach((item, index) => {
if (!item.name) {
item.name = item.path.substring(item.path.lastIndexOf('/') + 1);
}
if (fileType) {
item.fileType = fileType;
}
item.cloudPath =
Date.now() + '_' + index + item.name.substring(item.name.lastIndexOf('.'));
});
if (!res.tempFilePaths) {
res.tempFilePaths = res.tempFiles.map((file) => file.path);
}
return res;
}
function uploadCloudFiles(files, max = 5, onUploadProgress) {
files = JSON.parse(JSON.stringify(files))
const len = files.length
let count = 0
let self = this
return new Promise(resolve => {
while (count < max) {
next()
}
function next() {
let cur = count++
if (cur >= len) {
!files.find(item => !item.url && !item.errMsg) && resolve(files)
return
}
const fileItem = files[cur]
const index = self.files.findIndex(v => v.uuid === fileItem.uuid)
fileItem.url = ''
delete fileItem.errMsg
uniCloud
.uploadFile({
filePath: fileItem.path,
cloudPath: fileItem.cloudPath,
fileType: fileItem.fileType,
onUploadProgress: res => {
res.index = index
onUploadProgress && onUploadProgress(res)
}
})
.then(res => {
fileItem.url = res.fileID
fileItem.index = index
if (cur < len) {
next()
}
})
.catch(res => {
fileItem.errMsg = res.errMsg || res.message
fileItem.index = index
if (cur < len) {
next()
}
})
}
})
}
function uploadFiles(choosePromise, {
onChooseFile,
onUploadProgress
}) {
return choosePromise
.then((res) => {
if (onChooseFile) {
const customChooseRes = onChooseFile(res);
if (typeof customChooseRes !== 'undefined') {
return Promise.resolve(customChooseRes).then((chooseRes) => typeof chooseRes === 'undefined' ?
res : chooseRes);
}
}
return res;
})
.then((res) => {
if (res === false) {
return {
errMsg: ERR_MSG_OK,
tempFilePaths: [],
tempFiles: [],
};
}
return res
})
}
function chooseAndUploadFile(opts = {
type: 'all'
}) {
if (opts.type === 'image') {
return uploadFiles(chooseImage(opts), opts);
} else if (opts.type === 'video') {
return uploadFiles(chooseVideo(opts), opts);
}
return uploadFiles(chooseAll(opts), opts);
}
export {
chooseAndUploadFile,
uploadCloudFiles
};
uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue
+680
View File
@@ -0,0 +1,680 @@
<template>
<view class="uni-file-picker">
<view v-if="title" class="uni-file-picker__header">
<text class="file-title">{{ title }}</text>
<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
</view>
<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly" :image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview" :delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
<slot>
<view class="icon-add"></view>
<view class="icon-add rotate"></view>
</slot>
</upload-image>
<upload-file v-if="fileMediatype !== 'image' || showType !== 'grid'" :readonly="readonly" :list-styles="listStyles" :files-list="filesList" :showType="showType" :delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
<slot><button type="primary" size="mini">选择文件</button></slot>
</upload-file>
</view>
</template>
<script>
import {
chooseAndUploadFile,
uploadCloudFiles
} from './choose-and-upload-file.js'
import {
get_file_ext,
get_extname,
get_files_and_is_max,
get_file_info,
get_file_data
} from './utils.js'
import uploadImage from './upload-image.vue'
import uploadFile from './upload-file.vue'
let fileInput = null
/**
* FilePicker 文件选择上传
* @description 文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
* @tutorial https://ext.dcloud.net.cn/plugin?id=4079
* @property {Object|Array} value 组件数据，通常用来回显 ,类型由return-type属性决定
* @property {Boolean} disabled = [true|false] 组件禁用
* @value true 禁用
* @value false 取消禁用
* @property {Boolean} readonly = [true|false] 组件只读，不可选择，不显示进度，不显示删除按钮
* @value true 只读
* @value false 取消只读
* @property {String} return-type = [array|object] 限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
* @value array 规定 value 属性的类型为数组
* @value object 规定 value 属性的类型为对象
* @property {Boolean} disable-preview = [true|false] 禁用图片预览，仅 mode:grid 时生效
* @value true 禁用图片预览
* @value false 取消禁用图片预览
* @property {Boolean} del-icon = [true|false] 是否显示删除按钮
* @value true 显示删除按钮
* @value false 不显示删除按钮
* @property {Boolean} auto-upload = [true|false] 是否自动上传，值为true则只触发@select,可自行上传
* @value true 自动上传
* @value false 取消自动上传
* @property {Number|String} limit 最大选择个数 ，h5 会自动忽略多选的部分
* @property {String} title 组件标题，右侧显示上传计数
* @property {String} mode = [list|grid] 选择文件后的文件列表样式
* @value list 列表显示
* @value grid 宫格显示
* @property {String} file-mediatype = [image|video|all] 选择文件类型
* @value image 只选择图片
* @value video 只选择视频
* @value all 选择所有文件
* @property {Array} file-extname 选择文件后缀，根据 file-mediatype 属性而不同
* @property {Object} list-style mode:list 时的样式
* @property {Object} image-styles 选择文件后缀，根据 file-mediatype 属性而不同
* @event {Function} select 选择文件后触发
* @event {Function} progress 文件上传时触发
* @event {Function} success 上传成功触发
* @event {Function} fail 上传失败触发
* @event {Function} delete 文件从列表移除时触发
*/
export default {
name: 'uniFilePicker',
components: {
uploadImage,
uploadFile
},
options: {
virtualHost: true
},
emits: ['select', 'success', 'fail', 'progress', 'delete', 'update:modelValue', 'input'],
props: {
modelValue: {
type: [Array, Object],
default () {
return []
}
},
value: {
type: [Array, Object],
default () {
return []
}
},
disabled: {
type: Boolean,
default: false
},
disablePreview: {
type: Boolean,
default: false
},
delIcon: {
type: Boolean,
default: true
},
// 自动上传
autoUpload: {
type: Boolean,
default: true
},
// 最大选择个数 ，h5只能限制单选或是多选
limit: {
type: [Number, String],
default: 9
},
// 列表样式 grid | list | list-card
mode: {
type: String,
default: 'grid'
},
// 选择文件类型 image/video/all
fileMediatype: {
type: String,
default: 'image'
},
// 文件类型筛选
fileExtname: {
type: [Array, String],
default () {
return []
}
},
title: {
type: String,
default: ''
},
listStyles: {
type: Object,
default () {
return {
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {}
}
}
},
imageStyles: {
type: Object,
default () {
return {
width: 'auto',
height: 'auto'
}
}
},
readonly: {
type: Boolean,
default: false
},
returnType: {
type: String,
default: 'array'
},
sizeType: {
type: Array,
default () {
return ['original', 'compressed']
}
},
sourceType: {
type: Array,
default () {
return ['album', 'camera']
}
},
provider: {
type: String,
default: '' // 默认上传到 unicloud 内置存储 extStorage 扩展存储
},
dir: {
type: String,
default: '/'
}
},
data() {
return {
files: [],
localValue: [],
dirPath: '/'
}
},
watch: {
value: {
handler(newVal, oldVal) {
this.setValue(newVal, oldVal)
},
immediate: true
},
modelValue: {
handler(newVal, oldVal) {
this.setValue(newVal, oldVal)
},
immediate: true
},
dir: {
handler(newVal) {
this.dirPath = newVal
},
immediate: true
},
},
computed: {
filesList() {
let files = []
this.files.forEach(v => {
files.push(v)
})
return files
},
showType() {
if (this.fileMediatype === 'image') {
return this.mode
}
return 'list'
},
limitLength() {
if (this.returnType === 'object') {
return 1
}
if (!this.limit) {
return 1
}
if (this.limit >= 9) {
return 9
}
return this.limit
}
},
created() {
// TODO 兼容不开通服务空间的情况
if (!(uniCloud.config && uniCloud.config.provider)) {
this.noSpace = true
uniCloud.chooseAndUploadFile = chooseAndUploadFile
}
this.form = this.getForm('uniForms')
this.formItem = this.getForm('uniFormsItem')
if (this.form && this.formItem) {
if (this.formItem.name) {
this.rename = this.formItem.name
this.form.inputChildrens.push(this)
}
}
},
methods: {
/**
* 公开用户使用，清空文件
* @param {Object} index
*/
clearFiles(index) {
if (index !== 0 && !index) {
this.files = []
this.$nextTick(() => {
this.setEmit()
})
} else {
this.files.splice(index, 1)
}
this.$nextTick(() => {
this.setEmit()
})
},
/**
* 公开用户使用，继续上传
*/
upload() {
let files = []
this.files.forEach((v, index) => {
if (v.status === 'ready' || v.status === 'error') {
files.push(Object.assign({}, v))
}
})
return this.uploadFiles(files)
},
async setValue(newVal, oldVal) {
const newData = async (v) => {
const reg = /cloud:\/\/([\w.]+\/?)\S*/
let url = ''
if (v.fileID) {
url = v.fileID
} else {
url = v.url
}
if (reg.test(url)) {
v.fileID = url
v.url = await this.getTempFileURL(url)
}
if (v.url) v.path = v.url
return v
}
if (this.returnType === 'object') {
if (newVal) {
await newData(newVal)
} else {
newVal = {}
}
} else {
if (!newVal) newVal = []
for (let i = 0; i < newVal.length; i++) {
let v = newVal[i]
await newData(v)
}
}
this.localValue = newVal
if (this.form && this.formItem && !this.is_reset) {
this.is_reset = false
this.formItem.setValue(this.localValue)
}
let filesData = Object.keys(newVal).length > 0 ? newVal : [];
this.files = [].concat(filesData)
},
/**
* 选择文件
*/
choose() {
if (this.disabled) return
if (this.files.length >= Number(this.limitLength) && this.showType !== 'grid' && this.returnType ===
'array') {
uni.showToast({
title: `您最多选择 ${this.limitLength} 个文件`,
icon: 'none'
})
return
}
this.chooseFiles()
},
/**
* 选择文件并上传
*/
chooseFiles() {
const _extname = get_extname(this.fileExtname)
// 获取后缀
uniCloud
.chooseAndUploadFile({
type: this.fileMediatype,
compressed: false,
sizeType: this.sizeType,
sourceType: this.sourceType,
// TODO 如果为空，video 有问题
extension: _extname.length > 0 ? _extname : undefined,
count: this.limitLength - this.files.length, //默认9
onChooseFile: this.chooseFileCallback,
onUploadProgress: progressEvent => {
this.setProgress(progressEvent, progressEvent.index)
}
})
.then(result => {
this.setSuccessAndError(result.tempFiles)
})
.catch(err => {
console.log('选择失败', err)
})
},
/**
* 选择文件回调
* @param {Object} res
*/
async chooseFileCallback(res) {
const _extname = get_extname(this.fileExtname)
const is_one = (Number(this.limitLength) === 1 &&
this.disablePreview &&
!this.disabled) ||
this.returnType === 'object'
// 如果这有一个文件 ，需要清空本地缓存数据
if (is_one) {
this.files = []
}
let {
filePaths,
files
} = get_files_and_is_max(res, _extname)
if (!(_extname && _extname.length > 0)) {
filePaths = res.tempFilePaths
files = res.tempFiles
}
let currentData = []
for (let i = 0; i < files.length; i++) {
if (this.limitLength - this.files.length <= 0) break
files[i].uuid = Date.now()
let filedata = await get_file_data(files[i], this.fileMediatype)
filedata.progress = 0
filedata.status = 'ready'
// fix by mehaotian ,统一返回，删除也包含file对象
let fileTempData = {
...filedata,
file: files[i]
}
this.files.push(fileTempData)
currentData.push(fileTempData)
}
this.$emit('select', {
tempFiles: currentData,
tempFilePaths: filePaths
})
res.tempFiles = files
// 停止自动上传
if (!this.autoUpload || this.noSpace) {
res.tempFiles = []
}
res.tempFiles.map((fileItem, index) => {
this.provider && (fileItem.provider = this.provider);
const fileNameSplit = fileItem.name.split('.')
const ext = fileNameSplit.pop()
const fileName = fileNameSplit.join('.').replace(/[\s\/\?<>\\:\*\|":]/g, '_')
// 选择文件目录上传
let dir = this.dirPath || ''; // 防止用户传入的 dir 不正常
// 检查最后一个字符是否为 '/'（同时处理空字符串情况）
if (dir && dir[dir.length - 1] !== '/') {
dir += '/';
}
fileItem.cloudPath = dir + fileName + '_' + Date.now() + '_' + index + '.' + ext
fileItem.cloudPathAsRealPath = true
return fileItem
})
return res
},
/**
* 批传
* @param {Object} e
*/
uploadFiles(files) {
files = [].concat(files)
return uploadCloudFiles.call(this, files, 5, res => {
this.setProgress(res, res.index, true)
})
.then(result => {
this.setSuccessAndError(result)
return result;
})
.catch(err => {
console.log(err)
})
},
/**
* 成功或失败
*/
async setSuccessAndError(res, fn) {
let successData = []
let errorData = []
let tempFilePath = []
let errorTempFilePath = []
for (let i = 0; i < res.length; i++) {
const item = res[i]
const index = item.uuid ? this.files.findIndex(p => p.uuid === item.uuid) : item.index
if (index === -1 || !this.files) break
if (item.errMsg === 'request:fail') {
this.files[index].url = item.path
this.files[index].status = 'error'
this.files[index].errMsg = item.errMsg
// this.files[index].progress = -1
errorData.push(this.files[index])
errorTempFilePath.push(this.files[index].url)
} else {
this.files[index].errMsg = ''
this.files[index].fileID = item.url
const reg = /cloud:\/\/([\w.]+\/?)\S*/
if (reg.test(item.url)) {
this.files[index].url = await this.getTempFileURL(item.url)
} else {
this.files[index].url = item.url
}
this.files[index].status = 'success'
this.files[index].progress += 1
successData.push(this.files[index])
tempFilePath.push(this.files[index].fileID)
}
}
if (successData.length > 0) {
this.setEmit()
// 状态改变返回
this.$emit('success', {
tempFiles: this.backObject(successData),
tempFilePaths: tempFilePath
})
}
if (errorData.length > 0) {
this.$emit('fail', {
tempFiles: this.backObject(errorData),
tempFilePaths: errorTempFilePath
})
}
},
/**
* 获取进度
* @param {Object} progressEvent
* @param {Object} index
* @param {Object} type
*/
setProgress(progressEvent, index, type) {
const fileLenth = this.files.length
const percentNum = (index / fileLenth) * 100
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
let idx = index
if (!type) {
idx = this.files.findIndex(p => p.uuid === progressEvent.tempFile.uuid)
}
if (idx === -1 || !this.files[idx]) return
// fix by mehaotian 100 就会消失，-1 是为了让进度条消失
this.files[idx].progress = percentCompleted - 1
// 上传中
this.$emit('progress', {
index: idx,
progress: parseInt(percentCompleted),
tempFile: this.files[idx]
})
},
/**
* 删除文件
* @param {Object} index
*/
delFile(index) {
this.$emit('delete', {
index,
tempFile: this.files[index],
tempFilePath: this.files[index].url
})
this.files.splice(index, 1)
this.$nextTick(() => {
this.setEmit()
})
},
/**
* 获取文件名和后缀
* @param {Object} name
*/
getFileExt(name) {
const last_len = name.lastIndexOf('.')
const len = name.length
return {
name: name.substring(0, last_len),
ext: name.substring(last_len + 1, len)
}
},
/**
* 处理返回事件
*/
setEmit() {
let data = []
if (this.returnType === 'object') {
data = this.backObject(this.files)[0]
this.localValue = data ? data : null
} else {
data = this.backObject(this.files)
if (!this.localValue) {
this.localValue = []
}
this.localValue = [...data]
}
// #ifdef VUE3
this.$emit('update:modelValue', this.localValue)
// #endif
// #ifndef VUE3
this.$emit('input', this.localValue)
// #endif
},
/**
* 处理返回参数
* @param {Object} files
*/
backObject(files) {
let newFilesData = []
files.forEach(v => {
newFilesData.push({
extname: v.extname,
fileType: v.fileType,
image: v.image,
name: v.name,
path: v.path,
size: v.size,
fileID: v.fileID,
url: v.url,
// 修改删除一个文件后不能再上传的bug, #694
uuid: v.uuid,
status: v.status,
cloudPath: v.cloudPath
})
})
return newFilesData
},
async getTempFileURL(fileList) {
fileList = {
fileList: [].concat(fileList)
}
const urls = await uniCloud.getTempFileURL(fileList)
return urls.fileList[0].tempFileURL || ''
},
/**
* 获取父元素实例
*/
getForm(name = 'uniForms') {
let parent = this.$parent;
let parentName = parent.$options.name;
while (parentName !== name) {
parent = parent.$parent;
if (!parent) return false;
parentName = parent.$options.name;
}
return parent;
}
}
}
</script>
<style>
.uni-file-picker {
/* #ifndef APP-NVUE */
box-sizing: border-box;
overflow: hidden;
width: 100%;
/* #endif */
flex: 1;
}
.uni-file-picker__header {
padding-top: 5px;
padding-bottom: 10px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: space-between;
}
.file-title {
font-size: 14px;
color: #333;
}
.file-count {
font-size: 14px;
color: #999;
}
.icon-add {
width: 50px;
height: 5px;
background-color: #f1f1f1;
border-radius: 2px;
}
.rotate {
position: absolute;
transform: rotate(90deg);
}
</style>
uni_modules/uni-file-picker/components/uni-file-picker/upload-file.vue
+323
View File
@@ -0,0 +1,323 @@
<template>
<view class="uni-file-picker__files">
<view v-if="!readonly" class="files-button" @click="choose">
<slot></slot>
</view>
<!-- :class="{'is-text-box':showType === 'list'}" -->
<view v-if="list.length > 0" class="uni-file-picker__lists is-text-box" :style="borderStyle">
<!-- ,'is-list-card':showType === 'list-card' -->
<view class="uni-file-picker__lists-box" v-for="(item ,index) in list" :key="index" :class="{
'files-border':index !== 0 && styles.dividline}" :style="index !== 0 && styles.dividline &&borderLineStyle">
<view class="uni-file-picker__item">
<!-- :class="{'is-text-image':showType === 'list'}" -->
<!-- <view class="files__image is-text-image">
<image class="header-image" :src="item.logo" mode="aspectFit"></image>
</view> -->
<view class="files__name">{{item.name}}</view>
<view v-if="delIcon&&!readonly" class="icon-del-box icon-files" @click="delFile(index)">
<view class="icon-del icon-files"></view>
<view class="icon-del rotate"></view>
</view>
</view>
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4" :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
</view>
<view v-if="item.status === 'error'" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
点击重试
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "uploadFile",
emits: ['uploadFiles', 'choose', 'delFile'],
props: {
filesList: {
type: Array,
default () {
return []
}
},
delIcon: {
type: Boolean,
default: true
},
limit: {
type: [Number, String],
default: 9
},
showType: {
type: String,
default: ''
},
listStyles: {
type: Object,
default () {
return {
// 是否显示边框
border: true,
// 是否显示分隔线
dividline: true,
// 线条样式
borderStyle: {}
}
}
},
readonly: {
type: Boolean,
default: false
}
},
computed: {
list() {
let files = []
this.filesList.forEach(v => {
files.push(v)
})
return files
},
styles() {
let styles = {
border: true,
dividline: true,
'border-style': {}
}
return Object.assign(styles, this.listStyles)
},
borderStyle() {
let {
borderStyle,
border
} = this.styles
let obj = {}
if (!border) {
obj.border = 'none'
} else {
let width = (borderStyle && borderStyle.width) || 1
width = this.value2px(width)
let radius = (borderStyle && borderStyle.radius) || 5
radius = this.value2px(radius)
obj = {
'border-width': width,
'border-style': (borderStyle && borderStyle.style) || 'solid',
'border-color': (borderStyle && borderStyle.color) || '#eee',
'border-radius': radius
}
}
let classles = ''
for (let i in obj) {
classles += `${i}:${obj[i]};`
}
return classles
},
borderLineStyle() {
let obj = {}
let {
borderStyle
} = this.styles
if (borderStyle && borderStyle.color) {
obj['border-color'] = borderStyle.color
}
if (borderStyle && borderStyle.width) {
let width = borderStyle && borderStyle.width || 1
let style = borderStyle && borderStyle.style || 0
if (typeof width === 'number') {
width += 'px'
} else {
width = width.indexOf('px') ? width : width + 'px'
}
obj['border-width'] = width
if (typeof style === 'number') {
style += 'px'
} else {
style = style.indexOf('px') ? style : style + 'px'
}
obj['border-top-style'] = style
}
let classles = ''
for (let i in obj) {
classles += `${i}:${obj[i]};`
}
return classles
}
},
methods: {
uploadFiles(item, index) {
this.$emit("uploadFiles", {
item,
index
})
},
choose() {
this.$emit("choose")
},
delFile(index) {
this.$emit('delFile', index)
},
value2px(value) {
if (typeof value === 'number') {
value += 'px'
} else {
value = value.indexOf('px') !== -1 ? value : value + 'px'
}
return value
}
}
}
</script>
<style lang="scss">
.uni-file-picker__files {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: flex-start;
}
.files-button {
// border: 1px red solid;
}
.uni-file-picker__lists {
position: relative;
margin-top: 5px;
overflow: hidden;
}
.file-picker__mask {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
color: #fff;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.4);
}
.uni-file-picker__lists-box {
position: relative;
}
.uni-file-picker__item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
padding: 8px 10px;
padding-right: 5px;
padding-left: 10px;
}
.files-border {
border-top: 1px #eee solid;
}
.files__name {
flex: 1;
font-size: 14px;
color: #666;
margin-right: 25px;
/* #ifndef APP-NVUE */
word-break: break-all;
word-wrap: break-word;
/* #endif */
}
.icon-files {
/* #ifndef APP-NVUE */
position: static;
background-color: initial;
/* #endif */
}
// .icon-files .icon-del {
// background-color: #333;
// width: 12px;
// height: 1px;
// }
.is-list-card {
border: 1px #eee solid;
margin-bottom: 5px;
border-radius: 5px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
padding: 5px;
}
.files__image {
width: 40px;
height: 40px;
margin-right: 10px;
}
.header-image {
width: 100%;
height: 100%;
}
.is-text-box {
border: 1px #eee solid;
border-radius: 5px;
}
.is-text-image {
width: 25px;
height: 25px;
margin-left: 5px;
}
.rotate {
position: absolute;
transform: rotate(90deg);
}
.icon-del-box {
/* #ifndef APP-NVUE */
display: flex;
margin: auto 0;
/* #endif */
align-items: center;
justify-content: center;
position: absolute;
top: 0px;
bottom: 0;
right: 5px;
height: 26px;
width: 26px;
// border-radius: 50%;
// background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
transform: rotate(-45deg);
}
.icon-del {
width: 15px;
height: 1px;
background-color: #333;
// border-radius: 1px;
}
/* #ifdef H5 */
@media all and (min-width: 768px) {
.uni-file-picker__files {
max-width: 375px;
}
}
/* #endif */
</style>
uni_modules/uni-file-picker/components/uni-file-picker/upload-image.vue
+285
View File
@@ -0,0 +1,285 @@
<template>
<view class="uni-file-picker__container">
<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
<view class="file-picker__box-content" :style="borderStyle">
<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
<view class="icon-del"></view>
<view class="icon-del rotate"></view>
</view>
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
</view>
<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
点击重试
</view>
</view>
</view>
<view v-if="filesList.length < limit" class="file-picker__box" :style="boxStyle">
<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
export default {
name: "uploadImage",
emits:['uploadFiles','choose','delFile'],
props: {
filesList: {
type: Array,
default () {
return []
}
},
disabled:{
type: Boolean,
default: false
},
disablePreview: {
type: Boolean,
default: false
},
limit: {
type: [Number, String],
default: 9
},
imageStyles: {
type: Object,
default () {
return {
width: 'auto',
height: 'auto',
border: {}
}
}
},
delIcon: {
type: Boolean,
default: true
},
readonly:{
type:Boolean,
default:false
}
},
computed: {
styles() {
let styles = {
width: 'auto',
height: 'auto',
border: {}
}
return Object.assign(styles, this.imageStyles)
},
boxStyle() {
const {
width = 'auto',
height = 'auto'
} = this.styles
let obj = {}
if (height === 'auto') {
if (width !== 'auto') {
obj.height = this.value2px(width)
obj['padding-top'] = 0
} else {
obj.height = 0
}
} else {
obj.height = this.value2px(height)
obj['padding-top'] = 0
}
if (width === 'auto') {
if (height !== 'auto') {
obj.width = this.value2px(height)
} else {
obj.width = '33.3%'
}
} else {
obj.width = this.value2px(width)
}
let classles = ''
for(let i in obj){
classles+= `${i}:${obj[i]};`
}
return classles
},
borderStyle() {
let {
border
} = this.styles
let obj = {}
const widthDefaultValue = 1
const radiusDefaultValue = 3
if (typeof border === 'boolean') {
obj.border = border ? '1px #eee solid' : 'none'
} else {
let width = (border && border.width) || widthDefaultValue
width = this.value2px(width)
let radius = (border && border.radius) || radiusDefaultValue
radius = this.value2px(radius)
obj = {
'border-width': width,
'border-style': (border && border.style) || 'solid',
'border-color': (border && border.color) || '#eee',
'border-radius': radius
}
}
let classles = ''
for(let i in obj){
classles+= `${i}:${obj[i]};`
}
return classles
}
},
methods: {
uploadFiles(item, index) {
this.$emit("uploadFiles", item)
},
choose() {
if(this.readonly) return
this.$emit("choose")
},
delFile(index) {
if(this.readonly) return
this.$emit('delFile', index)
},
prviewImage(img, index) {
if(this.readonly) return
let urls = []
if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
this.$emit("choose")
}
if(this.disablePreview) return
this.filesList.forEach(i => {
urls.push(i.url)
})
uni.previewImage({
urls: urls,
current: index
});
},
value2px(value) {
if (typeof value === 'number') {
value += 'px'
} else {
if (value.indexOf('%') === -1) {
value = value.indexOf('px') !== -1 ? value : value + 'px'
}
}
return value
}
}
}
</script>
<style lang="scss">
.uni-file-picker__container {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-wrap: wrap;
margin: -5px;
}
.file-picker__box {
position: relative;
// flex: 0 0 33.3%;
width: 33.3%;
height: 0;
padding-top: 33.33%;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
}
.file-picker__box-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 5px;
border: 1px #eee solid;
border-radius: 5px;
overflow: hidden;
}
.file-picker__progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/* border: 1px red solid; */
z-index: 2;
}
.file-picker__progress-item {
width: 100%;
}
.file-picker__mask {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
color: #fff;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.4);
}
.file-image {
width: 100%;
height: 100%;
}
.is-add {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
}
.rotate {
position: absolute;
transform: rotate(90deg);
}
.icon-del-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
position: absolute;
top: 3px;
right: 3px;
height: 26px;
width: 26px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
transform: rotate(-45deg);
}
.icon-del {
width: 15px;
height: 2px;
background-color: #fff;
border-radius: 2px;
}
</style>
uni_modules/uni-file-picker/components/uni-file-picker/utils.js
+110
View File
@@ -0,0 +1,110 @@
/**
* 获取文件名和后缀
* @param {String} name
*/
export const get_file_ext = (name) => {
const last_len = name.lastIndexOf('.')
const len = name.length
return {
name: name.substring(0, last_len),
ext: name.substring(last_len + 1, len)
}
}
/**
* 获取扩展名
* @param {Array} fileExtname
*/
export const get_extname = (fileExtname) => {
if (!Array.isArray(fileExtname)) {
let extname = fileExtname.replace(/(\[|\])/g, '')
return extname.split(',')
} else {
return fileExtname
}
return []
}
/**
* 获取文件和检测是否可选
*/
export const get_files_and_is_max = (res, _extname) => {
let filePaths = []
let files = []
if(!_extname || _extname.length === 0){
return {
filePaths,
files
}
}
res.tempFiles.forEach(v => {
let fileFullName = get_file_ext(v.name)
const extname = fileFullName.ext.toLowerCase()
if (_extname.indexOf(extname) !== -1) {
files.push(v)
filePaths.push(v.path)
}
})
if (files.length !== res.tempFiles.length) {
uni.showToast({
title: `当前选择了${res.tempFiles.length}个文件 ，${res.tempFiles.length - files.length} 个文件格式不正确`,
icon: 'none',
duration: 5000
})
}
return {
filePaths,
files
}
}
/**
* 获取图片信息
* @param {Object} filepath
*/
export const get_file_info = (filepath) => {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: filepath,
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
}
/**
* 获取封装数据
*/
export const get_file_data = async (files, type = 'image') => {
// 最终需要上传数据库的数据
let fileFullName = get_file_ext(files.name)
const extname = fileFullName.ext.toLowerCase()
let filedata = {
name: files.name,
uuid: files.uuid,
extname: extname || '',
cloudPath: files.cloudPath,
fileType: files.fileType,
thumbTempFilePath: files.thumbTempFilePath,
url: files.path || files.path,
size: files.size, //单位是字节
image: {},
path: files.path,
video: {}
}
if (type === 'image') {
const imageinfo = await get_file_info(files.path)
delete filedata.video
filedata.image.width = imageinfo.width
filedata.image.height = imageinfo.height
filedata.image.location = imageinfo.path
} else {
delete filedata.image
}
return filedata
}
uni_modules/uni-file-picker/package.json
+105
View File
@@ -0,0 +1,105 @@
{
"id": "uni-file-picker",
"displayName": "uni-file-picker 文件选择上传",
"version": "1.1.2",
"description": "文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间",
"keywords": [
"uni-ui",
"uniui",
"图片上传",
"文件上传"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "",
"uni-app": "^4.33",
"uni-app-x": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue",
"darkmode": "x",
"i18n": "x",
"widescreen": "x"
},
"uni_modules": {
"dependencies": [
"uni-scss"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "√",
"aliyun": "√",
"alipay": "√"
},
"client": {
"uni-app": {
"vue": {
"vue2": "√",
"vue3": "√"
},
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"vue": "√",
"nvue": "-",
"android": "√",
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√",
"alipay": "√",
"toutiao": "√",
"baidu": "√",
"kuaishou": "√",
"jd": "-",
"harmony": "-",
"qq": "√",
"lark": "-"
},
"quickapp": {
"huawei": "√",
"union": "√"
}
},
"uni-app-x": {
"web": {
"safari": "-",
"chrome": "-"
},
"app": {
"android": "-",
"ios": "-",
"harmony": "-"
},
"mp": {
"weixin": "-"
}
}
}
}
}
}
uni_modules/uni-file-picker/readme.md
+11
View File
@@ -0,0 +1,11 @@
## FilePicker 文件选择上传
> **组件名：uni-file-picker**
> 代码块： `uFilePicker`
文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-file-picker)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
uni_modules/uv-sticky/changelog.md
+11
View File
@@ -0,0 +1,11 @@
## 1.0.4（2023-12-20）
1. 优化
## 1.0.3（2023-10-13）
1. unmounted兼容vue3
## 1.0.2（2023-08-27）
1. 优化
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-sticky 吸顶
uni_modules/uv-sticky/components/uv-sticky/props.js
+41
View File
@@ -0,0 +1,41 @@
export default {
props: {
// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
offsetTop: {
type: [String, Number],
default: 0
},
// 自定义导航栏的高度
customNavHeight: {
type: [String, Number],
// #ifdef H5
// H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
default: 44,
// #endif
// #ifndef H5
default: 0
// #endif
},
// 是否禁用吸顶功能
disabled: {
type: Boolean,
default: false
},
// 吸顶区域的背景颜色
bgColor: {
type: String,
default: 'transparent'
},
// z-index值
zIndex: {
type: [String, Number],
default: ''
},
// 列表中的索引值
index: {
type: [String, Number],
default: ''
},
...uni.$uv?.props?.sticky
}
}
uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue
+223
View File
@@ -0,0 +1,223 @@
<template>
<view
class="uv-sticky"
:id="elId"
:style="[style]"
>
<view
:style="[stickyContent]"
class="uv-sticky__content"
>
<slot />
</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';;
/**
* sticky 吸顶
* @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
* @tutorial https://www.uvui.cn/components/sticky.html
* @property {String ｜ Number} offsetTop 吸顶时与顶部的距离，单位px（默认 0 ）
* @property {String ｜ Number} customNavHeight 自定义导航栏的高度 （h5 默认44 其他默认 0 ）
* @property {Boolean} disabled 是否开启吸顶功能 （默认 false ）
* @property {String} bgColor 组件背景颜色（默认 '#ffffff' ）
* @property {String ｜ Number} zIndex 吸顶时的z-index值
* @property {String ｜ Number} index 自定义标识，用于区分是哪一个组件
* @property {Object} customStyle 组件的样式，对象形式
* @example <uv-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></uv-sticky>
*/
export default {
name: 'uv-sticky',
mixins: [mpMixin, mixin, props],
data() {
return {
cssSticky: false, // 是否使用css的sticky实现
stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
elId: '',
left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
width: 'auto',
height: 'auto',
fixed: false, // js模式时，是否处于吸顶模式
}
},
computed: {
style() {
const style = {}
if(!this.disabled) {
if (this.cssSticky) {
style.position = 'sticky'
style.zIndex = this.uZindex
style.top = this.$uv.addUnit(this.stickyTop)
} else {
style.height = this.fixed ? this.height + 'px' : 'auto'
}
} else {
// 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
// #ifdef APP-NVUE
style.position = 'relative'
// #endif
// #ifndef APP-NVUE
style.position = 'static'
// #endif
}
style.backgroundColor = this.bgColor
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
},
// 吸顶内容的样式
stickyContent() {
const style = {}
if (!this.cssSticky) {
style.position = this.fixed ? 'fixed' : 'static'
style.top = this.stickyTop + 'px'
style.left = this.left + 'px'
style.width = this.width == 'auto' ? 'auto' : this.width + 'px'
style.zIndex = this.uZindex
}
return style
},
uZindex() {
return this.zIndex ? this.zIndex : 970
}
},
created() {
this.elId = this.$uv.guid();
},
mounted() {
this.init()
},
methods: {
init() {
this.getStickyTop()
// 判断使用的模式
this.checkSupportCssSticky()
// 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
if (!this.cssSticky) {
!this.disabled && this.initObserveContent()
}
},
initObserveContent() {
// 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
this.$uvGetRect('#' + this.elId).then((res) => {
this.height = res.height
this.left = res.left
this.width = res.width
this.$nextTick(() => {
this.observeContent()
})
})
},
observeContent() {
// 先断掉之前的观察
this.disconnectObserver('contentObserver')
const contentObserver = uni.createIntersectionObserver({
// 检测的区间范围
thresholds: [0.95, 0.98, 1]
})
// 到屏幕顶部的高度时触发
contentObserver.relativeToViewport({
top: -this.stickyTop
})
// 绑定观察的元素
contentObserver.observe(`#${this.elId}`, res => {
this.setFixed(res.boundingClientRect.top)
})
this.contentObserver = contentObserver
},
setFixed(top) {
// 判断是否出于吸顶条件范围
const fixed = top <= this.stickyTop
this.fixed = fixed
},
disconnectObserver(observerName) {
// 断掉观察，释放资源
const observer = this[observerName]
observer && observer.disconnect()
},
getStickyTop() {
this.stickyTop = this.$uv.getPx(this.offsetTop) + this.$uv.getPx(this.customNavHeight)
},
async checkSupportCssSticky() {
// #ifdef H5
// H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
if (this.checkCssStickyForH5()) {
this.cssSticky = true
}
// #endif
// 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
if (this.$uv.os() === 'android' && Number(this.$uv.sys().system) > 8) {
this.cssSticky = true
}
// APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
// #ifdef APP-VUE || MP-WEIXIN
this.cssSticky = await this.checkComputedStyle()
// #endif
// ios上，从ios6开始，都是支持css sticky的
if (this.$uv.os() === 'ios') {
this.cssSticky = true
}
// nvue，是支持css sticky的
// #ifdef APP-NVUE
this.cssSticky = true
// #endif
},
// 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
checkComputedStyle() {
// 方法内进行判断，避免在其他平台生成无用代码
// #ifdef APP-VUE || MP-WEIXIN
return new Promise(resolve => {
uni.createSelectorQuery().in(this).select('.uv-sticky').fields({
computedStyle: ["position"]
}).exec(e => {
resolve('sticky' === e[0].position)
})
})
// #endif
},
// H5通过创建元素的形式嗅探是否支持css sticky
// 判断浏览器是否支持sticky属性
checkCssStickyForH5() {
// 方法内进行判断，避免在其他平台生成无用代码
// #ifdef H5
const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
vendorListLength = vendorList.length,
stickyElement = document.createElement('div')
for (let i = 0; i < vendorListLength; i++) {
stickyElement.style.position = vendorList[i] + 'sticky'
if (stickyElement.style.position !== '') {
return true
}
}
return false;
// #endif
}
},
// #ifdef VUE2
beforeDestroy() {
this.disconnectObserver('contentObserver')
},
// #endif
// #ifdef VUE3
unmounted() {
this.disconnectObserver('contentObserver')
}
// #endif
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-sticky {
/* #ifdef APP-VUE || MP-WEIXIN */
// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
position: sticky;
/* #endif */
}
</style>
uni_modules/uv-sticky/package.json
+87
View File
@@ -0,0 +1,87 @@
{
"id": "uv-sticky",
"displayName": "uv-sticky 吸顶 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.4",
"description": "吸顶组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。",
"keywords": [
"uv-sticky",
"uvui",
"uv-ui",
"sticky",
"吸顶"
],
"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"
],
"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"
}
}
}
}
}
uni_modules/uv-sticky/readme.md
+11
View File
@@ -0,0 +1,11 @@
## Sticky 吸顶
> **组件名：uv-sticky**
该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
### <a href="https://www.uvui.cn/components/sticky.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
uni_modules/uv-ui-tools/changelog.md
+76
View File
@@ -0,0 +1,76 @@
## 1.1.25（2024-01-20）
1.1.20版本更新
## 1.1.24（2023-12-21）
1. luch-request更新
## 1.1.23（2023-12-12）
1. 1.1.19版本
## 1.1.22（2023-11-28）
1. 优化
## 1.1.21（2023-11-10）
1. 1.1.17版本
## 1.1.20（2023-10-30）
1. 1.1.16版本
## 1.1.19（2023-10-13）
1. 兼容vue3
## 1.1.18（2023-10-12）
1. 1.1.15版本
## 1.1.17（2023-09-27）
1. 1.1.14版本发布
## 1.1.16（2023-09-15）
1. 1.1.13版本发布
## 1.1.15（2023-09-15）
1. 更新button.js相关按钮支持open-type="agreePrivacyAuthorization"
## 1.1.14（2023-09-14）
1. 优化dayjs
## 1.1.13（2023-09-13）
1. 优化，$uv中增加unit参数，方便组件中使用
## 1.1.12（2023-09-10）
1. 升级版本
## 1.1.11（2023-09-04）
1. 1.1.11版本
## 1.1.10（2023-08-31）
1. 修复customStyle和customClass存在冲突的问题
## 1.1.9（2023-08-27）
1. 版本升级
2. 优化
## 1.1.8（2023-08-24）
1. 版本升级
## 1.1.7（2023-08-22）
1. 版本升级
## 1.1.6（2023-08-18）
uvui版本：1.1.6
## 1.0.15（2023-08-14）
1. 更新uvui版本号
## 1.0.13（2023-08-06）
1. 优化
## 1.0.12（2023-08-06）
1. 修改版本号
## 1.0.11（2023-08-06）
1. 路由增加events参数
2. 路由拦截修复
## 1.0.10（2023-08-01）
1. 优化
## 1.0.9（2023-06-28）
优化openType.js
## 1.0.8（2023-06-15）
1. 修改支付宝报错的BUG
## 1.0.7（2023-06-07）
1. 解决微信小程序使用uvui提示 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors
2. 解决上述提示，需要在uni.scss配置$uvui-nvue-style: false; 然后在APP.vue下面引入uvui内置的基础样式:@import '@/uni_modules/uv-ui-tools/index.scss';
## 1.0.6（2023-06-04）
1. uv-ui-tools 优化工具组件，兼容更多功能
2. 小程序分享功能优化等
## 1.0.5（2023-06-02）
1. 修改扩展使用mixin中方法的问题
## 1.0.4（2023-05-23）
1. 兼容百度小程序修改bem函数
## 1.0.3（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.2（2023-05-10）
1. 增加Http请求封装
2. 优化
## 1.0.1（2023-05-04）
1. 修改名称及备注
## 1.0.0（2023-05-04）
1. uv-ui工具集首次发布
uni_modules/uv-ui-tools/components/uv-ui-tools/uv-ui-tools.vue
+6
View File
@@ -0,0 +1,6 @@
<template>
</template>
<script>
</script>
<style>
</style>
uni_modules/uv-ui-tools/index.js
+79
View File
@@ -0,0 +1,79 @@
// 全局挂载引入http相关请求拦截插件
import Request from './libs/luch-request'
// 引入全局mixin
import mixin from './libs/mixin/mixin.js'
// 小程序特有的mixin
import mpMixin from './libs/mixin/mpMixin.js'
// #ifdef MP
import mpShare from './libs/mixin/mpShare.js'
// #endif
// 路由封装
import route from './libs/util/route.js'
// 公共工具函数
import * as index from './libs/function/index.js'
// 防抖方法
import debounce from './libs/function/debounce.js'
// 节流方法
import throttle from './libs/function/throttle.js'
// 规则检验
import * as test from './libs/function/test.js'
// 颜色渐变相关,colorGradient-颜色渐变,hexToRgb-十六进制颜色转rgb颜色,rgbToHex-rgb转十六进制
import * as colorGradient from './libs/function/colorGradient.js'
// 配置信息
import config from './libs/config/config.js'
// 平台
import platform from './libs/function/platform'
const $uv = {
route,
config,
test,
date: index.timeFormat, // 另名date
...index,
colorGradient: colorGradient.colorGradient,
hexToRgb: colorGradient.hexToRgb,
rgbToHex: colorGradient.rgbToHex,
colorToRgba: colorGradient.colorToRgba,
http: new Request(),
debounce,
throttle,
platform,
mixin,
mpMixin
}
uni.$uv = $uv;
const install = (Vue,options={}) => {
// #ifndef APP-NVUE
const cloneMixin = index.deepClone(mixin);
delete cloneMixin?.props?.customClass;
delete cloneMixin?.props?.customStyle;
Vue.mixin(cloneMixin);
// #ifdef MP
if(options.mpShare){
Vue.mixin(mpShare);
}
// #endif
// #endif
// #ifdef VUE2
// 时间格式化，同时两个名称，date和timeFormat
Vue.filter('timeFormat', (timestamp, format) => uni.$uv.timeFormat(timestamp, format));
Vue.filter('date', (timestamp, format) => uni.$uv.timeFormat(timestamp, format));
// 将多久以前的方法，注入到全局过滤器
Vue.filter('timeFrom', (timestamp, format) => uni.$uv.timeFrom(timestamp, format));
// 同时挂载到uni和Vue.prototype中
// #ifndef APP-NVUE
// 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
Vue.prototype.$uv = $uv;
// #endif
// #endif
// #ifdef VUE3
Vue.config.globalProperties.$uv = $uv;
// #endif
}
export default {
install
}
uni_modules/uv-ui-tools/index.scss
+7
View File
@@ -0,0 +1,7 @@
// 引入公共基础类
@import "./libs/css/common.scss";
// 非nvue的样式
/* #ifndef APP-NVUE */
@import "./libs/css/vue.scss";
/* #endif */
uni_modules/uv-ui-tools/libs/config/config.js
+34
View File
@@ -0,0 +1,34 @@
// 此版本发布于2024-01-20
const version = '1.1.20'
// 开发环境才提示，生产环境不会提示
if (process.env.NODE_ENV === 'development') {
console.log(`\n %c uvui V${version} https://www.uvui.cn/ \n\n`, 'color: #ffffff; background: #3c9cff; padding:5px 0; border-radius: 5px;');
}
export default {
v: version,
version,
// 主题名称
type: [
'primary',
'success',
'info',
'error',
'warning'
],
// 颜色部分，本来可以通过scss的:export导出供js使用，但是奈何nvue不支持
color: {
'uv-primary': '#2979ff',
'uv-warning': '#ff9900',
'uv-success': '#19be6b',
'uv-error': '#fa3534',
'uv-info': '#909399',
'uv-main-color': '#303133',
'uv-content-color': '#606266',
'uv-tips-color': '#909399',
'uv-light-color': '#c0c4cc'
},
// 默认单位，可以通过配置为rpx，那么在用于传入组件大小参数为数值时，就默认为rpx
unit: 'px'
}
uni_modules/uv-ui-tools/libs/css/color.scss
+32
View File
@@ -0,0 +1,32 @@
$uv-main-color: #303133 !default;
$uv-content-color: #606266 !default;
$uv-tips-color: #909193 !default;
$uv-light-color: #c0c4cc !default;
$uv-border-color: #dadbde !default;
$uv-bg-color: #f3f4f6 !default;
$uv-disabled-color: #c8c9cc !default;
$uv-primary: #3c9cff !default;
$uv-primary-dark: #398ade !default;
$uv-primary-disabled: #9acafc !default;
$uv-primary-light: #ecf5ff !default;
$uv-warning: #f9ae3d !default;
$uv-warning-dark: #f1a532 !default;
$uv-warning-disabled: #f9d39b !default;
$uv-warning-light: #fdf6ec !default;
$uv-success: #5ac725 !default;
$uv-success-dark: #53c21d !default;
$uv-success-disabled: #a9e08f !default;
$uv-success-light: #f5fff0;
$uv-error: #f56c6c !default;
$uv-error-dark: #e45656 !default;
$uv-error-disabled: #f7b2b2 !default;
$uv-error-light: #fef0f0 !default;
$uv-info: #909399 !default;
$uv-info-dark: #767a82 !default;
$uv-info-disabled: #c4c6c9 !default;
$uv-info-light: #f4f4f5 !default;
uni_modules/uv-ui-tools/libs/css/common.scss
+100
View File
@@ -0,0 +1,100 @@
// 超出行数，自动显示行尾省略号，最多5行
// 来自uvui的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@for $i from 1 through 5 {
.uv-line-#{$i} {
/* #ifdef APP-NVUE */
// nvue下，可以直接使用lines属性，这是weex特有样式
lines: $i;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
// vue下，单行和多行显示省略号需要单独处理
@if $i == '1' {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box!important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: $i;
-webkit-box-orient: vertical!important;
}
/* #endif */
}
}
$uv-bordercolor: #dadbde;
@if variable-exists(uv-border-color) {
$uv-bordercolor: $uv-border-color;
}
// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
.uv-border {
border-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-style: solid;
}
.uv-border-top {
border-top-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-top-style: solid;
}
.uv-border-left {
border-left-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-left-style: solid;
}
.uv-border-right {
border-right-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-right-style: solid;
}
.uv-border-bottom {
border-bottom-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-bottom-style: solid;
}
.uv-border-top-bottom {
border-top-width: 0.5px!important;
border-bottom-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-top-style: solid;
border-bottom-style: solid;
}
// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
.uv-reset-button {
padding: 0;
background-color: transparent;
/* #ifndef APP-PLUS */
font-size: inherit;
line-height: inherit;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
border-width: 0;
/* #endif */
}
/* #ifndef APP-NVUE */
.uv-reset-button::after {
border: none;
}
/* #endif */
.uv-hover-class {
opacity: 0.7;
}
uni_modules/uv-ui-tools/libs/css/components.scss
+23
View File
@@ -0,0 +1,23 @@
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
/* #ifndef APP-NVUE */
// 由于uvui是基于nvue环境进行开发的，此环境中普通元素默认为flex-direction: column;
// 所以在非nvue中，需要对元素进行重置为flex-direction: column; 否则可能会表现异常
$uvui-nvue-style: true !default;
@if $uvui-nvue-style == true {
view, scroll-view, swiper-item {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
}
/* #endif */
uni_modules/uv-ui-tools/libs/css/variable.scss
+111
View File
@@ -0,0 +1,111 @@
// 超出行数，自动显示行尾省略号，最多5行
// 来自uvui的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@if variable-exists(show-lines) {
@for $i from 1 through 5 {
.uv-line-#{$i} {
/* #ifdef APP-NVUE */
// nvue下，可以直接使用lines属性，这是weex特有样式
lines: $i;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
// vue下，单行和多行显示省略号需要单独处理
@if $i == '1' {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box!important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: $i;
-webkit-box-orient: vertical!important;
}
/* #endif */
}
}
}
@if variable-exists(show-border) {
$uv-bordercolor: #dadbde;
@if variable-exists(uv-border-color) {
$uv-bordercolor: $uv-border-color;
}
// 此处加上!important并非随意乱用，而是因为目前*.nvue页面编译到H5时，
// App.vue的样式会被uni-app的view元素的自带border属性覆盖，导致无效
// 综上，这是uni-app的缺陷导致我们为了多端兼容，而必须要加上!important
// 移动端兼容性较好，直接使用0.5px去实现细边框，不使用伪元素形式实现
@if variable-exists(show-border-surround) {
.uv-border {
border-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-style: solid;
}
}
@if variable-exists(show-border-top) {
.uv-border-top {
border-top-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-top-style: solid;
}
}
@if variable-exists(show-border-left) {
.uv-border-left {
border-left-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-left-style: solid;
}
}
@if variable-exists(show-border-right) {
.uv-border-right {
border-right-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-right-style: solid;
}
}
@if variable-exists(show-border-bottom) {
.uv-border-bottom {
border-bottom-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-bottom-style: solid;
}
}
@if variable-exists(show-border-top-bottom) {
.uv-border-top-bottom {
border-top-width: 0.5px!important;
border-bottom-width: 0.5px!important;
border-color: $uv-bordercolor!important;
border-top-style: solid;
border-bottom-style: solid;
}
}
}
@if variable-exists(show-reset-button) {
// 去除button的所有默认样式，让其表现跟普通的view、text元素一样
.uv-reset-button {
padding: 0;
background-color: transparent;
/* #ifndef APP-PLUS */
font-size: inherit;
line-height: inherit;
color: inherit;
/* #endif */
/* #ifdef APP-NVUE */
border-width: 0;
/* #endif */
}
/* #ifndef APP-NVUE */
.uv-reset-button::after {
border: none;
}
/* #endif */
}
@if variable-exists(show-hover) {
.uv-hover-class {
opacity: 0.7;
}
}
uni_modules/uv-ui-tools/libs/css/vue.scss
+40
View File
@@ -0,0 +1,40 @@
// 历遍生成4个方向的底部安全区
@each $d in top, right, bottom, left {
.uv-safe-area-inset-#{$d} {
padding-#{$d}: 0;
padding-#{$d}: constant(safe-area-inset-#{$d});
padding-#{$d}: env(safe-area-inset-#{$d});
}
}
//提升H5端uni.toast()的层级，避免被uvui的modal等遮盖
/* #ifdef H5 */
uni-toast {
z-index: 10090;
}
uni-toast .uni-toast {
z-index: 10090;
}
/* #endif */
// 隐藏scroll-view的滚动条
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
$uvui-nvue-style: true !default;
@if $uvui-nvue-style == false {
view, scroll-view, swiper-item {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
}
uni_modules/uv-ui-tools/libs/function/colorGradient.js
+134
View File
@@ -0,0 +1,134 @@
/**
* 求两个颜色之间的渐变值
* @param {string} startColor 开始的颜色
* @param {string} endColor 结束的颜色
* @param {number} step 颜色等分的份额
* */
function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
const startRGB = hexToRgb(startColor, false) // 转换为rgb数组模式
const startR = startRGB[0]
const startG = startRGB[1]
const startB = startRGB[2]
const endRGB = hexToRgb(endColor, false)
const endR = endRGB[0]
const endG = endRGB[1]
const endB = endRGB[2]
const sR = (endR - startR) / step // 总差值
const sG = (endG - startG) / step
const sB = (endB - startB) / step
const colorArr = []
for (let i = 0; i < step; i++) {
// 计算每一步的hex值
let hex = rgbToHex(`rgb(${Math.round((sR * i + startR))},${Math.round((sG * i + startG))},${Math.round((sB
* i + startB))})`)
// 确保第一个颜色值为startColor的值
if (i === 0) hex = rgbToHex(startColor)
// 确保最后一个颜色值为endColor的值
if (i === step - 1) hex = rgbToHex(endColor)
colorArr.push(hex)
}
return colorArr
}
// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
function hexToRgb(sColor, str = true) {
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
sColor = String(sColor).toLowerCase()
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
let sColorNew = '#'
for (let i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
// 处理六位的颜色值
const sColorChange = []
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
}
if (!str) {
return sColorChange
}
return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`
} if (/^(rgb|RGB)/.test(sColor)) {
const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
return arr.map((val) => Number(val))
}
return sColor
}
// 将rgb表示方式转换为hex表示方式
function rgbToHex(rgb) {
const _this = rgb
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
if (/^(rgb|RGB)/.test(_this)) {
const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
let strHex = '#'
for (let i = 0; i < aColor.length; i++) {
let hex = Number(aColor[i]).toString(16)
hex = String(hex).length == 1 ? `${0}${hex}` : hex // 保证每个rgb的值为2位
if (hex === '0') {
hex += hex
}
strHex += hex
}
if (strHex.length !== 7) {
strHex = _this
}
return strHex
} if (reg.test(_this)) {
const aNum = _this.replace(/#/, '').split('')
if (aNum.length === 6) {
return _this
} if (aNum.length === 3) {
let numHex = '#'
for (let i = 0; i < aNum.length; i += 1) {
numHex += (aNum[i] + aNum[i])
}
return numHex
}
} else {
return _this
}
}
/**
* JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba（255，255，255，0.5）字符串
* sHex为传入的十六进制的色值
* alpha为rgba的透明度
*/
function colorToRgba(color, alpha) {
color = rgbToHex(color)
// 十六进制颜色值的正则表达式
const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
/* 16进制颜色转为RGB格式 */
let sColor = String(color).toLowerCase()
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
let sColorNew = '#'
for (let i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
// 处理六位的颜色值
const sColorChange = []
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`))
}
// return sColorChange.join(',')
return `rgba(${sColorChange.join(',')},${alpha})`
}
return sColor
}
export {
colorGradient,
hexToRgb,
rgbToHex,
colorToRgba
}
uni_modules/uv-ui-tools/libs/function/debounce.js
+29
View File
@@ -0,0 +1,29 @@
let timeout = null
/**
* 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
function debounce(func, wait = 500, immediate = false) {
// 清除定时器
if (timeout !== null) clearTimeout(timeout)
// 立即执行，此类情况一般用不到
if (immediate) {
const callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) typeof func === 'function' && func()
} else {
// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
timeout = setTimeout(() => {
typeof func === 'function' && func()
}, wait)
}
}
export default debounce
uni_modules/uv-ui-tools/libs/function/digit.js
+167
View File
@@ -0,0 +1,167 @@
let _boundaryCheckingState = true; // 是否进行越界检查的全局开关
/**
* 把错误的数据转正
* @private
* @example strip(0.09999999999999998)=0.1
*/
function strip(num, precision = 15) {
return +parseFloat(Number(num).toPrecision(precision));
}
/**
* Return digits length of a number
* @private
* @param {*number} num Input number
*/
function digitLength(num) {
// Get digit length of e
const eSplit = num.toString().split(/[eE]/);
const len = (eSplit[0].split('.')[1] || '').length - +(eSplit[1] || 0);
return len > 0 ? len : 0;
}
/**
* 把小数转成整数,如果是小数则放大成整数
* @private
* @param {*number} num 输入数
*/
function float2Fixed(num) {
if (num.toString().indexOf('e') === -1) {
return Number(num.toString().replace('.', ''));
}
const dLen = digitLength(num);
return dLen > 0 ? strip(Number(num) * Math.pow(10, dLen)) : Number(num);
}
/**
* 检测数字是否越界，如果越界给出提示
* @private
* @param {*number} num 输入数
*/
function checkBoundary(num) {
if (_boundaryCheckingState) {
if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
console.warn(`${num} 超出了精度限制，结果可能不正确`);
}
}
}
/**
* 把递归操作扁平迭代化
* @param {number[]} arr 要操作的数字数组
* @param {function} operation 迭代操作
* @private
*/
function iteratorOperation(arr, operation) {
const [num1, num2, ...others] = arr;
let res = operation(num1, num2);
others.forEach((num) => {
res = operation(res, num);
});
return res;
}
/**
* 高精度乘法
* @export
*/
export function times(...nums) {
if (nums.length > 2) {
return iteratorOperation(nums, times);
}
const [num1, num2] = nums;
const num1Changed = float2Fixed(num1);
const num2Changed = float2Fixed(num2);
const baseNum = digitLength(num1) + digitLength(num2);
const leftValue = num1Changed * num2Changed;
checkBoundary(leftValue);
return leftValue / Math.pow(10, baseNum);
}
/**
* 高精度加法
* @export
*/
export function plus(...nums) {
if (nums.length > 2) {
return iteratorOperation(nums, plus);
}
const [num1, num2] = nums;
// 取最大的小数位
const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
// 把小数都转为整数然后再计算
return (times(num1, baseNum) + times(num2, baseNum)) / baseNum;
}
/**
* 高精度减法
* @export
*/
export function minus(...nums) {
if (nums.length > 2) {
return iteratorOperation(nums, minus);
}
const [num1, num2] = nums;
const baseNum = Math.pow(10, Math.max(digitLength(num1), digitLength(num2)));
return (times(num1, baseNum) - times(num2, baseNum)) / baseNum;
}
/**
* 高精度除法
* @export
*/
export function divide(...nums) {
if (nums.length > 2) {
return iteratorOperation(nums, divide);
}
const [num1, num2] = nums;
const num1Changed = float2Fixed(num1);
const num2Changed = float2Fixed(num2);
checkBoundary(num1Changed);
checkBoundary(num2Changed);
// 重要，这里必须用strip进行修正
return times(num1Changed / num2Changed, strip(Math.pow(10, digitLength(num2) - digitLength(num1))));
}
/**
* 四舍五入
* @export
*/
export function round(num, ratio) {
const base = Math.pow(10, ratio);
let result = divide(Math.round(Math.abs(times(num, base))), base);
if (num < 0 && result !== 0) {
result = times(result, -1);
}
// 位数不足则补0
return result;
}
/**
* 是否进行边界检查，默认开启
* @param flag 标记开关，true 为开启，false 为关闭，默认为 true
* @export
*/
export function enableBoundaryChecking(flag = true) {
_boundaryCheckingState = flag;
}
export default {
times,
plus,
minus,
divide,
round,
enableBoundaryChecking,
};
uni_modules/uv-ui-tools/libs/function/index.js
+734
View File
@@ -0,0 +1,734 @@
import { number, empty } from './test.js'
import { round } from './digit.js'
/**
* @description 如果value小于min，取min；如果value大于max，取max
* @param {number} min
* @param {number} max
* @param {number} value
*/
function range(min = 0, max = 0, value = 0) {
return Math.max(min, Math.min(max, Number(value)))
}
/**
* @description 用于获取用户传递值的px值 如果用户传递了"xxpx"或者"xxrpx"，取出其数值部分，如果是"xxxrpx"还需要用过uni.upx2px进行转换
* @param {number|string} value 用户传递值的px值
* @param {boolean} unit
* @returns {number|string}
*/
function getPx(value, unit = false) {
if (number(value)) {
return unit ? `${value}px` : Number(value)
}
// 如果带有rpx，先取出其数值部分，再转为px值
if (/(rpx|upx)$/.test(value)) {
return unit ? `${uni.upx2px(parseInt(value))}px` : Number(uni.upx2px(parseInt(value)))
}
return unit ? `${parseInt(value)}px` : parseInt(value)
}
/**
* @description 进行延时，以达到可以简写代码的目的 比如: await uni.$uv.sleep(20)将会阻塞20ms
* @param {number} value 堵塞时间 单位ms 毫秒
* @returns {Promise} 返回promise
*/
function sleep(value = 30) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, value)
})
}
/**
* @description 运行期判断平台
* @returns {string} 返回所在平台(小写)
* @link 运行期判断平台 https://uniapp.dcloud.io/frame?id=判断平台
*/
function os() {
return uni.getSystemInfoSync().platform.toLowerCase()
}
/**
* @description 获取系统信息同步接口
* @link 获取系统信息同步接口 https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync
*/
function sys() {
return uni.getSystemInfoSync()
}
/**
* @description 取一个区间数
* @param {Number} min 最小值
* @param {Number} max 最大值
*/
function random(min, max) {
if (min >= 0 && max > 0 && max >= min) {
const gab = max - min + 1
return Math.floor(Math.random() * gab + min)
}
return 0
}
/**
* @param {Number} len uuid的长度
* @param {Boolean} firstU 将返回的首字母置为"u"
* @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制
*/
function guid(len = 32, firstU = true, radix = null) {
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
const uuid = []
radix = radix || chars.length
if (len) {
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix]
} else {
let r
// rfc4122标准要求返回的uuid中,某些位为固定的字符
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
uuid[14] = '4'
for (let i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
}
}
}
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
if (firstU) {
uuid.shift()
return `u${uuid.join('')}`
}
return uuid.join('')
}
/**
* @description 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法
this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx
这里默认值等于undefined有它的含义，因为最顶层元素(组件)的$parent就是undefined，意味着不传name
值(默认为undefined)，就是查找最顶层的$parent
* @param {string|undefined} name 父组件的参数名
*/
function $parent(name = undefined) {
let parent = this.$parent
// 通过while历遍，这里主要是为了H5需要多层解析的问题
while (parent) {
// 父组件
if (parent.$options && parent.$options.name !== name) {
// 如果组件的name不相等，继续上一级寻找
parent = parent.$parent
} else {
return parent
}
}
return false
}
/**
* @description 样式转换
* 对象转字符串，或者字符串转对象
* @param {object | string} customStyle 需要转换的目标
* @param {String} target 转换的目的，object-转为对象，string-转为字符串
* @returns {object|string}
*/
function addStyle(customStyle, target = 'object') {
// 字符串转字符串，对象转对象情形，直接返回
if (empty(customStyle) || typeof(customStyle) === 'object' && target === 'object' || target === 'string' &&
typeof(customStyle) === 'string') {
return customStyle
}
// 字符串转对象
if (target === 'object') {
// 去除字符串样式中的两端空格(中间的空格不能去掉，比如padding: 20px 0如果去掉了就错了)，空格是无用的
customStyle = trim(customStyle)
// 根据";"将字符串转为数组形式
const styleArray = customStyle.split(';')
const style = {}
// 历遍数组，拼接成对象
for (let i = 0; i < styleArray.length; i++) {
// 'font-size:20px;color:red;'，如此最后字符串有";"的话，会导致styleArray最后一个元素为空字符串，这里需要过滤
if (styleArray[i]) {
const item = styleArray[i].split(':')
style[trim(item[0])] = trim(item[1])
}
}
return style
}
// 这里为对象转字符串形式
let string = ''
for (const i in customStyle) {
// 驼峰转为中划线的形式，否则css内联样式，无法识别驼峰样式属性名
const key = i.replace(/([A-Z])/g, '-$1').toLowerCase()
string += `${key}:${customStyle[i]};`
}
// 去除两端空格
return trim(string)
}
/**
* @description 添加单位，如果有rpx，upx，%，px等单位结尾或者值为auto，直接返回，否则加上px单位结尾
* @param {string|number} value 需要添加单位的值
* @param {string} unit 添加的单位名 比如px
*/
function addUnit(value = 'auto', unit = uni?.$uv?.config?.unit ? uni?.$uv?.config?.unit : 'px') {
value = String(value)
// 用uvui内置验证规则中的number判断是否为数值
return number(value) ? `${value}${unit}` : value
}
/**
* @description 深度克隆
* @param {object} obj 需要深度克隆的对象
* @param cache 缓存
* @returns {*} 克隆后的对象或者原值（不是对象）
*/
function deepClone(obj, cache = new WeakMap()) {
if (obj === null || typeof obj !== 'object') return obj;
if (cache.has(obj)) return cache.get(obj);
let clone;
if (obj instanceof Date) {
clone = new Date(obj.getTime());
} else if (obj instanceof RegExp) {
clone = new RegExp(obj);
} else if (obj instanceof Map) {
clone = new Map(Array.from(obj, ([key, value]) => [key, deepClone(value, cache)]));
} else if (obj instanceof Set) {
clone = new Set(Array.from(obj, value => deepClone(value, cache)));
} else if (Array.isArray(obj)) {
clone = obj.map(value => deepClone(value, cache));
} else if (Object.prototype.toString.call(obj) === '[object Object]') {
clone = Object.create(Object.getPrototypeOf(obj));
cache.set(obj, clone);
for (const [key, value] of Object.entries(obj)) {
clone[key] = deepClone(value, cache);
}
} else {
clone = Object.assign({}, obj);
}
cache.set(obj, clone);
return clone;
}
/**
* @description JS对象深度合并
* @param {object} target 需要拷贝的对象
* @param {object} source 拷贝的来源对象
* @returns {object|boolean} 深度合并后的对象或者false（入参有不是对象）
*/
function deepMerge(target = {}, source = {}) {
target = deepClone(target)
if (typeof target !== 'object' || target === null || typeof source !== 'object' || source === null) return target;
const merged = Array.isArray(target) ? target.slice() : Object.assign({}, target);
for (const prop in source) {
if (!source.hasOwnProperty(prop)) continue;
const sourceValue = source[prop];
const targetValue = merged[prop];
if (sourceValue instanceof Date) {
merged[prop] = new Date(sourceValue);
} else if (sourceValue instanceof RegExp) {
merged[prop] = new RegExp(sourceValue);
} else if (sourceValue instanceof Map) {
merged[prop] = new Map(sourceValue);
} else if (sourceValue instanceof Set) {
merged[prop] = new Set(sourceValue);
} else if (typeof sourceValue === 'object' && sourceValue !== null) {
merged[prop] = deepMerge(targetValue, sourceValue);
} else {
merged[prop] = sourceValue;
}
}
return merged;
}
/**
* @description error提示
* @param {*} err 错误内容
*/
function error(err) {
// 开发环境才提示，生产环境不会提示
if (process.env.NODE_ENV === 'development') {
console.error(`uvui提示：${err}`)
}
}
/**
* @description 打乱数组
* @param {array} array 需要打乱的数组
* @returns {array} 打乱后的数组
*/
function randomArray(array = []) {
// 原理是sort排序,Math.random()产生0<= x < 1之间的数,会导致x-0.05大于或者小于0
return array.sort(() => Math.random() - 0.5)
}
// padStart 的 polyfill，因为某些机型或情况，还无法支持es7的padStart，比如电脑版的微信小程序
// 所以这里做一个兼容polyfill的兼容处理
if (!String.prototype.padStart) {
// 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
String.prototype.padStart = function(maxLength, fillString = ' ') {
if (Object.prototype.toString.call(fillString) !== '[object String]') {
throw new TypeError(
'fillString must be String'
)
}
const str = this
// 返回 String(str) 这里是为了使返回的值是字符串字面量，在控制台中更符合直觉
if (str.length >= maxLength) return String(str)
const fillLength = maxLength - str.length
let times = Math.ceil(fillLength / fillString.length)
while (times >>= 1) {
fillString += fillString
if (times === 1) {
fillString += fillString
}
}
return fillString.slice(0, fillLength) + str
}
}
/**
* @description 格式化时间
* @param {String|Number} dateTime 需要格式化的时间戳
* @param {String} fmt 格式化规则 yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 默认yyyy-mm-dd
* @returns {string} 返回格式化后的字符串
*/
function timeFormat(dateTime = null, formatStr = 'yyyy-mm-dd') {
let date
// 若传入时间为假值，则取当前时间
if (!dateTime) {
date = new Date()
}
// 若为unix秒时间戳，则转为毫秒时间戳（逻辑有点奇怪，但不敢改，以保证历史兼容）
else if (/^\d{10}$/.test(dateTime?.toString().trim())) {
date = new Date(dateTime * 1000)
}
// 若用户传入字符串格式时间戳，new Date无法解析，需做兼容
else if (typeof dateTime === 'string' && /^\d+$/.test(dateTime.trim())) {
date = new Date(Number(dateTime))
}
// 处理平台性差异，在Safari/Webkit中，new Date仅支持/作为分割符的字符串时间
// 处理 '2022-07-10 01:02:03'，跳过 '2022-07-10T01:02:03'
else if (typeof dateTime === 'string' && dateTime.includes('-') && !dateTime.includes('T')) {
date = new Date(dateTime.replace(/-/g, '/'))
}
// 其他都认为符合 RFC 2822 规范
else {
date = new Date(dateTime)
}
const timeSource = {
'y': date.getFullYear().toString(), // 年
'm': (date.getMonth() + 1).toString().padStart(2, '0'), // 月
'd': date.getDate().toString().padStart(2, '0'), // 日
'h': date.getHours().toString().padStart(2, '0'), // 时
'M': date.getMinutes().toString().padStart(2, '0'), // 分
's': date.getSeconds().toString().padStart(2, '0') // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
}
for (const key in timeSource) {
const [ret] = new RegExp(`${key}+`).exec(formatStr) || []
if (ret) {
// 年可能只需展示两位
const beginIndex = key === 'y' && ret.length === 2 ? 2 : 0
formatStr = formatStr.replace(ret, timeSource[key].slice(beginIndex))
}
}
return formatStr
}
/**
* @description 时间戳转为多久之前
* @param {String|Number} timestamp 时间戳
* @param {String|Boolean} format
* 格式化规则如果为时间格式字符串，超出一定时间范围，返回固定的时间格式；
* 如果为布尔值false，无论什么时间，都返回多久以前的格式
* @returns {string} 转化后的内容
*/
function timeFrom(timestamp = null, format = 'yyyy-mm-dd') {
if (timestamp == null) timestamp = Number(new Date())
timestamp = parseInt(timestamp)
// 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
if (timestamp.toString().length == 10) timestamp *= 1000
let timer = (new Date()).getTime() - timestamp
timer = parseInt(timer / 1000)
// 如果小于5分钟,则返回"刚刚",其他以此类推
let tips = ''
switch (true) {
case timer < 300:
tips = '刚刚'
break
case timer >= 300 && timer < 3600:
tips = `${parseInt(timer / 60)}分钟前`
break
case timer >= 3600 && timer < 86400:
tips = `${parseInt(timer / 3600)}小时前`
break
case timer >= 86400 && timer < 2592000:
tips = `${parseInt(timer / 86400)}天前`
break
default:
// 如果format为false，则无论什么时间戳，都显示xx之前
if (format === false) {
if (timer >= 2592000 && timer < 365 * 86400) {
tips = `${parseInt(timer / (86400 * 30))}个月前`
} else {
tips = `${parseInt(timer / (86400 * 365))}年前`
}
} else {
tips = timeFormat(timestamp, format)
}
}
return tips
}
/**
* @description 去除空格
* @param String str 需要去除空格的字符串
* @param String pos both(左右)|left|right|all 默认both
*/
function trim(str, pos = 'both') {
str = String(str)
if (pos == 'both') {
return str.replace(/^\s+|\s+$/g, '')
}
if (pos == 'left') {
return str.replace(/^\s*/, '')
}
if (pos == 'right') {
return str.replace(/(\s*$)/g, '')
}
if (pos == 'all') {
return str.replace(/\s+/g, '')
}
return str
}
/**
* @description 对象转url参数
* @param {object} data,对象
* @param {Boolean} isPrefix,是否自动加上"?"
* @param {string} arrayFormat 规则 indices|brackets|repeat|comma
*/
function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
const prefix = isPrefix ? '?' : ''
const _result = []
if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets'
for (const key in data) {
const value = data[key]
// 去掉为空的参数
if (['', undefined, null].indexOf(value) >= 0) {
continue
}
// 如果值为数组，另行处理
if (value.constructor === Array) {
// e.g. {ids: [1, 2, 3]}
switch (arrayFormat) {
case 'indices':
// 结果: ids[0]=1&ids[1]=2&ids[2]=3
for (let i = 0; i < value.length; i++) {
_result.push(`${key}[${i}]=${value[i]}`)
}
break
case 'brackets':
// 结果: ids[]=1&ids[]=2&ids[]=3
value.forEach((_value) => {
_result.push(`${key}[]=${_value}`)
})
break
case 'repeat':
// 结果: ids=1&ids=2&ids=3
value.forEach((_value) => {
_result.push(`${key}=${_value}`)
})
break
case 'comma':
// 结果: ids=1,2,3
let commaStr = ''
value.forEach((_value) => {
commaStr += (commaStr ? ',' : '') + _value
})
_result.push(`${key}=${commaStr}`)
break
default:
value.forEach((_value) => {
_result.push(`${key}[]=${_value}`)
})
}
} else {
_result.push(`${key}=${value}`)
}
}
return _result.length ? prefix + _result.join('&') : ''
}
/**
* 显示消息提示框
* @param {String} title 提示的内容，长度与 icon 取值有关。
* @param {Number} duration 提示的延迟时间，单位毫秒，默认：2000
*/
function toast(title, duration = 2000) {
uni.showToast({
title: String(title),
icon: 'none',
duration
})
}
/**
* @description 根据主题type值,获取对应的图标
* @param {String} type 主题名称,primary|info|error|warning|success
* @param {boolean} fill 是否使用fill填充实体的图标
*/
function type2icon(type = 'success', fill = false) {
// 如果非预置值,默认为success
if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success'
let iconName = ''
// 目前(2019-12-12),info和primary使用同一个图标
switch (type) {
case 'primary':
iconName = 'info-circle'
break
case 'info':
iconName = 'info-circle'
break
case 'error':
iconName = 'close-circle'
break
case 'warning':
iconName = 'error-circle'
break
case 'success':
iconName = 'checkmark-circle'
break
default:
iconName = 'checkmark-circle'
}
// 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
if (fill) iconName += '-fill'
return iconName
}
/**
* @description 数字格式化
* @param {number|string} number 要格式化的数字
* @param {number} decimals 保留几位小数
* @param {string} decimalPoint 小数点符号
* @param {string} thousandsSeparator 千分位符号
* @returns {string} 格式化后的数字
*/
function priceFormat(number, decimals = 0, decimalPoint = '.', thousandsSeparator = ',') {
number = (`${number}`).replace(/[^0-9+-Ee.]/g, '')
const n = !isFinite(+number) ? 0 : +number
const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
const sep = (typeof thousandsSeparator === 'undefined') ? ',' : thousandsSeparator
const dec = (typeof decimalPoint === 'undefined') ? '.' : decimalPoint
let s = ''
s = (prec ? round(n, prec) + '' : `${Math.round(n)}`).split('.')
const re = /(-?\d+)(\d{3})/
while (re.test(s[0])) {
s[0] = s[0].replace(re, `$1${sep}$2`)
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || ''
s[1] += new Array(prec - s[1].length + 1).join('0')
}
return s.join(dec)
}
/**
* @description 获取duration值
* 如果带有ms或者s直接返回，如果大于一定值，认为是ms单位，小于一定值，认为是s单位
* 比如以30位阈值，那么300大于30，可以理解为用户想要的是300ms，而不是想花300s去执行一个动画
* @param {String|number} value 比如: "1s"|"100ms"|1|100
* @param {boolean} unit 提示: 如果是false 默认返回number
* @return {string|number}
*/
function getDuration(value, unit = true) {
const valueNum = parseInt(value)
if (unit) {
if (/s$/.test(value)) return value
return value > 30 ? `${value}ms` : `${value}s`
}
if (/ms$/.test(value)) return valueNum
if (/s$/.test(value)) return valueNum > 30 ? valueNum : valueNum * 1000
return valueNum
}
/**
* @description 日期的月或日补零操作
* @param {String} value 需要补零的值
*/
function padZero(value) {
return `00${value}`.slice(-2)
}
/**
* @description 在uv-form的子组件内容发生变化，或者失去焦点时，尝试通知uv-form执行校验方法
* @param {*} instance
* @param {*} event
*/
function formValidate(instance, event) {
const formItem = $parent.call(instance, 'uv-form-item')
const form = $parent.call(instance, 'uv-form')
// 如果发生变化的input或者textarea等，其父组件中有uv-form-item或者uv-form等，就执行form的validate方法
// 同时将form-item的pros传递给form，让其进行精确对象验证
if (formItem && form) {
form.validateField(formItem.prop, () => {}, event)
}
}
/**
* @description 获取某个对象下的属性，用于通过类似'a.b.c'的形式去获取一个对象的的属性的形式
* @param {object} obj 对象
* @param {string} key 需要获取的属性字段
* @returns {*}
*/
function getProperty(obj, key) {
if (!obj) {
return
}
if (typeof key !== 'string' || key === '') {
return ''
}
if (key.indexOf('.') !== -1) {
const keys = key.split('.')
let firstObj = obj[keys[0]] || {}
for (let i = 1; i < keys.length; i++) {
if (firstObj) {
firstObj = firstObj[keys[i]]
}
}
return firstObj
}
return obj[key]
}
/**
* @description 设置对象的属性值，如果'a.b.c'的形式进行设置
* @param {object} obj 对象
* @param {string} key 需要设置的属性
* @param {string} value 设置的值
*/
function setProperty(obj, key, value) {
if (!obj) {
return
}
// 递归赋值
const inFn = function(_obj, keys, v) {
// 最后一个属性key
if (keys.length === 1) {
_obj[keys[0]] = v
return
}
// 0~length-1个key
while (keys.length > 1) {
const k = keys[0]
if (!_obj[k] || (typeof _obj[k] !== 'object')) {
_obj[k] = {}
}
const key = keys.shift()
// 自调用判断是否存在属性，不存在则自动创建对象
inFn(_obj[k], keys, v)
}
}
if (typeof key !== 'string' || key === '') {
} else if (key.indexOf('.') !== -1) { // 支持多层级赋值操作
const keys = key.split('.')
inFn(obj, keys, value)
} else {
obj[key] = value
}
}
/**
* @description 获取当前页面路径
*/
function page() {
const pages = getCurrentPages();
const route = pages[pages.length - 1]?.route;
// 某些特殊情况下(比如页面进行redirectTo时的一些时机)，pages可能为空数组
return `/${route ? route : ''}`
}
/**
* @description 获取当前路由栈实例数组
*/
function pages() {
const pages = getCurrentPages()
return pages
}
/**
* 获取页面历史栈指定层实例
* @param back {number} [0] - 0或者负数，表示获取历史栈的哪一层，0表示获取当前页面实例，-1 表示获取上一个页面实例。默认0。
*/
function getHistoryPage(back = 0) {
const pages = getCurrentPages()
const len = pages.length
return pages[len - 1 + back]
}
/**
* @description 修改uvui内置属性值
* @param {object} props 修改内置props属性
* @param {object} config 修改内置config属性
* @param {object} color 修改内置color属性
* @param {object} zIndex 修改内置zIndex属性
*/
function setConfig({
props = {},
config = {},
color = {},
zIndex = {}
}) {
const {
deepMerge,
} = uni.$uv
uni.$uv.config = deepMerge(uni.$uv.config, config)
uni.$uv.props = deepMerge(uni.$uv.props, props)
uni.$uv.color = deepMerge(uni.$uv.color, color)
uni.$uv.zIndex = deepMerge(uni.$uv.zIndex, zIndex)
}
export {
range,
getPx,
sleep,
os,
sys,
random,
guid,
$parent,
addStyle,
addUnit,
deepClone,
deepMerge,
error,
randomArray,
timeFormat,
timeFrom,
trim,
queryParams,
toast,
type2icon,
priceFormat,
getDuration,
padZero,
formValidate,
getProperty,
setProperty,
page,
pages,
getHistoryPage,
setConfig
}
uni_modules/uv-ui-tools/libs/function/platform.js
+75
View File
@@ -0,0 +1,75 @@
/**
* 注意：
* 此部分内容，在vue-cli模式下，需要在vue.config.js加入如下内容才有效：
* module.exports = {
* transpileDependencies: ['uview-v2']
* }
*/
let platform = 'none'
// #ifdef VUE3
platform = 'vue3'
// #endif
// #ifdef VUE2
platform = 'vue2'
// #endif
// #ifdef APP-PLUS
platform = 'plus'
// #endif
// #ifdef APP-NVUE
platform = 'nvue'
// #endif
// #ifdef H5
platform = 'h5'
// #endif
// #ifdef MP-WEIXIN
platform = 'weixin'
// #endif
// #ifdef MP-ALIPAY
platform = 'alipay'
// #endif
// #ifdef MP-BAIDU
platform = 'baidu'
// #endif
// #ifdef MP-TOUTIAO
platform = 'toutiao'
// #endif
// #ifdef MP-QQ
platform = 'qq'
// #endif
// #ifdef MP-KUAISHOU
platform = 'kuaishou'
// #endif
// #ifdef MP-360
platform = '360'
// #endif
// #ifdef MP
platform = 'mp'
// #endif
// #ifdef QUICKAPP-WEBVIEW
platform = 'quickapp-webview'
// #endif
// #ifdef QUICKAPP-WEBVIEW-HUAWEI
platform = 'quickapp-webview-huawei'
// #endif
// #ifdef QUICKAPP-WEBVIEW-UNION
platform = 'quckapp-webview-union'
// #endif
export default platform
uni_modules/uv-ui-tools/libs/function/test.js
+287
View File
@@ -0,0 +1,287 @@
/**
* 验证电子邮箱格式
*/
function email(value) {
return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)
}
/**
* 验证手机格式
*/
function mobile(value) {
return /^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(value)
}
/**
* 验证URL格式
*/
function url(value) {
return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/
.test(value)
}
/**
* 验证日期格式
*/
function date(value) {
if (!value) return false
// 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
if (number(value)) value = +value
return !/Invalid|NaN/.test(new Date(value).toString())
}
/**
* 验证ISO类型的日期格式
*/
function dateISO(value) {
return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
}
/**
* 验证十进制数字
*/
function number(value) {
return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
}
/**
* 验证字符串
*/
function string(value) {
return typeof value === 'string'
}
/**
* 验证整数
*/
function digits(value) {
return /^\d+$/.test(value)
}
/**
* 验证身份证号码
*/
function idCard(value) {
return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
value
)
}
/**
* 是否车牌号
*/
function carNo(value) {
// 新能源车牌
const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
// 旧车牌
const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
if (value.length === 7) {
return creg.test(value)
} if (value.length === 8) {
return xreg.test(value)
}
return false
}
/**
* 金额,只允许2位小数
*/
function amount(value) {
// 金额，只允许保留两位小数
return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value)
}
/**
* 中文
*/
function chinese(value) {
const reg = /^[\u4e00-\u9fa5]+$/gi
return reg.test(value)
}
/**
* 只能输入字母
*/
function letter(value) {
return /^[a-zA-Z]*$/.test(value)
}
/**
* 只能是字母或者数字
*/
function enOrNum(value) {
// 英文或者数字
const reg = /^[0-9a-zA-Z]*$/g
return reg.test(value)
}
/**
* 验证是否包含某个值
*/
function contains(value, param) {
return value.indexOf(param) >= 0
}
/**
* 验证一个值范围[min, max]
*/
function range(value, param) {
return value >= param[0] && value <= param[1]
}
/**
* 验证一个长度范围[min, max]
*/
function rangeLength(value, param) {
return value.length >= param[0] && value.length <= param[1]
}
/**
* 是否固定电话
*/
function landline(value) {
const reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
return reg.test(value)
}
/**
* 判断是否为空
*/
function empty(value) {
switch (typeof value) {
case 'undefined':
return true
case 'string':
if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true
break
case 'boolean':
if (!value) return true
break
case 'number':
if (value === 0 || isNaN(value)) return true
break
case 'object':
if (value === null || value.length === 0) return true
for (const i in value) {
return false
}
return true
}
return false
}
/**
* 是否json字符串
*/
function jsonString(value) {
if (typeof value === 'string') {
try {
const obj = JSON.parse(value)
if (typeof obj === 'object' && obj) {
return true
}
return false
} catch (e) {
return false
}
}
return false
}
/**
* 是否数组
*/
function array(value) {
if (typeof Array.isArray === 'function') {
return Array.isArray(value)
}
return Object.prototype.toString.call(value) === '[object Array]'
}
/**
* 是否对象
*/
function object(value) {
return Object.prototype.toString.call(value) === '[object Object]'
}
/**
* 是否短信验证码
*/
function code(value, len = 6) {
return new RegExp(`^\\d{${len}}$`).test(value)
}
/**
* 是否函数方法
* @param {Object} value
*/
function func(value) {
return typeof value === 'function'
}
/**
* 是否promise对象
* @param {Object} value
*/
function promise(value) {
return object(value) && func(value.then) && func(value.catch)
}
/** 是否图片格式
* @param {Object} value
*/
function image(value) {
const newValue = value.split('?')[0]
const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i
return IMAGE_REGEXP.test(newValue)
}
/**
* 是否视频格式
* @param {Object} value
*/
function video(value) {
const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|m3u8)/i
return VIDEO_REGEXP.test(value)
}
/**
* 是否为正则对象
* @param {Object}
* @return {Boolean}
*/
function regExp(o) {
return o && Object.prototype.toString.call(o) === '[object RegExp]'
}
export {
email,
mobile,
url,
date,
dateISO,
number,
digits,
idCard,
carNo,
amount,
chinese,
letter,
enOrNum,
contains,
range,
rangeLength,
empty,
jsonString,
landline,
object,
array,
code,
func,
promise,
video,
image,
regExp,
string
}
uni_modules/uv-ui-tools/libs/function/throttle.js
+30
View File
@@ -0,0 +1,30 @@
let timer; let
flag
/**
* 节流原理：在一定时间内，只能触发一次
*
* @param {Function} func 要执行的回调函数
* @param {Number} wait 延时的时间
* @param {Boolean} immediate 是否立即执行
* @return null
*/
function throttle(func, wait = 500, immediate = true) {
if (immediate) {
if (!flag) {
flag = true
// 如果是立即执行，则在wait毫秒内开始时执行
typeof func === 'function' && func()
timer = setTimeout(() => {
flag = false
}, wait)
}
} else if (!flag) {
flag = true
// 如果是非立即执行，则在wait毫秒内的结束处执行
timer = setTimeout(() => {
flag = false
typeof func === 'function' && func()
}, wait)
}
}
export default throttle
uni_modules/uv-ui-tools/libs/luch-request/adapters/index.js
+132
View File
@@ -0,0 +1,132 @@
import buildURL from '../helpers/buildURL'
import buildFullPath from '../core/buildFullPath'
import settle from '../core/settle'
import {isUndefined} from "../utils"
/**
* 返回可选值存在的配置
* @param {Array} keys - 可选值数组
* @param {Object} config2 - 配置
* @return {{}} - 存在的配置项
*/
const mergeKeys = (keys, config2) => {
let config = {}
keys.forEach(prop => {
if (!isUndefined(config2[prop])) {
config[prop] = config2[prop]
}
})
return config
}
export default (config) => {
return new Promise((resolve, reject) => {
let fullPath = buildURL(buildFullPath(config.baseURL, config.url), config.params, config.paramsSerializer)
const _config = {
url: fullPath,
header: config.header,
complete: (response) => {
config.fullPath = fullPath
response.config = config
response.rawData = response.data
try {
let jsonParseHandle = false
const forcedJSONParsingType = typeof config.forcedJSONParsing
if (forcedJSONParsingType === 'boolean') {
jsonParseHandle = config.forcedJSONParsing
} else if (forcedJSONParsingType === 'object') {
const includesMethod = config.forcedJSONParsing.include || []
jsonParseHandle = includesMethod.includes(config.method)
}
// 对可能字符串不是json 的情况容错
if (jsonParseHandle && typeof response.data === 'string') {
response.data = JSON.parse(response.data)
}
// eslint-disable-next-line no-empty
} catch (e) {
}
settle(resolve, reject, response)
}
}
let requestTask
if (config.method === 'UPLOAD') {
delete _config.header['content-type']
delete _config.header['Content-Type']
let otherConfig = {
// #ifdef MP-ALIPAY
fileType: config.fileType,
// #endif
filePath: config.filePath,
name: config.name
}
const optionalKeys = [
// #ifdef APP-PLUS || H5
'files',
// #endif
// #ifdef H5
'file',
// #endif
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
'timeout',
// #endif
'formData'
]
requestTask = uni.uploadFile({..._config, ...otherConfig, ...mergeKeys(optionalKeys, config)})
} else if (config.method === 'DOWNLOAD') {
const optionalKeys = [
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
'timeout',
// #endif
// #ifdef MP
'filePath',
// #endif
]
requestTask = uni.downloadFile({..._config, ...mergeKeys(optionalKeys, config)})
} else {
const optionalKeys = [
'data',
'method',
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
'timeout',
// #endif
'dataType',
// #ifndef MP-ALIPAY
'responseType',
// #endif
// #ifdef APP-PLUS
'sslVerify',
// #endif
// #ifdef H5
'withCredentials',
// #endif
// #ifdef APP-PLUS
'firstIpv4',
// #endif
// #ifdef MP-WEIXIN
'enableHttp2',
'enableQuic',
// #endif
// #ifdef MP-TOUTIAO || MP-WEIXIN
'enableCache',
// #endif
// #ifdef MP-WEIXIN
'enableHttpDNS',
'httpDNSServiceId',
'enableChunked',
'forceCellularNetwork',
// #endif
// #ifdef MP-ALIPAY
'enableCookie',
// #endif
// #ifdef MP-BAIDU
'cloudCache',
'defer'
// #endif
]
requestTask = uni.request({..._config, ...mergeKeys(optionalKeys, config)})
}
if (config.getTask) {
config.getTask(requestTask, config)
}
})
}
uni_modules/uv-ui-tools/libs/luch-request/core/InterceptorManager.js
+51
View File
@@ -0,0 +1,51 @@
'use strict'
function InterceptorManager() {
this.handlers = []
}
/**
* Add a new interceptor to the stack
*
* @param {Function} fulfilled The function to handle `then` for a `Promise`
* @param {Function} rejected The function to handle `reject` for a `Promise`
*
* @return {Number} An ID used to remove interceptor later
*/
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
})
return this.handlers.length - 1
}
/**
* Remove an interceptor from the stack
*
* @param {Number} id The ID that was returned by `use`
*/
InterceptorManager.prototype.eject = function eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null
}
}
/**
* Iterate over all the registered interceptors
*
* This method is particularly useful for skipping over any
* interceptors that may have become `null` calling `eject`.
*
* @param {Function} fn The function to call for each interceptor
*/
InterceptorManager.prototype.forEach = function forEach(fn) {
this.handlers.forEach(h => {
if (h !== null) {
fn(h)
}
})
}
export default InterceptorManager
uni_modules/uv-ui-tools/libs/luch-request/core/Request.js
+201
View File
@@ -0,0 +1,201 @@
/**
* @Class Request
* @description luch-request http请求插件
* @Author lu-ch
* @Email webwork.s@qq.com
* 文档: https://www.quanzhan.co/luch-request/
* github: https://github.com/lei-mu/luch-request
* DCloud: http://ext.dcloud.net.cn/plugin?id=392
*/
import dispatchRequest from './dispatchRequest'
import InterceptorManager from './InterceptorManager'
import mergeConfig from './mergeConfig'
import defaults from './defaults'
import { isPlainObject } from '../utils'
import clone from '../utils/clone'
export default class Request {
/**
* @param {Object} arg - 全局配置
* @param {String} arg.baseURL - 全局根路径
* @param {Object} arg.header - 全局header
* @param {String} arg.method = [GET|POST|PUT|DELETE|CONNECT|HEAD|OPTIONS|TRACE] - 全局默认请求方式
* @param {String} arg.dataType = [json] - 全局默认的dataType
* @param {String} arg.responseType = [text|arraybuffer] - 全局默认的responseType。支付宝小程序不支持
* @param {Object} arg.custom - 全局默认的自定义参数
* @param {Number} arg.timeout - 全局默认的超时时间，单位 ms。默认60000。H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
* @param {Boolean} arg.sslVerify - 全局默认的是否验证 ssl 证书。默认true.仅App安卓端支持（HBuilderX 2.3.3+）
* @param {Boolean} arg.withCredentials - 全局默认的跨域请求时是否携带凭证（cookies）。默认false。仅H5支持（HBuilderX 2.6.15+）
* @param {Boolean} arg.firstIpv4 - 全DNS解析时优先使用ipv4。默认false。仅 App-Android 支持 (HBuilderX 2.8.0+)
* @param {Function(statusCode):Boolean} arg.validateStatus - 全局默认的自定义验证器。默认statusCode >= 200 && statusCode < 300
*/
constructor(arg = {}) {
if (!isPlainObject(arg)) {
arg = {}
console.warn('设置全局参数必须接收一个Object')
}
this.config = clone({...defaults, ...arg})
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
}
}
/**
* @Function
* @param {Request~setConfigCallback} f - 设置全局默认配置
*/
setConfig(f) {
this.config = f(this.config)
}
middleware(config) {
config = mergeConfig(this.config, config)
let chain = [dispatchRequest, undefined]
let promise = Promise.resolve(config)
this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected)
})
this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected)
})
while (chain.length) {
promise = promise.then(chain.shift(), chain.shift())
}
return promise
}
/**
* @Function
* @param {Object} config - 请求配置项
* @prop {String} options.url - 请求路径
* @prop {Object} options.data - 请求参数
* @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
* @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse
* @prop {Object} [options.header = config.header] - 请求header
* @prop {Object} [options.method = config.method] - 请求方法
* @returns {Promise<unknown>}
*/
request(config = {}) {
return this.middleware(config)
}
get(url, options = {}) {
return this.middleware({
url,
method: 'GET',
...options
})
}
post(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'POST',
...options
})
}
// #ifndef MP-ALIPAY || MP-KUAISHOU || MP-JD
put(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'PUT',
...options
})
}
// #endif
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
delete(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'DELETE',
...options
})
}
// #endif
// #ifdef H5 || MP-WEIXIN
connect(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'CONNECT',
...options
})
}
// #endif
// #ifdef H5 || MP-WEIXIN || MP-BAIDU
head(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'HEAD',
...options
})
}
// #endif
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
options(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'OPTIONS',
...options
})
}
// #endif
// #ifdef H5 || MP-WEIXIN
trace(url, data, options = {}) {
return this.middleware({
url,
data,
method: 'TRACE',
...options
})
}
// #endif
upload(url, config = {}) {
config.url = url
config.method = 'UPLOAD'
return this.middleware(config)
}
download(url, config = {}) {
config.url = url
config.method = 'DOWNLOAD'
return this.middleware(config)
}
get version () {
return '3.1.0'
}
}
/**
* setConfig回调
* @return {Object} - 返回操作后的config
* @callback Request~setConfigCallback
* @param {Object} config - 全局默认config
*/
uni_modules/uv-ui-tools/libs/luch-request/core/buildFullPath.js
+20
View File
@@ -0,0 +1,20 @@
'use strict'
import isAbsoluteURL from '../helpers/isAbsoluteURL'
import combineURLs from '../helpers/combineURLs'
/**
* Creates a new URL by combining the baseURL with the requestedURL,
* only when the requestedURL is not already an absolute URL.
* If the requestURL is absolute, this function returns the requestedURL untouched.
*
* @param {string} baseURL The base URL
* @param {string} requestedURL Absolute or relative URL to combine
* @returns {string} The combined full path
*/
export default function buildFullPath(baseURL, requestedURL) {
if (baseURL && !isAbsoluteURL(requestedURL)) {
return combineURLs(baseURL, requestedURL)
}
return requestedURL
}
uni_modules/uv-ui-tools/libs/luch-request/core/defaults.js
+33
View File
@@ -0,0 +1,33 @@
/**
* 默认的全局配置
*/
export default {
baseURL: '',
header: {},
method: 'GET',
dataType: 'json',
paramsSerializer: null,
// #ifndef MP-ALIPAY
responseType: 'text',
// #endif
custom: {},
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
timeout: 60000,
// #endif
// #ifdef APP-PLUS
sslVerify: true,
// #endif
// #ifdef H5
withCredentials: false,
// #endif
// #ifdef APP-PLUS
firstIpv4: false,
// #endif
validateStatus: function validateStatus(status) {
return status >= 200 && status < 300
},
// 是否尝试将响应数据json化
forcedJSONParsing: true
}
uni_modules/uv-ui-tools/libs/luch-request/core/dispatchRequest.js
+6
View File
@@ -0,0 +1,6 @@
import adapter from '../adapters/index'
export default (config) => {
return adapter(config)
}
uni_modules/uv-ui-tools/libs/luch-request/core/mergeConfig.js
+126
View File
@@ -0,0 +1,126 @@
import {deepMerge, isUndefined} from '../utils'
/**
* 合并局部配置优先的配置，如果局部有该配置项则用局部，如果全局有该配置项则用全局
* @param {Array} keys - 配置项
* @param {Object} globalsConfig - 当前的全局配置
* @param {Object} config2 - 局部配置
* @return {{}}
*/
const mergeKeys = (keys, globalsConfig, config2) => {
let config = {}
keys.forEach(prop => {
if (!isUndefined(config2[prop])) {
config[prop] = config2[prop]
} else if (!isUndefined(globalsConfig[prop])) {
config[prop] = globalsConfig[prop]
}
})
return config
}
/**
*
* @param globalsConfig - 当前实例的全局配置
* @param config2 - 当前的局部配置
* @return - 合并后的配置
*/
export default (globalsConfig, config2 = {}) => {
const method = config2.method || globalsConfig.method || 'GET'
let config = {
baseURL: config2.baseURL || globalsConfig.baseURL || '',
method: method,
url: config2.url || '',
params: config2.params || {},
custom: {...(globalsConfig.custom || {}), ...(config2.custom || {})},
header: deepMerge(globalsConfig.header || {}, config2.header || {})
}
const defaultToConfig2Keys = ['getTask', 'validateStatus', 'paramsSerializer', 'forcedJSONParsing']
config = {...config, ...mergeKeys(defaultToConfig2Keys, globalsConfig, config2)}
// eslint-disable-next-line no-empty
if (method === 'DOWNLOAD') {
const downloadKeys = [
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
'timeout',
// #endif
// #ifdef MP
'filePath',
// #endif
]
config = {...config, ...mergeKeys(downloadKeys, globalsConfig, config2)}
} else if (method === 'UPLOAD') {
delete config.header['content-type']
delete config.header['Content-Type']
const uploadKeys = [
// #ifdef APP-PLUS || H5
'files',
// #endif
// #ifdef MP-ALIPAY
'fileType',
// #endif
// #ifdef H5
'file',
// #endif
'filePath',
'name',
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
'timeout',
// #endif
'formData',
]
uploadKeys.forEach(prop => {
if (!isUndefined(config2[prop])) {
config[prop] = config2[prop]
}
})
// #ifdef H5 || APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU
if (isUndefined(config.timeout) && !isUndefined(globalsConfig.timeout)) {
config['timeout'] = globalsConfig['timeout']
}
// #endif
} else {
const defaultsKeys = [
'data',
// #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
'timeout',
// #endif
'dataType',
// #ifndef MP-ALIPAY
'responseType',
// #endif
// #ifdef APP-PLUS
'sslVerify',
// #endif
// #ifdef H5
'withCredentials',
// #endif
// #ifdef APP-PLUS
'firstIpv4',
// #endif
// #ifdef MP-WEIXIN
'enableHttp2',
'enableQuic',
// #endif
// #ifdef MP-TOUTIAO || MP-WEIXIN
'enableCache',
// #endif
// #ifdef MP-WEIXIN
'enableHttpDNS',
'httpDNSServiceId',
'enableChunked',
'forceCellularNetwork',
// #endif
// #ifdef MP-ALIPAY
'enableCookie',
// #endif
// #ifdef MP-BAIDU
'cloudCache',
'defer'
// #endif
]
config = {...config, ...mergeKeys(defaultsKeys, globalsConfig, config2)}
}
return config
}
uni_modules/uv-ui-tools/libs/luch-request/core/settle.js
+16
View File
@@ -0,0 +1,16 @@
/**
* Resolve or reject a Promise based on response status.
*
* @param {Function} resolve A function that resolves the promise.
* @param {Function} reject A function that rejects the promise.
* @param {object} response The response.
*/
export default function settle(resolve, reject, response) {
const validateStatus = response.config.validateStatus
const status = response.statusCode
if (status && (!validateStatus || validateStatus(status))) {
resolve(response)
} else {
reject(response)
}
}
uni_modules/uv-ui-tools/libs/luch-request/helpers/buildURL.js
+64
View File
@@ -0,0 +1,64 @@
'use strict'
import * as utils from './../utils'
function encode(val) {
return encodeURIComponent(val).replace(/%40/gi, '@').replace(/%3A/gi, ':').replace(/%24/g, '$').replace(/%2C/gi, ',').replace(/%20/g, '+').replace(/%5B/gi, '[').replace(/%5D/gi, ']')
}
/**
* Build a URL by appending params to the end
*
* @param {string} url The base of the url (e.g., http://www.google.com)
* @param {object} [params] The params to be appended
* @returns {string} The formatted url
*/
export default function buildURL(url, params, paramsSerializer) {
/*eslint no-param-reassign:0*/
if (!params) {
return url
}
var serializedParams
if (paramsSerializer) {
serializedParams = paramsSerializer(params)
} else if (utils.isURLSearchParams(params)) {
serializedParams = params.toString()
} else {
var parts = []
utils.forEach(params, function serialize(val, key) {
if (val === null || typeof val === 'undefined') {
return
}
if (utils.isArray(val)) {
key = key + '[]'
} else {
val = [val]
}
utils.forEach(val, function parseValue(v) {
if (utils.isDate(v)) {
v = v.toISOString()
} else if (utils.isObject(v)) {
v = JSON.stringify(v)
}
parts.push(encode(key) + '=' + encode(v))
})
})
serializedParams = parts.join('&')
}
if (serializedParams) {
var hashmarkIndex = url.indexOf('#')
if (hashmarkIndex !== -1) {
url = url.slice(0, hashmarkIndex)
}
url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams
}
return url
}
uni_modules/uv-ui-tools/libs/luch-request/helpers/combineURLs.js
+14
View File
@@ -0,0 +1,14 @@
'use strict'
/**
* Creates a new URL by combining the specified URLs
*
* @param {string} baseURL The base URL
* @param {string} relativeURL The relative URL
* @returns {string} The combined URL
*/
export default function combineURLs(baseURL, relativeURL) {
return relativeURL
? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
: baseURL
}
uni_modules/uv-ui-tools/libs/luch-request/helpers/isAbsoluteURL.js
+14
View File
@@ -0,0 +1,14 @@
'use strict'
/**
* Determines whether the specified URL is absolute
*
* @param {string} url The URL to test
* @returns {boolean} True if the specified URL is absolute, otherwise false
*/
export default function isAbsoluteURL(url) {
// A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
// RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
// by any combination of letters, digits, plus, period, or hyphen.
return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)
}
uni_modules/uv-ui-tools/libs/luch-request/index.d.ts
Vendored
+197
View File
@@ -0,0 +1,197 @@
export type HttpTask = UniApp.RequestTask | UniApp.UploadTask | UniApp.DownloadTask;
export type HttpRequestTask = UniApp.RequestTask;
export type HttpUploadTask = UniApp.UploadTask;
export type HttpDownloadTask = UniApp.DownloadTask;
export type HttpMethod =
"GET"
| "POST"
| "PUT"
| "DELETE"
| "CONNECT"
| "HEAD"
| "OPTIONS"
| "TRACE"
| "UPLOAD"
| "DOWNLOAD";
export type HttpRequestHeader = Record<string, string>;
export type HttpParams = Record<string, any>;
export type HttpData = Record<string, any>;
export type HttpResponseType = 'arraybuffer' | 'text';
export type HttpCustom = Record<string, any>;
export type HttpFileType = 'image' | 'video' | 'audio';
export type HttpFormData = Record<string, any>;
export type HttpResponseHeader = Record<string, string> & {
"set-cookie"?: string[]
};
export interface HttpRequestConfig<T = HttpTask> {
/** @desc 请求服务器接口地址 */
url?: string;
/** @desc 请求方式，默认为 GET */
method?: HttpMethod;
/** @desc 请求基地址 */
baseURL?: string;
/** @desc 请求头信息，不能设置 Referer，App、H5 端会自动带上 cookie，且 H5 端不可手动修改 */
header?: HttpRequestHeader;
/** @desc 请求查询参数，自动拼接为查询字符串 */
params?: HttpParams;
/** @desc 请求体参数 */
data?: HttpData;
/** @desc 超时时间，单位 ms，默认为 60000，仅 H5 (HBuilderX 2.9.9+)、APP (HBuilderX 2.9.9+)、微信小程序 (2.10.0)、支付宝小程序支持 */
timeout?: number;
/** @desc 跨域请求时是否携带凭证 (cookies)，默认为 false，仅 H5 (HBuilderX 2.6.15+) 支持 */
withCredentials?: boolean;
/** @desc 设置响应的数据类型，支付宝小程序不支持 */
responseType?: HttpResponseType;
/** @desc 全局自定义验证器 */
validateStatus?: ((statusCode: number) => boolean) | null;
/** params 参数自定义处理 */
paramsSerializer?: (params: AnyObject) => string | void;
/** @desc 默认为 json，如果设为 json，会尝试对返回的数据做一次 JSON.parse */
dataType?: string;
/** @desc DNS 解析时是否优先使用 ipv4，默认为 false，仅 App-Android (HBuilderX 2.8.0+) 支持 */
firstIpv4?: boolean;
/** @desc 是否验证 SSL 证书，默认为 true，仅 App-Android (HBuilderX 2.3.3+) 支持 */
sslVerify?: boolean;
/** @desc 开启 http2;微信小程序 */
enableHttp2?: boolean;
/** @desc 开启 quic；微信小程序 */
enableQuic?: boolean;
/** @desc 开启 cache;微信小程序、字节跳动小程序 2.31.0+ */
enableCache?: boolean;
/** @desc 开启 httpDNS;微信小程序 */
enableHttpDNS?: boolean;
/** @desc httpDNS 服务商；微信小程序 */
httpDNSServiceId?: string;
/** @desc 开启 transfer-encoding chunked;微信小程序 */
enableChunked?: boolean;
/** @desc wifi下使用移动网络发送请求;微信小程序 */
forceCellularNetwork?: boolean;
/** @desc 开启后可在headers中编辑cookie;支付宝小程序 10.2.33+ */
enableCookie?: boolean;
/** @desc 是否开启云加速;百度小程序 3.310.11+ */
cloudCache?: boolean | object;
/** @desc 控制当前请求是否延时至首屏内容渲染后发送；百度小程序 3.310.11+ */
defer?: boolean;
/** @desc 自定义参数 */
custom?: HttpCustom;
/** @desc 返回当前请求的 task 和 options，不要在这里修改 options */
getTask?: (task: T, options: HttpRequestConfig<T>) => void;
/** @desc 需要上传的文件列表，使用 files 时，filePath 和 name 不生效，仅支持 App、H5 (2.6.15+) */
files?: { name?: string; file?: File; uri: string; }[];
/** @desc 文件类型，仅支付宝小程序支持且为必填项 */
fileType?: HttpFileType;
/** @desc 要上传的文件对象，仅 H5 (2.6.15+) 支持 */
file?: File;
/** @desc 要上传文件资源的路径，使用 files 时，filePath 和 name 不生效 */
filePath?: string;
/** @desc 文件对应的 key，开发者在服务器端通过这个 key 可以获取到文件二进制内容，使用 files 时，filePath 和 name 不生效 */
name?: string;
/** @desc 请求中其他额外的 form data */
formData?: HttpFormData;
}
export interface HttpResponse<T = any, D = HttpTask> {
data: T;
statusCode: number;
header: HttpResponseHeader;
config: HttpRequestConfig<D>;
cookies: string[];
errMsg: string;
rawData: any;
}
export interface HttpUploadResponse<T = any, D = HttpTask> {
data: T;
statusCode: number;
config: HttpRequestConfig<D>;
errMsg: string;
rawData: any;
}
export interface HttpDownloadResponse extends HttpResponse {
tempFilePath: string;
apFilePath?: string;
filePath?: string;
fileContent?: string;
}
export interface HttpError<T = any, D = HttpTask> {
data?: T;
statusCode?: number;
header?: HttpResponseHeader;
config: HttpRequestConfig<D>;
cookies?: string[];
errMsg: string;
}
export interface HttpPromise<T = any> extends Promise<HttpResponse<T>> {
}
export interface HttpInterceptorManager<V, E = V> {
use(onFulfilled?: (value: V) => V | Promise<V>, onRejected?: (error: E) => T | Promise<E>): void;
eject(id: number): void;
}
export abstract class HttpRequestAbstract {
constructor(config?: HttpRequestConfig);
interceptors: {
request: HttpInterceptorManager<HttpRequestConfig>;
response: HttpInterceptorManager<HttpResponse, HttpError>;
}
request<T = any, R = HttpResponse<T>, D = HttpRequestTask>(config: HttpRequestConfig<D>): Promise<R>;
get<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, config?: HttpRequestConfig<D>): Promise<R>;
delete<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
head<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
options<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
post<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
put<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
config: HttpRequestConfig;
setConfig<D = HttpTask>(onSend: (config: HttpRequestConfig<D>) => HttpRequestConfig<D>): void;
connect<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
trace<T = any, R = HttpResponse<T>, D = HttpRequestTask>(url: string, data?: HttpData, config?: HttpRequestConfig<D>): Promise<R>;
upload<T = any, R = HttpUploadResponse<T>, D = HttpUploadTask>(url: string, config?: HttpRequestConfig<D>): Promise<R>;
download<T = any, R = HttpDownloadResponse<T>, D = HttpDownloadTask>(url: string, config?: HttpRequestConfig<D>): Promise<R>;
middleware<T = any, R = HttpResponse<T>, D = HttpTask>(config: HttpRequestConfig<D>): Promise<R>;
}
declare class HttpRequest extends HttpRequestAbstract {
}
export default HttpRequest;
uni_modules/uv-ui-tools/libs/luch-request/index.js
+2
View File
@@ -0,0 +1,2 @@
import Request from './core/Request'
export default Request
uni_modules/uv-ui-tools/libs/luch-request/utils.js
+135
View File
@@ -0,0 +1,135 @@
'use strict'
// utils is a library of generic helper functions non-specific to axios
var toString = Object.prototype.toString
/**
* Determine if a value is an Array
*
* @param {Object} val The value to test
* @returns {boolean} True if value is an Array, otherwise false
*/
export function isArray (val) {
return toString.call(val) === '[object Array]'
}
/**
* Determine if a value is an Object
*
* @param {Object} val The value to test
* @returns {boolean} True if value is an Object, otherwise false
*/
export function isObject (val) {
return val !== null && typeof val === 'object'
}
/**
* Determine if a value is a Date
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a Date, otherwise false
*/
export function isDate (val) {
return toString.call(val) === '[object Date]'
}
/**
* Determine if a value is a URLSearchParams object
*
* @param {Object} val The value to test
* @returns {boolean} True if value is a URLSearchParams object, otherwise false
*/
export function isURLSearchParams (val) {
return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams
}
/**
* Iterate over an Array or an Object invoking a function for each item.
*
* If `obj` is an Array callback will be called passing
* the value, index, and complete array for each item.
*
* If 'obj' is an Object callback will be called passing
* the value, key, and complete object for each property.
*
* @param {Object|Array} obj The object to iterate
* @param {Function} fn The callback to invoke for each item
*/
export function forEach (obj, fn) {
// Don't bother if no value provided
if (obj === null || typeof obj === 'undefined') {
return
}
// Force an array if not already something iterable
if (typeof obj !== 'object') {
/*eslint no-param-reassign:0*/
obj = [obj]
}
if (isArray(obj)) {
// Iterate over array values
for (var i = 0, l = obj.length; i < l; i++) {
fn.call(null, obj[i], i, obj)
}
} else {
// Iterate over object keys
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
fn.call(null, obj[key], key, obj)
}
}
}
}
/**
* 是否为boolean 值
* @param val
* @returns {boolean}
*/
export function isBoolean(val) {
return typeof val === 'boolean'
}
/**
* 是否为真正的对象{} new Object
* @param {any} obj - 检测的对象
* @returns {boolean}
*/
export function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === '[object Object]'
}
/**
* Function equal to merge with the difference being that no reference
* to original objects is kept.
*
* @see merge
* @param {Object} obj1 Object to merge
* @returns {Object} Result of all merge properties
*/
export function deepMerge(/* obj1, obj2, obj3, ... */) {
let result = {}
function assignValue(val, key) {
if (typeof result[key] === 'object' && typeof val === 'object') {
result[key] = deepMerge(result[key], val)
} else if (typeof val === 'object') {
result[key] = deepMerge({}, val)
} else {
result[key] = val
}
}
for (let i = 0, l = arguments.length; i < l; i++) {
forEach(arguments[i], assignValue)
}
return result
}
export function isUndefined (val) {
return typeof val === 'undefined'
}
uni_modules/uv-ui-tools/libs/luch-request/utils/clone.js
+264
View File
@@ -0,0 +1,264 @@
/* eslint-disable */
var clone = (function() {
'use strict';
function _instanceof(obj, type) {
return type != null && obj instanceof type;
}
var nativeMap;
try {
nativeMap = Map;
} catch(_) {
// maybe a reference error because no `Map`. Give it a dummy value that no
// value will ever be an instanceof.
nativeMap = function() {};
}
var nativeSet;
try {
nativeSet = Set;
} catch(_) {
nativeSet = function() {};
}
var nativePromise;
try {
nativePromise = Promise;
} catch(_) {
nativePromise = function() {};
}
/**
* Clones (copies) an Object using deep copying.
*
* This function supports circular references by default, but if you are certain
* there are no circular references in your object, you can save some CPU time
* by calling clone(obj, false).
*
* Caution: if `circular` is false and `parent` contains circular references,
* your program may enter an infinite loop and crash.
*
* @param `parent` - the object to be cloned
* @param `circular` - set to true if the object to be cloned may contain
* circular references. (optional - true by default)
* @param `depth` - set to a number if the object is only to be cloned to
* a particular depth. (optional - defaults to Infinity)
* @param `prototype` - sets the prototype to be used when cloning an object.
* (optional - defaults to parent prototype).
* @param `includeNonEnumerable` - set to true if the non-enumerable properties
* should be cloned as well. Non-enumerable properties on the prototype
* chain will be ignored. (optional - false by default)
*/
function clone(parent, circular, depth, prototype, includeNonEnumerable) {
if (typeof circular === 'object') {
depth = circular.depth;
prototype = circular.prototype;
includeNonEnumerable = circular.includeNonEnumerable;
circular = circular.circular;
}
// maintain two arrays for circular references, where corresponding parents
// and children have the same index
var allParents = [];
var allChildren = [];
var useBuffer = typeof Buffer != 'undefined';
if (typeof circular == 'undefined')
circular = true;
if (typeof depth == 'undefined')
depth = Infinity;
// recurse this function so we don't reset allParents and allChildren
function _clone(parent, depth) {
// cloning null always returns null
if (parent === null)
return null;
if (depth === 0)
return parent;
var child;
var proto;
if (typeof parent != 'object') {
return parent;
}
if (_instanceof(parent, nativeMap)) {
child = new nativeMap();
} else if (_instanceof(parent, nativeSet)) {
child = new nativeSet();
} else if (_instanceof(parent, nativePromise)) {
child = new nativePromise(function (resolve, reject) {
parent.then(function(value) {
resolve(_clone(value, depth - 1));
}, function(err) {
reject(_clone(err, depth - 1));
});
});
} else if (clone.__isArray(parent)) {
child = [];
} else if (clone.__isRegExp(parent)) {
child = new RegExp(parent.source, __getRegExpFlags(parent));
if (parent.lastIndex) child.lastIndex = parent.lastIndex;
} else if (clone.__isDate(parent)) {
child = new Date(parent.getTime());
} else if (useBuffer && Buffer.isBuffer(parent)) {
if (Buffer.from) {
// Node.js >= 5.10.0
child = Buffer.from(parent);
} else {
// Older Node.js versions
child = new Buffer(parent.length);
parent.copy(child);
}
return child;
} else if (_instanceof(parent, Error)) {
child = Object.create(parent);
} else {
if (typeof prototype == 'undefined') {
proto = Object.getPrototypeOf(parent);
child = Object.create(proto);
}
else {
child = Object.create(prototype);
proto = prototype;
}
}
if (circular) {
var index = allParents.indexOf(parent);
if (index != -1) {
return allChildren[index];
}
allParents.push(parent);
allChildren.push(child);
}
if (_instanceof(parent, nativeMap)) {
parent.forEach(function(value, key) {
var keyChild = _clone(key, depth - 1);
var valueChild = _clone(value, depth - 1);
child.set(keyChild, valueChild);
});
}
if (_instanceof(parent, nativeSet)) {
parent.forEach(function(value) {
var entryChild = _clone(value, depth - 1);
child.add(entryChild);
});
}
for (var i in parent) {
var attrs = Object.getOwnPropertyDescriptor(parent, i);
if (attrs) {
child[i] = _clone(parent[i], depth - 1);
}
try {
var objProperty = Object.getOwnPropertyDescriptor(parent, i);
if (objProperty.set === 'undefined') {
// no setter defined. Skip cloning this property
continue;
}
child[i] = _clone(parent[i], depth - 1);
} catch(e){
if (e instanceof TypeError) {
// when in strict mode, TypeError will be thrown if child[i] property only has a getter
// we can't do anything about this, other than inform the user that this property cannot be set.
continue
} else if (e instanceof ReferenceError) {
//this may happen in non strict mode
continue
}
}
}
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(parent);
for (var i = 0; i < symbols.length; i++) {
// Don't need to worry about cloning a symbol because it is a primitive,
// like a number or string.
var symbol = symbols[i];
var descriptor = Object.getOwnPropertyDescriptor(parent, symbol);
if (descriptor && !descriptor.enumerable && !includeNonEnumerable) {
continue;
}
child[symbol] = _clone(parent[symbol], depth - 1);
Object.defineProperty(child, symbol, descriptor);
}
}
if (includeNonEnumerable) {
var allPropertyNames = Object.getOwnPropertyNames(parent);
for (var i = 0; i < allPropertyNames.length; i++) {
var propertyName = allPropertyNames[i];
var descriptor = Object.getOwnPropertyDescriptor(parent, propertyName);
if (descriptor && descriptor.enumerable) {
continue;
}
child[propertyName] = _clone(parent[propertyName], depth - 1);
Object.defineProperty(child, propertyName, descriptor);
}
}
return child;
}
return _clone(parent, depth);
}
/**
* Simple flat clone using prototype, accepts only objects, usefull for property
* override on FLAT configuration object (no nested props).
*
* USE WITH CAUTION! This may not behave as you wish if you do not know how this
* works.
*/
clone.clonePrototype = function clonePrototype(parent) {
if (parent === null)
return null;
var c = function () {};
c.prototype = parent;
return new c();
};
// private utility functions
function __objToStr(o) {
return Object.prototype.toString.call(o);
}
clone.__objToStr = __objToStr;
function __isDate(o) {
return typeof o === 'object' && __objToStr(o) === '[object Date]';
}
clone.__isDate = __isDate;
function __isArray(o) {
return typeof o === 'object' && __objToStr(o) === '[object Array]';
}
clone.__isArray = __isArray;
function __isRegExp(o) {
return typeof o === 'object' && __objToStr(o) === '[object RegExp]';
}
clone.__isRegExp = __isRegExp;
function __getRegExpFlags(re) {
var flags = '';
if (re.global) flags += 'g';
if (re.ignoreCase) flags += 'i';
if (re.multiline) flags += 'm';
return flags;
}
clone.__getRegExpFlags = __getRegExpFlags;
return clone;
})();
export default clone
uni_modules/uv-ui-tools/libs/mixin/button.js
+13
View File
@@ -0,0 +1,13 @@
export default {
props: {
lang: String,
sessionFrom: String,
sendMessageTitle: String,
sendMessagePath: String,
sendMessageImg: String,
showMessageCard: Boolean,
appParameter: String,
formType: String,
openType: String
}
}
uni_modules/uv-ui-tools/libs/mixin/mixin.js
+172
View File
@@ -0,0 +1,172 @@
import * as index from '../function/index.js';
import * as test from '../function/test.js';
import route from '../util/route.js';
import debounce from '../function/debounce.js';
import throttle from '../function/throttle.js';
export default {
// 定义每个组件都可能需要用到的外部样式以及类名
props: {
// 每个组件都有的父组件传递的样式，可以为字符串或者对象形式
customStyle: {
type: [Object, String],
default: () => ({})
},
customClass: {
type: String,
default: ''
},
// 跳转的页面路径
url: {
type: String,
default: ''
},
// 页面跳转的类型
linkType: {
type: String,
default: 'navigateTo'
}
},
data() {
return {}
},
onLoad() {
// getRect挂载到$uv上，因为这方法需要使用in(this)，所以无法把它独立成一个单独的文件导出
this.$uv.getRect = this.$uvGetRect
},
created() {
// 组件当中，只有created声明周期，为了能在组件使用，故也在created中将方法挂载到$uv
this.$uv.getRect = this.$uvGetRect
},
computed: {
$uv() {
return {
...index,
test,
route,
debounce,
throttle,
unit: uni?.$uv?.config?.unit
}
},
/**
* 生成bem规则类名
* 由于微信小程序，H5，nvue之间绑定class的差异，无法通过:class="[bem()]"的形式进行同用
* 故采用如下折中做法，最后返回的是数组（一般平台）或字符串（支付宝和字节跳动平台），类似['a', 'b', 'c']或'a b c'的形式
* @param {String} name 组件名称
* @param {Array} fixed 一直会存在的类名
* @param {Array} change 会根据变量值为true或者false而出现或者隐藏的类名
* @returns {Array|string}
*/
bem() {
return function(name, fixed, change) {
// 类名前缀
const prefix = `uv-${name}--`
const classes = {}
if (fixed) {
fixed.map((item) => {
// 这里的类名，会一直存在
classes[prefix + this[item]] = true
})
}
if (change) {
change.map((item) => {
// 这里的类名，会根据this[item]的值为true或者false，而进行添加或者移除某一个类
this[item] ? (classes[prefix + item] = this[item]) : (delete classes[prefix + item])
})
}
return Object.keys(classes)
// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
// #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK || MP-BAIDU
.join(' ')
// #endif
}
}
},
methods: {
// 跳转某一个页面
openPage(urlKey = 'url') {
const url = this[urlKey]
if (url) {
// 执行类似uni.navigateTo的方法
uni[this.linkType]({
url
})
}
},
// 查询节点信息
// 目前此方法在支付宝小程序中无法获取组件跟接点的尺寸，为支付宝的bug(2020-07-21)
// 解决办法为在组件根部再套一个没有任何作用的view元素
$uvGetRect(selector, all) {
return new Promise((resolve) => {
uni.createSelectorQuery()
.in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect)
}
if (!all && rect) {
resolve(rect)
}
})
.exec()
})
},
getParentData(parentName = '') {
// 避免在created中去定义parent变量
if (!this.parent) this.parent = {}
// 这里的本质原理是，通过获取父组件实例(也即类似uv-radio的父组件uv-radio-group的this)
// 将父组件this中对应的参数，赋值给本组件(uv-radio的this)的parentData对象中对应的属性
// 之所以需要这么做，是因为所有端中，头条小程序不支持通过this.parent.xxx去监听父组件参数的变化
// 此处并不会自动更新子组件的数据，而是依赖父组件uv-radio-group去监听data的变化，手动调用更新子组件的方法去重新获取
this.parent = this.$uv.$parent.call(this, parentName)
if (this.parent.children) {
// 如果父组件的children不存在本组件的实例，才将本实例添加到父组件的children中
this.parent.children.indexOf(this) === -1 && this.parent.children.push(this)
}
if (this.parent && this.parentData) {
// 历遍parentData中的属性，将parent中的同名属性赋值给parentData
Object.keys(this.parentData).map((key) => {
this.parentData[key] = this.parent[key]
})
}
},
// 阻止事件冒泡
preventEvent(e) {
e && typeof(e.stopPropagation) === 'function' && e.stopPropagation()
},
// 空操作
noop(e) {
this.preventEvent(e)
}
},
onReachBottom() {
uni.$emit('uvOnReachBottom')
},
beforeDestroy() {
// 判断当前页面是否存在parent和chldren，一般在checkbox和checkbox-group父子联动的场景会有此情况
// 组件销毁时，移除子组件在父组件children数组中的实例，释放资源，避免数据混乱
if (this.parent && test.array(this.parent.children)) {
// 组件销毁时，移除父组件中的children数组中对应的实例
const childrenList = this.parent.children
childrenList.map((child, index) => {
// 如果相等，则移除
if (child === this) {
childrenList.splice(index, 1)
}
})
}
},
// 兼容vue3
unmounted() {
if (this.parent && test.array(this.parent.children)) {
// 组件销毁时，移除父组件中的children数组中对应的实例
const childrenList = this.parent.children
childrenList.map((child, index) => {
// 如果相等，则移除
if (child === this) {
childrenList.splice(index, 1)
}
})
}
}
}
uni_modules/uv-ui-tools/libs/mixin/mpMixin.js
+8
View File
@@ -0,0 +1,8 @@
export default {
// #ifdef MP-WEIXIN
// 将自定义节点设置成虚拟的（去掉自定义组件包裹层），更加接近Vue组件的表现，能更好的使用flex属性
options: {
virtualHost: true
}
// #endif
}
uni_modules/uv-ui-tools/libs/mixin/mpShare.js
+13
View File
@@ -0,0 +1,13 @@
export default {
onLoad() {
// 设置默认的转发参数
uni.$uv.mpShare = {
title: '', // 默认为小程序名称
path: '', // 默认为当前页面路径
imageUrl: '' // 默认为当前页面的截图
}
},
onShareAppMessage() {
return uni.$uv.mpShare
}
}
uni_modules/uv-ui-tools/libs/mixin/openType.js
+47
View File
@@ -0,0 +1,47 @@
export default {
props: {
openType: String
},
emits: ['getphonenumber','getuserinfo','error','opensetting','launchapp','contact','chooseavatar','addgroupapp','chooseaddress','subscribe','login','im'],
methods: {
onGetPhoneNumber(event) {
this.$emit('getphonenumber', event.detail)
},
onGetUserInfo(event) {
this.$emit('getuserinfo', event.detail)
},
onError(event) {
this.$emit('error', event.detail)
},
onOpenSetting(event) {
this.$emit('opensetting', event.detail)
},
onLaunchApp(event) {
this.$emit('launchapp', event.detail)
},
onContact(event) {
this.$emit('contact', event.detail)
},
onChooseavatar(event) {
this.$emit('chooseavatar', event.detail)
},
onAgreeprivacyauthorization(event) {
this.$emit('agreeprivacyauthorization', event.detail)
},
onAddgroupapp(event) {
this.$emit('addgroupapp', event.detail)
},
onChooseaddress(event) {
this.$emit('chooseaddress', event.detail)
},
onSubscribe(event) {
this.$emit('subscribe', event.detail)
},
onLogin(event) {
this.$emit('login', event.detail)
},
onIm(event) {
this.$emit('im', event.detail)
}
}
}
uni_modules/uv-ui-tools/libs/mixin/touch.js
+59
View File
@@ -0,0 +1,59 @@
const MIN_DISTANCE = 10
function getDirection(x, y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal'
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical'
}
return ''
}
export default {
methods: {
getTouchPoint(e) {
if (!e) {
return {
x: 0,
y: 0
}
} if (e.touches && e.touches[0]) {
return {
x: e.touches[0].pageX,
y: e.touches[0].pageY
}
} if (e.changedTouches && e.changedTouches[0]) {
return {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
}
}
return {
x: e.clientX || 0,
y: e.clientY || 0
}
},
resetTouchStatus() {
this.direction = ''
this.deltaX = 0
this.deltaY = 0
this.offsetX = 0
this.offsetY = 0
},
touchStart(event) {
this.resetTouchStatus()
const touch = this.getTouchPoint(event)
this.startX = touch.x
this.startY = touch.y
},
touchMove(event) {
const touch = this.getTouchPoint(event)
this.deltaX = touch.x - this.startX
this.deltaY = touch.y - this.startY
this.offsetX = Math.abs(this.deltaX)
this.offsetY = Math.abs(this.deltaY)
this.direction = this.direction || getDirection(this.offsetX, this.offsetY)
}
}
}
uni_modules/uv-ui-tools/libs/util/dayjs.js
+216
View File
@@ -0,0 +1,216 @@
var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var require_dayjs_min = __commonJS({
"uvuidayjs"(exports, module) {
!function(t, e) {
"object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs = e();
}(exports, function() {
"use strict";
var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", f = "month", h = "quarter", c = "year", d = "date", l = "Invalid Date", $ = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
} }, m = function(t2, e2, n2) {
var r2 = String(t2);
return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
}, v = { s: m, z: function(t2) {
var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
return (e2 <= 0 ? "+" : "-") + m(r2, 2, "0") + ":" + m(i2, 2, "0");
}, m: function t2(e2, n2) {
if (e2.date() < n2.date())
return -t2(n2, e2);
var r2 = 12 * (n2.year() - e2.year()) + (n2.month() - e2.month()), i2 = e2.clone().add(r2, f), s2 = n2 - i2 < 0, u2 = e2.clone().add(r2 + (s2 ? -1 : 1), f);
return +(-(r2 + (n2 - i2) / (s2 ? i2 - u2 : u2 - i2)) || 0);
}, a: function(t2) {
return t2 < 0 ? Math.ceil(t2) || 0 : Math.floor(t2);
}, p: function(t2) {
return { M: f, y: c, w: o, d: a, D: d, h: u, m: s, s: i, ms: r, Q: h }[t2] || String(t2 || "").toLowerCase().replace(/s$/, "");
}, u: function(t2) {
return void 0 === t2;
} }, g = "en", D = {};
D[g] = M;
var p = function(t2) {
return t2 instanceof _;
}, S = function t2(e2, n2, r2) {
var i2;
if (!e2)
return g;
if ("string" == typeof e2) {
var s2 = e2.toLowerCase();
D[s2] && (i2 = s2), n2 && (D[s2] = n2, i2 = s2);
var u2 = e2.split("-");
if (!i2 && u2.length > 1)
return t2(u2[0]);
} else {
var a2 = e2.name;
D[a2] = e2, i2 = a2;
}
return !r2 && i2 && (g = i2), i2 || !r2 && g;
}, w = function(t2, e2) {
if (p(t2))
return t2.clone();
var n2 = "object" == typeof e2 ? e2 : {};
return n2.date = t2, n2.args = arguments, new _(n2);
}, O = v;
O.l = S, O.i = p, O.w = function(t2, e2) {
return w(t2, { locale: e2.$L, utc: e2.$u, x: e2.$x, $offset: e2.$offset });
};
var _ = function() {
function M2(t2) {
this.$L = S(t2.locale, null, true), this.parse(t2);
}
var m2 = M2.prototype;
return m2.parse = function(t2) {
this.$d = function(t3) {
var e2 = t3.date, n2 = t3.utc;
if (null === e2)
return new Date(NaN);
if (O.u(e2))
return new Date();
if (e2 instanceof Date)
return new Date(e2);
if ("string" == typeof e2 && !/Z$/i.test(e2)) {
var r2 = e2.match($);
if (r2) {
var i2 = r2[2] - 1 || 0, s2 = (r2[7] || "0").substring(0, 3);
return n2 ? new Date(Date.UTC(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2)) : new Date(r2[1], i2, r2[3] || 1, r2[4] || 0, r2[5] || 0, r2[6] || 0, s2);
}
}
return new Date(e2);
}(t2), this.$x = t2.x || {}, this.init();
}, m2.init = function() {
var t2 = this.$d;
this.$y = t2.getFullYear(), this.$M = t2.getMonth(), this.$D = t2.getDate(), this.$W = t2.getDay(), this.$H = t2.getHours(), this.$m = t2.getMinutes(), this.$s = t2.getSeconds(), this.$ms = t2.getMilliseconds();
}, m2.$utils = function() {
return O;
}, m2.isValid = function() {
return !(this.$d.toString() === l);
}, m2.isSame = function(t2, e2) {
var n2 = w(t2);
return this.startOf(e2) <= n2 && n2 <= this.endOf(e2);
}, m2.isAfter = function(t2, e2) {
return w(t2) < this.startOf(e2);
}, m2.isBefore = function(t2, e2) {
return this.endOf(e2) < w(t2);
}, m2.$g = function(t2, e2, n2) {
return O.u(t2) ? this[e2] : this.set(n2, t2);
}, m2.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, m2.valueOf = function() {
return this.$d.getTime();
}, m2.startOf = function(t2, e2) {
var n2 = this, r2 = !!O.u(e2) || e2, h2 = O.p(t2), l2 = function(t3, e3) {
var i2 = O.w(n2.$u ? Date.UTC(n2.$y, e3, t3) : new Date(n2.$y, e3, t3), n2);
return r2 ? i2 : i2.endOf(a);
}, $2 = function(t3, e3) {
return O.w(n2.toDate()[t3].apply(n2.toDate("s"), (r2 ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(e3)), n2);
}, y2 = this.$W, M3 = this.$M, m3 = this.$D, v2 = "set" + (this.$u ? "UTC" : "");
switch (h2) {
case c:
return r2 ? l2(1, 0) : l2(31, 11);
case f:
return r2 ? l2(1, M3) : l2(0, M3 + 1);
case o:
var g2 = this.$locale().weekStart || 0, D2 = (y2 < g2 ? y2 + 7 : y2) - g2;
return l2(r2 ? m3 - D2 : m3 + (6 - D2), M3);
case a:
case d:
return $2(v2 + "Hours", 0);
case u:
return $2(v2 + "Minutes", 1);
case s:
return $2(v2 + "Seconds", 2);
case i:
return $2(v2 + "Milliseconds", 3);
default:
return this.clone();
}
}, m2.endOf = function(t2) {
return this.startOf(t2, false);
}, m2.$set = function(t2, e2) {
var n2, o2 = O.p(t2), h2 = "set" + (this.$u ? "UTC" : ""), l2 = (n2 = {}, n2[a] = h2 + "Date", n2[d] = h2 + "Date", n2[f] = h2 + "Month", n2[c] = h2 + "FullYear", n2[u] = h2 + "Hours", n2[s] = h2 + "Minutes", n2[i] = h2 + "Seconds", n2[r] = h2 + "Milliseconds", n2)[o2], $2 = o2 === a ? this.$D + (e2 - this.$W) : e2;
if (o2 === f || o2 === c) {
var y2 = this.clone().set(d, 1);
y2.$d[l2]($2), y2.init(), this.$d = y2.set(d, Math.min(this.$D, y2.daysInMonth())).$d;
} else
l2 && this.$d[l2]($2);
return this.init(), this;
}, m2.set = function(t2, e2) {
return this.clone().$set(t2, e2);
}, m2.get = function(t2) {
return this[O.p(t2)]();
}, m2.add = function(r2, h2) {
var d2, l2 = this;
r2 = Number(r2);
var $2 = O.p(h2), y2 = function(t2) {
var e2 = w(l2);
return O.w(e2.date(e2.date() + Math.round(t2 * r2)), l2);
};
if ($2 === f)
return this.set(f, this.$M + r2);
if ($2 === c)
return this.set(c, this.$y + r2);
if ($2 === a)
return y2(1);
if ($2 === o)
return y2(7);
var M3 = (d2 = {}, d2[s] = e, d2[u] = n, d2[i] = t, d2)[$2] || 1, m3 = this.$d.getTime() + r2 * M3;
return O.w(m3, this);
}, m2.subtract = function(t2, e2) {
return this.add(-1 * t2, e2);
}, m2.format = function(t2) {
var e2 = this, n2 = this.$locale();
if (!this.isValid())
return n2.invalidDate || l;
var r2 = t2 || "YYYY-MM-DDTHH:mm:ssZ", i2 = O.z(this), s2 = this.$H, u2 = this.$m, a2 = this.$M, o2 = n2.weekdays, f2 = n2.months, h2 = function(t3, n3, i3, s3) {
return t3 && (t3[n3] || t3(e2, r2)) || i3[n3].slice(0, s3);
}, c2 = function(t3) {
return O.s(s2 % 12 || 12, t3, "0");
}, d2 = n2.meridiem || function(t3, e3, n3) {
var r3 = t3 < 12 ? "AM" : "PM";
return n3 ? r3.toLowerCase() : r3;
}, $2 = { YY: String(this.$y).slice(-2), YYYY: this.$y, M: a2 + 1, MM: O.s(a2 + 1, 2, "0"), MMM: h2(n2.monthsShort, a2, f2, 3), MMMM: h2(f2, a2), D: this.$D, DD: O.s(this.$D, 2, "0"), d: String(this.$W), dd: h2(n2.weekdaysMin, this.$W, o2, 2), ddd: h2(n2.weekdaysShort, this.$W, o2, 3), dddd: o2[this.$W], H: String(s2), HH: O.s(s2, 2, "0"), h: c2(1), hh: c2(2), a: d2(s2, u2, true), A: d2(s2, u2, false), m: String(u2), mm: O.s(u2, 2, "0"), s: String(this.$s), ss: O.s(this.$s, 2, "0"), SSS: O.s(this.$ms, 3, "0"), Z: i2 };
return r2.replace(y, function(t3, e3) {
return e3 || $2[t3] || i2.replace(":", "");
});
}, m2.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, m2.diff = function(r2, d2, l2) {
var $2, y2 = O.p(d2), M3 = w(r2), m3 = (M3.utcOffset() - this.utcOffset()) * e, v2 = this - M3, g2 = O.m(this, M3);
return g2 = ($2 = {}, $2[c] = g2 / 12, $2[f] = g2, $2[h] = g2 / 3, $2[o] = (v2 - m3) / 6048e5, $2[a] = (v2 - m3) / 864e5, $2[u] = v2 / n, $2[s] = v2 / e, $2[i] = v2 / t, $2)[y2] || v2, l2 ? g2 : O.a(g2);
}, m2.daysInMonth = function() {
return this.endOf(f).$D;
}, m2.$locale = function() {
return D[this.$L];
}, m2.locale = function(t2, e2) {
if (!t2)
return this.$L;
var n2 = this.clone(), r2 = S(t2, e2, true);
return r2 && (n2.$L = r2), n2;
}, m2.clone = function() {
return O.w(this.$d, this);
}, m2.toDate = function() {
return new Date(this.valueOf());
}, m2.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, m2.toISOString = function() {
return this.$d.toISOString();
}, m2.toString = function() {
return this.$d.toUTCString();
}, M2;
}(), T = _.prototype;
return w.prototype = T, [["$ms", r], ["$s", i], ["$m", s], ["$H", u], ["$W", a], ["$M", f], ["$y", c], ["$D", d]].forEach(function(t2) {
T[t2[1]] = function(e2) {
return this.$g(e2, t2[0], t2[1]);
};
}), w.extend = function(t2, e2) {
return t2.$i || (t2(e2, _, w), t2.$i = true), w;
}, w.locale = S, w.isDayjs = p, w.unix = function(t2) {
return w(1e3 * t2);
}, w.en = D[g], w.Ls = D, w.p = {}, w;
});
}
});
export default require_dayjs_min();
uni_modules/uv-ui-tools/libs/util/route.js
+126
View File
@@ -0,0 +1,126 @@
/**
* 路由跳转方法，该方法相对于直接使用uni.xxx的好处是使用更加简单快捷
* 并且带有路由拦截功能
*/
import { queryParams, deepMerge, page } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
class Router {
constructor() {
// 原始属性定义
this.config = {
type: 'navigateTo',
url: '',
delta: 1, // navigateBack页面后退时,回退的层数
params: {}, // 传递的参数
animationType: 'pop-in', // 窗口动画,只在APP有效
animationDuration: 300, // 窗口动画持续时间,单位毫秒,只在APP有效
intercept: false ,// 是否需要拦截
events: {} // 页面间通信接口，用于监听被打开页面发送到当前页面的数据。hbuilderx 2.8.9+ 开始支持。
}
// 因为route方法是需要对外赋值给另外的对象使用，同时route内部有使用this，会导致route失去上下文
// 这里在构造函数中进行this绑定
this.route = this.route.bind(this)
}
// 判断url前面是否有"/"，如果没有则加上，否则无法跳转
addRootPath(url) {
return url[0] === '/' ? url : `/${url}`
}
// 整合路由参数
mixinParam(url, params) {
url = url && this.addRootPath(url)
// 使用正则匹配，主要依据是判断是否有"/","?","="等，如“/page/index/index?name=mary"
// 如果有url中有get参数，转换后无需带上"?"
let query = ''
if (/.*\/.*\?.*=.*/.test(url)) {
// object对象转为get类型的参数
query = queryParams(params, false)
// 因为已有get参数,所以后面拼接的参数需要带上"&"隔开
return url += `&${query}`
}
// 直接拼接参数，因为此处url中没有后面的query参数，也就没有"?/&"之类的符号
query = queryParams(params)
return url += query
}
// 对外的方法名称
async route(options = {}, params = {}) {
// 合并用户的配置和内部的默认配置
let mergeConfig = {}
if (typeof options === 'string') {
// 如果options为字符串，则为route(url, params)的形式
mergeConfig.url = this.mixinParam(options, params)
mergeConfig.type = 'navigateTo'
} else {
mergeConfig = deepMerge(this.config, options)
// 否则正常使用mergeConfig中的url和params进行拼接
mergeConfig.url = this.mixinParam(options.url, options.params)
}
// 如果本次跳转的路径和本页面路径一致，不执行跳转，防止用户快速点击跳转按钮，造成多次跳转同一个页面的问题
if (mergeConfig.url === page()) return
if (params.intercept) {
mergeConfig.intercept = params.intercept
}
// params参数也带给拦截器
mergeConfig.params = params
// 合并内外部参数
mergeConfig = deepMerge(this.config, mergeConfig)
// 判断用户是否定义了拦截器
if (typeof mergeConfig.intercept === 'function') {
// 定一个promise，根据用户执行resolve(true)或者resolve(false)来决定是否进行路由跳转
const isNext = await new Promise((resolve, reject) => {
mergeConfig.intercept(mergeConfig, resolve)
})
// 如果isNext为true，则执行路由跳转
isNext && this.openPage(mergeConfig)
} else {
this.openPage(mergeConfig)
}
}
// 执行路由跳转
openPage(config) {
// 解构参数
const {
url,
type,
delta,
animationType,
animationDuration,
events
} = config
if (config.type == 'navigateTo' || config.type == 'to') {
uni.navigateTo({
url,
animationType,
animationDuration,
events
})
}
if (config.type == 'redirectTo' || config.type == 'redirect') {
uni.redirectTo({
url
})
}
if (config.type == 'switchTab' || config.type == 'tab') {
uni.switchTab({
url
})
}
if (config.type == 'reLaunch' || config.type == 'launch') {
uni.reLaunch({
url
})
}
if (config.type == 'navigateBack' || config.type == 'back') {
uni.navigateBack({
delta
})
}
}
}
export default (new Router()).route
uni_modules/uv-ui-tools/package.json
+81
View File
@@ -0,0 +1,81 @@
{
"id": "uv-ui-tools",
"displayName": "uv-ui-tools 工具集 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.1.25",
"description": "uv-ui-tools，集成工具库，强大的Http请求封装，清晰的文档说明，开箱即用。方便使用，可以全局使用",
"keywords": [
"uv-ui-tools,uv-ui组件库,工具集,uvui,uView2.x"
],
"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": [],
"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",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}
uni_modules/uv-ui-tools/readme.md
+23
View File
@@ -0,0 +1,23 @@
## uv-ui-tools 工具集
> **组件名：uv-ui-tools**
uv-ui工具集成，包括网络Http请求、便捷工具、节流防抖、对象操作、时间格式化、路由跳转、全局唯一标识符、规则校验等等。
该组件推荐配合[uv-ui组件库](https://www.uvui.cn/components/intro.html)使用，单独下载也可以在自己项目中使用，需要做相应的配置，可查看文档。强烈推荐使用[uv-ui组件库](https://www.uvui.cn/components/intro.html)，导入组件都会自动导入`uv-ui-tools`。需要在自己的项目中使用请参考[扩展配置](https://www.uvui.cn/components/setting.html)。
uv-ui破釜沉舟之兼容vue3+2、app、h5、多端小程序的uni-app生态框架，大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，修复大量BUG，支持单独导入，方便开发者选择导入需要的组件。开箱即用，灵活配置。
# <a href="https://www.uvui.cn/js/intro.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
### [更多插件，请关注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>
uni_modules/uv-ui-tools/theme.scss
+43
View File
@@ -0,0 +1,43 @@
// 此文件为uvUI的主题变量，这些变量目前只能通过uni.scss引入才有效，另外由于
// uni.scss中引入的样式会同时混入到全局样式文件和单独每一个页面的样式中，造成微信程序包太大，
// 故uni.scss只建议放scss变量名相关样式，其他的样式可以通过main.js或者App.vue引入
$uv-main-color: #303133;
$uv-content-color: #606266;
$uv-tips-color: #909193;
$uv-light-color: #c0c4cc;
$uv-border-color: #dadbde;
$uv-bg-color: #f3f4f6;
$uv-disabled-color: #c8c9cc;
$uv-primary: #3c9cff;
$uv-primary-dark: #398ade;
$uv-primary-disabled: #9acafc;
$uv-primary-light: #ecf5ff;
$uv-warning: #f9ae3d;
$uv-warning-dark: #f1a532;
$uv-warning-disabled: #f9d39b;
$uv-warning-light: #fdf6ec;
$uv-success: #5ac725;
$uv-success-dark: #53c21d;
$uv-success-disabled: #a9e08f;
$uv-success-light: #f5fff0;
$uv-error: #f56c6c;
$uv-error-dark: #e45656;
$uv-error-disabled: #f7b2b2;
$uv-error-light: #fef0f0;
$uv-info: #909399;
$uv-info-dark: #767a82;
$uv-info-disabled: #c4c6c9;
$uv-info-light: #f4f4f5;
@mixin flex($direction: row) {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: $direction;
}
uni_modules/v-tabs/changelog.md
+149
View File
@@ -0,0 +1,149 @@
## 2.2.2（2024-12-10）
1. [修复]修复`change`事件不生效的bug
## 2.2.1（2024-11-13）
1. [修复]修复摇树打包出现的bug
## 2.2.0（2024-07-19）
1. [修改]增加节流函数，控制tab的点击间隔
## 2.1.9（2024-06-14）
1. [修改]当`current`初始值大于`tabs.length`或者小于`0`，自动设置`current`的值为`0`
2. [抛弃]压缩包方式的源码不提供维护了，只维护`uni_modules`中的源码
## 2.1.8（2024-06-07）
1. [新增]支持`vue3`了
## 2.1.6（2024-06-06）
1. [修复]当有`fixed`属性之后，在支付宝小程序无法滚动的bug
## 2.1.5（2023-11-02）
1. [修复]修复`change`和`v-model`绑定的值不同步
2. [修复]暂时停用`activeFontSize`选项
3. [修改]修改默认激活的文字不加粗
## 2.1.4（2023-10-12）
1. [修改]修改计算方式
2. [新增]外部可以通过`this.$refs.tabs.update()`方法主动更新
## 2.1.3（2023-09-11）
1. [新增]支持自定义插槽模式，具体可以查看示例代码使用方式。[gitee demo](https://github.com/xfjpeter/uni-plugins/blob/3e2bd062163f664889122fd74b8bd6ccad6a97f1/pages/tabs/tabs.vue#L47C10-L50C16) 或 [github demo](https://github.com/xfjpeter/uni-plugins/blob/3e2bd062163f664889122fd74b8bd6ccad6a97f1/pages/tabs/tabs.vue#L47C10-L50C16)
## 2.1.2（2023-06-12）
1. [新增]添加`z-index`参数控制层级大小，默认1993
2. [说明]以后该插件只更新`uni_modules`方式的，`zip`方式的不提供更新了
## 2.1.1（2022-09-16）
1. 将插件更新为`uni_modules`方式
## 2.1.0（2022-08-12）
1. 增加`disable`参数，控制是否可以点击，只能应用在数组对象中，见[disabled 的用法](#112-当tabs使用的数组对象的方式特定参数需要注意一下)
```js
export default {
data() {
return {
tabs: [{ id: 1, name: '' }]
}
}
}
```
## 2.0.10（2022-01-27）
1. 更新属性line-animation设置为false可以不要动画，这是好多朋友问到，特此加上
## 2.0.9（2020-10-12）
1. 修复 v-tabs 第一次可能出现第一个标签显示不完整的情况
2. 修改了 pages/tabs/order 示例文件
## 2.0.8（2020-09-21）
1. 修复添加 fixed 属性后，滚动条无效
2. 修复选项很少的情况下，下划线计算计算错误
3. 新增 paddingItem 属性，设置选项左右边距（上下边距需要设置 height 属性，或者设置 padding 属性）
## 2.0.7（2020-09-17）
1. 紧急修复 bug，横向滑动不了的情况
## 2.0.6（2020-09-16）
1. 新增 fixed 属性，是否固定在顶部，示例地址：pages/tabs/tabs-static
2. 优化之前的页面结构
## 2.0.5（2020-09-09）
1. 修复 width 错误，dom 加载的时候没有及时获取到 data 属性导致的 。
## 2.0.4（2020-08-29）
1. 优化异步改变 tabs 后，下划线不初始化问题
2. github 地址上有图 2 的源码，需要的自行下载，页面路径：pages/tabs/order.vue
## 2.0.3（2020-08-20）
1. 优化 节点查询 和 选中渲染
2. 优化支付宝中 createSelectorQuery() 的影响
**特别说明：**
> 支付宝中平铺方法和其他方法不能在一个页面中出现，不然有一个显示错误（具体什么原因没查到，有好心的人发现了，望告知一下，感谢
## 2.0.2（2020-08-19）
1. 优化 change 事件触发机制
## 2.0.1（2020-08-16）
1. 修改默认高度为 70rpx
2. 新增属性 bgColor，可设置背景颜色，默认 #fff
3. 新增整个 tab 的 padding 属性，默认 0
## 2.0.0（2020-08-13）
1. 全新的 v-tabs 2.0
2. 支持 H5 小程序 APP
3. 属性高度可配置
## 1.3.2（2020-07-21）
1. 新增 auto 的配置，是否平铺 tab
2. 修复文档上的错误示例（感谢 lushgwe@163.com 的反馈）
## 1.3.0（2020-07-05）
1. 新增 padding 的可配置
2. 修复 v-model 双向绑定问题
3. 修复初始化下划线没定位的为题
## 1.2.0（2020-06-19）
1. 添加注释
2. 修复 bug
## 1.1.8（2020-06-11）
1. 添加 change 事件
2. 修复插件内容问题
3. 修复下划线不居中问题
## 1.1.6（2020-06-11）
1. 添加 change 事件
2. 修复插件内容问题
## 1.1.4（2020-06-11）
1. 添加 change 事件
2. 修复插件内容问题
## 1.1.2（2020-06-11）
1. 添加 change 事件
## 1.1.1（2020-06-09）
1. 修复小程序端选中的下划线不显示问题
2. 新增 tab 高度设置
3. lineHeight 修改为只支持 String 方式
## 1.1.0（2020-06-09）
1. 修复小程序端选中的下划线不显示问题
2. 新增 tab 高度设置
3. lineHeight 修改为只支持 String 方式
## 1.0.0（2020-06-04）
1. 更新插件1.0.0
uni_modules/v-tabs/components/v-tabs/props.js
+100
View File
@@ -0,0 +1,100 @@
export default {
value: {
type: Number,
default: 0
},
modelValue: {
type: Number,
default: 0
},
tabs: {
type: Array,
default() {
return []
}
},
bgColor: {
type: String,
default: '#fff'
},
padding: {
type: String,
default: '0'
},
color: {
type: String,
default: '#333'
},
activeColor: {
type: String,
default: '#2979ff'
},
fontSize: {
type: String,
default: '28rpx'
},
activeFontSize: {
type: String,
default: '32rpx'
},
bold: {
type: Boolean,
default: false
},
scroll: {
type: Boolean,
default: true
},
height: {
type: String,
default: '70rpx'
},
lineColor: {
type: String,
default: '#2979ff'
},
lineHeight: {
type: [String, Number],
default: '10rpx'
},
lineScale: {
type: Number,
default: 0.5
},
lineRadius: {
type: String,
default: '10rpx'
},
pills: {
type: Boolean,
default: false
},
pillsColor: {
type: String,
default: '#2979ff'
},
pillsBorderRadius: {
type: String,
default: '10rpx'
},
field: {
type: String,
default: ''
},
fixed: {
type: Boolean,
default: false
},
paddingItem: {
type: String,
default: '0 22rpx'
},
lineAnimation: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1993
}
}
uni_modules/v-tabs/components/v-tabs/utils.js
+110
View File
@@ -0,0 +1,110 @@
/**
* 启动一个微任务。
*
* 该函数旨在兼容不同环境下的微任务调度。微任务是一种在主任务（如事件循环中的回调）之后，但在下一次渲染之前执行的JavaScript任务。
* 它们对于异步编程和性能优化非常重要。此函数尝试使用三种不同的方法来调度微任务，取决于环境的支持情况。
*
* @param {Function} callback - 待执行的微任务回调函数。
*/
export function startMicroTask(callback) {
// 如果队列微任务是可用的，直接使用队列微任务的方法来调度回调。
if (typeof queueMicrotask === 'function') {
queueMicrotask(callback)
} else if (typeof MutationObserver === 'function') {
// 如果MutationObserver可用，使用它来创建一个微任务。
// 这是一种旧的兼容性方法，因为MutationObserver在较早的浏览器版本中就已经支持。
const node = document.createElement('div')
const observer = new MutationObserver(callback)
observer.observe(node, { childList: true })
node.textContent = 'xfjpeter'
} else {
// 如果以上两种方法都不可用，退回到使用setTimeout来模拟微任务。
// 这是最后的选择，因为setTimeout不是真正的微任务，但它可以在不支持微任务的环境中提供类似的功能。
setTimeout(callback, 0)
}
}
/**
* 函数节流器。
* 通过限制函数调用的频率，防止在高频率事件（如窗口滚动或鼠标移动）中过多调用给定的函数，从而优化性能。
*
* @param {Function} fn 要节流的函数。
* @param {number} delay 延迟的毫秒数，在这段时间内只能调用一次给定的函数。
* @returns {Function} 返回一个新的节流函数，它将控制原始函数的调用频率。
*/
/**
* 函数节流器
* @param {Function} fn 要节流的函数
* @param {number} delay 延迟的毫秒数
* @returns {Function} 返回节流后的函数
*/
export function throttle(fn, delay) {
// 用于存储定时器ID
let timeoutId
// 用于记录上一次函数执行的时间
let lastExecuted = 0
// 返回一个节流函数
return function () {
// 保存当前上下文和参数
const context = this
const args = arguments
// 获取当前时间
const now = Date.now()
// 计算剩余时间
const remaining = delay - (now - lastExecuted)
// 实际执行函数的内部函数
function execute() {
lastExecuted = now
// 在当前上下文中调用原始函数，并传入参数
fn.apply(context, args)
}
// 如果剩余时间小于等于0，表示可以执行函数
if (remaining <= 0) {
// 如果存在定时器，则清除定时器
if (timeoutId) {
clearTimeout(timeoutId)
timeoutId = null
}
// 执行函数
execute()
} else {
// 如果不存在定时器，则设置定时器
if (!timeoutId) {
timeoutId = setTimeout(() => {
timeoutId = null
// 执行函数
execute()
}, remaining)
}
}
}
}
/**
* 函数防抖动封装。
* 函数防抖（debounce）是指在事件被触发n秒后，才执行回调，如果在这n秒内事件又被触发，则重新计时。
* 主要用于限制函数调用的频率，常用于输入事件处理函数（如输入框的keyup事件）和窗口大小调整事件等。
*
* @param {Function} fn 需要被延迟执行的函数。
* @param {number} delay 延迟执行的时间，单位为毫秒。
* @returns {Function} 返回一个经过防抖动处理的函数。
*/
export function debounce(fn, delay) {
// 用于存储定时器的变量
let timer = null
// 返回一个封装函数
return function () {
// 如果定时器存在，则清除之前的定时器
if (timer) clearTimeout(timer)
// 设置新的定时器，延迟执行原函数
timer = setTimeout(() => {
// 使用apply确保函数在正确的上下文中执行，并传递所有参数
fn.apply(this, arguments)
}, delay)
}
}
uni_modules/v-tabs/components/v-tabs/v-tabs.vue
+296
View File
@@ -0,0 +1,296 @@
<template>
<view class="v-tabs">
<scroll-view
:id="getDomId"
:scroll-x="scroll"
:scroll-left="scroll ? scrollLeft : 0"
:scroll-with-animation="scroll"
:style="{ position: fixed ? 'fixed' : 'relative', zIndex, width: '100%' }">
<view
class="v-tabs__container"
:style="{
display: scroll ? 'inline-flex' : 'flex',
whiteSpace: scroll ? 'nowrap' : 'normal',
background: bgColor,
height,
padding
}">
<view
:class="['v-tabs__container-item', { disabled: !!v.disabled }, { active: current == i }]"
v-for="(v, i) in tabs"
:key="i"
:style="{
color: current == i ? activeColor : color,
fontSize: current == i ? fontSize : fontSize,
fontWeight: bold && current == i ? 'bold' : '',
justifyContent: !scroll ? 'center' : '',
flex: scroll ? '' : 1,
padding: paddingItem
}"
@click="change(i)">
<slot :row="v" :index="i">{{ field ? v[field] : v }}</slot>
</view>
<template v-if="!!tabs.length">
<view
v-if="!pills"
:class="['v-tabs__container-line', { animation: lineAnimation }]"
:style="{
background: lineColor,
width: lineWidth + 'px',
height: lineHeight,
borderRadius: lineRadius,
transform: `translate3d(${lineLeft}px, 0, 0)`
}" />
<view
v-else
:class="['v-tabs__container-pills', { animation: lineAnimation }]"
:style="{
background: pillsColor,
borderRadius: pillsBorderRadius,
width: currentWidth + 'px',
transform: `translate3d(${pillsLeft}px, 0, 0)`,
height
}" />
</template>
</view>
</scroll-view>
<!-- fixed 的站位高度 -->
<view class="v-tabs__placeholder" :style="{ height: fixed ? height : '0', padding }"></view>
</view>
</template>
<script>
import { startMicroTask, throttle } from './utils'
import props from './props'
/**
* v-tabs
* @property {Number} value 选中的下标
* @property {Array} tabs tabs 列表
* @property {String} bgColor = '#fff' 背景颜色
* @property {String} color = '#333' 默认颜色
* @property {String} activeColor = '#2979ff' 选中文字颜色
* @property {String} fontSize = '28rpx' 默认文字大小
* @property {String} activeFontSize = '28rpx' 选中文字大小
* @property {Boolean} bold = [true | false] 选中文字是否加粗
* @property {Boolean} scroll = [true | false] 是否滚动
* @property {String} height = '60rpx' tab 的高度
* @property {String} lineHeight = '10rpx' 下划线的高度
* @property {String} lineColor = '#2979ff' 下划线的颜色
* @property {Number} lineScale = 0.5 下划线的宽度缩放比例
* @property {String} lineRadius = '10rpx' 下划线圆角
* @property {Boolean} pills = [true | false] 是否胶囊样式
* @property {String} pillsColor = '#2979ff' 胶囊背景色
* @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
* @property {String} field 如果是对象，显示的键名
* @property {Boolean} fixed = [true | false] 是否固定
* @property {String} paddingItem = '0 22rpx' 选项的边距
* @property {Boolean} lineAnimation = [true | false] 下划线是否有动画
* @property {Number} zIndex = 1993 默认层级
*
* @event {Function(current)} change 改变标签触发
*/
export default {
name: 'VTabs',
props,
// #ifdef VUE3
emits: ['update:modelValue', 'change'],
// #endif
data() {
return {
lineWidth: 30,
currentWidth: 0, // 当前选项的宽度
lineLeft: 0, // 滑块距离左侧的位置
pillsLeft: 0, // 胶囊距离左侧的位置
scrollLeft: 0, // 距离左边的位置
container: { width: 0, height: 0, left: 0, right: 0 }, // 容器的宽高，左右距离
current: 0, // 当前选中项
scrollWidth: 0 // 可以滚动的宽度
}
},
computed: {
getDomId() {
const len = 16
const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
const maxPos = $chars.length
let pwd = ''
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return `xfjpeter_${pwd}`
}
},
watch: {
// #ifdef VUE3
modelValue: {
// #endif
// #ifdef VUE2
value: {
// #endif
immediate: true,
handler(newVal) {
this.current = newVal > -1 && newVal < this.tabs.length ? newVal : 0
this.$nextTick(this.update)
}
}
},
methods: {
// 切换事件
change: throttle(function(index) {
const isDisabled = !!this.tabs[index].disabled
if (this.current !== index && !isDisabled) {
this.current = index
// #ifdef VUE3
this.$emit('update:modelValue', index)
// #endif
// #ifdef VUE2
this.$emit('input', index)
// #endif
this.$emit('change', index)
}
}, 300),
createQueryHandler() {
let query
// #ifndef MP-ALIPAY
query = uni.createSelectorQuery().in(this)
// #endif
// #ifdef MP-ALIPAY
query = uni.createSelectorQuery()
// #endif
return query
},
update() {
const _this = this
startMicroTask(() => {
// 没有列表的时候，不执行
if (!this.tabs.length) return
_this
.createQueryHandler()
.select(`#${this.getDomId}`)
.boundingClientRect(data => {
const { width, height, left, right } = data || {}
// 获取容器的相关属性
this.container = { width, height, left, right: right - width }
_this.calcScrollWidth()
_this.setScrollLeft()
_this.setLine()
})
.exec()
})
},
// 计算可以滚动的宽度
calcScrollWidth(callback) {
const view = this.createQueryHandler().select(`#${this.getDomId}`)
view.fields({ scrollOffset: true })
view
.scrollOffset(res => {
if (typeof callback === 'function') {
callback(res)
} else {
// 获取滚动条的宽度
this.scrollWidth = res.scrollWidth
}
})
.exec()
},
// 设置滚动条滚动的进度
setScrollLeft() {
this.calcScrollWidth(res => {
// 动态读取 scrollLeft
let scrollLeft = res.scrollLeft
this.createQueryHandler()
.select(`#${this.getDomId} .v-tabs__container-item.active`)
.boundingClientRect(data => {
if (!data) return
// 除开当前选项外容器的一半宽度
let curHalfWidth = (this.container.width - data.width) / 2
let scrollDiff = this.scrollWidth - this.container.width
// 在原有滚动条的基础上 + (当前元素距离左侧的距离 - 计算的一半宽度) - 容器的外边距之类的
scrollLeft += data.left - curHalfWidth - this.container.left
// 已经滚动在左侧了
if (scrollLeft < 0) scrollLeft = 0
// 已经超出右侧了
else if (scrollLeft > scrollDiff) scrollLeft = scrollDiff
this.scrollLeft = scrollLeft
})
.exec()
})
},
setLine() {
this.calcScrollWidth(res => {
const scrollLeft = res.scrollLeft
this.createQueryHandler()
.select(`#${this.getDomId} .v-tabs__container-item.active`)
.boundingClientRect(data => {
if (!data) return
if (this.pills) {
this.currentWidth = data.width
this.pillsLeft = scrollLeft + data.left - this.container.left
} else {
this.lineWidth = data.width * this.lineScale
this.lineLeft = scrollLeft + data.left + (data.width - data.width * this.lineScale) / 2 - this.container.left
}
})
.exec()
})
}
}
}
</script>
<style lang="scss" scoped>
.v-tabs {
width: 100%;
box-sizing: border-box;
overflow: hidden;
/* #ifdef H5 */
::-webkit-scrollbar {
display: none;
}
/* #endif */
&__container {
min-width: 100%;
position: relative;
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
&-item {
flex-shrink: 0;
display: flex;
align-items: center;
height: 100%;
position: relative;
z-index: 10;
transition: all 0.3s;
white-space: nowrap;
&.disabled {
opacity: 0.5;
color: #999;
}
}
&-line {
position: absolute;
left: 0;
bottom: 0;
}
&-pills {
position: absolute;
z-index: 9;
}
&-line,
&-pills {
&.animation {
transition: all 0.3s linear;
}
}
}
}
</style>
uni_modules/v-tabs/package.json
+85
View File
@@ -0,0 +1,85 @@
{
"id": "v-tabs",
"displayName": "自定义 tab 选项卡 2",
"version": "2.2.2",
"description": "自定义 tab ，支持多种样式，支持 h5 小程序 app",
"keywords": [
"v-tabs",
"tab",
"选项卡"
],
"repository": "https://github.com/xfjpeter/uni-plugins",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "1207791534"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "n",
"app-uvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "n",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
uni_modules/v-tabs/readme.md
+276
View File
@@ -0,0 +1,276 @@
## 插件说明
> 这是 `v-tabs` 插件的升级版本，参数上有很大变动，支持 `H5` `小程序` `手机端`，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。
## 使用说明
### 1、最基本用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
current: 0,
tabs: ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻']
}
},
methods: {
changeTab(index) {
console.log('当前选中的项：' + index)
}
}
}
```
### 2、平铺整个屏幕
- 视图文件
```html
<v-tabs v-model="activeTab" :scroll="false" :tabs="['全部', '进行中', '已完成']"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
activeTab: 0
}
}
}
```
### 3、胶囊用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" :pills="true" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
data() {
return {
current: 2,
tabs: [
'军事',
'国内',
'新闻新闻',
'军事',
'国内',
'新闻',
'军事',
'国内',
'新闻',
],
},
methods: {
changeTab(index) {
console.log('当前选中索引：' + index)
}
}
}
```
## 文档说明
### 1、属性说明
| 参数 | 类型 | 默认值 | 说明 |
| :---------------: | :-----: | :-------: | :-----------------------------------------------------------------------: |
| tabs | Array | [] | 控制 tab 的列表 |
| value | Number | 0 | 必传(双向绑定的值) |
| color | String | '#333' | 默认文字颜色 |
| activeColor | String | '#2979ff' | 选中文字的颜色 |
| fontSize | String | '28rpx' | 默认文字大小(rpx 或 px)（弃用） |
| bold | Boolean | true | 是否加粗选中项 |
| scroll | Boolean | true | 是否显示滚动条，平铺设置 false |
| height | String | '70rpx' | tab 高度(rpx 或 px) |
| lineHeight | String | '10rpx' | 滑块高度(rpx 或 px) |
| lineColor | String | '#2979ff' | 滑块的颜色 |
| lineScale | Number | 0.5 | 滑块宽度缩放值 |
| lineRadius | String | '10rpx' | 滑块圆角宽度(rpx 或 px) |
| pills | Boolean | false | 是否开启胶囊 |
| pillsColor | String | '#2979ff' | 胶囊背景颜色(rpx 或 px) |
| pillsBorderRadius | String | '10rpx' | 胶囊圆角宽度(rpx 或 px) |
| field | String | '' | 如果 tabs 子项是对象，输入需要展示的键名 |
| bgColor | String | '#fff' | 背景色，支持 linear-gradient 渐变 |
| padding | String | '0' | 整个 tab padding 属性 |
| fixed | Boolean | false | 是否固定在顶部 |
| paddingItem | String | '0 22rpx' | 选项的边距（设置上下不生效，需要设置高度） |
| lineAnimation | Boolean | true | 是否需要 line 和 pills 的动画，在隐藏页面后默认移动到第一个的时候比较实用 |
| zIndex | Number | 1993 | 控制 tab 的层级，默认1993 |
### 1.1 `tabs`参数展开说明
#### 1.1.1 当`tabs`仅仅是单纯的数组时候，没有什么特别的地方
```js
export default {
data() {
return {
tabs: ['全部', '待付款', '待消费', '已完成', '已评价', '已过期', '已退款']
}
}
}
```
#### 1.1.2 当`tabs`使用的数组对象的方式，特定参数需要注意一下
- `disabled` 参数，可以控制按钮是否可以点击
```js
export default {
data() {
return {
tabs: [
{ id: 1, name: '待付款', disabled: false },
{ id: 2, name: '待收货', disabled: false },
{ id: 3, name: '待评价', disabled: false },
{ id: 4, name: '退款/售后', disabled: true },
{ id: 5, name: '我的订单', disabled: false }
]
}
}
}
```
### 2、事件说明
| 名称 | 参数 | 说明 |
| :----: | :---: | :--------------------------------: |
| change | index | 改变选中项触发, index 选中项的下标 |
## 更新日志
### 2.2.2（2024-12-10）
1. [修复]修复`change`事件不生效的bug
### 2.2.1（2024-11-13）
1. [修复]修复摇树打包出现的bug
### 2.2.0（2024-07-19）
1. [修改]增加节流函数，控制tab的点击间隔
### 2.1.9（2024-06-14）
1. [修改]当`current`初始值大于`tabs.length`或者小于`0`，自动设置`current`的值为`0`
2. [抛弃]压缩包方式的源码不提供维护了，只维护`uni_modules`中的源码
### 2.1.8（2024-06-06）
1. [新增]支持`vue3`了
### 2.1.6（2024-06-06）
1. [修复]使用`fixed`属性之后，在支付宝小程序无法滚动的bug
### 2.1.5（2023-11-02）
1. [修复]修复`change`和`v-model`绑定的值不同步
2. [修复]暂时停用`activeFontSize`选项
3. [修改]修改默认激活的文字不加粗
### 2.1.4（2023-10-12）
1. [修改]修改计算方式
2. [新增]外部可以通过`this.$refs.tabs.update()`方法主动更新
### 2.1.3（2023-09-11）
1. [新增]支持自定义插槽模式，具体可以查看示例代码使用方式。[gitee demo](https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/tabs.vue#L47-L50) 或 [github demo](https://github.com/xfjpeter/uni-plugins/blob/master/pages/tabs/tabs.vue#L47-L50)
### 2.1.2（2023-06-12）
1. [新增]添加`z-index`参数控制层级大小，默认1993
2. [说明]以后该插件只更新`uni_modules`方式的，`zip`方式的不提供更新了，如果需要的请到 [gitee uni-plugins](https://gitee.com/xfjpeter/uni-plugins) 或 [github uni-plugins](https://github.com/xfjpeter/uni-plugins)下载源码，自行使用
### 2.1.1（2022-09-16）
1. 将插件更新为`uni_modules`方式
### 2022-08-12
1. 增加`disable`参数，控制是否可以点击，只能应用在数组对象中，见[disabled 的用法](#112-当tabs使用的数组对象的方式特定参数需要注意一下)
```js
export default {
data() {
return {
tabs: [{ id: 1, name: '' }]
}
}
}
```
### 2022-01-27
1. 更新属性`line-animation`设置为`false`可以不要动画，这是好多朋友问到，特此加上
### 2020-09-24
1. 修复 `v-tabs` 第一次可能出现第一个标签显示不完整的情况
2. 修改了 `pages/tabs/order` 示例文件
### 2020-09-21
1. 修复添加 `fixed` 属性后，滚动条无效
2. 修复选项很少的情况下，下划线计算计算错误
3. 新增 `paddingItem` 属性，设置选项左右边距（上下边距需要设置 `height` 属性，或者设置 `padding` 属性）
**写在最后：**
欢迎各位老铁反馈 bug ，本人后端 PHP 一枚，只是应为感兴趣前端，自己琢磨，自己搞。如果你在使用的过程中有什么不合理，需要优化的，都可以在下面评论（或加我 QQ: 1207791534），本人看见后回复、修正，感谢。
### 2020-09-17
1. 紧急修复 bug，横向滑动不了的情况
### 2020-09-16
1. 新增 `fixed` 属性，是否固定在顶部，示例地址：`pages/tabs/tabs-static`
2. 优化之前的页面结构
**注意：**
1. 使用 `padding` 属性的时候，尽量不要左右边距，会导致下划线位置不对
2. 如果不绑定 `v-model` 会导致 `change` 事件改变的时候，下划线不跟随问题
### 2020-09-09
1. 修复 `width` 错误，dom 加载的时候没有及时获取到 `data` 属性导致的。
### 2020-08-29
1. 优化异步改变 `tabs` 后，下划线不初始化问题
2. `github` 地址上有图 2 的源码，需要的自行下载，页面路径：`pages/tabs/order`
### 2020-08-20
1. 优化 `节点查询` 和 `选中渲染`
2. 优化支付宝中 `createSelectorQuery()` 的影响
### 2020-08-19
1. 优化 `change` 事件触发机制
### 2020-08-16
1. 修改默认高度为 `70rpx`
2. 新增属性 `bgColor`，可设置背景颜色，默认 `#fff`
3. 新增整个 `tab` 的 `padding` 属性，默认 `0`
### 2020-08-13
1. 全新的 `v-tabs 2.0`
2. 支持 `H5` `小程序` `APP`
3. 属性高度可配置
## 预览
![v-tabs 2.0.1.gif](https://tva1.sinaimg.cn/large/007S8ZIlgy1ghsv40mj76g30ai0i2tsd.gif)
![v-tabs 2.0.2.gif](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/42f3a920-a674-11ea-8a24-ffee00625e2e_1.png?v=1597912963)