From 117b18ca111f2be41aec49961dc98db1769ca39f Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期二, 27 五月 2025 19:17:53 +0800 Subject: [PATCH] uview组件和uniapp组件冲突问题、视频评论 --- uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json | 5 uni_modules/uni-transition/package.json | 87 + uni_modules/uni-popup/components/uni-popup/uni-popup.uvue | 90 + uni_modules/uni-number-box/package.json | 83 + uni_modules/uni-scss/styles/setting/_variables.scss | 146 ++ uni_modules/uni-transition/readme.md | 11 pages/tabbar/index/home.vue | 242 +++ uni_modules/uni-load-more/components/uni-load-more/i18n/index.js | 8 uni_modules/uni-scss/variables.scss | 62 uni_modules/uni-popup/changelog.md | 94 + pages/order/afterSales/afterSales.vue | 3 pages/tabbar/cart/cartList.vue | 4 uni_modules/uni-scss/styles/setting/_color.scss | 66 uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json | 5 uni_modules/uni-scss/styles/setting/_space.scss | 56 pages.json | 13 uni_modules/uni-popup/components/uni-popup/keypress.js | 45 uni_modules/uni-scss/styles/setting/_styles.scss | 167 ++ uni_modules/uni-load-more/changelog.md | 25 uni_modules/uni-transition/components/uni-transition/createAnimation.js | 131 + pages/order/myOrder.vue | 3 uni_modules/uni-transition/changelog.md | 27 uni_modules/uni-popup/components/uni-popup/i18n/en.json | 7 uni_modules/uni-load-more/package.json | 84 + components/m-load-more/m-load-more.vue | 0 uni_modules/uni-load-more/readme.md | 14 uni_modules/uni-scss/readme.md | 4 uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json | 7 uni_modules/uni-load-more/components/uni-load-more/i18n/en.json | 5 uni_modules/uni-number-box/readme.md | 13 uni_modules/uni-popup/components/uni-popup-dialog/keypress.js | 45 uni_modules/uni-scss/styles/setting/_text.scss | 24 uni_modules/uni-scss/styles/tools/functions.scss | 19 App.vue | 6 uni_modules/uni-popup/components/uni-popup/popup.js | 26 uni_modules/uni-popup/package.json | 90 + uni_modules/uni-popup/readme.md | 17 uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue | 327 ++++ uni_modules/uni-popup/components/uni-popup/i18n/index.js | 8 uni_modules/uni-scss/changelog.md | 8 api/video.js | 28 uni_modules/uni-popup/components/uni-popup/uni-popup.vue | 518 +++++++ uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue | 188 ++ uni_modules/uni-scss/index.scss | 1 uni_modules/uni-number-box/changelog.md | 39 uni_modules/uni-transition/components/uni-transition/uni-transition.vue | 289 ++++ uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue | 143 ++ uni_modules/uni-scss/package.json | 82 + uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json | 7 uni_modules/uni-scss/styles/setting/_border.scss | 3 uni_modules/uni-scss/styles/setting/_radius.scss | 55 uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue | 404 +++++ uni_modules/uni-scss/styles/index.scss | 7 manifest.json | 1 components/m-buy/goods.vue | 4 uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue | 232 +++ uni_modules/uni-scss/theme.scss | 31 57 files changed, 4,086 insertions(+), 23 deletions(-) diff --git a/App.vue b/App.vue index 2070eec..7488ba6 100644 --- a/App.vue +++ b/App.vue @@ -255,9 +255,9 @@ @font-face { font-family: 'iconfont'; /* Project id 4921691 */ src: - url('//at.alicdn.com/t/c/font_4921691_ds91dsf3lgc.woff2?t=1747375499357') format('woff2'), - url('//at.alicdn.com/t/c/font_4921691_ds91dsf3lgc.woff?t=1747375499357') format('woff'), - url('//at.alicdn.com/t/c/font_4921691_ds91dsf3lgc.ttf?t=1747375499357') format('truetype'); + url('//at.alicdn.com/t/c/font_4921691_1hkd3qibo87.woff2?t=1748343163548') format('woff2'), + url('//at.alicdn.com/t/c/font_4921691_1hkd3qibo87.woff?t=1748343163548') format('woff'), + url('//at.alicdn.com/t/c/font_4921691_1hkd3qibo87.ttf?t=1748343163548') format('truetype'); } .iconfont { /* font-family闇�瑕佸拰鑷畾涔夌殑鐩稿悓 */ diff --git a/api/video.js b/api/video.js index 49e1772..843d069 100644 --- a/api/video.js +++ b/api/video.js @@ -60,3 +60,31 @@ needToken: true }); } + +/** + * 鑾峰彇瑙嗛璇勮 + * + * @param params + */ + export function getVideoComments(params) { + return http.request({ + url: "/lmk/video-comment/wx/page", + method: Method.GET, + needToken: true, + params: params + }); +} + +/** + * 鍙戝竷瑙嗛璇勮 + * + * @param params + */ + export function addVideoComment(data) { + return http.request({ + url: "/lmk/video-comment/comment", + method: Method.POST, + needToken: true, + data: data + }); +} diff --git a/components/m-buy/goods.vue b/components/m-buy/goods.vue index 920dd81..75ee113 100644 --- a/components/m-buy/goods.vue +++ b/components/m-buy/goods.vue @@ -118,10 +118,10 @@ import * as API_trade from '@/api/trade.js'; import setup from './popup'; -import uniNumberBox from '@/components/uni-number-box' +// import uniNumberBox from '@/components/uni-number-box' export default { components: { - uniNumberBox + // uniNumberBox }, data() { return { diff --git a/components/uni-load-more/uni-load-more.vue b/components/m-load-more/m-load-more.vue similarity index 100% rename from components/uni-load-more/uni-load-more.vue rename to components/m-load-more/m-load-more.vue diff --git a/manifest.json b/manifest.json index 70ca01a..2a053fc 100644 --- a/manifest.json +++ b/manifest.json @@ -5,6 +5,7 @@ "versionName" : "4.5.3", "versionCode" : 4000503, "transformPx" : false, + "sassImplementationName" : "node-sass", "app-plus" : { "compatible" : { "ignoreVersion" : true //true琛ㄧず蹇界暐鐗堟湰妫�鏌ユ彁绀烘锛孒BuilderX1.9.0鍙婁互涓婄増鏈敮鎸� diff --git a/pages.json b/pages.json index 57c57a3..db96005 100644 --- a/pages.json +++ b/pages.json @@ -2,7 +2,8 @@ "easycom": { "autoscan": true, "custom": { - "^u-(.*)": "@/uview-components/uview-ui/components/u-$1/u-$1.vue"//uview + "^u-(.*)": "@/uview-components/uview-ui/components/u-$1/u-$1.vue",//uview, + "^uni-(.*)": "@/uni_modules/uni-$1/components/uni-$1/uni-$1.vue" // uniapp缁勪欢 } }, "preloadRule": { @@ -114,16 +115,6 @@ "u-image": "view", "u-loading": "view", "u-tag": "view", - "u-icon": "view" - } - } - }, - { - "path": "components/popups/popups", - "style": { - "navigationBarTitleText": "", - "navigationStyle": "custom", - "componentPlaceholder": { "u-icon": "view" } } diff --git a/pages/order/afterSales/afterSales.vue b/pages/order/afterSales/afterSales.vue index fb42565..1696f29 100644 --- a/pages/order/afterSales/afterSales.vue +++ b/pages/order/afterSales/afterSales.vue @@ -205,14 +205,13 @@ import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue'; import UModal from '@/uview-components/uview-ui/components/u-modal/u-modal.vue'; -import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"; import { getAfterSaleList, cancelAfterSale } from "@/api/after-sale.js"; import { getOrderList } from "@/api/order.js"; import storage from "@/utils/storage"; export default { components: { - uniLoadMore,UTabs,USearch,UImage,UIcon,ULoadmore + UTabs,USearch,UImage,UIcon,ULoadmore }, data() { return { diff --git a/pages/order/myOrder.vue b/pages/order/myOrder.vue index 1a0e7e0..820e33b 100644 --- a/pages/order/myOrder.vue +++ b/pages/order/myOrder.vue @@ -221,13 +221,12 @@ import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue'; import UToast from '@/uview-components/uview-ui/components/u-toast/u-toast.vue'; import UModal from '@/uview-components/uview-ui/components/u-modal/u-modal.vue'; -import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"; import { getOrderList, cancelOrder, confirmReceipt } from "@/api/order.js"; import { getClearReason } from "@/api/after-sale.js"; import LiLiWXPay from "@/js_sdk/lili-pay/wx-pay.js"; export default { components: { - uniLoadMore,UEmpty,UImage,UPopup,URadioGroup,URadio,UButton,UToast,UModal + UEmpty,UImage,UPopup,URadioGroup,URadio,UButton,UToast,UModal }, data() { return { diff --git a/pages/tabbar/cart/cartList.vue b/pages/tabbar/cart/cartList.vue index 03b59ee..531d5e7 100644 --- a/pages/tabbar/cart/cartList.vue +++ b/pages/tabbar/cart/cartList.vue @@ -192,9 +192,9 @@ import UToast from '@/uview-components/uview-ui/components/u-toast/u-toast.vue'; import * as API_Trade from "@/api/trade"; import { debounce } from "@/utils/tools.js"; -import uniNumberBox from '@/components/uni-number-box' +// import uniNumberBox from '@/components/uni-number-box' export default { - components:{uniNumberBox,UNavbar,UCheckboxGroup,UCheckbox,USwipeAction,UImage,UIcon,UPopup,UCountDown,UModal,UToast}, // 鏁伴噺鍔犲噺缁勪欢 + components:{UNavbar,UCheckboxGroup,UCheckbox,USwipeAction,UImage,UIcon,UPopup,UCountDown,UModal,UToast}, // 鏁伴噺鍔犲噺缁勪欢 data() { return { loading:false, diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue index 6b2f4c5..4ed067f 100644 --- a/pages/tabbar/index/home.vue +++ b/pages/tabbar/index/home.vue @@ -89,18 +89,74 @@ <text style="font-size: 10px;font-weight: lighter;">{{item.commentNum}}</text> </view> </view> + </swiper-item> </swiper> + + <!-- 璇勮寮圭獥 --> + <uni-popup ref="commentPopup" type="bottom" :is-mask-click="true" @maskClick="closeCommentPopup"> + <view class="comment-popup"> + <view class="popup-header"> + <text class="popup-title">璇勮({{comments.length}})</text> + <text class="iconfont close-icon" @click="closeCommentPopup"></text> + </view> + + <scroll-view class="comment-list" scroll-y> + <view v-if="commentLoading" class="loading"> + <uni-load-more status="loading"></uni-load-more> + </view> + + <view v-else-if="comments.length === 0" class="empty"> + 鏆傛棤璇勮锛屽揩鏉ュ彂琛ㄧ涓�鏉¤瘎璁哄惂~ + </view> + + <view v-else class="comment-item" v-for="comment in comments" :key="comment.id"> + <image class="avatar" :src="comment.user.avatar || '/static/default-avatar.png'"></image> + <view class="comment-content"> + <text class="nickname">{{comment.user.nickname}}</text> + <text class="content">{{comment.content}}</text> + <text class="time">{{formatTime(comment.createTime)}}</text> + </view> + </view> + </scroll-view> + + <view class="comment-input-area"> + <input + class="comment-input" + v-model="commentForm.commentContent" + placeholder="鍐欎笅浣犵殑璇勮..." + placeholder-class="placeholder" + /> + <button class="submit-btn" @click="submitComment">鍙戦��</button> + </view> + </view> + </uni-popup> + + <custom-tabbar bgColor="#333333" selected="index" selectedTextColor="#ffffff"></custom-tabbar> </view> </template> <script> -import { getRecommendVideos, savePlayRecord, subscribe } from "@/api/video.js"; +import { getRecommendVideos, savePlayRecord, subscribe, getVideoComments, addVideoComment } from "@/api/video.js"; import { changeCollect } from "@/api/collect.js"; export default { data() { return { + commentQuery: { + pageNumber: 1, + pageSize: 5, + videoId: '', + masterCommentId: '' + }, + commentForm: { // 璇勮琛ㄥ崟鏁版嵁 + id: null, + videoId: null, + commentContent: '', + replyId: null + }, + comments: [], // 璇勮鍒楄〃 + commentLoading: false, // 璇勮鍔犺浇鐘舵�� startHidenTime: 0, // 璁板綍鍒囨崲鑷冲叾瀹冮〉闈㈢殑鏃堕棿锛岀敤浜庤绠楄棰戣鐪嬫椂闂村噺鍘荤殑閮ㄥ垎 totalHidenTime: 0, // 鎬诲叡闅愯棌椤甸潰鐨勬椂闂� startPauseTime: 0, // 寮�濮嬫殏鍋滅殑鏃堕棿 @@ -142,6 +198,85 @@ this.initVideoContexts(); }, methods: { + // 鏍煎紡鍖栨椂闂� + formatTime(time) { + const date = new Date(time); + const now = new Date(); + const diff = Math.floor((now - date) / 1000); // 绉� + + if (diff < 60) return '鍒氬垰'; + if (diff < 3600) return `${Math.floor(diff / 60)}鍒嗛挓鍓峘; + if (diff < 86400) return `${Math.floor(diff / 3600)}灏忔椂鍓峘; + + return `${date.getMonth() + 1}鏈�${date.getDate()}鏃; + }, + // 鎻愪氦璇勮 + async submitComment() { + if (!this.commentForm.commentContent.trim()) { + uni.showToast({ + title: '璇勮鍐呭涓嶈兘涓虹┖', + icon: 'none' + }); + return; + } + // 鍙戣〃璇勮 + addVideoComment(this.commentForm).then(res => { + if(res.data.code === 200) { + this.commentForm = { + id: null, + videoId: null, + commentContent: '', + replyId: null + } + this.comments.unshift(res.data.data); + uni.showToast({ + title: '璇勮鎴愬姛' + }); + // 褰撳墠瑙嗛璇勮鏁板姞涓� + this.videoList[this.currentIndex].commentNum += 1; + } else { + uni.showToast({ + title: res.data.msg, + icon: 'none' + }); + } + }).catch(() => { + uni.showToast({ + title: '璇勮澶辫触', + icon: 'none' + }); + }) + }, + // 鍏抽棴璇勮寮圭獥 + closeCommentPopup() { + console.log("瑙﹀彂浜�"); + this.$refs.commentPopup.close() + this.showCommentPopup = false; + this.comments = []; + this.commentForm = { + id: null, + videoId: null, + commentContent: '', + replyId: null + } + }, + // 鏄剧ず璇勮寮圭獥 + async showComments(item) { + this.commentForm.videoId = item.id; + this.$refs.commentPopup.open(); + this.commentLoading = true; + this.commentQuery.videoId = item.id + getVideoComments(this.commentQuery).then(res => { + this.comments = res.data.data + }).catch(() => { + uni.showToast({ + title: '鑾峰彇璇勮澶辫触', + icon: 'none' + }); + }).finally(() => { + this.commentLoading = false; + }) + }, // 鍏虫敞浣滆�� subscribeAuth(index, authorId) { this.videoList.forEach(video => { @@ -480,5 +615,110 @@ font-size: 26rpx; font-weight: bold; } + /* 璇勮寮圭獥鏍峰紡 */ + .comment-popup { + background-color: #fff; + border-radius: 20rpx 20rpx 0 0; + padding-bottom: env(safe-area-inset-bottom); + height: 50vh; + display: flex; + flex-direction: column; + } + .popup-header { + padding: 30rpx; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1rpx solid #f5f5f5; + } + + .popup-title { + font-size: 32rpx; + font-weight: bold; + } + + .close-icon { + /* font-size: 36rpx; */ + color: #999; + } + + .comment-list { + flex: 1; + padding: 20rpx; + box-sizing: border-box; + } + + .comment-item { + display: flex; + padding: 20rpx 0; + border-bottom: 1rpx solid #f5f5f5; + } + + .avatar { + width: 80rpx; + height: 80rpx; + border-radius: 50%; + margin-right: 20rpx; + } + + .comment-content { + flex: 1; + } + + .nickname { + font-size: 26rpx; + color: #666; + display: block; + margin-bottom: 10rpx; + } + + .content { + font-size: 30rpx; + color: #333; + display: block; + margin-bottom: 10rpx; + } + + .time { + font-size: 24rpx; + color: #999; + } + + .comment-input-area { + display: flex; + padding: 20rpx 30rpx; + align-items: center; + } + + .comment-input { + flex: 1; + background-color: #fff; + height: 80rpx; + border: 1px solid #dcdcdc; + border-radius: 40rpx; + padding: 0 30rpx; + font-size: 28rpx; + } + + .placeholder { + color: #ccc; + } + + .submit-btn { + margin-left: 20rpx; + background-color: #07c160; + color: #fff; + border-radius: 40rpx; + padding: 0 30rpx; + height: 80rpx; + line-height: 80rpx; + font-size: 28rpx; + } + + .loading, .empty { + padding: 40rpx 0; + text-align: center; + color: #999; + } </style> \ No newline at end of file diff --git a/uni_modules/uni-load-more/changelog.md b/uni_modules/uni-load-more/changelog.md new file mode 100644 index 0000000..667abdb --- /dev/null +++ b/uni_modules/uni-load-more/changelog.md @@ -0,0 +1,25 @@ +## 1.3.6锛�2024-10-15锛� +- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 1.3.5锛�2024-10-12锛� +- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 1.3.4锛�2024-10-12锛� +- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 1.3.3锛�2022-01-20锛� +- 鏂板 showText灞炴�� 锛屾槸鍚︽樉绀烘枃鏈� +## 1.3.2锛�2022-01-19锛� +- 淇 nvue 骞冲彴涓嬩笉鏄剧ず鏂囨湰鐨刡ug +## 1.3.1锛�2022-01-19锛� +- 淇 寰俊灏忕▼搴忓钩鍙版牱寮忛�夋嫨鍣ㄦ姤璀﹀憡鐨勯棶棰� +## 1.3.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-load-more](https://uniapp.dcloud.io/component/uniui/uni-load-more) +## 1.2.1锛�2021-08-24锛� +- 鏂板 鏀寔鍥介檯鍖� +## 1.2.0锛�2021-07-30锛� +- 缁勪欢鍏煎 vue3锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834) +## 1.1.8锛�2021-05-12锛� +- 鏂板 缁勪欢绀轰緥鍦板潃 +## 1.1.7锛�2021-03-30锛� +- 淇 uni-load-more 鍦ㄩ椤典娇鐢ㄦ椂锛宧5 骞冲彴鎶� 'uni is not defined' 鐨� bug +## 1.1.6锛�2021-02-05锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json b/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json new file mode 100644 index 0000000..a4f14a5 --- /dev/null +++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/en.json @@ -0,0 +1,5 @@ +{ + "uni-load-more.contentdown": "Pull up to show more", + "uni-load-more.contentrefresh": "loading...", + "uni-load-more.contentnomore": "No more data" +} diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js b/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js new file mode 100644 index 0000000..de7509c --- /dev/null +++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/index.js @@ -0,0 +1,8 @@ +import en from './en.json' +import zhHans from './zh-Hans.json' +import zhHant from './zh-Hant.json' +export default { + en, + 'zh-Hans': zhHans, + 'zh-Hant': zhHant +} diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json new file mode 100644 index 0000000..f15d510 --- /dev/null +++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hans.json @@ -0,0 +1,5 @@ +{ + "uni-load-more.contentdown": "涓婃媺鏄剧ず鏇村", + "uni-load-more.contentrefresh": "姝e湪鍔犺浇...", + "uni-load-more.contentnomore": "娌℃湁鏇村鏁版嵁浜�" +} diff --git a/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json new file mode 100644 index 0000000..a255c6d --- /dev/null +++ b/uni_modules/uni-load-more/components/uni-load-more/i18n/zh-Hant.json @@ -0,0 +1,5 @@ +{ + "uni-load-more.contentdown": "涓婃媺椤ず鏇村", + "uni-load-more.contentrefresh": "姝e湪鍔犺級...", + "uni-load-more.contentnomore": "娌掓湁鏇村鏁告摎浜�" +} diff --git a/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue b/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue new file mode 100644 index 0000000..a203417 --- /dev/null +++ b/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue @@ -0,0 +1,404 @@ +<template> + <view class="uni-load-more" @click="onClick"> + <!-- #ifdef APP-NVUE --> + <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon" + :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true" + class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator> + <!-- #endif --> + <!-- #ifdef H5 --> + <svg width="24" height="24" viewBox="25 25 50 50" + v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" + :style="{width:iconSize+'px',height:iconSize+'px'}" + class="uni-load-more__img uni-load-more__img--android-H5"> + <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle> + </svg> + <!-- #endif --> + <!-- #ifndef APP-NVUE || H5 --> + <view + v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" + :style="{width:iconSize+'px',height:iconSize+'px'}" + class="uni-load-more__img uni-load-more__img--android-MP"> + <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> + <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> + <view class="uni-load-more__img-icon" :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view> + </view> + <!-- #endif --> + <!-- #ifndef APP-NVUE --> + <view v-else-if="!webviewHide && status === 'loading' && showIcon" + :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5"> + <image :src="imgBase64" mode="widthFix"></image> + </view> + <!-- #endif --> + <text v-if="showText" class="uni-load-more__text" + :style="{color: color}">{{ status === 'more' ? contentdownText : status === 'loading' ? contentrefreshText : contentnomoreText }}</text> + </view> +</template> + +<script> + let platform + setTimeout(() => { + // #ifdef MP-WEIXIN + platform = uni.getDeviceInfo().platform + // #endif + // #ifndef MP-WEIXIN + platform = uni.getSystemInfoSync().platform + // #endif + }, 16) + + import { + initVueI18n + } from '@dcloudio/uni-i18n' + import messages from './i18n/index.js' + const { + t + } = initVueI18n(messages) + + /** + * LoadMore 鍔犺浇鏇村 + * @description 鐢ㄤ簬鍒楄〃涓紝鍋氭粴鍔ㄥ姞杞戒娇鐢紝灞曠ず loading 鐨勫悇绉嶇姸鎬� + * @tutorial https://ext.dcloud.net.cn/plugin?id=29 + * @property {String} status = [more|loading|noMore] loading 鐨勭姸鎬� + * @value more loading鍓� + * @value loading loading涓� + * @value noMore 娌℃湁鏇村浜� + * @property {Number} iconSize 鎸囧畾鍥炬爣澶у皬 + * @property {Boolean} iconSize = [true|false] 鏄惁鏄剧ず loading 鍥炬爣 + * @property {String} iconType = [snow|circle|auto] 鎸囧畾鍥炬爣鏍峰紡 + * @value snow ios闆姳鍔犺浇鏍峰紡 + * @value circle 瀹夊崜鍞ら啋鍔犺浇鏍峰紡 + * @value auto 鏍规嵁骞冲彴鑷姩閫夋嫨鍔犺浇鏍峰紡 + * @property {String} color 鍥炬爣鍜屾枃瀛楅鑹� + * @property {Object} contentText 鍚勭姸鎬佹枃瀛楄鏄庯紝鍊间负锛歿contentdown: "涓婃媺鏄剧ず鏇村",contentrefresh: "姝e湪鍔犺浇...",contentnomore: "娌℃湁鏇村鏁版嵁浜�"} + * @event {Function} clickLoadMore 鐐瑰嚮鍔犺浇鏇村鏃惰Е鍙� + */ + export default { + name: 'UniLoadMore', + emits: ['clickLoadMore'], + props: { + status: { + // 涓婃媺鐨勭姸鎬侊細more-loading鍓嶏紱loading-loading涓紱noMore-娌℃湁鏇村浜� + type: String, + default: 'more' + }, + showIcon: { + type: Boolean, + default: true + }, + iconType: { + type: String, + default: 'auto' + }, + iconSize: { + type: Number, + default: 24 + }, + color: { + type: String, + default: '#777777' + }, + contentText: { + type: Object, + default () { + return { + contentdown: '', + contentrefresh: '', + contentnomore: '' + } + } + }, + showText: { + type: Boolean, + default: true + } + }, + data() { + return { + webviewHide: false, + platform: platform, + imgBase64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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' + } + }, + computed: { + iconSnowWidth() { + return (Math.floor(this.iconSize / 24) || 1) * 2 + }, + contentdownText() { + return this.contentText.contentdown || t("uni-load-more.contentdown") + }, + contentrefreshText() { + return this.contentText.contentrefresh || t("uni-load-more.contentrefresh") + }, + contentnomoreText() { + return this.contentText.contentnomore || t("uni-load-more.contentnomore") + } + }, + mounted() { + // #ifdef APP-PLUS + var pages = getCurrentPages(); + var page = pages[pages.length - 1]; + var currentWebview = page.$getAppWebview(); + currentWebview.addEventListener('hide', () => { + this.webviewHide = true + }) + currentWebview.addEventListener('show', () => { + this.webviewHide = false + }) + // #endif + }, + methods: { + onClick() { + this.$emit('clickLoadMore', { + detail: { + status: this.status, + } + }) + } + } + } +</script> + +<style lang="scss" > + .uni-load-more { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + height: 40px; + align-items: center; + justify-content: center; + } + + .uni-load-more__text { + font-size: 14px; + margin-left: 8px; + } + + .uni-load-more__img { + width: 24px; + height: 24px; + // margin-right: 8px; + } + + .uni-load-more__img--nvue { + color: #666666; + } + + .uni-load-more__img--android, + .uni-load-more__img--ios { + width: 24px; + height: 24px; + transform: rotate(0deg); + } + + /* #ifndef APP-NVUE */ + .uni-load-more__img--android { + animation: loading-ios 1s 0s linear infinite; + } + + @keyframes loading-android { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .uni-load-more__img--ios-H5 { + position: relative; + animation: loading-ios-H5 1s 0s step-end infinite; + } + + .uni-load-more__img--ios-H5 image { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + } + + @keyframes loading-ios-H5 { + 0% { + transform: rotate(0deg); + } + + 8% { + transform: rotate(30deg); + } + + 16% { + transform: rotate(60deg); + } + + 24% { + transform: rotate(90deg); + } + + 32% { + transform: rotate(120deg); + } + + 40% { + transform: rotate(150deg); + } + + 48% { + transform: rotate(180deg); + } + + 56% { + transform: rotate(210deg); + } + + 64% { + transform: rotate(240deg); + } + + 73% { + transform: rotate(270deg); + } + + 82% { + transform: rotate(300deg); + } + + 91% { + transform: rotate(330deg); + } + + 100% { + transform: rotate(360deg); + } + } + + /* #endif */ + + /* #ifdef H5 */ + .uni-load-more__img--android-H5 { + animation: loading-android-H5-rotate 2s linear infinite; + transform-origin: center center; + } + + .uni-load-more__img--android-H5 circle { + display: inline-block; + animation: loading-android-H5-dash 1.5s ease-in-out infinite; + stroke: currentColor; + stroke-linecap: round; + } + + @keyframes loading-android-H5-rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + @keyframes loading-android-H5-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -40; + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -120; + } + } + + /* #endif */ + + /* #ifndef APP-NVUE || H5 */ + .uni-load-more__img--android-MP { + position: relative; + width: 24px; + height: 24px; + transform: rotate(0deg); + animation: loading-ios 1s 0s ease infinite; + } + + .uni-load-more__img--android-MP .uni-load-more__img-icon { + position: absolute; + box-sizing: border-box; + width: 100%; + height: 100%; + border-radius: 50%; + border: solid 2px transparent; + border-top: solid 2px #777777; + transform-origin: center; + } + + .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(1) { + animation: loading-android-MP-1 1s 0s linear infinite; + } + + .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(2) { + animation: loading-android-MP-2 1s 0s linear infinite; + } + + .uni-load-more__img--android-MP .uni-load-more__img-icon:nth-child(3) { + animation: loading-android-MP-3 1s 0s linear infinite; + } + + @keyframes loading-android { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + @keyframes loading-android-MP-1 { + 0% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(90deg); + } + + 100% { + transform: rotate(360deg); + } + } + + @keyframes loading-android-MP-2 { + 0% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(360deg); + } + } + + @keyframes loading-android-MP-3 { + 0% { + transform: rotate(0deg); + } + + 50% { + transform: rotate(270deg); + } + + 100% { + transform: rotate(360deg); + } + } + + /* #endif */ +</style> diff --git a/uni_modules/uni-load-more/package.json b/uni_modules/uni-load-more/package.json new file mode 100644 index 0000000..cf44bff --- /dev/null +++ b/uni_modules/uni-load-more/package.json @@ -0,0 +1,84 @@ +{ + "id": "uni-load-more", + "displayName": "uni-load-more 鍔犺浇鏇村", + "version": "1.3.6", + "description": "LoadMore 缁勪欢锛屽父鐢ㄥ湪鍒楄〃閲岄潰锛屽仛婊氬姩鍔犺浇浣跨敤銆�", + "keywords": [ + "uni-ui", + "uniui", + "鍔犺浇鏇村", + "load-more" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "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" + }, + "uni_modules": { + "dependencies": ["uni-scss"], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "n" + }, + "client": { + "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" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} diff --git a/uni_modules/uni-load-more/readme.md b/uni_modules/uni-load-more/readme.md new file mode 100644 index 0000000..54dc1fa --- /dev/null +++ b/uni_modules/uni-load-more/readme.md @@ -0,0 +1,14 @@ + + +### LoadMore 鍔犺浇鏇村 +> **缁勪欢鍚嶏細uni-load-more** +> 浠g爜鍧楋細 `uLoadMore` + + +鐢ㄤ簬鍒楄〃涓紝鍋氭粴鍔ㄥ姞杞戒娇鐢紝灞曠ず loading 鐨勫悇绉嶇姸鎬併�� + + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-load-more) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 + + diff --git a/uni_modules/uni-number-box/changelog.md b/uni_modules/uni-number-box/changelog.md new file mode 100644 index 0000000..adf9221 --- /dev/null +++ b/uni_modules/uni-number-box/changelog.md @@ -0,0 +1,39 @@ +## 1.2.8锛�2024-04-26锛� +- 淇 鍦╲ue2涓婬5榛戣竟鐨刡ug +## 1.2.7锛�2024-04-26锛� +- 淇 鍦╲ue2鎵嬪姩杈撳叆鍚庡け鐒﹀鑷存竻绌烘暟鍊肩殑涓ラ噸bug +## 1.2.6锛�2024-02-22锛� +- 鏂板 璁剧疆瀹藉害灞炴�idth(鍗曚綅锛歱x) +## 1.2.5锛�2024-02-21锛� +- 淇 step姝ラ暱灏忎簬1鏃讹紝閿洏绫诲瀷涓簄umber鐨刡ug +## 1.2.4锛�2024-02-02锛� +- 淇 鍔犲噺鍙峰瀭鐩翠綅缃亸绉绘牱寮忛棶棰� +## 1.2.3锛�2023-05-23锛� +- 鏇存柊绀轰緥宸ョ▼ +## 1.2.2锛�2023-05-08锛� +- 淇 change 浜嬩欢鎵ц椤哄簭閿欒鐨勯棶棰� +## 1.2.1锛�2021-11-22锛� +- 淇 vue3涓煇浜泂css鍙橀噺鏃犳硶鎵惧埌鐨勯棶棰� +## 1.2.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-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box) +## 1.1.2锛�2021-11-09锛� +- 鏂板 鎻愪緵缁勪欢璁捐璧勬簮锛岀粍浠舵牱寮忚皟鏁� +## 1.1.1锛�2021-07-30锛� +- 浼樺寲 vue3涓嬩簨浠惰鍛婄殑闂 +## 1.1.0锛�2021-07-13锛� +- 缁勪欢鍏煎 vue3锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834) +## 1.0.7锛�2021-05-12锛� +- 鏂板 缁勪欢绀轰緥鍦板潃 +## 1.0.6锛�2021-04-20锛� +- 淇 uni-number-box 娴偣鏁拌繍绠椾笉绮剧‘鐨� bug +- 淇 uni-number-box change 浜嬩欢瑙﹀彂涓嶆纭殑 bug +- 鏂板 uni-number-box v-model 鍙屽悜缁戝畾 +## 1.0.5锛�2021-02-05锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 + +## 1.0.7锛�2021-02-05锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 +- 鏂板 鏀寔 v-model +- 鏂板 鏀寔 focus銆乥lur 浜嬩欢 +- 鏂板 鏀寔 PC 绔� diff --git a/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue b/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue new file mode 100644 index 0000000..4e203cc --- /dev/null +++ b/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue @@ -0,0 +1,232 @@ +<template> + <view class="uni-numbox"> + <view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}"> + <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" + :style="{color}">-</text> + </view> + <input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" + :type="step<1?'digit':'number'" v-model="inputValue" :style="{background, color, width:widthWithPx}" /> + <view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}"> + <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" + :style="{color}">+</text> + </view> + </view> +</template> +<script> + /** + * NumberBox 鏁板瓧杈撳叆妗� + * @description 甯﹀姞鍑忔寜閽殑鏁板瓧杈撳叆妗� + * @tutorial https://ext.dcloud.net.cn/plugin?id=31 + * @property {Number} value 杈撳叆妗嗗綋鍓嶅�� + * @property {Number} min 鏈�灏忓�� + * @property {Number} max 鏈�澶у�� + * @property {Number} step 姣忔鐐瑰嚮鏀瑰彉鐨勯棿闅斿ぇ灏� + * @property {String} background 鑳屾櫙鑹� + * @property {String} color 瀛椾綋棰滆壊锛堝墠鏅壊锛� + * @property {Number} width 杈撳叆妗嗗搴�(鍗曚綅:px) + * @property {Boolean} disabled = [true|false] 鏄惁涓虹鐢ㄧ姸鎬� + * @event {Function} change 杈撳叆妗嗗�兼敼鍙樻椂瑙﹀彂鐨勪簨浠讹紝鍙傛暟涓鸿緭鍏ユ褰撳墠鐨� value + * @event {Function} focus 杈撳叆妗嗚仛鐒︽椂瑙﹀彂鐨勪簨浠讹紝鍙傛暟涓� event 瀵硅薄 + * @event {Function} blur 杈撳叆妗嗗け鐒︽椂瑙﹀彂鐨勪簨浠讹紝鍙傛暟涓� event 瀵硅薄 + */ + + export default { + name: "UniNumberBox", + emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], + props: { + value: { + type: [Number, String], + default: 1 + }, + modelValue: { + type: [Number, String], + default: 1 + }, + min: { + type: Number, + default: 0 + }, + max: { + type: Number, + default: 100 + }, + step: { + type: Number, + default: 1 + }, + background: { + type: String, + default: '#f5f5f5' + }, + color: { + type: String, + default: '#333' + }, + disabled: { + type: Boolean, + default: false + }, + width: { + type: Number, + default: 40, + } + }, + data() { + return { + inputValue: 0 + }; + }, + watch: { + value(val) { + this.inputValue = +val; + }, + modelValue(val) { + this.inputValue = +val; + } + }, + computed: { + widthWithPx() { + return this.width + 'px'; + } + }, + created() { + if (this.value === 1) { + this.inputValue = +this.modelValue; + } + if (this.modelValue === 1) { + this.inputValue = +this.value; + } + }, + methods: { + _calcValue(type) { + if (this.disabled) { + return; + } + const scale = this._getDecimalScale(); + let value = this.inputValue * scale; + let step = this.step * scale; + if (type === "minus") { + value -= step; + if (value < (this.min * scale)) { + return; + } + if (value > (this.max * scale)) { + value = this.max * scale + } + } + + if (type === "plus") { + value += step; + if (value > (this.max * scale)) { + return; + } + if (value < (this.min * scale)) { + value = this.min * scale + } + } + + this.inputValue = (value / scale).toFixed(String(scale).length - 1); + // TODO vue2 鍏煎 + this.$emit("input", +this.inputValue); + // TODO vue3 鍏煎 + this.$emit("update:modelValue", +this.inputValue); + this.$emit("change", +this.inputValue); + }, + _getDecimalScale() { + + let scale = 1; + // 娴偣鍨� + if (~~this.step !== this.step) { + scale = Math.pow(10, String(this.step).split(".")[1].length); + } + return scale; + }, + _onBlur(event) { + this.$emit('blur', event) + let value = event.detail.value; + if (isNaN(value)) { + this.inputValue = this.value; + return; + } + value = +value; + if (value > this.max) { + value = this.max; + } else if (value < this.min) { + value = this.min; + } + const scale = this._getDecimalScale(); + this.inputValue = value.toFixed(String(scale).length - 1); + this.$emit("input", +this.inputValue); + this.$emit("update:modelValue", +this.inputValue); + this.$emit("change", +this.inputValue); + }, + _onFocus(event) { + this.$emit('focus', event) + } + } + }; +</script> +<style lang="scss"> + $box-height: 26px; + $bg: #f5f5f5; + $br: 2px; + $color: #333; + + .uni-numbox { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + } + + .uni-numbox-btns { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + align-items: center; + justify-content: center; + padding: 0 8px; + background-color: $bg; + /* #ifdef H5 */ + cursor: pointer; + /* #endif */ + } + + .uni-numbox__value { + margin: 0 2px; + background-color: $bg; + width: 40px; + height: $box-height; + text-align: center; + font-size: 14px; + border-width: 0; + color: $color; + } + + .uni-numbox__minus { + border-top-left-radius: $br; + border-bottom-left-radius: $br; + } + + .uni-numbox__plus { + border-top-right-radius: $br; + border-bottom-right-radius: $br; + } + + .uni-numbox--text { + // fix nvue + line-height: 20px; + margin-bottom: 2px; + font-size: 20px; + font-weight: 300; + color: $color; + } + + .uni-numbox .uni-numbox--disabled { + color: #c0c0c0 !important; + /* #ifdef H5 */ + cursor: not-allowed; + /* #endif */ + } +</style> diff --git a/uni_modules/uni-number-box/package.json b/uni_modules/uni-number-box/package.json new file mode 100644 index 0000000..4ac9047 --- /dev/null +++ b/uni_modules/uni-number-box/package.json @@ -0,0 +1,83 @@ +{ + "id": "uni-number-box", + "displayName": "uni-number-box 鏁板瓧杈撳叆妗�", + "version": "1.2.8", + "description": "NumberBox 甯﹀姞鍑忔寜閽殑鏁板瓧杈撳叆妗嗙粍浠讹紝鐢ㄦ埛鍙互鎺у埗姣忔鐐瑰嚮澧炲姞鐨勬暟鍊硷紝鏀寔灏忔暟銆�", + "keywords": [ + "uni-ui", + "uniui", + "鏁板瓧杈撳叆妗�" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "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" + }, + "uni_modules": { + "dependencies": ["uni-scss"], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "n" + }, + "client": { + "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" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/uni-number-box/readme.md b/uni_modules/uni-number-box/readme.md new file mode 100644 index 0000000..affc56f --- /dev/null +++ b/uni_modules/uni-number-box/readme.md @@ -0,0 +1,13 @@ + + +## NumberBox 鏁板瓧杈撳叆妗� +> **缁勪欢鍚嶏細uni-number-box** +> 浠g爜鍧楋細 `uNumberBox` + + +甯﹀姞鍑忔寜閽殑鏁板瓧杈撳叆妗嗐�� + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-number-box) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 + + diff --git a/uni_modules/uni-popup/changelog.md b/uni_modules/uni-popup/changelog.md new file mode 100644 index 0000000..013272a --- /dev/null +++ b/uni_modules/uni-popup/changelog.md @@ -0,0 +1,94 @@ +## 1.9.8锛�2025-04-16锛� +- 淇 鏇存柊缁勪欢绀轰緥 锛岃В鍐虫洿鏂版暟鎹垨淇濆瓨椤圭洰瀵艰嚧寮圭獥娑堝け鐨勯棶棰� +## 1.9.7锛�2025-04-14锛� +- 淇 uni-popup-dialog 寮瑰嚭妗嗗湪vue3涓弻鍚戠粦瀹氶棶棰� +## 1.9.6锛�2025-01-08锛� +- 淇 绀轰緥涓繃鏈熷浘鐗囧湴鍧� +## 1.9.5锛�2024-10-15锛� +- 淇 寰俊灏忕▼搴忎腑鐨刧etSystemInfo璀﹀憡 +## 1.9.2锛�2024-09-21锛� +- 淇 uni-popup鍦╝ndroid涓婄殑閲嶅鐐瑰嚮寮瑰嚭浣嶇疆涓嶆纭殑bug +## 1.9.1锛�2024-04-02锛� +- 淇 uni-popup-dialog vue3涓嬩娇鐢╲alue鏃犳硶杩涜缁戝畾鐨刡ug(鍙屽悜缁戝畾鍏煎鏃у啓娉�) +## 1.9.0锛�2024-03-28锛� +- 淇 uni-popup-dialog 鍙屽悜缁戝畾鏃跺垵濮嬪寲閫昏緫淇 +## 1.8.9锛�2024-03-20锛� +- 淇 uni-popup-dialog 鏁版嵁杈撳叆鏃朵慨姝d负鍙屽悜缁戝畾 +## 1.8.8锛�2024-02-20锛� +- 淇 uni-popup 鍦ㄥ井淇″皬绋嬪簭涓嬪嚭鐜版枃瀛楀悜涓婇棯鍔ㄧ殑bug +## 1.8.7锛�2024-02-02锛� +- 鏂板 uni-popup-dialog 鏂板灞炴�ocus锛歩nput妯″紡涓嬶紝鏄惁鑷姩鑷姩鑱氱劍 +## 1.8.6锛�2024-01-30锛� +- 鏂板 uni-popup-dialog 鏂板灞炴�axLength:闄愬埗杈撳叆妗嗗瓧鏁� +## 1.8.5锛�2024-01-26锛� +- 鏂板 uni-popup-dialog 鏂板灞炴�howClose:鎺у埗鍏抽棴鎸夐挳鐨勬樉绀� +## 1.8.4锛�2023-11-15锛� +- 鏂板 uni-popup 鏀寔uni-app-x 娉ㄦ剰鏆傛椂浠呮敮鎸� `maskClick` `@open` `@close` +## 1.8.3锛�2023-04-17锛� +- 淇 uni-popup 閲嶅鎵撳紑鏃剁殑 bug +## 1.8.2锛�2023-02-02锛� +- uni-popup-dialog 缁勪欢鏂板 inputType 灞炴�� +## 1.8.1锛�2022-12-01锛� +- 淇 nvue 涓� v-show 鎶ラ敊 +## 1.8.0锛�2022-11-29锛� +- 浼樺寲 涓婚鏍峰紡 +## 1.7.9锛�2022-04-02锛� +- 淇 寮瑰嚭灞傚唴閮ㄦ棤娉曟粴鍔ㄧ殑bug +## 1.7.8锛�2022-03-28锛� +- 淇 灏忕▼搴忎腑楂樺害閿欒鐨刡ug +## 1.7.7锛�2022-03-17锛� +- 淇 蹇�熻皟鐢╫pen鍑虹幇闂鐨凚ug +## 1.7.6锛�2022-02-14锛� +- 淇 safeArea 灞炴�т笉鑳借缃负false鐨刡ug +## 1.7.5锛�2022-01-19锛� +- 淇 isMaskClick 澶辨晥鐨刡ug +## 1.7.4锛�2022-01-19锛� +- 鏂板 cancelText \ confirmText 灞炴�� 锛屽彲鑷畾涔夋枃鏈� +- 鏂板 maskBackgroundColor 灞炴�� 锛屽彲浠ヤ慨鏀硅挋鐗堥鑹� +- 浼樺寲 maskClick灞炴�� 鏇存柊涓� isMaskClick 锛岃В鍐冲井淇″皬绋嬪簭璀﹀憡鐨勯棶棰� +## 1.7.3锛�2022-01-13锛� +- 淇 璁剧疆 safeArea 灞炴�т笉鐢熸晥鐨刡ug +## 1.7.2锛�2021-11-26锛� +- 浼樺寲 缁勪欢绀轰緥 +## 1.7.1锛�2021-11-26锛� +- 淇 vuedoc 鏂囧瓧閿欒 +## 1.7.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-popup](https://uniapp.dcloud.io/component/uniui/uni-popup) +## 1.6.2锛�2021-08-24锛� +- 鏂板 鏀寔鍥介檯鍖� +## 1.6.1锛�2021-07-30锛� +- 浼樺寲 vue3涓嬩簨浠惰鍛婄殑闂 +## 1.6.0锛�2021-07-13锛� +- 缁勪欢鍏煎 vue3锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834) +## 1.5.0锛�2021-06-23锛� +- 鏂板 mask-click 閬僵灞傜偣鍑讳簨浠� +## 1.4.5锛�2021-06-22锛� +- 淇 nvue 骞冲彴涓棿寮瑰嚭鍚庯紝鐐瑰嚮鍐呭锛屽啀鐐瑰嚮閬僵鏃犳硶鍏抽棴鐨凚ug +## 1.4.4锛�2021-06-18锛� +- 淇 H5骞冲彴涓棿寮瑰嚭鍚庯紝鐐瑰嚮鍐呭锛屽啀鐐瑰嚮閬僵鏃犳硶鍏抽棴鐨凚ug +## 1.4.3锛�2021-06-08锛� +- 淇 閿欒鐨� watch 瀛楁 +- 淇 safeArea 灞炴�т笉鐢熸晥鐨勯棶棰� +- 淇 鐐瑰嚮鍐呭锛屽啀鐐瑰嚮閬僵鏃犳硶鍏抽棴鐨凚ug +## 1.4.2锛�2021-05-12锛� +- 鏂板 缁勪欢绀轰緥鍦板潃 +## 1.4.1锛�2021-04-29锛� +- 淇 缁勪欢鍐呮斁缃� input 銆乼extarea 缁勪欢锛屾棤娉曡仛鐒︾殑闂 +## 1.4.0 锛�2021-04-29锛� +- 鏂板 type 灞炴�х殑 left\right 鍊硷紝鏀寔宸﹀彸寮瑰嚭 +- 鏂板 open(String:type) 鏂规硶鍙傛暟 锛屽彲浠ョ渷鐣� type 灞炴�� 锛岀洿鎺ヤ紶鍏ョ被鍨嬫墦寮�鎸囧畾寮圭獥 +- 鏂板 backgroundColor 灞炴�э紝鍙畾涔変富绐楀彛鑳屾櫙鑹�,榛樿涓嶆樉绀鸿儗鏅壊 +- 鏂板 safeArea 灞炴�э紝鏄惁閫傞厤搴曢儴瀹夊叏鍖� +- 淇 App\h5\寰俊灏忕▼搴忓簳閮ㄥ畨鍏ㄥ尯鍗犱綅涓嶅鐨凚ug +- 淇 App 绔脊鍑虹瓑寰呯殑Bug +- 浼樺寲 鎻愬崌浣庨厤璁惧鎬ц兘锛屼紭鍖栧姩鐢诲崱椤块棶棰� +- 浼樺寲 鏇寸畝鍗曠殑缁勪欢鑷畾涔夋柟寮� +## 1.2.9锛�2021-02-05锛� +- 浼樺寲 缁勪欢寮曠敤鍏崇郴锛岄�氳繃uni_modules寮曠敤缁勪欢 +## 1.2.8锛�2021-02-05锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 +## 1.2.7锛�2021-02-05锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 +- 鏂板 鏀寔 PC 绔� +- 鏂板 uni-popup-message 銆乽ni-popup-dialog鎵╁睍缁勪欢鏀寔 PC 绔� diff --git a/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js b/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js new file mode 100644 index 0000000..6ef26a2 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup-dialog/keypress.js @@ -0,0 +1,45 @@ +// #ifdef H5 +export default { + name: 'Keypress', + props: { + disable: { + type: Boolean, + default: false + } + }, + mounted () { + const keyNames = { + esc: ['Esc', 'Escape'], + tab: 'Tab', + enter: 'Enter', + space: [' ', 'Spacebar'], + up: ['Up', 'ArrowUp'], + left: ['Left', 'ArrowLeft'], + right: ['Right', 'ArrowRight'], + down: ['Down', 'ArrowDown'], + delete: ['Backspace', 'Delete', 'Del'] + } + const listener = ($event) => { + if (this.disable) { + return + } + const keyName = Object.keys(keyNames).find(key => { + const keyName = $event.key + const value = keyNames[key] + return value === keyName || (Array.isArray(value) && value.includes(keyName)) + }) + if (keyName) { + // 閬垮厤鍜屽叾浠栨寜閿簨浠跺啿绐� + setTimeout(() => { + this.$emit(keyName, {}) + }, 0) + } + } + document.addEventListener('keyup', listener) + this.$once('hook:beforeDestroy', () => { + document.removeEventListener('keyup', listener) + }) + }, + render: () => {} +} +// #endif diff --git a/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue new file mode 100644 index 0000000..f5731d5 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue @@ -0,0 +1,327 @@ +<template> + <view class="uni-popup-dialog"> + <view class="uni-dialog-title"> + <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text> + </view> + <view v-if="mode === 'base'" class="uni-dialog-content"> + <slot> + <text class="uni-dialog-content-text">{{content}}</text> + </slot> + </view> + <view v-else class="uni-dialog-content"> + <slot> + <input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType" + :placeholder="placeholderText" :focus="focus"> + </slot> + </view> + <view class="uni-dialog-button-group"> + <view class="uni-dialog-button" v-if="showClose" @click="closeDialog"> + <text class="uni-dialog-button-text">{{closeText}}</text> + </view> + <view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk"> + <text class="uni-dialog-button-text uni-button-color">{{okText}}</text> + </view> + </view> + + </view> +</template> + +<script> + import popup from '../uni-popup/popup.js' + import { + initVueI18n + } from '@dcloudio/uni-i18n' + import messages from '../uni-popup/i18n/index.js' + const { + t + } = initVueI18n(messages) + /** + * PopUp 寮瑰嚭灞�-瀵硅瘽妗嗘牱寮� + * @description 寮瑰嚭灞�-瀵硅瘽妗嗘牱寮� + * @tutorial https://ext.dcloud.net.cn/plugin?id=329 + * @property {String} value input 妯″紡涓嬬殑榛樿鍊� + * @property {String} placeholder input 妯″紡涓嬭緭鍏ユ彁绀� + * @property {Boolean} focus input妯″紡涓嬫槸鍚﹁嚜鍔ㄨ仛鐒︼紝榛樿涓簍rue + * @property {String} type = [success|warning|info|error] 涓婚鏍峰紡 + * @value success 鎴愬姛 + * @value warning 鎻愮ず + * @value info 娑堟伅 + * @value error 閿欒 + * @property {String} mode = [base|input] 妯″紡銆� + * @value base 鍩虹瀵硅瘽妗� + * @value input 鍙緭鍏ュ璇濇 + * @showClose {Boolean} 鏄惁鏄剧ず鍏抽棴鎸夐挳 + * @property {String} content 瀵硅瘽妗嗗唴瀹� + * @property {Boolean} beforeClose 鏄惁鎷︽埅鍙栨秷浜嬩欢 + * @property {Number} maxlength 杈撳叆 + * @event {Function} confirm 鐐瑰嚮纭鎸夐挳瑙﹀彂 + * @event {Function} close 鐐瑰嚮鍙栨秷鎸夐挳瑙﹀彂 + */ + + export default { + name: "uniPopupDialog", + mixins: [popup], + emits: ['confirm', 'close', 'update:modelValue', 'input'], + props: { + inputType: { + type: String, + default: 'text' + }, + showClose: { + type: Boolean, + default: true + }, + // #ifdef VUE2 + value: { + type: [String, Number], + default: '' + }, + // #endif + // #ifdef VUE3 + modelValue: { + type: [Number, String], + default: '' + }, + // #endif + + + placeholder: { + type: [String, Number], + default: '' + }, + type: { + type: String, + default: 'error' + }, + mode: { + type: String, + default: 'base' + }, + title: { + type: String, + default: '' + }, + content: { + type: String, + default: '' + }, + beforeClose: { + type: Boolean, + default: false + }, + cancelText: { + type: String, + default: '' + }, + confirmText: { + type: String, + default: '' + }, + maxlength: { + type: Number, + default: -1, + }, + focus: { + type: Boolean, + default: true, + } + }, + data() { + return { + dialogType: 'error', + val: "" + } + }, + computed: { + okText() { + return this.confirmText || t("uni-popup.ok") + }, + closeText() { + return this.cancelText || t("uni-popup.cancel") + }, + placeholderText() { + return this.placeholder || t("uni-popup.placeholder") + }, + titleText() { + return this.title || t("uni-popup.title") + } + }, + watch: { + type(val) { + this.dialogType = val + }, + mode(val) { + if (val === 'input') { + this.dialogType = 'info' + } + }, + value(val) { + setVal(val) + }, + // #ifdef VUE3 + modelValue(val) { + setVal(val) + }, + // #endif + val(val) { + // #ifdef VUE2 + // TODO 鍏煎 vue2 + this.$emit('input', val); + // #endif + // #ifdef VUE3 + // TODO銆�鍏煎銆�vue3 + this.$emit('update:modelValue', val); + // #endif + } + }, + created() { + // 瀵硅瘽妗嗛伄缃╀笉鍙偣鍑� + this.popup.disableMask() + // this.popup.closeMask() + if (this.mode === 'input') { + this.dialogType = 'info' + this.val = this.value; + // #ifdef VUE3 + this.val = this.modelValue; + // #endif + } else { + this.dialogType = this.type + } + }, + methods: { + /** + * 缁檝al灞炴�ц祴鍊� + */ + setVal(val) { + if (this.maxlength != -1 && this.mode === 'input') { + this.val = val.slice(0, this.maxlength); + } else { + this.val = val + } + }, + /** + * 鐐瑰嚮纭鎸夐挳 + */ + onOk() { + if (this.mode === 'input') { + this.$emit('confirm', this.val) + } else { + this.$emit('confirm') + } + if (this.beforeClose) return + this.popup.close() + }, + /** + * 鐐瑰嚮鍙栨秷鎸夐挳 + */ + closeDialog() { + this.$emit('close') + if (this.beforeClose) return + this.popup.close() + }, + close() { + this.popup.close() + } + } + } +</script> + +<style lang="scss"> + .uni-popup-dialog { + width: 300px; + border-radius: 11px; + background-color: #fff; + } + + .uni-dialog-title { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: center; + padding-top: 25px; + } + + .uni-dialog-title-text { + font-size: 16px; + font-weight: 500; + } + + .uni-dialog-content { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: center; + align-items: center; + padding: 20px; + } + + .uni-dialog-content-text { + font-size: 14px; + color: #6C6C6C; + } + + .uni-dialog-button-group { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + border-top-color: #f5f5f5; + border-top-style: solid; + border-top-width: 1px; + } + + .uni-dialog-button { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + + flex: 1; + flex-direction: row; + justify-content: center; + align-items: center; + height: 45px; + } + + .uni-border-left { + border-left-color: #f0f0f0; + border-left-style: solid; + border-left-width: 1px; + } + + .uni-dialog-button-text { + font-size: 16px; + color: #333; + } + + .uni-button-color { + color: #007aff; + } + + .uni-dialog-input { + flex: 1; + font-size: 14px; + border: 1px #eee solid; + height: 40px; + padding: 0 10px; + border-radius: 5px; + color: #555; + } + + .uni-popup__success { + color: #4cd964; + } + + .uni-popup__warn { + color: #f0ad4e; + } + + .uni-popup__error { + color: #dd524d; + } + + .uni-popup__info { + color: #909399; + } +</style> diff --git a/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue new file mode 100644 index 0000000..91370a8 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue @@ -0,0 +1,143 @@ +<template> + <view class="uni-popup-message"> + <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type"> + <slot> + <text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text> + </slot> + </view> + </view> +</template> + +<script> + import popup from '../uni-popup/popup.js' + /** + * PopUp 寮瑰嚭灞�-娑堟伅鎻愮ず + * @description 寮瑰嚭灞�-娑堟伅鎻愮ず + * @tutorial https://ext.dcloud.net.cn/plugin?id=329 + * @property {String} type = [success|warning|info|error] 涓婚鏍峰紡 + * @value success 鎴愬姛 + * @value warning 鎻愮ず + * @value info 娑堟伅 + * @value error 閿欒 + * @property {String} message 娑堟伅鎻愮ず鏂囧瓧 + * @property {String} duration 鏄剧ず鏃堕棿锛岃缃负 0 鍒欎笉浼氳嚜鍔ㄥ叧闂� + */ + + export default { + name: 'uniPopupMessage', + mixins:[popup], + props: { + /** + * 涓婚 success/warning/info/error 榛樿 success + */ + type: { + type: String, + default: 'success' + }, + /** + * 娑堟伅鏂囧瓧 + */ + message: { + type: String, + default: '' + }, + /** + * 鏄剧ず鏃堕棿锛岃缃负 0 鍒欎笉浼氳嚜鍔ㄥ叧闂� + */ + duration: { + type: Number, + default: 3000 + }, + maskShow:{ + type:Boolean, + default:false + } + }, + data() { + return {} + }, + created() { + this.popup.maskShow = this.maskShow + this.popup.messageChild = this + }, + methods: { + timerClose(){ + if(this.duration === 0) return + clearTimeout(this.timer) + this.timer = setTimeout(()=>{ + this.popup.close() + },this.duration) + } + } + } +</script> +<style lang="scss" > + .uni-popup-message { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: center; + } + + .uni-popup-message__box { + background-color: #e1f3d8; + padding: 10px 15px; + border-color: #eee; + border-style: solid; + border-width: 1px; + flex: 1; + } + + @media screen and (min-width: 500px) { + .fixforpc-width { + margin-top: 20px; + border-radius: 4px; + flex: none; + min-width: 380px; + /* #ifndef APP-NVUE */ + max-width: 50%; + /* #endif */ + /* #ifdef APP-NVUE */ + max-width: 500px; + /* #endif */ + } + } + + .uni-popup-message-text { + font-size: 14px; + padding: 0; + } + + .uni-popup__success { + background-color: #e1f3d8; + } + + .uni-popup__success-text { + color: #67C23A; + } + + .uni-popup__warn { + background-color: #faecd8; + } + + .uni-popup__warn-text { + color: #E6A23C; + } + + .uni-popup__error { + background-color: #fde2e2; + } + + .uni-popup__error-text { + color: #F56C6C; + } + + .uni-popup__info { + background-color: #F2F6FC; + } + + .uni-popup__info-text { + color: #909399; + } +</style> diff --git a/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue new file mode 100644 index 0000000..c8945d5 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue @@ -0,0 +1,188 @@ +<template> + <view class="uni-popup-share"> + <view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view> + <view class="uni-share-content"> + <view class="uni-share-content-box"> + <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)"> + <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> + <text class="uni-share-text">{{item.text}}</text> + </view> + + </view> + </view> + <view class="uni-share-button-box"> + <button class="uni-share-button" @click="close">{{cancelText}}</button> + </view> + </view> +</template> + +<script> + import popup from '../uni-popup/popup.js' + import { + initVueI18n + } from '@dcloudio/uni-i18n' + import messages from '../uni-popup/i18n/index.js' + const { t } = initVueI18n(messages) + export default { + name: 'UniPopupShare', + mixins:[popup], + emits:['select'], + props: { + title: { + type: String, + default: '' + }, + beforeClose: { + type: Boolean, + default: false + } + }, + data() { + return { + // TODO 鏇挎崲涓鸿嚜宸辩殑鍥炬爣 + bottomData: [{ + text: '寰俊', + icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', + name: 'wx' + }, + { + text: '鏀粯瀹�', + icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', + name: 'ali' + }, + { + text: 'QQ', + icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', + name: 'qq' + }, + { + text: '鏂版氮', + icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', + name: 'sina' + }, + // { + // text: '鐧惧害', + // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png', + // name: 'copy' + // }, + // { + // text: '鍏朵粬', + // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png', + // name: 'more' + // } + ] + } + }, + created() {}, + computed: { + cancelText() { + return t("uni-popup.cancel") + }, + shareTitleText() { + return this.title || t("uni-popup.shareTitle") + } + }, + methods: { + /** + * 閫夋嫨鍐呭 + */ + select(item, index) { + this.$emit('select', { + item, + index + }) + this.close() + + }, + /** + * 鍏抽棴绐楀彛 + */ + close() { + if(this.beforeClose) return + this.popup.close() + } + } + } +</script> +<style lang="scss" > + .uni-popup-share { + background-color: #fff; + border-top-left-radius: 11px; + border-top-right-radius: 11px; + } + .uni-share-title { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + align-items: center; + justify-content: center; + height: 40px; + } + .uni-share-title-text { + font-size: 14px; + color: #666; + } + .uni-share-content { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + justify-content: center; + padding-top: 10px; + } + + .uni-share-content-box { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + flex-wrap: wrap; + width: 360px; + } + + .uni-share-content-item { + width: 90px; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + justify-content: center; + padding: 10px 0; + align-items: center; + } + + .uni-share-content-item:active { + background-color: #f5f5f5; + } + + .uni-share-image { + width: 30px; + height: 30px; + } + + .uni-share-text { + margin-top: 10px; + font-size: 14px; + color: #3B4144; + } + + .uni-share-button-box { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + padding: 10px 15px; + } + + .uni-share-button { + flex: 1; + border-radius: 50px; + color: #666; + font-size: 16px; + } + + .uni-share-button::after { + border-radius: 50px; + } +</style> diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/en.json b/uni_modules/uni-popup/components/uni-popup/i18n/en.json new file mode 100644 index 0000000..7f1bd06 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/en.json @@ -0,0 +1,7 @@ +{ + "uni-popup.cancel": "cancel", + "uni-popup.ok": "ok", + "uni-popup.placeholder": "pleace enter", + "uni-popup.title": "Hint", + "uni-popup.shareTitle": "Share to" +} diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/index.js b/uni_modules/uni-popup/components/uni-popup/i18n/index.js new file mode 100644 index 0000000..de7509c --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/index.js @@ -0,0 +1,8 @@ +import en from './en.json' +import zhHans from './zh-Hans.json' +import zhHant from './zh-Hant.json' +export default { + en, + 'zh-Hans': zhHans, + 'zh-Hant': zhHant +} diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json new file mode 100644 index 0000000..5e3003c --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json @@ -0,0 +1,7 @@ +{ + "uni-popup.cancel": "鍙栨秷", + "uni-popup.ok": "纭畾", + "uni-popup.placeholder": "璇疯緭鍏�", + "uni-popup.title": "鎻愮ず", + "uni-popup.shareTitle": "鍒嗕韩鍒�" +} diff --git a/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json new file mode 100644 index 0000000..13e39eb --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json @@ -0,0 +1,7 @@ +{ + "uni-popup.cancel": "鍙栨秷", + "uni-popup.ok": "纰哄畾", + "uni-popup.placeholder": "璜嬭几鍏�", + "uni-popup.title": "鎻愮ず", + "uni-popup.shareTitle": "鍒嗕韩鍒�" +} diff --git a/uni_modules/uni-popup/components/uni-popup/keypress.js b/uni_modules/uni-popup/components/uni-popup/keypress.js new file mode 100644 index 0000000..62dda46 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/keypress.js @@ -0,0 +1,45 @@ +// #ifdef H5 +export default { + name: 'Keypress', + props: { + disable: { + type: Boolean, + default: false + } + }, + mounted () { + const keyNames = { + esc: ['Esc', 'Escape'], + tab: 'Tab', + enter: 'Enter', + space: [' ', 'Spacebar'], + up: ['Up', 'ArrowUp'], + left: ['Left', 'ArrowLeft'], + right: ['Right', 'ArrowRight'], + down: ['Down', 'ArrowDown'], + delete: ['Backspace', 'Delete', 'Del'] + } + const listener = ($event) => { + if (this.disable) { + return + } + const keyName = Object.keys(keyNames).find(key => { + const keyName = $event.key + const value = keyNames[key] + return value === keyName || (Array.isArray(value) && value.includes(keyName)) + }) + if (keyName) { + // 閬垮厤鍜屽叾浠栨寜閿簨浠跺啿绐� + setTimeout(() => { + this.$emit(keyName, {}) + }, 0) + } + } + document.addEventListener('keyup', listener) + // this.$once('hook:beforeDestroy', () => { + // document.removeEventListener('keyup', listener) + // }) + }, + render: () => {} +} +// #endif diff --git a/uni_modules/uni-popup/components/uni-popup/popup.js b/uni_modules/uni-popup/components/uni-popup/popup.js new file mode 100644 index 0000000..c4e5781 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/popup.js @@ -0,0 +1,26 @@ + +export default { + data() { + return { + + } + }, + created(){ + this.popup = this.getParent() + }, + methods:{ + /** + * 鑾峰彇鐖跺厓绱犲疄渚� + */ + getParent(name = 'uniPopup') { + 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; + }, + } +} diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue b/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue new file mode 100644 index 0000000..5eb8d5b --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.uvue @@ -0,0 +1,90 @@ +<template> + <view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask"> + <view @click.stop> + <slot></slot> + </view> + </view> +</template> + +<script> + type CloseCallBack = ()=> void; + let closeCallBack:CloseCallBack = () :void => {}; + export default { + emits:["close","clickMask"], + data() { + return { + isShow:false, + isOpen:false + } + }, + props: { + maskClick: { + type: Boolean, + default: true + }, + }, + watch: { + // 璁剧疆show = true 鏃讹紝濡傛灉娌℃湁 open 闇�瑕佽缃负 open + isShow:{ + handler(isShow) { + // console.log("isShow",isShow) + if(isShow && this.isOpen == false){ + this.isOpen = true + } + }, + immediate:true + }, + // 璁剧疆isOpen = true 鏃讹紝濡傛灉娌℃湁 isShow 闇�瑕佽缃负 isShow + isOpen:{ + handler(isOpen) { + // console.log("isOpen",isOpen) + if(isOpen && this.isShow == false){ + this.isShow = true + } + }, + immediate:true + } + }, + methods:{ + open(){ + // ...funs : CloseCallBack[] + // if(funs.length > 0){ + // closeCallBack = funs[0] + // } + this.isOpen = true; + }, + clickMask(){ + if(this.maskClick == true){ + this.$emit('clickMask') + this.close() + } + }, + close(): void{ + this.isOpen = false; + this.$emit('close') + closeCallBack() + }, + hiden(){ + this.isShow = false + }, + show(){ + this.isShow = true + } + } + } +</script> + +<style> +.popup-root { + position: fixed; + top: 0; + left: 0; + width: 750rpx; + height: 100%; + flex: 1; + background-color: rgba(0, 0, 0, 0.3); + justify-content: center; + align-items: center; + z-index: 99; +} +</style> \ No newline at end of file diff --git a/uni_modules/uni-popup/components/uni-popup/uni-popup.vue b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue new file mode 100644 index 0000000..5af55e0 --- /dev/null +++ b/uni_modules/uni-popup/components/uni-popup/uni-popup.vue @@ -0,0 +1,518 @@ +<template> + <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"> + <view @touchstart="touchstart"> + <uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" + :duration="duration" :show="showTrans" @click="onTap" /> + <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" + :show="showTrans" @click="onTap"> + <view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear"> + <slot /> + </view> + </uni-transition> + </view> + <!-- #ifdef H5 --> + <keypress v-if="maskShow" @esc="onTap" /> + <!-- #endif --> + </view> +</template> + +<script> + // #ifdef H5 + import keypress from './keypress.js' + // #endif + + /** + * PopUp 寮瑰嚭灞� + * @description 寮瑰嚭灞傜粍浠讹紝涓轰簡瑙e喅閬僵寮瑰眰鐨勯棶棰� + * @tutorial https://ext.dcloud.net.cn/plugin?id=329 + * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 寮瑰嚭鏂瑰紡 + * @value top 椤堕儴寮瑰嚭 + * @value center 涓棿寮瑰嚭 + * @value bottom 搴曢儴寮瑰嚭 + * @value left 宸︿晶寮瑰嚭 + * @value right 鍙充晶寮瑰嚭 + * @value message 娑堟伅鎻愮ず + * @value dialog 瀵硅瘽妗� + * @value share 搴曢儴鍒嗕韩绀轰緥 + * @property {Boolean} animation = [true|false] 鏄惁寮�鍚姩鐢� + * @property {Boolean} maskClick = [true|false] 钂欑増鐐瑰嚮鏄惁鍏抽棴寮圭獥(搴熷純) + * @property {Boolean} isMaskClick = [true|false] 钂欑増鐐瑰嚮鏄惁鍏抽棴寮圭獥 + * @property {String} backgroundColor 涓荤獥鍙h儗鏅壊 + * @property {String} maskBackgroundColor 钂欑増棰滆壊 + * @property {String} borderRadius 璁剧疆鍦嗚(宸︿笂銆佸彸涓娿�佸彸涓嬪拰宸︿笅) 绀轰緥:"10px 10px 10px 10px" + * @property {Boolean} safeArea 鏄惁閫傞厤搴曢儴瀹夊叏鍖� + * @event {Function} change 鎵撳紑鍏抽棴寮圭獥瑙﹀彂锛宔={show: false} + * @event {Function} maskClick 鐐瑰嚮閬僵瑙﹀彂 + */ + + export default { + name: 'uniPopup', + components: { + // #ifdef H5 + keypress + // #endif + }, + emits: ['change', 'maskClick'], + props: { + // 寮�鍚姩鐢� + animation: { + type: Boolean, + default: true + }, + // 寮瑰嚭灞傜被鍨嬶紝鍙�夊�硷紝top: 椤堕儴寮瑰嚭灞傦紱bottom锛氬簳閮ㄥ脊鍑哄眰锛沜enter锛氬叏灞忓脊鍑哄眰 + // message: 娑堟伅鎻愮ず ; dialog : 瀵硅瘽妗� + type: { + type: String, + default: 'center' + }, + // maskClick + isMaskClick: { + type: Boolean, + default: null + }, + // TODO 2 涓増鏈悗搴熷純灞炴�� 锛屼娇鐢� isMaskClick + maskClick: { + type: Boolean, + default: null + }, + backgroundColor: { + type: String, + default: 'none' + }, + safeArea: { + type: Boolean, + default: true + }, + maskBackgroundColor: { + type: String, + default: 'rgba(0, 0, 0, 0.4)' + }, + borderRadius:{ + type: String, + } + }, + + watch: { + /** + * 鐩戝惉type绫诲瀷 + */ + type: { + handler: function(type) { + if (!this.config[type]) return + this[this.config[type]](true) + }, + immediate: true + }, + isDesktop: { + handler: function(newVal) { + if (!this.config[newVal]) return + this[this.config[this.type]](true) + }, + immediate: true + }, + /** + * 鐩戝惉閬僵鏄惁鍙偣鍑� + * @param {Object} val + */ + maskClick: { + handler: function(val) { + this.mkclick = val + }, + immediate: true + }, + isMaskClick: { + handler: function(val) { + this.mkclick = val + }, + immediate: true + }, + // H5 涓嬬姝㈠簳閮ㄦ粴鍔� + showPopup(show) { + // #ifdef H5 + // fix by mehaotian 澶勭悊 h5 婊氬姩绌块�忕殑闂 + document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible' + // #endif + } + }, + data() { + return { + duration: 300, + ani: [], + showPopup: false, + showTrans: false, + popupWidth: 0, + popupHeight: 0, + config: { + top: 'top', + bottom: 'bottom', + center: 'center', + left: 'left', + right: 'right', + message: 'top', + dialog: 'center', + share: 'bottom' + }, + maskClass: { + position: 'fixed', + bottom: 0, + top: 0, + left: 0, + right: 0, + backgroundColor: 'rgba(0, 0, 0, 0.4)' + }, + transClass: { + backgroundColor: 'transparent', + borderRadius: this.borderRadius || "0", + position: 'fixed', + left: 0, + right: 0 + }, + maskShow: true, + mkclick: true, + popupstyle: 'top' + } + }, + computed: { + getStyles() { + let res = { backgroundColor: this.bg }; + if (this.borderRadius || "0") { + res = Object.assign(res, { borderRadius: this.borderRadius }) + } + return res; + }, + isDesktop() { + return this.popupWidth >= 500 && this.popupHeight >= 500 + }, + bg() { + if (this.backgroundColor === '' || this.backgroundColor === 'none') { + return 'transparent' + } + return this.backgroundColor + } + }, + mounted() { + const fixSize = () => { + // #ifdef MP-WEIXIN + const { + windowWidth, + windowHeight, + windowTop, + safeArea, + screenHeight, + safeAreaInsets + } = uni.getWindowInfo() + // #endif + // #ifndef MP-WEIXIN + const { + windowWidth, + windowHeight, + windowTop, + safeArea, + screenHeight, + safeAreaInsets + } = uni.getSystemInfoSync() + // #endif + this.popupWidth = windowWidth + this.popupHeight = windowHeight + (windowTop || 0) + // TODO fix by mehaotian 鏄惁閫傞厤搴曢儴瀹夊叏鍖� ,鐩墠寰俊ios 銆佸拰 app ios 璁$畻鏈夊樊寮傦紝闇�瑕佹鏋朵慨澶� + if (safeArea && this.safeArea) { + // #ifdef MP-WEIXIN + this.safeAreaInsets = screenHeight - safeArea.bottom + // #endif + // #ifndef MP-WEIXIN + this.safeAreaInsets = safeAreaInsets.bottom + // #endif + } else { + this.safeAreaInsets = 0 + } + } + fixSize() + // #ifdef H5 + // window.addEventListener('resize', fixSize) + // this.$once('hook:beforeDestroy', () => { + // window.removeEventListener('resize', fixSize) + // }) + // #endif + }, + // #ifndef VUE3 + // TODO vue2 + destroyed() { + this.setH5Visible() + }, + // #endif + // #ifdef VUE3 + // TODO vue3 + unmounted() { + this.setH5Visible() + }, + // #endif + activated() { + this.setH5Visible(!this.showPopup); + }, + deactivated() { + this.setH5Visible(true); + }, + created() { + // this.mkclick = this.isMaskClick || this.maskClick + if (this.isMaskClick === null && this.maskClick === null) { + this.mkclick = true + } else { + this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick + } + if (this.animation) { + this.duration = 300 + } else { + this.duration = 0 + } + // TODO 澶勭悊 message 缁勪欢鐢熷懡鍛ㄦ湡寮傚父鐨勯棶棰� + this.messageChild = null + // TODO 瑙e喅澶存潯鍐掓场鐨勯棶棰� + this.clearPropagation = false + this.maskClass.backgroundColor = this.maskBackgroundColor + }, + methods: { + setH5Visible(visible = true) { + // #ifdef H5 + // fix by mehaotian 澶勭悊 h5 婊氬姩绌块�忕殑闂 + document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden"; + // #endif + }, + /** + * 鍏敤鏂规硶锛屼笉鏄剧ず閬僵灞� + */ + closeMask() { + this.maskShow = false + }, + /** + * 鍏敤鏂规硶锛岄伄缃╁眰绂佹鐐瑰嚮 + */ + disableMask() { + this.mkclick = false + }, + // TODO nvue 鍙栨秷鍐掓场 + clear(e) { + // #ifndef APP-NVUE + e.stopPropagation() + // #endif + this.clearPropagation = true + }, + + open(direction) { + // fix by mehaotian 澶勭悊蹇�熸墦寮�鍏抽棴鐨勬儏鍐� + if (this.showPopup) { + return + } + let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] + if (!(direction && innerType.indexOf(direction) !== -1)) { + direction = this.type + } + if (!this.config[direction]) { + console.error('缂哄皯绫诲瀷锛�', direction) + return + } + this[this.config[direction]]() + this.$emit('change', { + show: true, + type: direction + }) + }, + close(type) { + this.showTrans = false + this.$emit('change', { + show: false, + type: this.type + }) + clearTimeout(this.timer) + // // 鑷畾涔夊叧闂簨浠� + // this.customOpen && this.customClose() + this.timer = setTimeout(() => { + this.showPopup = false + }, 300) + }, + // TODO 澶勭悊鍐掓场浜嬩欢锛屽ご鏉$殑鍐掓场浜嬩欢鏈夐棶棰� 锛屽厛杩欐牱鍏煎 + touchstart() { + this.clearPropagation = false + }, + + onTap() { + if (this.clearPropagation) { + // fix by mehaotian 鍏煎 nvue + this.clearPropagation = false + return + } + this.$emit('maskClick') + if (!this.mkclick) return + this.close() + }, + /** + * 椤堕儴寮瑰嚭鏍峰紡澶勭悊 + */ + top(type) { + this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top' + this.ani = ['slide-top'] + this.transClass = { + position: 'fixed', + left: 0, + right: 0, + backgroundColor: this.bg, + borderRadius:this.borderRadius || "0" + } + // TODO 鍏煎 type 灞炴�� 锛屽悗缁細搴熷純 + if (type) return + this.showPopup = true + this.showTrans = true + this.$nextTick(() => { + this.showPoptrans() + if (this.messageChild && this.type === 'message') { + this.messageChild.timerClose() + } + }) + }, + /** + * 搴曢儴寮瑰嚭鏍峰紡澶勭悊 + */ + bottom(type) { + this.popupstyle = 'bottom' + this.ani = ['slide-bottom'] + this.transClass = { + position: 'fixed', + left: 0, + right: 0, + bottom: 0, + paddingBottom: this.safeAreaInsets + 'px', + backgroundColor: this.bg, + borderRadius:this.borderRadius || "0", + } + // TODO 鍏煎 type 灞炴�� 锛屽悗缁細搴熷純 + if (type) return + this.showPoptrans() + }, + /** + * 涓棿寮瑰嚭鏍峰紡澶勭悊 + */ + center(type) { + this.popupstyle = 'center' + //寰俊灏忕▼搴忎笅锛岀粍鍚堝姩鐢讳細鍑虹幇鏂囧瓧鍚戜笂闂姩闂锛屽啀姝ゅ仛鐗规畩澶勭悊 + // #ifdef MP-WEIXIN + this.ani = ['fade'] + // #endif + // #ifndef MP-WEIXIN + this.ani = ['zoom-out', 'fade'] + // #endif + this.transClass = { + position: 'fixed', + /* #ifndef APP-NVUE */ + display: 'flex', + flexDirection: 'column', + /* #endif */ + bottom: 0, + left: 0, + right: 0, + top: 0, + justifyContent: 'center', + alignItems: 'center', + borderRadius:this.borderRadius || "0" + } + // TODO 鍏煎 type 灞炴�� 锛屽悗缁細搴熷純 + if (type) return + this.showPoptrans() + }, + left(type) { + this.popupstyle = 'left' + this.ani = ['slide-left'] + this.transClass = { + position: 'fixed', + left: 0, + bottom: 0, + top: 0, + backgroundColor: this.bg, + borderRadius:this.borderRadius || "0", + /* #ifndef APP-NVUE */ + display: 'flex', + flexDirection: 'column' + /* #endif */ + } + // TODO 鍏煎 type 灞炴�� 锛屽悗缁細搴熷純 + if (type) return + this.showPoptrans() + }, + right(type) { + this.popupstyle = 'right' + this.ani = ['slide-right'] + this.transClass = { + position: 'fixed', + bottom: 0, + right: 0, + top: 0, + backgroundColor: this.bg, + borderRadius:this.borderRadius || "0", + /* #ifndef APP-NVUE */ + display: 'flex', + flexDirection: 'column' + /* #endif */ + } + // TODO 鍏煎 type 灞炴�� 锛屽悗缁細搴熷純 + if (type) return + this.showPoptrans() + }, + showPoptrans(){ + this.$nextTick(()=>{ + this.showPopup = true + this.showTrans = true + }) + } + } + } +</script> +<style lang="scss"> + .uni-popup { + position: fixed; + /* #ifndef APP-NVUE */ + z-index: 99; + + /* #endif */ + &.top, + &.left, + &.right { + /* #ifdef H5 */ + top: var(--window-top); + /* #endif */ + /* #ifndef H5 */ + top: 0; + /* #endif */ + } + + .uni-popup__wrapper { + /* #ifndef APP-NVUE */ + display: block; + /* #endif */ + position: relative; + + /* iphonex 绛夊畨鍏ㄥ尯璁剧疆锛屽簳閮ㄥ畨鍏ㄥ尯閫傞厤 */ + /* #ifndef APP-NVUE */ + // padding-bottom: constant(safe-area-inset-bottom); + // padding-bottom: env(safe-area-inset-bottom); + /* #endif */ + &.left, + &.right { + /* #ifdef H5 */ + padding-top: var(--window-top); + /* #endif */ + /* #ifndef H5 */ + padding-top: 0; + /* #endif */ + flex: 1; + } + } + } + + .fixforpc-z-index { + /* #ifndef APP-NVUE */ + z-index: 999; + /* #endif */ + } + + .fixforpc-top { + top: 0; + } +</style> diff --git a/uni_modules/uni-popup/package.json b/uni_modules/uni-popup/package.json new file mode 100644 index 0000000..d8bfb9f --- /dev/null +++ b/uni_modules/uni-popup/package.json @@ -0,0 +1,90 @@ +{ + "id": "uni-popup", + "displayName": "uni-popup 寮瑰嚭灞�", + "version": "1.9.8", + "description": " Popup 缁勪欢锛屾彁渚涘父鐢ㄧ殑寮瑰眰", + "keywords": [ + "uni-ui", + "寮瑰嚭灞�", + "寮圭獥", + "popup", + "寮规" + ], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "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" + }, + "uni_modules": { + "dependencies": [ + "uni-scss", + "uni-transition" + ], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "n" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "y", + "app-harmony": "u", + "app-uvue": "u" + }, + "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" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} diff --git a/uni_modules/uni-popup/readme.md b/uni_modules/uni-popup/readme.md new file mode 100644 index 0000000..fdad4b3 --- /dev/null +++ b/uni_modules/uni-popup/readme.md @@ -0,0 +1,17 @@ + + +## Popup 寮瑰嚭灞� +> **缁勪欢鍚嶏細uni-popup** +> 浠g爜鍧楋細 `uPopup` +> 鍏宠仈缁勪欢锛歚uni-transition` + + +寮瑰嚭灞傜粍浠讹紝鍦ㄥ簲鐢ㄤ腑寮瑰嚭涓�涓秷鎭彁绀虹獥鍙c�佹彁绀烘绛� + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-popup) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 + + + + + diff --git a/uni_modules/uni-scss/changelog.md b/uni_modules/uni-scss/changelog.md new file mode 100644 index 0000000..b863bb0 --- /dev/null +++ b/uni_modules/uni-scss/changelog.md @@ -0,0 +1,8 @@ +## 1.0.3锛�2022-01-21锛� +- 浼樺寲 缁勪欢绀轰緥 +## 1.0.2锛�2021-11-22锛� +- 淇 / 绗﹀彿鍦� vue 涓嶅悓鐗堟湰鍏煎闂寮曡捣鐨勬姤閿欓棶棰� +## 1.0.1锛�2021-11-22锛� +- 淇 vue3涓璼css璇硶鍏煎闂 +## 1.0.0锛�2021-11-18锛� +- init diff --git a/uni_modules/uni-scss/index.scss b/uni_modules/uni-scss/index.scss new file mode 100644 index 0000000..1744a5f --- /dev/null +++ b/uni_modules/uni-scss/index.scss @@ -0,0 +1 @@ +@import './styles/index.scss'; diff --git a/uni_modules/uni-scss/package.json b/uni_modules/uni-scss/package.json new file mode 100644 index 0000000..7cc0ccb --- /dev/null +++ b/uni_modules/uni-scss/package.json @@ -0,0 +1,82 @@ +{ + "id": "uni-scss", + "displayName": "uni-scss 杈呭姪鏍峰紡", + "version": "1.0.3", + "description": "uni-sass鏄痷ni-ui鎻愪緵鐨勪竴濂楀叏灞�鏍峰紡 锛岄�氳繃涓�浜涚畝鍗曠殑绫诲悕鍜宻ass鍙橀噺锛屽疄鐜扮畝鍗曠殑椤甸潰甯冨眬鎿嶄綔锛屾瘮濡傞鑹层�佽竟璺濄�佸渾瑙掔瓑銆�", + "keywords": [ + "uni-scss", + "uni-ui", + "杈呭姪鏍峰紡" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "^3.1.0" + }, + "dcloudext": { + "category": [ + "JS SDK", + "閫氱敤 SDK" + ], + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "鏃�", + "data": "鏃�", + "permissions": "鏃�" + }, + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "u" + }, + "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" + }, + "蹇簲鐢�": { + "鍗庝负": "n", + "鑱旂洘": "n" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} diff --git a/uni_modules/uni-scss/readme.md b/uni_modules/uni-scss/readme.md new file mode 100644 index 0000000..b7d1c25 --- /dev/null +++ b/uni_modules/uni-scss/readme.md @@ -0,0 +1,4 @@ +`uni-sass` 鏄� `uni-ui`鎻愪緵鐨勪竴濂楀叏灞�鏍峰紡 锛岄�氳繃涓�浜涚畝鍗曠殑绫诲悕鍜宍sass`鍙橀噺锛屽疄鐜扮畝鍗曠殑椤甸潰甯冨眬鎿嶄綔锛屾瘮濡傞鑹层�佽竟璺濄�佸渾瑙掔瓑銆� + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-sass) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 \ No newline at end of file diff --git a/uni_modules/uni-scss/styles/index.scss b/uni_modules/uni-scss/styles/index.scss new file mode 100644 index 0000000..ffac4fe --- /dev/null +++ b/uni_modules/uni-scss/styles/index.scss @@ -0,0 +1,7 @@ +@import './setting/_variables.scss'; +@import './setting/_border.scss'; +@import './setting/_color.scss'; +@import './setting/_space.scss'; +@import './setting/_radius.scss'; +@import './setting/_text.scss'; +@import './setting/_styles.scss'; diff --git a/uni_modules/uni-scss/styles/setting/_border.scss b/uni_modules/uni-scss/styles/setting/_border.scss new file mode 100644 index 0000000..12a11c3 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_border.scss @@ -0,0 +1,3 @@ +.uni-border { + border: 1px $uni-border-1 solid; +} \ No newline at end of file diff --git a/uni_modules/uni-scss/styles/setting/_color.scss b/uni_modules/uni-scss/styles/setting/_color.scss new file mode 100644 index 0000000..1ededd9 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_color.scss @@ -0,0 +1,66 @@ + +// TODO 鏆傛椂涓嶉渶瑕� class 锛岄渶瑕佺敤鎴蜂娇鐢ㄥ彉閲忓疄鐜� 锛屽鏋滀娇鐢ㄧ被鍚嶅叾瀹炲苟涓嶆帹鑽� +// @mixin get-styles($k,$c) { +// @if $k == size or $k == weight{ +// font-#{$k}:#{$c} +// }@else{ +// #{$k}:#{$c} +// } +// } +$uni-ui-color:( + // 涓昏壊 + primary: $uni-primary, + primary-disable: $uni-primary-disable, + primary-light: $uni-primary-light, + // 杈呭姪鑹� + success: $uni-success, + success-disable: $uni-success-disable, + success-light: $uni-success-light, + warning: $uni-warning, + warning-disable: $uni-warning-disable, + warning-light: $uni-warning-light, + error: $uni-error, + error-disable: $uni-error-disable, + error-light: $uni-error-light, + info: $uni-info, + info-disable: $uni-info-disable, + info-light: $uni-info-light, + // 涓�ц壊 + main-color: $uni-main-color, + base-color: $uni-base-color, + secondary-color: $uni-secondary-color, + extra-color: $uni-extra-color, + // 鑳屾櫙鑹� + bg-color: $uni-bg-color, + // 杈规棰滆壊 + border-1: $uni-border-1, + border-2: $uni-border-2, + border-3: $uni-border-3, + border-4: $uni-border-4, + // 榛戣壊 + black:$uni-black, + // 鐧借壊 + white:$uni-white, + // 閫忔槑 + transparent:$uni-transparent +) !default; +@each $key, $child in $uni-ui-color { + .uni-#{"" + $key} { + color: $child; + } + .uni-#{"" + $key}-bg { + background-color: $child; + } +} +.uni-shadow-sm { + box-shadow: $uni-shadow-sm; +} +.uni-shadow-base { + box-shadow: $uni-shadow-base; +} +.uni-shadow-lg { + box-shadow: $uni-shadow-lg; +} +.uni-mask { + background-color:$uni-mask; +} diff --git a/uni_modules/uni-scss/styles/setting/_radius.scss b/uni_modules/uni-scss/styles/setting/_radius.scss new file mode 100644 index 0000000..9a0428b --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_radius.scss @@ -0,0 +1,55 @@ +@mixin radius($r,$d:null ,$important: false){ + $radius-value:map-get($uni-radius, $r) if($important, !important, null); + // Key exists within the $uni-radius variable + @if (map-has-key($uni-radius, $r) and $d){ + @if $d == t { + border-top-left-radius:$radius-value; + border-top-right-radius:$radius-value; + }@else if $d == r { + border-top-right-radius:$radius-value; + border-bottom-right-radius:$radius-value; + }@else if $d == b { + border-bottom-left-radius:$radius-value; + border-bottom-right-radius:$radius-value; + }@else if $d == l { + border-top-left-radius:$radius-value; + border-bottom-left-radius:$radius-value; + }@else if $d == tl { + border-top-left-radius:$radius-value; + }@else if $d == tr { + border-top-right-radius:$radius-value; + }@else if $d == br { + border-bottom-right-radius:$radius-value; + }@else if $d == bl { + border-bottom-left-radius:$radius-value; + } + }@else{ + border-radius:$radius-value; + } +} + +@each $key, $child in $uni-radius { + @if($key){ + .uni-radius-#{"" + $key} { + @include radius($key) + } + }@else{ + .uni-radius { + @include radius($key) + } + } +} + +@each $direction in t, r, b, l,tl, tr, br, bl { + @each $key, $child in $uni-radius { + @if($key){ + .uni-radius-#{"" + $direction}-#{"" + $key} { + @include radius($key,$direction,false) + } + }@else{ + .uni-radius-#{$direction} { + @include radius($key,$direction,false) + } + } + } +} diff --git a/uni_modules/uni-scss/styles/setting/_space.scss b/uni_modules/uni-scss/styles/setting/_space.scss new file mode 100644 index 0000000..3c89528 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_space.scss @@ -0,0 +1,56 @@ + +@mixin fn($space,$direction,$size,$n) { + @if $n { + #{$space}-#{$direction}: #{$size*$uni-space-root}px + } @else { + #{$space}-#{$direction}: #{-$size*$uni-space-root}px + } +} +@mixin get-styles($direction,$i,$space,$n){ + @if $direction == t { + @include fn($space, top,$i,$n); + } + @if $direction == r { + @include fn($space, right,$i,$n); + } + @if $direction == b { + @include fn($space, bottom,$i,$n); + } + @if $direction == l { + @include fn($space, left,$i,$n); + } + @if $direction == x { + @include fn($space, left,$i,$n); + @include fn($space, right,$i,$n); + } + @if $direction == y { + @include fn($space, top,$i,$n); + @include fn($space, bottom,$i,$n); + } + @if $direction == a { + @if $n { + #{$space}:#{$i*$uni-space-root}px; + } @else { + #{$space}:#{-$i*$uni-space-root}px; + } + } +} + +@each $orientation in m,p { + $space: margin; + @if $orientation == m { + $space: margin; + } @else { + $space: padding; + } + @for $i from 0 through 16 { + @each $direction in t, r, b, l, x, y, a { + .uni-#{$orientation}#{$direction}-#{$i} { + @include get-styles($direction,$i,$space,true); + } + .uni-#{$orientation}#{$direction}-n#{$i} { + @include get-styles($direction,$i,$space,false); + } + } + } +} \ No newline at end of file diff --git a/uni_modules/uni-scss/styles/setting/_styles.scss b/uni_modules/uni-scss/styles/setting/_styles.scss new file mode 100644 index 0000000..689afec --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_styles.scss @@ -0,0 +1,167 @@ +/* #ifndef APP-NVUE */ + +$-color-white:#fff; +$-color-black:#000; +@mixin base-style($color) { + color: #fff; + background-color: $color; + border-color: mix($-color-black, $color, 8%); + &:not([hover-class]):active { + background: mix($-color-black, $color, 10%); + border-color: mix($-color-black, $color, 20%); + color: $-color-white; + outline: none; + } +} +@mixin is-color($color) { + @include base-style($color); + &[loading] { + @include base-style($color); + &::before { + margin-right:5px; + } + } + &[disabled] { + &, + &[loading], + &:not([hover-class]):active { + color: $-color-white; + border-color: mix(darken($color,10%), $-color-white); + background-color: mix($color, $-color-white); + } + } + +} +@mixin base-plain-style($color) { + color:$color; + background-color: mix($-color-white, $color, 90%); + border-color: mix($-color-white, $color, 70%); + &:not([hover-class]):active { + background: mix($-color-white, $color, 80%); + color: $color; + outline: none; + border-color: mix($-color-white, $color, 50%); + } +} +@mixin is-plain($color){ + &[plain] { + @include base-plain-style($color); + &[loading] { + @include base-plain-style($color); + &::before { + margin-right:5px; + } + } + &[disabled] { + &, + &:active { + color: mix($-color-white, $color, 40%); + background-color: mix($-color-white, $color, 90%); + border-color: mix($-color-white, $color, 80%); + } + } + } +} + + +.uni-btn { + margin: 5px; + color: #393939; + border:1px solid #ccc; + font-size: 16px; + font-weight: 200; + background-color: #F9F9F9; + // TODO 鏆傛椂澶勭悊杈规闅愯棌涓�杈圭殑闂 + overflow: visible; + &::after{ + border: none; + } + + &:not([type]),&[type=default] { + color: #999; + &[loading] { + background: none; + &::before { + margin-right:5px; + } + } + + + + &[disabled]{ + color: mix($-color-white, #999, 60%); + &, + &[loading], + &:active { + color: mix($-color-white, #999, 60%); + background-color: mix($-color-white,$-color-black , 98%); + border-color: mix($-color-white, #999, 85%); + } + } + + &[plain] { + color: #999; + background: none; + border-color: $uni-border-1; + &:not([hover-class]):active { + background: none; + color: mix($-color-white, $-color-black, 80%); + border-color: mix($-color-white, $-color-black, 90%); + outline: none; + } + &[disabled]{ + &, + &[loading], + &:active { + background: none; + color: mix($-color-white, #999, 60%); + border-color: mix($-color-white, #999, 85%); + } + } + } + } + + &:not([hover-class]):active { + color: mix($-color-white, $-color-black, 50%); + } + + &[size=mini] { + font-size: 16px; + font-weight: 200; + border-radius: 8px; + } + + + + &.uni-btn-small { + font-size: 14px; + } + &.uni-btn-mini { + font-size: 12px; + } + + &.uni-btn-radius { + border-radius: 999px; + } + &[type=primary] { + @include is-color($uni-primary); + @include is-plain($uni-primary) + } + &[type=success] { + @include is-color($uni-success); + @include is-plain($uni-success) + } + &[type=error] { + @include is-color($uni-error); + @include is-plain($uni-error) + } + &[type=warning] { + @include is-color($uni-warning); + @include is-plain($uni-warning) + } + &[type=info] { + @include is-color($uni-info); + @include is-plain($uni-info) + } +} +/* #endif */ diff --git a/uni_modules/uni-scss/styles/setting/_text.scss b/uni_modules/uni-scss/styles/setting/_text.scss new file mode 100644 index 0000000..a34d08f --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_text.scss @@ -0,0 +1,24 @@ +@mixin get-styles($k,$c) { + @if $k == size or $k == weight{ + font-#{$k}:#{$c} + }@else{ + #{$k}:#{$c} + } +} + +@each $key, $child in $uni-headings { + /* #ifndef APP-NVUE */ + .uni-#{$key} { + @each $k, $c in $child { + @include get-styles($k,$c) + } + } + /* #endif */ + /* #ifdef APP-NVUE */ + .container .uni-#{$key} { + @each $k, $c in $child { + @include get-styles($k,$c) + } + } + /* #endif */ +} diff --git a/uni_modules/uni-scss/styles/setting/_variables.scss b/uni_modules/uni-scss/styles/setting/_variables.scss new file mode 100644 index 0000000..557d3d7 --- /dev/null +++ b/uni_modules/uni-scss/styles/setting/_variables.scss @@ -0,0 +1,146 @@ +// @use "sass:math"; +@import '../tools/functions.scss'; +// 闂磋窛鍩虹鍊嶆暟 +$uni-space-root: 2 !default; +// 杈规鍗婂緞榛樿鍊� +$uni-radius-root:5px !default; +$uni-radius: () !default; +// 杈规鍗婂緞鏂偣 +$uni-radius: map-deep-merge( + ( + 0: 0, + // TODO 褰撳墠鐗堟湰鏆傛椂涓嶆敮鎸� sm 灞炴�� + // 'sm': math.div($uni-radius-root, 2), + null: $uni-radius-root, + 'lg': $uni-radius-root * 2, + 'xl': $uni-radius-root * 6, + 'pill': 9999px, + 'circle': 50% + ), + $uni-radius +); +// 瀛椾綋瀹舵棌 +$body-font-family: 'Roboto', sans-serif !default; +// 鏂囨湰 +$heading-font-family: $body-font-family !default; +$uni-headings: () !default; +$letterSpacing: -0.01562em; +$uni-headings: map-deep-merge( + ( + 'h1': ( + size: 32px, + weight: 300, + line-height: 50px, + // letter-spacing:-0.01562em + ), + 'h2': ( + size: 28px, + weight: 300, + line-height: 40px, + // letter-spacing: -0.00833em + ), + 'h3': ( + size: 24px, + weight: 400, + line-height: 32px, + // letter-spacing: normal + ), + 'h4': ( + size: 20px, + weight: 400, + line-height: 30px, + // letter-spacing: 0.00735em + ), + 'h5': ( + size: 16px, + weight: 400, + line-height: 24px, + // letter-spacing: normal + ), + 'h6': ( + size: 14px, + weight: 500, + line-height: 18px, + // letter-spacing: 0.0125em + ), + 'subtitle': ( + size: 12px, + weight: 400, + line-height: 20px, + // letter-spacing: 0.00937em + ), + 'body': ( + font-size: 14px, + font-weight: 400, + line-height: 22px, + // letter-spacing: 0.03125em + ), + 'caption': ( + 'size': 12px, + 'weight': 400, + 'line-height': 20px, + // 'letter-spacing': 0.03333em, + // 'text-transform': false + ) + ), + $uni-headings +); + + + +// 涓昏壊 +$uni-primary: #2979ff !default; +$uni-primary-disable:lighten($uni-primary,20%) !default; +$uni-primary-light: lighten($uni-primary,25%) !default; + +// 杈呭姪鑹� +// 闄や簡涓昏壊澶栫殑鍦烘櫙鑹诧紝闇�瑕佸湪涓嶅悓鐨勫満鏅腑浣跨敤锛堜緥濡傚嵄闄╄壊琛ㄧず鍗遍櫓鐨勬搷浣滐級銆� +$uni-success: #18bc37 !default; +$uni-success-disable:lighten($uni-success,20%) !default; +$uni-success-light: lighten($uni-success,25%) !default; + +$uni-warning: #f3a73f !default; +$uni-warning-disable:lighten($uni-warning,20%) !default; +$uni-warning-light: lighten($uni-warning,25%) !default; + +$uni-error: #e43d33 !default; +$uni-error-disable:lighten($uni-error,20%) !default; +$uni-error-light: lighten($uni-error,25%) !default; + +$uni-info: #8f939c !default; +$uni-info-disable:lighten($uni-info,20%) !default; +$uni-info-light: lighten($uni-info,25%) !default; + +// 涓�ц壊 +// 涓�ц壊鐢ㄤ簬鏂囨湰銆佽儗鏅拰杈规棰滆壊銆傞�氳繃杩愮敤涓嶅悓鐨勪腑鎬ц壊锛屾潵琛ㄧ幇灞傛缁撴瀯銆� +$uni-main-color: #3a3a3a !default; // 涓昏鏂囧瓧 +$uni-base-color: #6a6a6a !default; // 甯歌鏂囧瓧 +$uni-secondary-color: #909399 !default; // 娆¤鏂囧瓧 +$uni-extra-color: #c7c7c7 !default; // 杈呭姪璇存槑 + +// 杈规棰滆壊 +$uni-border-1: #F0F0F0 !default; +$uni-border-2: #EDEDED !default; +$uni-border-3: #DCDCDC !default; +$uni-border-4: #B9B9B9 !default; + +// 甯歌鑹� +$uni-black: #000000 !default; +$uni-white: #ffffff !default; +$uni-transparent: rgba($color: #000000, $alpha: 0) !default; + +// 鑳屾櫙鑹� +$uni-bg-color: #f7f7f7 !default; + +/* 姘村钩闂磋窛 */ +$uni-spacing-sm: 8px !default; +$uni-spacing-base: 15px !default; +$uni-spacing-lg: 30px !default; + +// 闃村奖 +$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; +$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; +$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; + +// 钂欑増 +$uni-mask: rgba($color: #000000, $alpha: 0.4) !default; diff --git a/uni_modules/uni-scss/styles/tools/functions.scss b/uni_modules/uni-scss/styles/tools/functions.scss new file mode 100644 index 0000000..ac6f63e --- /dev/null +++ b/uni_modules/uni-scss/styles/tools/functions.scss @@ -0,0 +1,19 @@ +// 鍚堝苟 map +@function map-deep-merge($parent-map, $child-map){ + $result: $parent-map; + @each $key, $child in $child-map { + $parent-has-key: map-has-key($result, $key); + $parent-value: map-get($result, $key); + $parent-type: type-of($parent-value); + $child-type: type-of($child); + $parent-is-map: $parent-type == map; + $child-is-map: $child-type == map; + + @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ + $result: map-merge($result, ( $key: $child )); + }@else { + $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); + } + } + @return $result; +}; diff --git a/uni_modules/uni-scss/theme.scss b/uni_modules/uni-scss/theme.scss new file mode 100644 index 0000000..80ee62f --- /dev/null +++ b/uni_modules/uni-scss/theme.scss @@ -0,0 +1,31 @@ +// 闂磋窛鍩虹鍊嶆暟 +$uni-space-root: 2; +// 杈规鍗婂緞榛樿鍊� +$uni-radius-root:5px; +// 涓昏壊 +$uni-primary: #2979ff; +// 杈呭姪鑹� +$uni-success: #4cd964; +// 璀﹀憡鑹� +$uni-warning: #f0ad4e; +// 閿欒鑹� +$uni-error: #dd524d; +// 鎻忚堪鑹� +$uni-info: #909399; +// 涓�ц壊 +$uni-main-color: #303133; +$uni-base-color: #606266; +$uni-secondary-color: #909399; +$uni-extra-color: #C0C4CC; +// 鑳屾櫙鑹� +$uni-bg-color: #f5f5f5; +// 杈规棰滆壊 +$uni-border-1: #DCDFE6; +$uni-border-2: #E4E7ED; +$uni-border-3: #EBEEF5; +$uni-border-4: #F2F6FC; + +// 甯歌鑹� +$uni-black: #000000; +$uni-white: #ffffff; +$uni-transparent: rgba($color: #000000, $alpha: 0); diff --git a/uni_modules/uni-scss/variables.scss b/uni_modules/uni-scss/variables.scss new file mode 100644 index 0000000..1c062d4 --- /dev/null +++ b/uni_modules/uni-scss/variables.scss @@ -0,0 +1,62 @@ +@import './styles/setting/_variables.scss'; +// 闂磋窛鍩虹鍊嶆暟 +$uni-space-root: 2; +// 杈规鍗婂緞榛樿鍊� +$uni-radius-root:5px; + +// 涓昏壊 +$uni-primary: #2979ff; +$uni-primary-disable:mix(#fff,$uni-primary,50%); +$uni-primary-light: mix(#fff,$uni-primary,80%); + +// 杈呭姪鑹� +// 闄や簡涓昏壊澶栫殑鍦烘櫙鑹诧紝闇�瑕佸湪涓嶅悓鐨勫満鏅腑浣跨敤锛堜緥濡傚嵄闄╄壊琛ㄧず鍗遍櫓鐨勬搷浣滐級銆� +$uni-success: #18bc37; +$uni-success-disable:mix(#fff,$uni-success,50%); +$uni-success-light: mix(#fff,$uni-success,80%); + +$uni-warning: #f3a73f; +$uni-warning-disable:mix(#fff,$uni-warning,50%); +$uni-warning-light: mix(#fff,$uni-warning,80%); + +$uni-error: #e43d33; +$uni-error-disable:mix(#fff,$uni-error,50%); +$uni-error-light: mix(#fff,$uni-error,80%); + +$uni-info: #8f939c; +$uni-info-disable:mix(#fff,$uni-info,50%); +$uni-info-light: mix(#fff,$uni-info,80%); + +// 涓�ц壊 +// 涓�ц壊鐢ㄤ簬鏂囨湰銆佽儗鏅拰杈规棰滆壊銆傞�氳繃杩愮敤涓嶅悓鐨勪腑鎬ц壊锛屾潵琛ㄧ幇灞傛缁撴瀯銆� +$uni-main-color: #3a3a3a; // 涓昏鏂囧瓧 +$uni-base-color: #6a6a6a; // 甯歌鏂囧瓧 +$uni-secondary-color: #909399; // 娆¤鏂囧瓧 +$uni-extra-color: #c7c7c7; // 杈呭姪璇存槑 + +// 杈规棰滆壊 +$uni-border-1: #F0F0F0; +$uni-border-2: #EDEDED; +$uni-border-3: #DCDCDC; +$uni-border-4: #B9B9B9; + +// 甯歌鑹� +$uni-black: #000000; +$uni-white: #ffffff; +$uni-transparent: rgba($color: #000000, $alpha: 0); + +// 鑳屾櫙鑹� +$uni-bg-color: #f7f7f7; + +/* 姘村钩闂磋窛 */ +$uni-spacing-sm: 8px; +$uni-spacing-base: 15px; +$uni-spacing-lg: 30px; + +// 闃村奖 +$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); +$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); +$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); + +// 钂欑増 +$uni-mask: rgba($color: #000000, $alpha: 0.4); diff --git a/uni_modules/uni-transition/changelog.md b/uni_modules/uni-transition/changelog.md new file mode 100644 index 0000000..2f2b10d --- /dev/null +++ b/uni_modules/uni-transition/changelog.md @@ -0,0 +1,27 @@ +## 1.3.4锛�2025-04-16锛� +- 淇 椤甸潰鏁版嵁鏇存柊鍒板簳鍔ㄧ敾澶嶅師鐨勯棶棰� +- 淇 绀轰緥椤甸潰鎵撳紑鎶ラ敊鐨勯棶棰� +## 1.3.3锛�2024-04-23锛� +- 淇 褰撳厓绱犱細鍙楀彉閲忓奖鍝嶈嚜鍔ㄩ殣钘忕殑bug +## 1.3.2锛�2023-05-04锛� +- 淇 NVUE 骞冲彴鎶ラ敊鐨勯棶棰� +## 1.3.1锛�2021-11-23锛� +- 淇 init 鏂规硶鍒濆鍖栭棶棰� +## 1.3.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-transition](https://uniapp.dcloud.io/component/uniui/uni-transition) +## 1.2.1锛�2021-09-27锛� +- 淇 init 鏂规硶涓嶇敓鏁堢殑 Bug +## 1.2.0锛�2021-07-30锛� +- 缁勪欢鍏煎 vue3锛屽浣曞垱寤� vue3 椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834) +## 1.1.1锛�2021-05-12锛� +- 鏂板 绀轰緥鍦板潃 +- 淇 绀轰緥椤圭洰缂哄皯缁勪欢鐨� Bug +## 1.1.0锛�2021-04-22锛� +- 鏂板 閫氳繃鏂规硶鑷畾涔夊姩鐢� +- 鏂板 custom-class 闈� NVUE 骞冲彴鏀寔鑷畾涔� class 瀹氬埗鏍峰紡 +- 浼樺寲 鍔ㄧ敾瑙﹀彂閫昏緫锛屼娇鍔ㄧ敾鏇存祦鐣� +- 浼樺寲 鏀寔鍗曠嫭鐨勫姩鐢荤被鍨� +- 浼樺寲 鏂囨。绀轰緥 +## 1.0.2锛�2021-02-05锛� +- 璋冩暣涓� uni_modules 鐩綍瑙勮寖 diff --git a/uni_modules/uni-transition/components/uni-transition/createAnimation.js b/uni_modules/uni-transition/components/uni-transition/createAnimation.js new file mode 100644 index 0000000..8f89b18 --- /dev/null +++ b/uni_modules/uni-transition/components/uni-transition/createAnimation.js @@ -0,0 +1,131 @@ +// const defaultOption = { +// duration: 300, +// timingFunction: 'linear', +// delay: 0, +// transformOrigin: '50% 50% 0' +// } +// #ifdef APP-NVUE +const nvueAnimation = uni.requireNativePlugin('animation') +// #endif +class MPAnimation { + constructor(options, _this) { + this.options = options + // 鍦╥OS10+QQ灏忕▼搴忓钩鍙颁笅锛屼紶缁欏師鐢熺殑瀵硅薄涓�瀹氭槸涓櫘閫氬璞¤�屼笉鏄疨roxy瀵硅薄锛屽惁鍒欎細鎶arameter should be Object instead of ProxyObject鐨勯敊璇� + this.animation = uni.createAnimation({ + ...options + }) + this.currentStepAnimates = {} + this.next = 0 + this.$ = _this + + } + + _nvuePushAnimates(type, args) { + let aniObj = this.currentStepAnimates[this.next] + let styles = {} + if (!aniObj) { + styles = { + styles: {}, + config: {} + } + } else { + styles = aniObj + } + if (animateTypes1.includes(type)) { + if (!styles.styles.transform) { + styles.styles.transform = '' + } + let unit = '' + if(type === 'rotate'){ + unit = 'deg' + } + styles.styles.transform += `${type}(${args+unit}) ` + } else { + styles.styles[type] = `${args}` + } + this.currentStepAnimates[this.next] = styles + } + _animateRun(styles = {}, config = {}) { + let ref = this.$.$refs['ani'].ref + if (!ref) return + return new Promise((resolve, reject) => { + nvueAnimation.transition(ref, { + styles, + ...config + }, res => { + resolve() + }) + }) + } + + _nvueNextAnimate(animates, step = 0, fn) { + let obj = animates[step] + if (obj) { + let { + styles, + config + } = obj + this._animateRun(styles, config).then(() => { + step += 1 + this._nvueNextAnimate(animates, step, fn) + }) + } else { + this.currentStepAnimates = {} + typeof fn === 'function' && fn() + this.isEnd = true + } + } + + step(config = {}) { + // #ifndef APP-NVUE + this.animation.step(config) + // #endif + // #ifdef APP-NVUE + this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config) + this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin + this.next++ + // #endif + return this + } + + run(fn) { + // #ifndef APP-NVUE + this.$.animationData = this.animation.export() + this.$.timer = setTimeout(() => { + typeof fn === 'function' && fn() + }, this.$.durationTime) + // #endif + // #ifdef APP-NVUE + this.isEnd = false + let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref + if(!ref) return + this._nvueNextAnimate(this.currentStepAnimates, 0, fn) + this.next = 0 + // #endif + } +} + + +const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d', + 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY', + 'translateZ' +] +const animateTypes2 = ['opacity', 'backgroundColor'] +const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom'] +animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => { + MPAnimation.prototype[type] = function(...args) { + // #ifndef APP-NVUE + this.animation[type](...args) + // #endif + // #ifdef APP-NVUE + this._nvuePushAnimates(type, args) + // #endif + return this + } +}) + +export function createAnimation(option, _this) { + if(!_this) return + clearTimeout(_this.timer) + return new MPAnimation(option, _this) +} diff --git a/uni_modules/uni-transition/components/uni-transition/uni-transition.vue b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue new file mode 100644 index 0000000..8772572 --- /dev/null +++ b/uni_modules/uni-transition/components/uni-transition/uni-transition.vue @@ -0,0 +1,289 @@ +<template> + <!-- #ifndef APP-NVUE --> + <view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> + <!-- #endif --> + <!-- #ifdef APP-NVUE --> + <view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> + <!-- #endif --> +</template> + +<script> +import { createAnimation } from './createAnimation' + +/** + * Transition 杩囨浮鍔ㄧ敾 + * @description 绠�鍗曡繃娓″姩鐢荤粍浠� + * @tutorial https://ext.dcloud.net.cn/plugin?id=985 + * @property {Boolean} show = [false|true] 鎺у埗缁勪欢鏄剧ず鎴栭殣钘� + * @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 杩囨浮鍔ㄧ敾绫诲瀷 + * @value fade 娓愰殣娓愬嚭杩囨浮 + * @value slide-top 鐢变笂鑷充笅杩囨浮 + * @value slide-right 鐢卞彸鑷冲乏杩囨浮 + * @value slide-bottom 鐢变笅鑷充笂杩囨浮 + * @value slide-left 鐢卞乏鑷冲彸杩囨浮 + * @value zoom-in 鐢卞皬鍒板ぇ杩囨浮 + * @value zoom-out 鐢卞ぇ鍒板皬杩囨浮 + * @property {Number} duration 杩囨浮鍔ㄧ敾鎸佺画鏃堕棿 + * @property {Object} styles 缁勪欢鏍峰紡锛屽悓 css 鏍峰紡锛屾敞鎰忓甫鈥�-鈥樿繛鎺ョ鐨勫睘鎬ч渶瑕佷娇鐢ㄥ皬椹煎嘲鍐欐硶濡傦細`backgroundColor:red` + */ +export default { + name: 'uniTransition', + emits:['click','change'], + props: { + show: { + type: Boolean, + default: false + }, + modeClass: { + type: [Array, String], + default() { + return 'fade' + } + }, + duration: { + type: Number, + default: 300 + }, + styles: { + type: Object, + default() { + return {} + } + }, + customClass:{ + type: String, + default: '' + }, + onceRender:{ + type:Boolean, + default:false + }, + }, + data() { + return { + isShow: false, + transform: '', + opacity: 1, + animationData: {}, + durationTime: 300, + config: {} + } + }, + watch: { + show: { + handler(newVal) { + if (newVal) { + this.open() + } else { + // 閬垮厤涓婃潵灏辨墽琛� close,瀵艰嚧鍔ㄧ敾閿欎贡 + if (this.isShow) { + this.close() + } + } + }, + immediate: true + } + }, + computed: { + // 鐢熸垚鏍峰紡鏁版嵁 + stylesObject() { + let styles = { + ...this.styles, + 'transition-duration': this.duration / 1000 + 's' + } + let transform = '' + for (let i in styles) { + let line = this.toLine(i) + transform += line + ':' + styles[i] + ';' + } + return transform + }, + // 鍒濆鍖栧姩鐢绘潯浠� + transformStyles() { + return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject + } + }, + created() { + // 鍔ㄧ敾榛樿閰嶇疆 + this.config = { + duration: this.duration, + timingFunction: 'ease', + transformOrigin: '50% 50%', + delay: 0 + } + this.durationTime = this.duration + }, + methods: { + /** + * ref 瑙﹀彂 鍒濆鍖栧姩鐢� + */ + init(obj = {}) { + if (obj.duration) { + this.durationTime = obj.duration + } + this.animation = createAnimation(Object.assign(this.config, obj),this) + }, + /** + * 鐐瑰嚮缁勪欢瑙﹀彂鍥炶皟 + */ + onClick() { + this.$emit('click', { + detail: this.isShow + }) + }, + /** + * ref 瑙﹀彂 鍔ㄧ敾鍒嗙粍 + * @param {Object} obj + */ + step(obj, config = {}) { + if (!this.animation) return + for (let i in obj) { + try { + if(typeof obj[i] === 'object'){ + this.animation[i](...obj[i]) + }else{ + this.animation[i](obj[i]) + } + } catch (e) { + console.error(`鏂规硶 ${i} 涓嶅瓨鍦╜) + } + } + this.animation.step(config) + return this + }, + /** + * ref 瑙﹀彂 鎵ц鍔ㄧ敾 + */ + run(fn) { + if (!this.animation) return + this.animation.run(fn) + }, + // 寮�濮嬭繃搴﹀姩鐢� + open() { + clearTimeout(this.timer) + this.transform = '' + this.isShow = true + let { opacity, transform } = this.styleInit(false) + if (typeof opacity !== 'undefined') { + this.opacity = opacity + } + this.transform = transform + // 纭繚鍔ㄦ�佹牱寮忓凡缁忕敓鏁堝悗锛屾墽琛屽姩鐢伙紝濡傛灉涓嶅姞 nextTick 锛屼細瀵艰嚧 wx 鍔ㄧ敾鎵ц寮傚父 + this.$nextTick(() => { + // TODO 瀹氭椂鍣ㄤ繚璇佸姩鐢诲畬鍏ㄦ墽琛岋紝鐩墠鏈変簺闂锛屽悗闈細鍙栨秷瀹氭椂鍣� + this.timer = setTimeout(() => { + this.animation = createAnimation(this.config, this) + this.tranfromInit(false).step() + this.animation.run(() => { + this.transform = '' + this.opacity = opacity || 1 + }) + this.$emit('change', { + detail: this.isShow + }) + }, 20) + }) + }, + // 鍏抽棴杩囧害鍔ㄧ敾 + close(type) { + if (!this.animation) return + this.tranfromInit(true) + .step() + .run(() => { + this.isShow = false + this.animationData = null + this.animation = null + let { opacity, transform } = this.styleInit(false) + this.opacity = opacity || 1 + this.transform = transform + this.$emit('change', { + detail: this.isShow + }) + }) + }, + // 澶勭悊鍔ㄧ敾寮�濮嬪墠鐨勯粯璁ゆ牱寮� + styleInit(type) { + let styles = { + transform: '' + } + let buildStyle = (type, mode) => { + if (mode === 'fade') { + styles.opacity = this.animationType(type)[mode] + } else { + styles.transform += this.animationType(type)[mode] + ' ' + } + } + if (typeof this.modeClass === 'string') { + buildStyle(type, this.modeClass) + } else { + this.modeClass.forEach(mode => { + buildStyle(type, mode) + }) + } + return styles + }, + // 澶勭悊鍐呯疆缁勫悎鍔ㄧ敾 + tranfromInit(type) { + let buildTranfrom = (type, mode) => { + let aniNum = null + if (mode === 'fade') { + aniNum = type ? 0 : 1 + } else { + aniNum = type ? '-100%' : '0' + if (mode === 'zoom-in') { + aniNum = type ? 0.8 : 1 + } + if (mode === 'zoom-out') { + aniNum = type ? 1.2 : 1 + } + if (mode === 'slide-right') { + aniNum = type ? '100%' : '0' + } + if (mode === 'slide-bottom') { + aniNum = type ? '100%' : '0' + } + } + this.animation[this.animationMode()[mode]](aniNum) + } + if (typeof this.modeClass === 'string') { + buildTranfrom(type, this.modeClass) + } else { + this.modeClass.forEach(mode => { + buildTranfrom(type, mode) + }) + } + + return this.animation + }, + animationType(type) { + return { + fade: type ? 0 : 1, + 'slide-top': `translateY(${type ? '0' : '-100%'})`, + 'slide-right': `translateX(${type ? '0' : '100%'})`, + 'slide-bottom': `translateY(${type ? '0' : '100%'})`, + 'slide-left': `translateX(${type ? '0' : '-100%'})`, + 'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`, + 'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})` + } + }, + // 鍐呯疆鍔ㄧ敾绫诲瀷涓庡疄闄呭姩鐢诲搴斿瓧鍏� + animationMode() { + return { + fade: 'opacity', + 'slide-top': 'translateY', + 'slide-right': 'translateX', + 'slide-bottom': 'translateY', + 'slide-left': 'translateX', + 'zoom-in': 'scale', + 'zoom-out': 'scale' + } + }, + // 椹煎嘲杞腑妯嚎 + toLine(name) { + return name.replace(/([A-Z])/g, '-$1').toLowerCase() + } + } +} +</script> + +<style></style> diff --git a/uni_modules/uni-transition/package.json b/uni_modules/uni-transition/package.json new file mode 100644 index 0000000..b76a3ab --- /dev/null +++ b/uni_modules/uni-transition/package.json @@ -0,0 +1,87 @@ +{ + "id": "uni-transition", + "displayName": "uni-transition 杩囨浮鍔ㄧ敾", + "version": "1.3.4", + "description": "鍏冪礌鐨勭畝鍗曡繃娓″姩鐢�", + "keywords": [ + "uni-ui", + "uniui", + "鍔ㄧ敾", + "杩囨浮", + "杩囨浮鍔ㄧ敾" +], + "repository": "https://github.com/dcloudio/uni-ui", + "engines": { + "HBuilderX": "" + }, + "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" + }, + "uni_modules": { + "dependencies": ["uni-scss"], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "n" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "y", + "app-harmony": "u", + "app-uvue": "n" + }, + "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" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/uni-transition/readme.md b/uni_modules/uni-transition/readme.md new file mode 100644 index 0000000..2f8a77e --- /dev/null +++ b/uni_modules/uni-transition/readme.md @@ -0,0 +1,11 @@ + + +## Transition 杩囨浮鍔ㄧ敾 +> **缁勪欢鍚嶏細uni-transition** +> 浠g爜鍧楋細 `uTransition` + + +鍏冪礌杩囨浮鍔ㄧ敾 + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-transition) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 \ No newline at end of file -- Gitblit v1.8.0