35 changed files with 3353 additions and 177 deletions
Split View
Diff Options
-
+0 -15component/test.vue
-
+142 -0components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue
-
+2 -1manifest.json
-
+10 -5pages.json
-
+100 -142pages/login/login.vue
-
+77 -14pages/payment/payment.vue
-
+22 -0pages/weddingCelebration/weddingCelebration.vue
-
+80 -0showLogin/showLogin.vue
-
BINstatic/payment/wedding-celebration.png
-
+23 -0uni_modules/uni-fab/changelog.md
-
+491 -0uni_modules/uni-fab/components/uni-fab/uni-fab.vue
-
+84 -0uni_modules/uni-fab/package.json
-
+9 -0uni_modules/uni-fab/readme.md
-
+84 -0uni_modules/uni-popup/changelog.md
-
+45 -0uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
-
+316 -0uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
-
+143 -0uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
-
+187 -0uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
-
+7 -0uni_modules/uni-popup/components/uni-popup/i18n/en.json
-
+8 -0uni_modules/uni-popup/components/uni-popup/i18n/index.js
-
+7 -0uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
-
+7 -0uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
-
+45 -0uni_modules/uni-popup/components/uni-popup/keypress.js
-
+26 -0uni_modules/uni-popup/components/uni-popup/popup.js
-
+90 -0uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
-
+503 -0uni_modules/uni-popup/components/uni-popup/uni-popup.vue
-
+88 -0uni_modules/uni-popup/package.json
-
+17 -0uni_modules/uni-popup/readme.md
-
+24 -0uni_modules/uni-transition/changelog.md
-
+131 -0uni_modules/uni-transition/components/uni-transition/createAnimation.js
-
+286 -0uni_modules/uni-transition/components/uni-transition/uni-transition.vue
-
+85 -0uni_modules/uni-transition/package.json
-
+11 -0uni_modules/uni-transition/readme.md
-
+59 -0utils/api.js
-
+144 -0utils/http.js
+ 0
- 15
component/test.vue
View File
| @ -1,15 +0,0 @@ | |||
| <template> | |||
| <view class="test"> | |||
| test | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .test { | |||
| } | |||
| </style> | |||
+ 142
- 0
components/PrivacyAgreementPoup/PrivacyAgreementPoup.vue
View File
| @ -0,0 +1,142 @@ | |||
| <template> | |||
| <uni-popup ref="privacyPopup" type="center" :is-mask-click="true"> | |||
| <view class="privacyPopup"> | |||
| <view class="title"> | |||
| <view class="title_circle"></view> | |||
| <view>惠享服务圈</view> | |||
| </view> | |||
| <view class="content_pri"> | |||
| <text>在你使用【惠享服务圈】服务之前，请仔细阅读</text> | |||
| <text style="color: #1793ee;" @click="goToPrivacy">《惠享服务圈小程序隐私保护指引》</text>。 | |||
| <text>如你同意惠享服务圈小程序隐私保护指引，请点击“同意”开始使用【惠享服务圈】。</text> | |||
| </view> | |||
| <view class="pri_btn"> | |||
| <button class="confuse_btn" @click="confusePrivacy">拒绝</button> | |||
| <button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization" | |||
| @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button> | |||
| </view> | |||
| </view> | |||
| </uni-popup> | |||
| </template> | |||
| <script setup> | |||
| import { | |||
| onShow | |||
| } from "@dcloudio/uni-app" | |||
| import { | |||
| reactive, | |||
| ref, | |||
| defineExpose | |||
| } from 'vue'; | |||
| const privacyPopup = ref() | |||
| let resolvePrivacyAuthorization | |||
| //初始化 | |||
| function init(resolve) { | |||
| privacyPopup.value.open() | |||
| resolvePrivacyAuthorization = resolve | |||
| } | |||
| // 打开隐私协议 | |||
| function goToPrivacy() { | |||
| wx.openPrivacyContract({ | |||
| success: () => { | |||
| console.log('打开成功'); | |||
| }, // 打开成功 | |||
| fail: () => { | |||
| uni.showToast({ | |||
| title: '打开失败，稍后重试', | |||
| icon: 'none' | |||
| }) | |||
| } // 打开失败 | |||
| }) | |||
| } | |||
| // 拒绝 | |||
| function confusePrivacy() { | |||
| privacyPopup.value.close() | |||
| resolvePrivacyAuthorization({ | |||
| event: 'disagree' | |||
| }) | |||
| } | |||
| // 同意 | |||
| function handleAgreePrivacyAuthorization() { | |||
| // 告知平台用户已经同意，参数传同意按钮的id | |||
| resolvePrivacyAuthorization({ | |||
| buttonId: 'agree-btn', | |||
| event: 'agree' | |||
| }) | |||
| privacyPopup.close() | |||
| } | |||
| defineExpose({ | |||
| init | |||
| }); | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| // *{ | |||
| // box-sizing: border-box; | |||
| // } | |||
| .privacyPopup { | |||
| width: 520rpx; | |||
| /* height: 500rpx; */ | |||
| background-color: #fff; | |||
| border-radius: 50rpx; | |||
| padding: 20rpx 40rpx; | |||
| } | |||
| .title { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: start; | |||
| margin: 20rpx 0; | |||
| font-size: 38rpx; | |||
| font-weight: 600; | |||
| } | |||
| .title .title_circle { | |||
| width: 60rpx; | |||
| height: 60rpx; | |||
| background-color: #efefef; | |||
| border-radius: 50%; | |||
| margin-right: 20rpx; | |||
| } | |||
| .content_pri { | |||
| width: 480rpx; | |||
| margin: 0 auto; | |||
| font-size: 34rpx; | |||
| line-height: 1.5; | |||
| } | |||
| .pri_btn { | |||
| width: 100%; | |||
| height: 158rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-evenly; | |||
| } | |||
| .pri_btn .confuse_btn, | |||
| .pri_btn .confirm_btn { | |||
| width: 200rpx; | |||
| height: 90rpx; | |||
| border-radius: 20rpx; | |||
| font-size: 34rpx; | |||
| } | |||
| .pri_btn .confuse_btn { | |||
| background-color: #eee; | |||
| color: #52bf6b; | |||
| } | |||
| .pri_btn .confirm_btn { | |||
| background-color: #52bf6b; | |||
| color: #fff; | |||
| } | |||
| </style> | |||
+ 2
- 1
manifest.json
View File
+ 10
- 5
pages.json
View File
+ 100
- 142
pages/login/login.vue
View File
| @ -1,170 +1,128 @@ | |||
| <template> | |||
| <view class="content"> | |||
| <view class="loginBox"> | |||
| <h3 style="text-align: center;margin-bottom:120rpx;">欢迎登录</h3> | |||
| <view class="inputBox"> | |||
| <view class="ipt"> | |||
| <uni-icons type="contact" size="24" color="rgb(66,157,250)"></uni-icons> | |||
| <input type="text" value="" placeholder="请输入手机号" /> | |||
| </view> | |||
| <view class="ipt"> | |||
| <uni-icons type="eye" size="24" color="rgb(66,157,250)"></uni-icons> | |||
| <input type="passsword" value="" placeholder="请输入密码" /> | |||
| </view> | |||
| <view class="ipt"> | |||
| <uni-icons type="checkmarkempty" size="24" color="rgb(66,157,250)"></uni-icons> | |||
| <input type="text" value="" placeholder="请输入验证码" /> | |||
| <view class="yzm"> | |||
| 验证码 | |||
| </view> | |||
| <view class="login"> | |||
| <view class="title"> | |||
| 帧视界 | |||
| </view> | |||
| <view class="title"> | |||
| 申请获取你的头像、昵称 | |||
| </view> | |||
| <button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> | |||
| <view class="line"> | |||
| <view class=""> | |||
| 头像 | |||
| </view> | |||
| <button @click="login">登录</button> | |||
| <view class="forgetPwd"> | |||
| <!-- <span>忘记密码</span> --> | |||
| <!-- <span>没有账号，去注册</span> --> | |||
| <view class=""> | |||
| <image :src="avatarUrl" v-if="avatarUrl" style="width: 60rpx;height: 60rpx;" mode=""></image> | |||
| <image src="/static/image/tabbar/6.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image> | |||
| </view> | |||
| </view> | |||
| <view class="tipbox"> | |||
| <view class="txt"> | |||
| —— 其他账号登录 —— | |||
| </view> | |||
| <view class="otherUser"> | |||
| <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons> | |||
| </view> | |||
| </button> | |||
| <view class="line"> | |||
| <view class=""> | |||
| 昵称 | |||
| </view> | |||
| <view class=""> | |||
| <input type="nickname" placeholder="请输入昵称" style="text-align: right;" v-model="nickname" /> | |||
| </view> | |||
| </view> | |||
| <view @click="login" class="btn"> | |||
| 授权登录 | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import api from '@/utils/api.js' | |||
| export default { | |||
| data() { | |||
| return { | |||
| } | |||
| avatarUrl: '', | |||
| nickname: '', | |||
| }; | |||
| }, | |||
| onShow() {}, | |||
| methods: { | |||
| //登录 | |||
| login() { | |||
| uni.switchTab({ | |||
| url: '/pages/payment/payment' | |||
| onChooseAvatar(res) { | |||
| console.log(res); | |||
| this.avatarUrl = res.target.avatarUrl | |||
| }, | |||
| login(state) { | |||
| uni.login({ | |||
| success(res) { | |||
| if (res.errMsg != "login:ok") { | |||
| return | |||
| } | |||
| api('loginLogin', { | |||
| code: res.code | |||
| }, res => { | |||
| if (res.code != 200) { | |||
| return | |||
| } | |||
| state.userInfo = res.result.userInfo | |||
| uni.setStorageSync('token', res.result.token) | |||
| if (state.userInfo) { | |||
| } | |||
| }) | |||
| } | |||
| }) | |||
| } | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| svg { | |||
| position: absolute; | |||
| bottom: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 40%; | |||
| box-sizing: border-box; | |||
| display: block; | |||
| background-color: #ffffff; | |||
| } | |||
| .loginBox { | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translate(-50%, -60%); | |||
| width: 90%; | |||
| border-radius: 20rpx; | |||
| padding: 60rpx; | |||
| box-sizing: border-box; | |||
| } | |||
| h3 { | |||
| color: rgb(66, 157, 250); | |||
| font-size: 40rpx; | |||
| letter-spacing: 10rpx; | |||
| margin-bottom: 40rpx; | |||
| } | |||
| .inputBox {} | |||
| .ipt { | |||
| height: 86rpx; | |||
| <style lang="scss" scoped> | |||
| .login { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin-bottom: 40rpx; | |||
| background-color: #f5f5f5; | |||
| border-radius: 10rpx; | |||
| padding-left: 10rpx; | |||
| } | |||
| height: 80vh; | |||
| .ipt input { | |||
| margin-left: 20rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .ipt input { | |||
| margin-left: 20rpx; | |||
| } | |||
| .forgetPwd { | |||
| margin-top: 30rpx; | |||
| font-size: 26rpx; | |||
| color: #b5b5b5; | |||
| text-align: end; | |||
| padding: 0 10rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| } | |||
| button { | |||
| margin-top: 20rpx; | |||
| line-height: 85rpx; | |||
| text-align: center; | |||
| background: rgb(66, 157, 250); | |||
| border-radius: 40rpx; | |||
| color: #fff; | |||
| margin-top: 40rpx; | |||
| } | |||
| .tip { | |||
| text-align: center; | |||
| font-size: 28rpx; | |||
| position: fixed; | |||
| bottom: 50rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| color: #f4f4f4; | |||
| } | |||
| .tipbox { | |||
| text-align: center; | |||
| margin-top: 100rpx; | |||
| } | |||
| .otherUser { | |||
| margin-top: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| } | |||
| .title { | |||
| line-height: 45rpx; | |||
| font-weight: 900; | |||
| } | |||
| .txt { | |||
| font-size: 28rpx; | |||
| color: #cbcbcb; | |||
| } | |||
| .line { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| align-items: center; | |||
| width: 80%; | |||
| border-bottom: 1px solid #00000023; | |||
| padding: 30rpx 0; | |||
| margin: 0 auto; | |||
| } | |||
| .otherUser .uni-icons { | |||
| margin-left: 20rpx; | |||
| } | |||
| .chooseAvatar { | |||
| width: 100%; | |||
| padding: 0; | |||
| margin: 0; | |||
| margin-top: 10vh; | |||
| border: none; | |||
| } | |||
| .yzm { | |||
| text-align: end; | |||
| font-size: 24rpx; | |||
| background: linear-gradient(to right, rgb(66, 157, 250), rgb(0, 170, 127)); | |||
| height: 60rpx; | |||
| width: 150rpx; | |||
| line-height: 60rpx; | |||
| text-align: center; | |||
| border-radius: 10rpx; | |||
| color: #fff; | |||
| .btn { | |||
| // background: $uni-linear-gradient-btn-color; | |||
| background: lightblue; | |||
| color: #fff; | |||
| width: 80%; | |||
| padding: 20rpx 0; | |||
| text-align: center; | |||
| border-radius: 15rpx; | |||
| margin-top: 10vh; | |||
| } | |||
| } | |||
| </style> | |||
+ 77
- 14
pages/payment/payment.vue
View File
+ 22
- 0
pages/weddingCelebration/weddingCelebration.vue
View File
| @ -0,0 +1,22 @@ | |||
| <template> | |||
| <view class="weddingCelebration"> | |||
| <uni-nav-bar dark :fixed="true" background-color="#00aaff" :border="false" status-bar title="婚庆服务" /> | |||
| <uni-section title="婚庆服务" type="line" titleFontSize="34rpx"> | |||
| <uni-card :is-shadow="false"> | |||
| <image style="width: 100%;" src="https://ts1.cn.mm.bing.net/th/id/R-C.b6359b70784d251138d9dc56b650274b?rik=WiMqW3Pnt%2fImmg&riu=http%3a%2f%2fwww.deepp.com%2fimages%2fcode.png&ehk=pWaMA%2fmVIw943tuInsYTSXgBj%2f3oDTqWhx9Hx3hMtRI%3d&risl=&pid=ImgRaw&r=0" mode="widthFix" :show-menu-by-longpress="true"></image> | |||
| </uni-card> | |||
| </uni-section> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .weddingCelebration{ | |||
| min-height: 100vh; | |||
| width: 750rpx; | |||
| margin: 0rpx auto; | |||
| } | |||
| </style> | |||
+ 80
- 0
showLogin/showLogin.vue
View File
| @ -0,0 +1,80 @@ | |||
| <template> | |||
| <uv-popup | |||
| round="40rpx" | |||
| :safeAreaInsetBottom="false" | |||
| :closeOnClickOverlay="false" | |||
| ref="popup"> | |||
| <view class="toast"> | |||
| <view class="title"> | |||
| 提示 | |||
| </view> | |||
| <view class="content"> | |||
| 本小程序需要登录之后才可以正常使用 | |||
| </view> | |||
| <view class="btnstwo"> | |||
| <view class="btn c" | |||
| @click="cancel"> | |||
| 取消 | |||
| </view> | |||
| <view class="btn" | |||
| @click="$store.commit('login')"> | |||
| 登录 | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </uv-popup> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| name : 'toast', | |||
| methods : { | |||
| checkLogin(){ | |||
| if(!uni.getStorageSync('token')){ | |||
| this.$refs.popup.open(); | |||
| } | |||
| }, | |||
| cancel(){ | |||
| uni.redirectTo({ | |||
| url: '/pages/index/index' | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .toast{ | |||
| width: 500rpx; | |||
| .title{ | |||
| min-height: 70rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| font-size: 32rpx; | |||
| } | |||
| .content{ | |||
| font-size: 28rpx; | |||
| min-height: 300rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| } | |||
| .btnstwo{ | |||
| display: flex; | |||
| .btn{ | |||
| flex: 1; | |||
| // background: $uni-linear-gradient-btn-color; | |||
| color: #fff; | |||
| padding: 20rpx 0; | |||
| text-align: center; | |||
| } | |||
| .c{ | |||
| background: #fff; | |||
| border-top: 1px solid #999; | |||
| color: #333; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
BIN
static/payment/wedding-celebration.png
View File
| Before | After |
|---|---|
|
|
| Width: 256 | Height: 256 | Size: 9.0 KiB |
+ 23
- 0
uni_modules/uni-fab/changelog.md
View File
| @ -0,0 +1,23 @@ | |||
| ## 1.2.5（2023-03-29） | |||
| - 新增 pattern.icon 属性，可自定义图标 | |||
| ## 1.2.4（2022-09-07） | |||
| 小程序端由于 style 使用了对象导致报错，[详情](https://ask.dcloud.net.cn/question/152790?item_id=211778&rf=false) | |||
| ## 1.2.3（2022-09-05） | |||
| - 修复 nvue 环境下，具有 tabBar 时，fab 组件下部位置无法正常获取 --window-bottom 的bug，详见：[https://ask.dcloud.net.cn/question/110638?notification_id=826310](https://ask.dcloud.net.cn/question/110638?notification_id=826310) | |||
| ## 1.2.2（2021-12-29） | |||
| - 更新 组件依赖 | |||
| ## 1.2.1（2021-11-19） | |||
| - 修复 阴影颜色不正确的bug | |||
| ## 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-fab](https://uniapp.dcloud.io/component/uniui/uni-fab) | |||
| ## 1.1.1（2021-11-09） | |||
| - 新增 提供组件设计资源，组件样式调整 | |||
| ## 1.1.0（2021-07-30） | |||
| - 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||
| ## 1.0.7（2021-05-12） | |||
| - 新增 组件示例地址 | |||
| ## 1.0.6（2021-02-05） | |||
| - 调整为uni_modules目录规范 | |||
| - 优化 按钮背景色调整 | |||
| - 优化 兼容pc端 | |||
+ 491
- 0
uni_modules/uni-fab/components/uni-fab/uni-fab.vue
View File
| @ -0,0 +1,491 @@ | |||
| <template> | |||
| <view class="uni-cursor-point"> | |||
| <view v-if="popMenu && (leftBottom||rightBottom||leftTop||rightTop) && content.length > 0" :class="{ | |||
| 'uni-fab--leftBottom': leftBottom, | |||
| 'uni-fab--rightBottom': rightBottom, | |||
| 'uni-fab--leftTop': leftTop, | |||
| 'uni-fab--rightTop': rightTop | |||
| }" class="uni-fab" | |||
| :style="nvueBottom" | |||
| > | |||
| <view :class="{ | |||
| 'uni-fab__content--left': horizontal === 'left', | |||
| 'uni-fab__content--right': horizontal === 'right', | |||
| 'uni-fab__content--flexDirection': direction === 'vertical', | |||
| 'uni-fab__content--flexDirectionStart': flexDirectionStart, | |||
| 'uni-fab__content--flexDirectionEnd': flexDirectionEnd, | |||
| 'uni-fab__content--other-platform': !isAndroidNvue | |||
| }" :style="{ width: boxWidth, height: boxHeight, backgroundColor: styles.backgroundColor }" | |||
| class="uni-fab__content" elevation="5"> | |||
| <view v-if="flexDirectionStart || horizontalLeft" class="uni-fab__item uni-fab__item--first" /> | |||
| <view v-for="(item, index) in content" :key="index" :class="{ 'uni-fab__item--active': isShow }" | |||
| class="uni-fab__item" @click="_onItemClick(index, item)"> | |||
| <image :src="item.active ? item.selectedIconPath : item.iconPath" class="uni-fab__item-image" | |||
| mode="aspectFit" /> | |||
| <text class="uni-fab__item-text" | |||
| :style="{ color: item.active ? styles.selectedColor : styles.color }">{{ item.text }}</text> | |||
| </view> | |||
| <view v-if="flexDirectionEnd || horizontalRight" class="uni-fab__item uni-fab__item--first" /> | |||
| </view> | |||
| </view> | |||
| <view :class="{ | |||
| 'uni-fab__circle--leftBottom': leftBottom, | |||
| 'uni-fab__circle--rightBottom': rightBottom, | |||
| 'uni-fab__circle--leftTop': leftTop, | |||
| 'uni-fab__circle--rightTop': rightTop, | |||
| 'uni-fab__content--other-platform': !isAndroidNvue | |||
| }" class="uni-fab__circle uni-fab__plus" :style="{ 'background-color': styles.buttonColor, 'bottom': nvueBottom }" @click="_onClick"> | |||
| <uni-icons class="fab-circle-icon" :type="styles.icon" :color="styles.iconColor" size="32" | |||
| :class="{'uni-fab__plus--active': isShow && content.length > 0}"></uni-icons> | |||
| <!-- <view class="fab-circle-v" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> | |||
| <view class="fab-circle-h" :class="{'uni-fab__plus--active': isShow && content.length > 0}"></view> --> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| let platform = 'other' | |||
| // #ifdef APP-NVUE | |||
| platform = uni.getSystemInfoSync().platform | |||
| // #endif | |||
| /** | |||
| * Fab 悬浮按钮 | |||
| * @description 点击可展开一个图形按钮菜单 | |||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=144 | |||
| * @property {Object} pattern 可选样式配置项 | |||
| * @property {Object} horizontal = [left | right] 水平对齐方式 | |||
| * @value left 左对齐 | |||
| * @value right 右对齐 | |||
| * @property {Object} vertical = [bottom | top] 垂直对齐方式 | |||
| * @value bottom 下对齐 | |||
| * @value top 上对齐 | |||
| * @property {Object} direction = [horizontal | vertical] 展开菜单显示方式 | |||
| * @value horizontal 水平显示 | |||
| * @value vertical 垂直显示 | |||
| * @property {Array} content 展开菜单内容配置项 | |||
| * @property {Boolean} popMenu 是否使用弹出菜单 | |||
| * @event {Function} trigger 展开菜单点击事件，返回点击信息 | |||
| * @event {Function} fabClick 悬浮按钮点击事件 | |||
| */ | |||
| export default { | |||
| name: 'UniFab', | |||
| emits: ['fabClick', 'trigger'], | |||
| props: { | |||
| pattern: { | |||
| type: Object, | |||
| default () { | |||
| return {} | |||
| } | |||
| }, | |||
| horizontal: { | |||
| type: String, | |||
| default: 'left' | |||
| }, | |||
| vertical: { | |||
| type: String, | |||
| default: 'bottom' | |||
| }, | |||
| direction: { | |||
| type: String, | |||
| default: 'horizontal' | |||
| }, | |||
| content: { | |||
| type: Array, | |||
| default () { | |||
| return [] | |||
| } | |||
| }, | |||
| show: { | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| popMenu: { | |||
| type: Boolean, | |||
| default: true | |||
| } | |||
| }, | |||
| data() { | |||
| return { | |||
| fabShow: false, | |||
| isShow: false, | |||
| isAndroidNvue: platform === 'android', | |||
| styles: { | |||
| color: '#3c3e49', | |||
| selectedColor: '#007AFF', | |||
| backgroundColor: '#fff', | |||
| buttonColor: '#007AFF', | |||
| iconColor: '#fff', | |||
| icon: 'plusempty' | |||
| } | |||
| } | |||
| }, | |||
| computed: { | |||
| contentWidth(e) { | |||
| return (this.content.length + 1) * 55 + 15 + 'px' | |||
| }, | |||
| contentWidthMin() { | |||
| return '55px' | |||
| }, | |||
| // 动态计算宽度 | |||
| boxWidth() { | |||
| return this.getPosition(3, 'horizontal') | |||
| }, | |||
| // 动态计算高度 | |||
| boxHeight() { | |||
| return this.getPosition(3, 'vertical') | |||
| }, | |||
| // 计算左下位置 | |||
| leftBottom() { | |||
| return this.getPosition(0, 'left', 'bottom') | |||
| }, | |||
| // 计算右下位置 | |||
| rightBottom() { | |||
| return this.getPosition(0, 'right', 'bottom') | |||
| }, | |||
| // 计算左上位置 | |||
| leftTop() { | |||
| return this.getPosition(0, 'left', 'top') | |||
| }, | |||
| rightTop() { | |||
| return this.getPosition(0, 'right', 'top') | |||
| }, | |||
| flexDirectionStart() { | |||
| return this.getPosition(1, 'vertical', 'top') | |||
| }, | |||
| flexDirectionEnd() { | |||
| return this.getPosition(1, 'vertical', 'bottom') | |||
| }, | |||
| horizontalLeft() { | |||
| return this.getPosition(2, 'horizontal', 'left') | |||
| }, | |||
| horizontalRight() { | |||
| return this.getPosition(2, 'horizontal', 'right') | |||
| }, | |||
| // 计算 nvue bottom | |||
| nvueBottom() { | |||
| const safeBottom = uni.getSystemInfoSync().windowBottom; | |||
| // #ifdef APP-NVUE | |||
| return 30 + safeBottom | |||
| // #endif | |||
| // #ifndef APP-NVUE | |||
| return 30 | |||
| // #endif | |||
| } | |||
| }, | |||
| watch: { | |||
| pattern: { | |||
| handler(val, oldVal) { | |||
| this.styles = Object.assign({}, this.styles, val) | |||
| }, | |||
| deep: true | |||
| } | |||
| }, | |||
| created() { | |||
| this.isShow = this.show | |||
| if (this.top === 0) { | |||
| this.fabShow = true | |||
| } | |||
| // 初始化样式 | |||
| this.styles = Object.assign({}, this.styles, this.pattern) | |||
| }, | |||
| methods: { | |||
| _onClick() { | |||
| this.$emit('fabClick') | |||
| if (!this.popMenu) { | |||
| return | |||
| } | |||
| this.isShow = !this.isShow | |||
| }, | |||
| open() { | |||
| this.isShow = true | |||
| }, | |||
| close() { | |||
| this.isShow = false | |||
| }, | |||
| /** | |||
| * 按钮点击事件 | |||
| */ | |||
| _onItemClick(index, item) { | |||
| if (!this.isShow) { | |||
| return | |||
| } | |||
| this.$emit('trigger', { | |||
| index, | |||
| item | |||
| }) | |||
| }, | |||
| /** | |||
| * 获取 位置信息 | |||
| */ | |||
| getPosition(types, paramA, paramB) { | |||
| if (types === 0) { | |||
| return this.horizontal === paramA && this.vertical === paramB | |||
| } else if (types === 1) { | |||
| return this.direction === paramA && this.vertical === paramB | |||
| } else if (types === 2) { | |||
| return this.direction === paramA && this.horizontal === paramB | |||
| } else { | |||
| return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" > | |||
| $uni-shadow-base:0 1px 5px 2px rgba($color: #000000, $alpha: 0.3) !default; | |||
| .uni-fab { | |||
| position: fixed; | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| justify-content: center; | |||
| align-items: center; | |||
| z-index: 10; | |||
| border-radius: 45px; | |||
| box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-cursor-point { | |||
| /* #ifdef H5 */ | |||
| cursor: pointer; | |||
| /* #endif */ | |||
| } | |||
| .uni-fab--active { | |||
| opacity: 1; | |||
| } | |||
| .uni-fab--leftBottom { | |||
| left: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab--leftTop { | |||
| left: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab--rightBottom { | |||
| right: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab--rightTop { | |||
| right: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| // padding: 10px; | |||
| } | |||
| .uni-fab__circle { | |||
| position: fixed; | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 55px; | |||
| height: 55px; | |||
| background-color: #3c3e49; | |||
| border-radius: 45px; | |||
| z-index: 11; | |||
| // box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-fab__circle--leftBottom { | |||
| left: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--leftTop { | |||
| left: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| left: calc(15px + var(--window-left)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--rightBottom { | |||
| right: 15px; | |||
| bottom: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| bottom: calc(30px + var(--window-bottom)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--rightTop { | |||
| right: 15px; | |||
| top: 30px; | |||
| /* #ifdef H5 */ | |||
| right: calc(15px + var(--window-right)); | |||
| top: calc(30px + var(--window-top)); | |||
| /* #endif */ | |||
| } | |||
| .uni-fab__circle--left { | |||
| left: 0; | |||
| } | |||
| .uni-fab__circle--right { | |||
| right: 0; | |||
| } | |||
| .uni-fab__circle--top { | |||
| top: 0; | |||
| } | |||
| .uni-fab__circle--bottom { | |||
| bottom: 0; | |||
| } | |||
| .uni-fab__plus { | |||
| font-weight: bold; | |||
| } | |||
| // .fab-circle-v { | |||
| // position: absolute; | |||
| // width: 2px; | |||
| // height: 24px; | |||
| // left: 0; | |||
| // top: 0; | |||
| // right: 0; | |||
| // bottom: 0; | |||
| // /* #ifndef APP-NVUE */ | |||
| // margin: auto; | |||
| // /* #endif */ | |||
| // background-color: white; | |||
| // transform: rotate(0deg); | |||
| // transition: transform 0.3s; | |||
| // } | |||
| // .fab-circle-h { | |||
| // position: absolute; | |||
| // width: 24px; | |||
| // height: 2px; | |||
| // left: 0; | |||
| // top: 0; | |||
| // right: 0; | |||
| // bottom: 0; | |||
| // /* #ifndef APP-NVUE */ | |||
| // margin: auto; | |||
| // /* #endif */ | |||
| // background-color: white; | |||
| // transform: rotate(0deg); | |||
| // transition: transform 0.3s; | |||
| // } | |||
| .fab-circle-icon { | |||
| transform: rotate(0deg); | |||
| transition: transform 0.3s; | |||
| font-weight: 200; | |||
| } | |||
| .uni-fab__plus--active { | |||
| transform: rotate(135deg); | |||
| } | |||
| .uni-fab__content { | |||
| /* #ifndef APP-NVUE */ | |||
| box-sizing: border-box; | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: row; | |||
| border-radius: 55px; | |||
| overflow: hidden; | |||
| transition-property: width, height; | |||
| transition-duration: 0.2s; | |||
| width: 55px; | |||
| border-color: #DDDDDD; | |||
| border-width: 1rpx; | |||
| border-style: solid; | |||
| } | |||
| .uni-fab__content--other-platform { | |||
| border-width: 0px; | |||
| box-shadow: $uni-shadow-base; | |||
| } | |||
| .uni-fab__content--left { | |||
| justify-content: flex-start; | |||
| } | |||
| .uni-fab__content--right { | |||
| justify-content: flex-end; | |||
| } | |||
| .uni-fab__content--flexDirection { | |||
| flex-direction: column; | |||
| justify-content: flex-end; | |||
| } | |||
| .uni-fab__content--flexDirectionStart { | |||
| flex-direction: column; | |||
| justify-content: flex-start; | |||
| } | |||
| .uni-fab__content--flexDirectionEnd { | |||
| flex-direction: column; | |||
| justify-content: flex-end; | |||
| } | |||
| .uni-fab__item { | |||
| /* #ifndef APP-NVUE */ | |||
| display: flex; | |||
| /* #endif */ | |||
| flex-direction: column; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 55px; | |||
| height: 55px; | |||
| opacity: 0; | |||
| transition: opacity 0.2s; | |||
| } | |||
| .uni-fab__item--active { | |||
| opacity: 1; | |||
| } | |||
| .uni-fab__item-image { | |||
| width: 20px; | |||
| height: 20px; | |||
| margin-bottom: 4px; | |||
| } | |||
| .uni-fab__item-text { | |||
| color: #FFFFFF; | |||
| font-size: 12px; | |||
| line-height: 12px; | |||
| margin-top: 2px; | |||
| } | |||
| .uni-fab__item--first { | |||
| width: 55px; | |||
| } | |||
| </style> | |||
+ 84
- 0
uni_modules/uni-fab/package.json
View File
| @ -0,0 +1,84 @@ | |||
| { | |||
| "id": "uni-fab", | |||
| "displayName": "uni-fab 悬浮按钮", | |||
| "version": "1.2.5", | |||
| "description": "悬浮按钮 fab button ，点击可展开一个图标按钮菜单。", | |||
| "keywords": [ | |||
| "uni-ui", | |||
| "uniui", | |||
| "按钮", | |||
| "悬浮按钮", | |||
| "fab" | |||
| ], | |||
| "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-icons"], | |||
| "encrypt": [], | |||
| "platforms": { | |||
| "cloud": { | |||
| "tcb": "y", | |||
| "aliyun": "y" | |||
| }, | |||
| "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" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 9
- 0
uni_modules/uni-fab/readme.md
View File
| @ -0,0 +1,9 @@ | |||
| ## Fab 悬浮按钮 | |||
| > **组件名：uni-fab** | |||
| > 代码块： `uFab` | |||
| 点击可展开一个图形按钮菜单 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-fab) | |||
| #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 | |||
+ 84
- 0
uni_modules/uni-popup/changelog.md
View File
| @ -0,0 +1,84 @@ | |||
| ## 1.9.1（2024-04-02） | |||
| - 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法) | |||
| ## 1.9.0（2024-03-28） | |||
| - 修复 uni-popup-dialog 双向绑定时初始化逻辑修正 | |||
| ## 1.8.9（2024-03-20） | |||
| - 修复 uni-popup-dialog 数据输入时修正为双向绑定 | |||
| ## 1.8.8（2024-02-20） | |||
| - 修复 uni-popup 在微信小程序下出现文字向上闪动的bug | |||
| ## 1.8.7（2024-02-02） | |||
| - 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦 | |||
| ## 1.8.6（2024-01-30） | |||
| - 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数 | |||
| ## 1.8.5（2024-01-26） | |||
| - 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示 | |||
| ## 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） | |||
| - 修复 小程序中高度错误的bug | |||
| ## 1.7.7（2022-03-17） | |||
| - 修复 快速调用open出现问题的Bug | |||
| ## 1.7.6（2022-02-14） | |||
| - 修复 safeArea 属性不能设置为false的bug | |||
| ## 1.7.5（2022-01-19） | |||
| - 修复 isMaskClick 失效的bug | |||
| ## 1.7.4（2022-01-19） | |||
| - 新增 cancelText \ confirmText 属性 ，可自定义文本 | |||
| - 新增 maskBackgroundColor 属性 ，可以修改蒙版颜色 | |||
| - 优化 maskClick属性 更新为 isMaskClick ，解决微信小程序警告的问题 | |||
| ## 1.7.3（2022-01-13） | |||
| - 修复 设置 safeArea 属性不生效的bug | |||
| ## 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，如何创建vue3项目，详见 [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 平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug | |||
| ## 1.4.4（2021-06-18） | |||
| - 修复 H5平台中间弹出后，点击内容，再点击遮罩无法关闭的Bug | |||
| ## 1.4.3（2021-06-08） | |||
| - 修复 错误的 watch 字段 | |||
| - 修复 safeArea 属性不生效的问题 | |||
| - 修复 点击内容，再点击遮罩无法关闭的Bug | |||
| ## 1.4.2（2021-05-12） | |||
| - 新增 组件示例地址 | |||
| ## 1.4.1（2021-04-29） | |||
| - 修复 组件内放置 input 、textarea 组件，无法聚焦的问题 | |||
| ## 1.4.0 （2021-04-29） | |||
| - 新增 type 属性的 left\right 值，支持左右弹出 | |||
| - 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗 | |||
| - 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色 | |||
| - 新增 safeArea 属性，是否适配底部安全区 | |||
| - 修复 App\h5\微信小程序底部安全区占位不对的Bug | |||
| - 修复 App 端弹出等待的Bug | |||
| - 优化 提升低配设备性能，优化动画卡顿问题 | |||
| - 优化 更简单的组件自定义方式 | |||
| ## 1.2.9（2021-02-05） | |||
| - 优化 组件引用关系，通过uni_modules引用组件 | |||
| ## 1.2.8（2021-02-05） | |||
| - 调整为uni_modules目录规范 | |||
| ## 1.2.7（2021-02-05） | |||
| - 调整为uni_modules目录规范 | |||
| - 新增 支持 PC 端 | |||
| - 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端 | |||
+ 45
- 0
uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
View File
| @ -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 | |||
+ 316
- 0
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
View File
| @ -0,0 +1,316 @@ | |||
| <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模式下是否自动聚焦，默认为true | |||
| * @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) { | |||
| if (this.maxlength != -1 && this.mode === 'input') { | |||
| this.val = val.slice(0, this.maxlength); | |||
| } else { | |||
| this.val = val | |||
| } | |||
| }, | |||
| 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: { | |||
| /** | |||
| * 点击确认按钮 | |||
| */ | |||
| 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> | |||
+ 143
- 0
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
View File
| @ -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> | |||
+ 187
- 0
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
View File
| @ -0,0 +1,187 @@ | |||
| <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 { | |||
| bottomData: [{ | |||
| text: '微信', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png', | |||
| name: 'wx' | |||
| }, | |||
| { | |||
| text: '支付宝', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png', | |||
| name: 'ali' | |||
| }, | |||
| { | |||
| text: 'QQ', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png', | |||
| name: 'qq' | |||
| }, | |||
| { | |||
| text: '新浪', | |||
| icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.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> | |||
+ 7
- 0
uni_modules/uni-popup/components/uni-popup/i18n/en.json
View File
| @ -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" | |||
| } | |||
+ 8
- 0
uni_modules/uni-popup/components/uni-popup/i18n/index.js
View File
| @ -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 | |||
| } | |||
+ 7
- 0
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hans.json
View File
| @ -0,0 +1,7 @@ | |||
| { | |||
| "uni-popup.cancel": "取消", | |||
| "uni-popup.ok": "确定", | |||
| "uni-popup.placeholder": "请输入", | |||
| "uni-popup.title": "提示", | |||
| "uni-popup.shareTitle": "分享到" | |||
| } | |||
+ 7
- 0
uni_modules/uni-popup/components/uni-popup/i18n/zh-Hant.json
View File
| @ -0,0 +1,7 @@ | |||
| { | |||
| "uni-popup.cancel": "取消", | |||
| "uni-popup.ok": "確定", | |||
| "uni-popup.placeholder": "請輸入", | |||
| "uni-popup.title": "提示", | |||
| "uni-popup.shareTitle": "分享到" | |||
| } | |||
+ 45
- 0
uni_modules/uni-popup/components/uni-popup/keypress.js
View File
| @ -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 | |||
+ 26
- 0
uni_modules/uni-popup/components/uni-popup/popup.js
View File
| @ -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; | |||
| }, | |||
| } | |||
| } | |||
+ 90
- 0
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
View File
| @ -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> | |||
+ 503
- 0
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
View File
| @ -0,0 +1,503 @@ | |||
| <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 弹出层组件，为了解决遮罩弹层的问题 | |||
| * @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 主窗口背景色 | |||
| * @property {String} maskBackgroundColor 蒙版颜色 | |||
| * @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px" | |||
| * @property {Boolean} safeArea 是否适配底部安全区 | |||
| * @event {Function} change 打开关闭弹窗触发，e={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：底部弹出层；center：全屏弹出层 | |||
| // 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 = () => { | |||
| const { | |||
| windowWidth, | |||
| windowHeight, | |||
| windowTop, | |||
| safeArea, | |||
| screenHeight, | |||
| safeAreaInsets | |||
| } = uni.getSystemInfoSync() | |||
| 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 解决头条冒泡的问题 | |||
| 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(() => { | |||
| 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.showPopup = true | |||
| this.showTrans = true | |||
| }, | |||
| /** | |||
| * 中间弹出样式处理 | |||
| */ | |||
| 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.showPopup = true | |||
| this.showTrans = true | |||
| }, | |||
| 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.showPopup = true | |||
| this.showTrans = true | |||
| }, | |||
| 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.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> | |||
+ 88
- 0
uni_modules/uni-popup/package.json
View File
| @ -0,0 +1,88 @@ | |||
| { | |||
| "id": "uni-popup", | |||
| "displayName": "uni-popup 弹出层", | |||
| "version": "1.9.1", | |||
| "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" | |||
| }, | |||
| "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" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 17
- 0
uni_modules/uni-popup/readme.md
View File
| @ -0,0 +1,17 @@ | |||
| ## Popup 弹出层 | |||
| > **组件名：uni-popup** | |||
| > 代码块： `uPopup` | |||
| > 关联组件：`uni-transition` | |||
| 弹出层组件，在应用中弹出一个消息提示窗口、提示框等 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup) | |||
| #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 | |||
+ 24
- 0
uni_modules/uni-transition/changelog.md
View File
| @ -0,0 +1,24 @@ | |||
| ## 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 目录规范 | |||
+ 131
- 0
uni_modules/uni-transition/components/uni-transition/createAnimation.js
View File
| @ -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 | |||
| // 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter 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) | |||
| } | |||
+ 286
- 0
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
View File
| @ -0,0 +1,286 @@ | |||
| <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.$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> | |||
+ 85
- 0
uni_modules/uni-transition/package.json
View File
| @ -0,0 +1,85 @@ | |||
| { | |||
| "id": "uni-transition", | |||
| "displayName": "uni-transition 过渡动画", | |||
| "version": "1.3.3", | |||
| "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" | |||
| }, | |||
| "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" | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
+ 11
- 0
uni_modules/uni-transition/readme.md
View File
| @ -0,0 +1,11 @@ | |||
| ## Transition 过渡动画 | |||
| > **组件名：uni-transition** | |||
| > 代码块： `uTransition` | |||
| 元素过渡动画 | |||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) | |||
| #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 | |||
+ 59
- 0
utils/api.js
View File
| @ -0,0 +1,59 @@ | |||
| import http from './http.js' | |||
| const config = { | |||
| // 示例 | |||
| // wxLogin : {url : '/api/wxLogin', method : 'POST', | |||
| // auth : false, showLoading : true, loadingTitle : '加载中...', | |||
| // limit : 1000 | |||
| // }, | |||
| wxLogin : {url : '/api/wxLogin', method : 'GET', limit : 500}, | |||
| } | |||
| export function api(key, data, callback, loadingTitle){ | |||
| let req = config[key] | |||
| if (!req) { | |||
| console.error('无效key' + key); | |||
| return | |||
| } | |||
| if(typeof callback == 'string'){ | |||
| loadingTitle = callback | |||
| } | |||
| if(typeof data == 'function'){ | |||
| callback = data | |||
| data = {} | |||
| } | |||
| // 接口限流 | |||
| if(req.limit){ | |||
| let storageKey = 'limit:' + req.url | |||
| let storage = uni.getStorageSync(storageKey) | |||
| if(storage && new Date().getTime() - parseInt(storage) < req.limit){ | |||
| return | |||
| } | |||
| uni.setStorageSync(storageKey, new Date().getTime()) | |||
| } | |||
| //必须登录 | |||
| if (req.auth) { | |||
| if (!uni.getStorageSync('token')) { | |||
| uni.navigateTo({ | |||
| url: '/pages/login/mobile' | |||
| }) | |||
| console.error('需要登录') | |||
| return | |||
| } | |||
| } | |||
| http.http(req.url, data, callback, req.method, | |||
| loadingTitle || req.showLoading, loadingTitle || req.loadingTitle) | |||
| } | |||
| export default api | |||
+ 144
- 0
utils/http.js
View File
| @ -0,0 +1,144 @@ | |||
| function http(uri, data, callback, method = 'GET', showLoading, title) { | |||
| if (showLoading) { | |||
| uni.showLoading({ | |||
| title: title || '正在提交...' | |||
| }); | |||
| } | |||
| uni.request({ | |||
| url: 'http://www.baidu.com' + uri, | |||
| data: enhanceData(data), | |||
| method: method, | |||
| header: { | |||
| // 'X-Access-Token': localStorage.getItem('token'), | |||
| 'Content-Type': method == 'POST' ? 'application/x-www-form-urlencoded' : 'application/json' | |||
| }, | |||
| success: (res) => { | |||
| if (showLoading) { | |||
| uni.hideLoading(); | |||
| } | |||
| if (res.statusCode == 401) { | |||
| localStorage.removeItem('token') | |||
| localStorage.removeItem('userInfo') | |||
| console.error('登录过期'); | |||
| uni.navigateTo({ | |||
| url: '/pages/login/login' | |||
| }) | |||
| } | |||
| //后端接口token出现问题 | |||
| if (res.data && res.data.code == 500 && res.data.message == '操作失败，token非法无效!') { | |||
| localStorage.removeItem('token') | |||
| localStorage.removeItem('userInfo') | |||
| console.error('登录过期'); | |||
| uni.navigateTo({ | |||
| url: '/pages/login/login' | |||
| }) | |||
| } | |||
| if (res.statusCode == 200 && res.data.code != 200) { | |||
| uni.showToast({ | |||
| mask: true, | |||
| duration: 1000, | |||
| title: res.data.message, | |||
| }); | |||
| } | |||
| callback(res.data) | |||
| }, | |||
| fail: () => { | |||
| uni.showLoading({}) | |||
| setTimeout(() => { | |||
| uni.hideLoading() | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "网络异常" | |||
| }) | |||
| }, 3000) | |||
| if (showLoading) { | |||
| uni.hideLoading(); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| function deleted(uri, data, callback) { | |||
| http(uri, data, callback, 'DELETE') | |||
| } | |||
| function post(uri, data, callback) { | |||
| http(uri, data, callback, 'POST') | |||
| } | |||
| function get(uri, data, callback) { | |||
| http(uri, data, callback, 'GET') | |||
| } | |||
| function enhanceData(data) { | |||
| const userid = uni.getStorageSync("userid") | |||
| if (!data) { | |||
| data = {} | |||
| } | |||
| if (userid) { | |||
| data.userid = userid | |||
| } | |||
| return data | |||
| } | |||
| function sync(method, uri, data) { | |||
| return new Promise((resolve, reject) => { | |||
| uni.request({ | |||
| url: uri, | |||
| data: data, | |||
| method: method, | |||
| header: { | |||
| 'auth': '1AS9F1HPC4FBC9EN00J7KX2L5RJ99XHZ' | |||
| }, | |||
| success: (res) => { | |||
| resolve(res.data) | |||
| }, | |||
| fail: (err) => { | |||
| reject(err); | |||
| } | |||
| }) | |||
| }) | |||
| } | |||
| let cache = null | |||
| function async (method, uri, data) { | |||
| const promise = sync(method, uri, data).then(res => { | |||
| cache = res | |||
| }).catch(err => { | |||
| }) | |||
| } | |||
| function syncHttp(uri, data, method = 'GET') { | |||
| async (method, uri, data) | |||
| } | |||
| export default { | |||
| http: http, | |||
| delete: deleted, | |||
| post: post, | |||
| get: get, | |||
| syncHttp: syncHttp | |||
| } | |||