huanglingchen
4 months ago
37 changed files with 3043 additions and 42 deletions
Unified View
Diff Options
-
+39 -29components/controlPage/index.vue
-
+61 -13pages/index/index.vue
-
+100 -0uni_modules/uni-popup/changelog.md
-
+45 -0uni_modules/uni-popup/components/uni-popup-dialog/keypress.js
-
+327 -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
-
+188 -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
-
+518 -0uni_modules/uni-popup/components/uni-popup/uni-popup.vue
-
+107 -0uni_modules/uni-popup/package.json
-
+17 -0uni_modules/uni-popup/readme.md
-
+8 -0uni_modules/uni-scss/changelog.md
-
+1 -0uni_modules/uni-scss/index.scss
-
+82 -0uni_modules/uni-scss/package.json
-
+4 -0uni_modules/uni-scss/readme.md
-
+7 -0uni_modules/uni-scss/styles/index.scss
-
+3 -0uni_modules/uni-scss/styles/setting/_border.scss
-
+66 -0uni_modules/uni-scss/styles/setting/_color.scss
-
+55 -0uni_modules/uni-scss/styles/setting/_radius.scss
-
+56 -0uni_modules/uni-scss/styles/setting/_space.scss
-
+167 -0uni_modules/uni-scss/styles/setting/_styles.scss
-
+24 -0uni_modules/uni-scss/styles/setting/_text.scss
-
+146 -0uni_modules/uni-scss/styles/setting/_variables.scss
-
+19 -0uni_modules/uni-scss/styles/tools/functions.scss
-
+31 -0uni_modules/uni-scss/theme.scss
-
+62 -0uni_modules/uni-scss/variables.scss
-
+31 -0uni_modules/uni-transition/changelog.md
-
+131 -0uni_modules/uni-transition/components/uni-transition/createAnimation.js
-
+292 -0uni_modules/uni-transition/components/uni-transition/uni-transition.vue
-
+112 -0uni_modules/uni-transition/package.json
-
+11 -0uni_modules/uni-transition/readme.md
+ 39
- 29
components/controlPage/index.vue
View File
+ 61
- 13
pages/index/index.vue
View File
+ 100
- 0
uni_modules/uni-popup/changelog.md
View File
| @ -0,0 +1,100 @@ | |||||
| ## 1.9.10（2025-07-18） | |||||
| - 修复 nvue 下弹窗样式错乱的问题 ，更新依赖 uni-transition 组件 | |||||
| - 更新 示例取消 borderRadius 属性 ，如需内容圆角，用户应该直接在内容插槽中实现 | |||||
| ## 1.9.9（2025-06-11） | |||||
| - 修复 uni-popup-dialog 中 setVal 方法报错的问题 | |||||
| - 修复 uni-popup-dialog 数据双向绑定问题。 | |||||
| ## 1.9.8（2025-04-16） | |||||
| - 修复 更新组件示例 ，解决更新数据或保存项目导致弹窗消失的问题 | |||||
| ## 1.9.7（2025-04-14） | |||||
| - 修复 uni-popup-dialog 弹出框在vue3中双向绑定问题 | |||||
| ## 1.9.6（2025-01-08） | |||||
| - 修复 示例中过期图片地址 | |||||
| ## 1.9.5（2024-10-15） | |||||
| - 修复 微信小程序中的getSystemInfo警告 | |||||
| ## 1.9.2（2024-09-21） | |||||
| - 修复 uni-popup在android上的重复点击弹出位置不正确的bug | |||||
| ## 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 | |||||
+ 327
- 0
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
View File
| @ -0,0 +1,327 @@ | |||||
| <template> | |||||
| <view class="uni-popup-dialog"> | |||||
| <view class="uni-dialog-title"> | |||||
| <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text> | |||||
| </view> | |||||
| <view v-if="mode === 'base'" class="uni-dialog-content"> | |||||
| <slot> | |||||
| <text class="uni-dialog-content-text">{{content}}</text> | |||||
| </slot> | |||||
| </view> | |||||
| <view v-else class="uni-dialog-content"> | |||||
| <slot> | |||||
| <input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType" | |||||
| :placeholder="placeholderText" :focus="focus"> | |||||
| </slot> | |||||
| </view> | |||||
| <view class="uni-dialog-button-group"> | |||||
| <view class="uni-dialog-button" v-if="showClose" @click="closeDialog"> | |||||
| <text class="uni-dialog-button-text">{{closeText}}</text> | |||||
| </view> | |||||
| <view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk"> | |||||
| <text class="uni-dialog-button-text uni-button-color">{{okText}}</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import popup from '../uni-popup/popup.js' | |||||
| import { | |||||
| initVueI18n | |||||
| } from '@dcloudio/uni-i18n' | |||||
| import messages from '../uni-popup/i18n/index.js' | |||||
| const { | |||||
| t | |||||
| } = initVueI18n(messages) | |||||
| /** | |||||
| * PopUp 弹出层-对话框样式 | |||||
| * @description 弹出层-对话框样式 | |||||
| * @tutorial https://ext.dcloud.net.cn/plugin?id=329 | |||||
| * @property {String} value input 模式下的默认值 | |||||
| * @property {String} placeholder input 模式下输入提示 | |||||
| * @property {Boolean} focus input模式下是否自动聚焦，默认为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) { | |||||
| this.setVal(val) | |||||
| }, | |||||
| // #ifdef VUE3 | |||||
| modelValue(val) { | |||||
| this.setVal(val) | |||||
| }, | |||||
| // #endif | |||||
| val(val) { | |||||
| // #ifdef VUE2 | |||||
| // TODO 兼容 vue2 | |||||
| this.$emit('input', val); | |||||
| // #endif | |||||
| // #ifdef VUE3 | |||||
| // TODO 兼容 vue3 | |||||
| this.$emit('update:modelValue', val); | |||||
| // #endif | |||||
| } | |||||
| }, | |||||
| created() { | |||||
| // 对话框遮罩不可点击 | |||||
| this.popup.disableMask() | |||||
| // this.popup.closeMask() | |||||
| if (this.mode === 'input') { | |||||
| this.dialogType = 'info' | |||||
| this.val = this.value; | |||||
| // #ifdef VUE3 | |||||
| this.val = this.modelValue; | |||||
| // #endif | |||||
| } else { | |||||
| this.dialogType = this.type | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| /** | |||||
| * 给val属性赋值 | |||||
| */ | |||||
| setVal(val) { | |||||
| if (this.maxlength != -1 && this.mode === 'input') { | |||||
| this.val = val.slice(0, this.maxlength); | |||||
| } else { | |||||
| this.val = val | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * 点击确认按钮 | |||||
| */ | |||||
| onOk() { | |||||
| if (this.mode === 'input') { | |||||
| this.$emit('confirm', this.val) | |||||
| } else { | |||||
| this.$emit('confirm') | |||||
| } | |||||
| if (this.beforeClose) return | |||||
| this.popup.close() | |||||
| }, | |||||
| /** | |||||
| * 点击取消按钮 | |||||
| */ | |||||
| closeDialog() { | |||||
| this.$emit('close') | |||||
| if (this.beforeClose) return | |||||
| this.popup.close() | |||||
| }, | |||||
| close() { | |||||
| this.popup.close() | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| .uni-popup-dialog { | |||||
| width: 340px; | |||||
| 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: 24px; | |||||
| 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: 20px; | |||||
| 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: 54px; | |||||
| } | |||||
| .uni-border-left { | |||||
| border-left-color: #f0f0f0; | |||||
| border-left-style: solid; | |||||
| border-left-width: 1px; | |||||
| } | |||||
| .uni-dialog-button-text { | |||||
| font-size: 20px; | |||||
| 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> | |||||
+ 188
- 0
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
View File
| @ -0,0 +1,188 @@ | |||||
| <template> | |||||
| <view class="uni-popup-share"> | |||||
| <view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view> | |||||
| <view class="uni-share-content"> | |||||
| <view class="uni-share-content-box"> | |||||
| <view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)"> | |||||
| <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image> | |||||
| <text class="uni-share-text">{{item.text}}</text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| <view class="uni-share-button-box"> | |||||
| <button class="uni-share-button" @click="close">{{cancelText}}</button> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import popup from '../uni-popup/popup.js' | |||||
| import { | |||||
| initVueI18n | |||||
| } from '@dcloudio/uni-i18n' | |||||
| import messages from '../uni-popup/i18n/index.js' | |||||
| const { t } = initVueI18n(messages) | |||||
| export default { | |||||
| name: 'UniPopupShare', | |||||
| mixins:[popup], | |||||
| emits:['select'], | |||||
| props: { | |||||
| title: { | |||||
| type: String, | |||||
| default: '' | |||||
| }, | |||||
| beforeClose: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| // TODO 替换为自己的图标 | |||||
| bottomData: [{ | |||||
| text: '微信', | |||||
| icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', | |||||
| name: 'wx' | |||||
| }, | |||||
| { | |||||
| text: '支付宝', | |||||
| icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', | |||||
| name: 'ali' | |||||
| }, | |||||
| { | |||||
| text: 'QQ', | |||||
| icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', | |||||
| name: 'qq' | |||||
| }, | |||||
| { | |||||
| text: '新浪', | |||||
| icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png', | |||||
| name: 'sina' | |||||
| }, | |||||
| // { | |||||
| // text: '百度', | |||||
| // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png', | |||||
| // name: 'copy' | |||||
| // }, | |||||
| // { | |||||
| // text: '其他', | |||||
| // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png', | |||||
| // name: 'more' | |||||
| // } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| created() {}, | |||||
| computed: { | |||||
| cancelText() { | |||||
| return t("uni-popup.cancel") | |||||
| }, | |||||
| shareTitleText() { | |||||
| return this.title || t("uni-popup.shareTitle") | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| /** | |||||
| * 选择内容 | |||||
| */ | |||||
| select(item, index) { | |||||
| this.$emit('select', { | |||||
| item, | |||||
| index | |||||
| }) | |||||
| this.close() | |||||
| }, | |||||
| /** | |||||
| * 关闭窗口 | |||||
| */ | |||||
| close() { | |||||
| if(this.beforeClose) return | |||||
| this.popup.close() | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss" > | |||||
| .uni-popup-share { | |||||
| background-color: #fff; | |||||
| border-top-left-radius: 11px; | |||||
| border-top-right-radius: 11px; | |||||
| } | |||||
| .uni-share-title { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| height: 40px; | |||||
| } | |||||
| .uni-share-title-text { | |||||
| font-size: 14px; | |||||
| color: #666; | |||||
| } | |||||
| .uni-share-content { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex-direction: row; | |||||
| justify-content: center; | |||||
| padding-top: 10px; | |||||
| } | |||||
| .uni-share-content-box { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex-direction: row; | |||||
| flex-wrap: wrap; | |||||
| width: 360px; | |||||
| } | |||||
| .uni-share-content-item { | |||||
| width: 90px; | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex-direction: column; | |||||
| justify-content: center; | |||||
| padding: 10px 0; | |||||
| align-items: center; | |||||
| } | |||||
| .uni-share-content-item:active { | |||||
| background-color: #f5f5f5; | |||||
| } | |||||
| .uni-share-image { | |||||
| width: 30px; | |||||
| height: 30px; | |||||
| } | |||||
| .uni-share-text { | |||||
| margin-top: 10px; | |||||
| font-size: 14px; | |||||
| color: #3B4144; | |||||
| } | |||||
| .uni-share-button-box { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: flex; | |||||
| /* #endif */ | |||||
| flex-direction: row; | |||||
| padding: 10px 15px; | |||||
| } | |||||
| .uni-share-button { | |||||
| flex: 1; | |||||
| border-radius: 50px; | |||||
| color: #666; | |||||
| font-size: 16px; | |||||
| } | |||||
| .uni-share-button::after { | |||||
| border-radius: 50px; | |||||
| } | |||||
| </style> | |||||
+ 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> | |||||
+ 518
- 0
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
View File
| @ -0,0 +1,518 @@ | |||||
| <template> | |||||
| <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"> | |||||
| <view @touchstart="touchstart"> | |||||
| <uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" | |||||
| :duration="duration" :show="showTrans" @click="onTap" /> | |||||
| <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" | |||||
| :show="showTrans" @click="onTap"> | |||||
| <view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear"> | |||||
| <slot /> | |||||
| </view> | |||||
| </uni-transition> | |||||
| </view> | |||||
| <!-- #ifdef H5 --> | |||||
| <keypress v-if="maskShow" @esc="onTap" /> | |||||
| <!-- #endif --> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| // #ifdef H5 | |||||
| import keypress from './keypress.js' | |||||
| // #endif | |||||
| /** | |||||
| * PopUp 弹出层 | |||||
| * @description 弹出层组件，为了解决遮罩弹层的问题 | |||||
| * @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 = () => { | |||||
| // #ifdef MP-WEIXIN | |||||
| const { | |||||
| windowWidth, | |||||
| windowHeight, | |||||
| windowTop, | |||||
| safeArea, | |||||
| screenHeight, | |||||
| safeAreaInsets | |||||
| } = uni.getWindowInfo() | |||||
| // #endif | |||||
| // #ifndef MP-WEIXIN | |||||
| const { | |||||
| windowWidth, | |||||
| windowHeight, | |||||
| windowTop, | |||||
| safeArea, | |||||
| screenHeight, | |||||
| safeAreaInsets | |||||
| } = uni.getSystemInfoSync() | |||||
| // #endif | |||||
| this.popupWidth = windowWidth | |||||
| this.popupHeight = windowHeight + (windowTop || 0) | |||||
| // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复 | |||||
| if (safeArea && this.safeArea) { | |||||
| // #ifdef MP-WEIXIN | |||||
| this.safeAreaInsets = screenHeight - safeArea.bottom | |||||
| // #endif | |||||
| // #ifndef MP-WEIXIN | |||||
| this.safeAreaInsets = safeAreaInsets.bottom | |||||
| // #endif | |||||
| } else { | |||||
| this.safeAreaInsets = 0 | |||||
| } | |||||
| } | |||||
| fixSize() | |||||
| // #ifdef H5 | |||||
| // window.addEventListener('resize', fixSize) | |||||
| // this.$once('hook:beforeDestroy', () => { | |||||
| // window.removeEventListener('resize', fixSize) | |||||
| // }) | |||||
| // #endif | |||||
| }, | |||||
| // #ifndef VUE3 | |||||
| // TODO vue2 | |||||
| destroyed() { | |||||
| this.setH5Visible() | |||||
| }, | |||||
| // #endif | |||||
| // #ifdef VUE3 | |||||
| // TODO vue3 | |||||
| unmounted() { | |||||
| this.setH5Visible() | |||||
| }, | |||||
| // #endif | |||||
| activated() { | |||||
| this.setH5Visible(!this.showPopup); | |||||
| }, | |||||
| deactivated() { | |||||
| this.setH5Visible(true); | |||||
| }, | |||||
| created() { | |||||
| // this.mkclick = this.isMaskClick || this.maskClick | |||||
| if (this.isMaskClick === null && this.maskClick === null) { | |||||
| this.mkclick = true | |||||
| } else { | |||||
| this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick | |||||
| } | |||||
| if (this.animation) { | |||||
| this.duration = 300 | |||||
| } else { | |||||
| this.duration = 0 | |||||
| } | |||||
| // TODO 处理 message 组件生命周期异常的问题 | |||||
| this.messageChild = null | |||||
| // TODO 解决头条冒泡的问题 | |||||
| this.clearPropagation = false | |||||
| this.maskClass.backgroundColor = this.maskBackgroundColor | |||||
| }, | |||||
| methods: { | |||||
| setH5Visible(visible = true) { | |||||
| // #ifdef H5 | |||||
| // fix by mehaotian 处理 h5 滚动穿透的问题 | |||||
| document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden"; | |||||
| // #endif | |||||
| }, | |||||
| /** | |||||
| * 公用方法，不显示遮罩层 | |||||
| */ | |||||
| closeMask() { | |||||
| this.maskShow = false | |||||
| }, | |||||
| /** | |||||
| * 公用方法，遮罩层禁止点击 | |||||
| */ | |||||
| disableMask() { | |||||
| this.mkclick = false | |||||
| }, | |||||
| // TODO nvue 取消冒泡 | |||||
| clear(e) { | |||||
| // #ifndef APP-NVUE | |||||
| e.stopPropagation() | |||||
| // #endif | |||||
| this.clearPropagation = true | |||||
| }, | |||||
| open(direction) { | |||||
| // fix by mehaotian 处理快速打开关闭的情况 | |||||
| if (this.showPopup) { | |||||
| return | |||||
| } | |||||
| let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] | |||||
| if (!(direction && innerType.indexOf(direction) !== -1)) { | |||||
| direction = this.type | |||||
| } | |||||
| if (!this.config[direction]) { | |||||
| console.error('缺少类型：', direction) | |||||
| return | |||||
| } | |||||
| this[this.config[direction]]() | |||||
| this.$emit('change', { | |||||
| show: true, | |||||
| type: direction | |||||
| }) | |||||
| }, | |||||
| close(type) { | |||||
| this.showTrans = false | |||||
| this.$emit('change', { | |||||
| show: false, | |||||
| type: this.type | |||||
| }) | |||||
| clearTimeout(this.timer) | |||||
| // // 自定义关闭事件 | |||||
| // this.customOpen && this.customClose() | |||||
| this.timer = setTimeout(() => { | |||||
| this.showPopup = false | |||||
| }, 300) | |||||
| }, | |||||
| // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容 | |||||
| touchstart() { | |||||
| this.clearPropagation = false | |||||
| }, | |||||
| onTap() { | |||||
| if (this.clearPropagation) { | |||||
| // fix by mehaotian 兼容 nvue | |||||
| this.clearPropagation = false | |||||
| return | |||||
| } | |||||
| this.$emit('maskClick') | |||||
| if (!this.mkclick) return | |||||
| this.close() | |||||
| }, | |||||
| /** | |||||
| * 顶部弹出样式处理 | |||||
| */ | |||||
| top(type) { | |||||
| this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top' | |||||
| this.ani = ['slide-top'] | |||||
| this.transClass = { | |||||
| position: 'fixed', | |||||
| left: 0, | |||||
| right: 0, | |||||
| backgroundColor: this.bg, | |||||
| borderRadius:this.borderRadius || "0" | |||||
| } | |||||
| // TODO 兼容 type 属性 ，后续会废弃 | |||||
| if (type) return | |||||
| this.showPopup = true | |||||
| this.showTrans = true | |||||
| this.$nextTick(() => { | |||||
| this.showPoptrans() | |||||
| if (this.messageChild && this.type === 'message') { | |||||
| this.messageChild.timerClose() | |||||
| } | |||||
| }) | |||||
| }, | |||||
| /** | |||||
| * 底部弹出样式处理 | |||||
| */ | |||||
| bottom(type) { | |||||
| this.popupstyle = 'bottom' | |||||
| this.ani = ['slide-bottom'] | |||||
| this.transClass = { | |||||
| position: 'fixed', | |||||
| left: 0, | |||||
| right: 0, | |||||
| bottom: 0, | |||||
| paddingBottom: this.safeAreaInsets + 'px', | |||||
| backgroundColor: this.bg, | |||||
| borderRadius:this.borderRadius || "0", | |||||
| } | |||||
| // TODO 兼容 type 属性 ，后续会废弃 | |||||
| if (type) return | |||||
| this.showPoptrans() | |||||
| }, | |||||
| /** | |||||
| * 中间弹出样式处理 | |||||
| */ | |||||
| center(type) { | |||||
| this.popupstyle = 'center' | |||||
| //微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理 | |||||
| // #ifdef MP-WEIXIN | |||||
| this.ani = ['fade'] | |||||
| // #endif | |||||
| // #ifndef MP-WEIXIN | |||||
| this.ani = ['zoom-out', 'fade'] | |||||
| // #endif | |||||
| this.transClass = { | |||||
| position: 'fixed', | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: 'flex', | |||||
| flexDirection: 'column', | |||||
| /* #endif */ | |||||
| bottom: 0, | |||||
| left: 0, | |||||
| right: 0, | |||||
| top: 0, | |||||
| justifyContent: 'center', | |||||
| alignItems: 'center', | |||||
| borderRadius:this.borderRadius || "0" | |||||
| } | |||||
| // TODO 兼容 type 属性 ，后续会废弃 | |||||
| if (type) return | |||||
| this.showPoptrans() | |||||
| }, | |||||
| left(type) { | |||||
| this.popupstyle = 'left' | |||||
| this.ani = ['slide-left'] | |||||
| this.transClass = { | |||||
| position: 'fixed', | |||||
| left: 0, | |||||
| bottom: 0, | |||||
| top: 0, | |||||
| backgroundColor: this.bg, | |||||
| borderRadius:this.borderRadius || "0", | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: 'flex', | |||||
| flexDirection: 'column' | |||||
| /* #endif */ | |||||
| } | |||||
| // TODO 兼容 type 属性 ，后续会废弃 | |||||
| if (type) return | |||||
| this.showPoptrans() | |||||
| }, | |||||
| right(type) { | |||||
| this.popupstyle = 'right' | |||||
| this.ani = ['slide-right'] | |||||
| this.transClass = { | |||||
| position: 'fixed', | |||||
| bottom: 0, | |||||
| right: 0, | |||||
| top: 0, | |||||
| backgroundColor: this.bg, | |||||
| borderRadius:this.borderRadius || "0", | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: 'flex', | |||||
| flexDirection: 'column' | |||||
| /* #endif */ | |||||
| } | |||||
| // TODO 兼容 type 属性 ，后续会废弃 | |||||
| if (type) return | |||||
| this.showPoptrans() | |||||
| }, | |||||
| showPoptrans(){ | |||||
| this.$nextTick(()=>{ | |||||
| this.showPopup = true | |||||
| this.showTrans = true | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| .uni-popup { | |||||
| position: fixed; | |||||
| /* #ifndef APP-NVUE */ | |||||
| z-index: 99; | |||||
| /* #endif */ | |||||
| &.top, | |||||
| &.left, | |||||
| &.right { | |||||
| /* #ifdef H5 */ | |||||
| top: var(--window-top); | |||||
| /* #endif */ | |||||
| /* #ifndef H5 */ | |||||
| top: 0; | |||||
| /* #endif */ | |||||
| } | |||||
| .uni-popup__wrapper { | |||||
| /* #ifndef APP-NVUE */ | |||||
| display: block; | |||||
| /* #endif */ | |||||
| position: relative; | |||||
| /* iphonex 等安全区设置，底部安全区适配 */ | |||||
| /* #ifndef APP-NVUE */ | |||||
| // padding-bottom: constant(safe-area-inset-bottom); | |||||
| // padding-bottom: env(safe-area-inset-bottom); | |||||
| /* #endif */ | |||||
| &.left, | |||||
| &.right { | |||||
| /* #ifdef H5 */ | |||||
| padding-top: var(--window-top); | |||||
| /* #endif */ | |||||
| /* #ifndef H5 */ | |||||
| padding-top: 0; | |||||
| /* #endif */ | |||||
| flex: 1; | |||||
| } | |||||
| } | |||||
| } | |||||
| .fixforpc-z-index { | |||||
| /* #ifndef APP-NVUE */ | |||||
| z-index: 999; | |||||
| /* #endif */ | |||||
| } | |||||
| .fixforpc-top { | |||||
| top: 0; | |||||
| } | |||||
| </style> | |||||
+ 107
- 0
uni_modules/uni-popup/package.json
View File
| @ -0,0 +1,107 @@ | |||||
| { | |||||
| "id": "uni-popup", | |||||
| "displayName": "uni-popup 弹出层", | |||||
| "version": "1.9.10", | |||||
| "description": " Popup 组件，提供常用的弹层", | |||||
| "keywords": [ | |||||
| "uni-ui", | |||||
| "弹出层", | |||||
| "弹窗", | |||||
| "popup", | |||||
| "弹框" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "", | |||||
| "uni-app": "^4.06", | |||||
| "uni-app-x": "" | |||||
| }, | |||||
| "directories": { | |||||
| "example": "../../temps/example_temps" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
| "type": "component-vue", | |||||
| "darkmode": "x", | |||||
| "i18n": "x", | |||||
| "widescreen": "x" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": [ | |||||
| "uni-scss", | |||||
| "uni-transition" | |||||
| ], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "x", | |||||
| "aliyun": "x", | |||||
| "alipay": "x" | |||||
| }, | |||||
| "client": { | |||||
| "uni-app": { | |||||
| "vue": { | |||||
| "vue2": "√", | |||||
| "vue3": "√" | |||||
| }, | |||||
| "web": { | |||||
| "safari": "√", | |||||
| "chrome": "√" | |||||
| }, | |||||
| "app": { | |||||
| "vue": "√", | |||||
| "nvue": "√", | |||||
| "android": "√", | |||||
| "ios": "√", | |||||
| "harmony": "√" | |||||
| }, | |||||
| "mp": { | |||||
| "weixin": "√", | |||||
| "alipay": "√", | |||||
| "toutiao": "√", | |||||
| "baidu": "√", | |||||
| "kuaishou": "-", | |||||
| "jd": "-", | |||||
| "harmony": "-", | |||||
| "qq": "√", | |||||
| "lark": "-" | |||||
| }, | |||||
| "quickapp": { | |||||
| "huawei": "-", | |||||
| "union": "-" | |||||
| } | |||||
| }, | |||||
| "uni-app-x": { | |||||
| "web": { | |||||
| "safari": "√", | |||||
| "chrome": "√" | |||||
| }, | |||||
| "app": { | |||||
| "android": "√", | |||||
| "ios": "√", | |||||
| "harmony": "√" | |||||
| }, | |||||
| "mp": { | |||||
| "weixin": "√" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 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 | |||||
+ 8
- 0
uni_modules/uni-scss/changelog.md
View File
| @ -0,0 +1,8 @@ | |||||
| ## 1.0.3（2022-01-21） | |||||
| - 优化 组件示例 | |||||
| ## 1.0.2（2021-11-22） | |||||
| - 修复 / 符号在 vue 不同版本兼容问题引起的报错问题 | |||||
| ## 1.0.1（2021-11-22） | |||||
| - 修复 vue3中scss语法兼容问题 | |||||
| ## 1.0.0（2021-11-18） | |||||
| - init | |||||
+ 1
- 0
uni_modules/uni-scss/index.scss
View File
| @ -0,0 +1 @@ | |||||
| @import './styles/index.scss'; | |||||
+ 82
- 0
uni_modules/uni-scss/package.json
View File
| @ -0,0 +1,82 @@ | |||||
| { | |||||
| "id": "uni-scss", | |||||
| "displayName": "uni-scss 辅助样式", | |||||
| "version": "1.0.3", | |||||
| "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。", | |||||
| "keywords": [ | |||||
| "uni-scss", | |||||
| "uni-ui", | |||||
| "辅助样式" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "^3.1.0" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "category": [ | |||||
| "JS SDK", | |||||
| "通用 SDK" | |||||
| ], | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": [], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "y", | |||||
| "aliyun": "y" | |||||
| }, | |||||
| "client": { | |||||
| "App": { | |||||
| "app-vue": "y", | |||||
| "app-nvue": "u" | |||||
| }, | |||||
| "H5-mobile": { | |||||
| "Safari": "y", | |||||
| "Android Browser": "y", | |||||
| "微信浏览器(Android)": "y", | |||||
| "QQ浏览器(Android)": "y" | |||||
| }, | |||||
| "H5-pc": { | |||||
| "Chrome": "y", | |||||
| "IE": "y", | |||||
| "Edge": "y", | |||||
| "Firefox": "y", | |||||
| "Safari": "y" | |||||
| }, | |||||
| "小程序": { | |||||
| "微信": "y", | |||||
| "阿里": "y", | |||||
| "百度": "y", | |||||
| "字节跳动": "y", | |||||
| "QQ": "y" | |||||
| }, | |||||
| "快应用": { | |||||
| "华为": "n", | |||||
| "联盟": "n" | |||||
| }, | |||||
| "Vue": { | |||||
| "vue2": "y", | |||||
| "vue3": "y" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 4
- 0
uni_modules/uni-scss/readme.md
View File
| @ -0,0 +1,4 @@ | |||||
| `uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。 | |||||
| ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass) | |||||
| #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 | |||||
+ 7
- 0
uni_modules/uni-scss/styles/index.scss
View File
| @ -0,0 +1,7 @@ | |||||
| @import './setting/_variables.scss'; | |||||
| @import './setting/_border.scss'; | |||||
| @import './setting/_color.scss'; | |||||
| @import './setting/_space.scss'; | |||||
| @import './setting/_radius.scss'; | |||||
| @import './setting/_text.scss'; | |||||
| @import './setting/_styles.scss'; | |||||
+ 3
- 0
uni_modules/uni-scss/styles/setting/_border.scss
View File
| @ -0,0 +1,3 @@ | |||||
| .uni-border { | |||||
| border: 1px $uni-border-1 solid; | |||||
| } | |||||
+ 66
- 0
uni_modules/uni-scss/styles/setting/_color.scss
View File
| @ -0,0 +1,66 @@ | |||||
| // TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐 | |||||
| // @mixin get-styles($k,$c) { | |||||
| // @if $k == size or $k == weight{ | |||||
| // font-#{$k}:#{$c} | |||||
| // }@else{ | |||||
| // #{$k}:#{$c} | |||||
| // } | |||||
| // } | |||||
| $uni-ui-color:( | |||||
| // 主色 | |||||
| primary: $uni-primary, | |||||
| primary-disable: $uni-primary-disable, | |||||
| primary-light: $uni-primary-light, | |||||
| // 辅助色 | |||||
| success: $uni-success, | |||||
| success-disable: $uni-success-disable, | |||||
| success-light: $uni-success-light, | |||||
| warning: $uni-warning, | |||||
| warning-disable: $uni-warning-disable, | |||||
| warning-light: $uni-warning-light, | |||||
| error: $uni-error, | |||||
| error-disable: $uni-error-disable, | |||||
| error-light: $uni-error-light, | |||||
| info: $uni-info, | |||||
| info-disable: $uni-info-disable, | |||||
| info-light: $uni-info-light, | |||||
| // 中性色 | |||||
| main-color: $uni-main-color, | |||||
| base-color: $uni-base-color, | |||||
| secondary-color: $uni-secondary-color, | |||||
| extra-color: $uni-extra-color, | |||||
| // 背景色 | |||||
| bg-color: $uni-bg-color, | |||||
| // 边框颜色 | |||||
| border-1: $uni-border-1, | |||||
| border-2: $uni-border-2, | |||||
| border-3: $uni-border-3, | |||||
| border-4: $uni-border-4, | |||||
| // 黑色 | |||||
| black:$uni-black, | |||||
| // 白色 | |||||
| white:$uni-white, | |||||
| // 透明 | |||||
| transparent:$uni-transparent | |||||
| ) !default; | |||||
| @each $key, $child in $uni-ui-color { | |||||
| .uni-#{"" + $key} { | |||||
| color: $child; | |||||
| } | |||||
| .uni-#{"" + $key}-bg { | |||||
| background-color: $child; | |||||
| } | |||||
| } | |||||
| .uni-shadow-sm { | |||||
| box-shadow: $uni-shadow-sm; | |||||
| } | |||||
| .uni-shadow-base { | |||||
| box-shadow: $uni-shadow-base; | |||||
| } | |||||
| .uni-shadow-lg { | |||||
| box-shadow: $uni-shadow-lg; | |||||
| } | |||||
| .uni-mask { | |||||
| background-color:$uni-mask; | |||||
| } | |||||
+ 55
- 0
uni_modules/uni-scss/styles/setting/_radius.scss
View File
| @ -0,0 +1,55 @@ | |||||
| @mixin radius($r,$d:null ,$important: false){ | |||||
| $radius-value:map-get($uni-radius, $r) if($important, !important, null); | |||||
| // Key exists within the $uni-radius variable | |||||
| @if (map-has-key($uni-radius, $r) and $d){ | |||||
| @if $d == t { | |||||
| border-top-left-radius:$radius-value; | |||||
| border-top-right-radius:$radius-value; | |||||
| }@else if $d == r { | |||||
| border-top-right-radius:$radius-value; | |||||
| border-bottom-right-radius:$radius-value; | |||||
| }@else if $d == b { | |||||
| border-bottom-left-radius:$radius-value; | |||||
| border-bottom-right-radius:$radius-value; | |||||
| }@else if $d == l { | |||||
| border-top-left-radius:$radius-value; | |||||
| border-bottom-left-radius:$radius-value; | |||||
| }@else if $d == tl { | |||||
| border-top-left-radius:$radius-value; | |||||
| }@else if $d == tr { | |||||
| border-top-right-radius:$radius-value; | |||||
| }@else if $d == br { | |||||
| border-bottom-right-radius:$radius-value; | |||||
| }@else if $d == bl { | |||||
| border-bottom-left-radius:$radius-value; | |||||
| } | |||||
| }@else{ | |||||
| border-radius:$radius-value; | |||||
| } | |||||
| } | |||||
| @each $key, $child in $uni-radius { | |||||
| @if($key){ | |||||
| .uni-radius-#{"" + $key} { | |||||
| @include radius($key) | |||||
| } | |||||
| }@else{ | |||||
| .uni-radius { | |||||
| @include radius($key) | |||||
| } | |||||
| } | |||||
| } | |||||
| @each $direction in t, r, b, l,tl, tr, br, bl { | |||||
| @each $key, $child in $uni-radius { | |||||
| @if($key){ | |||||
| .uni-radius-#{"" + $direction}-#{"" + $key} { | |||||
| @include radius($key,$direction,false) | |||||
| } | |||||
| }@else{ | |||||
| .uni-radius-#{$direction} { | |||||
| @include radius($key,$direction,false) | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 56
- 0
uni_modules/uni-scss/styles/setting/_space.scss
View File
| @ -0,0 +1,56 @@ | |||||
| @mixin fn($space,$direction,$size,$n) { | |||||
| @if $n { | |||||
| #{$space}-#{$direction}: #{$size*$uni-space-root}px | |||||
| } @else { | |||||
| #{$space}-#{$direction}: #{-$size*$uni-space-root}px | |||||
| } | |||||
| } | |||||
| @mixin get-styles($direction,$i,$space,$n){ | |||||
| @if $direction == t { | |||||
| @include fn($space, top,$i,$n); | |||||
| } | |||||
| @if $direction == r { | |||||
| @include fn($space, right,$i,$n); | |||||
| } | |||||
| @if $direction == b { | |||||
| @include fn($space, bottom,$i,$n); | |||||
| } | |||||
| @if $direction == l { | |||||
| @include fn($space, left,$i,$n); | |||||
| } | |||||
| @if $direction == x { | |||||
| @include fn($space, left,$i,$n); | |||||
| @include fn($space, right,$i,$n); | |||||
| } | |||||
| @if $direction == y { | |||||
| @include fn($space, top,$i,$n); | |||||
| @include fn($space, bottom,$i,$n); | |||||
| } | |||||
| @if $direction == a { | |||||
| @if $n { | |||||
| #{$space}:#{$i*$uni-space-root}px; | |||||
| } @else { | |||||
| #{$space}:#{-$i*$uni-space-root}px; | |||||
| } | |||||
| } | |||||
| } | |||||
| @each $orientation in m,p { | |||||
| $space: margin; | |||||
| @if $orientation == m { | |||||
| $space: margin; | |||||
| } @else { | |||||
| $space: padding; | |||||
| } | |||||
| @for $i from 0 through 16 { | |||||
| @each $direction in t, r, b, l, x, y, a { | |||||
| .uni-#{$orientation}#{$direction}-#{$i} { | |||||
| @include get-styles($direction,$i,$space,true); | |||||
| } | |||||
| .uni-#{$orientation}#{$direction}-n#{$i} { | |||||
| @include get-styles($direction,$i,$space,false); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 167
- 0
uni_modules/uni-scss/styles/setting/_styles.scss
View File
| @ -0,0 +1,167 @@ | |||||
| /* #ifndef APP-NVUE */ | |||||
| $-color-white:#fff; | |||||
| $-color-black:#000; | |||||
| @mixin base-style($color) { | |||||
| color: #fff; | |||||
| background-color: $color; | |||||
| border-color: mix($-color-black, $color, 8%); | |||||
| &:not([hover-class]):active { | |||||
| background: mix($-color-black, $color, 10%); | |||||
| border-color: mix($-color-black, $color, 20%); | |||||
| color: $-color-white; | |||||
| outline: none; | |||||
| } | |||||
| } | |||||
| @mixin is-color($color) { | |||||
| @include base-style($color); | |||||
| &[loading] { | |||||
| @include base-style($color); | |||||
| &::before { | |||||
| margin-right:5px; | |||||
| } | |||||
| } | |||||
| &[disabled] { | |||||
| &, | |||||
| &[loading], | |||||
| &:not([hover-class]):active { | |||||
| color: $-color-white; | |||||
| border-color: mix(darken($color,10%), $-color-white); | |||||
| background-color: mix($color, $-color-white); | |||||
| } | |||||
| } | |||||
| } | |||||
| @mixin base-plain-style($color) { | |||||
| color:$color; | |||||
| background-color: mix($-color-white, $color, 90%); | |||||
| border-color: mix($-color-white, $color, 70%); | |||||
| &:not([hover-class]):active { | |||||
| background: mix($-color-white, $color, 80%); | |||||
| color: $color; | |||||
| outline: none; | |||||
| border-color: mix($-color-white, $color, 50%); | |||||
| } | |||||
| } | |||||
| @mixin is-plain($color){ | |||||
| &[plain] { | |||||
| @include base-plain-style($color); | |||||
| &[loading] { | |||||
| @include base-plain-style($color); | |||||
| &::before { | |||||
| margin-right:5px; | |||||
| } | |||||
| } | |||||
| &[disabled] { | |||||
| &, | |||||
| &:active { | |||||
| color: mix($-color-white, $color, 40%); | |||||
| background-color: mix($-color-white, $color, 90%); | |||||
| border-color: mix($-color-white, $color, 80%); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .uni-btn { | |||||
| margin: 5px; | |||||
| color: #393939; | |||||
| border:1px solid #ccc; | |||||
| font-size: 16px; | |||||
| font-weight: 200; | |||||
| background-color: #F9F9F9; | |||||
| // TODO 暂时处理边框隐藏一边的问题 | |||||
| overflow: visible; | |||||
| &::after{ | |||||
| border: none; | |||||
| } | |||||
| &:not([type]),&[type=default] { | |||||
| color: #999; | |||||
| &[loading] { | |||||
| background: none; | |||||
| &::before { | |||||
| margin-right:5px; | |||||
| } | |||||
| } | |||||
| &[disabled]{ | |||||
| color: mix($-color-white, #999, 60%); | |||||
| &, | |||||
| &[loading], | |||||
| &:active { | |||||
| color: mix($-color-white, #999, 60%); | |||||
| background-color: mix($-color-white,$-color-black , 98%); | |||||
| border-color: mix($-color-white, #999, 85%); | |||||
| } | |||||
| } | |||||
| &[plain] { | |||||
| color: #999; | |||||
| background: none; | |||||
| border-color: $uni-border-1; | |||||
| &:not([hover-class]):active { | |||||
| background: none; | |||||
| color: mix($-color-white, $-color-black, 80%); | |||||
| border-color: mix($-color-white, $-color-black, 90%); | |||||
| outline: none; | |||||
| } | |||||
| &[disabled]{ | |||||
| &, | |||||
| &[loading], | |||||
| &:active { | |||||
| background: none; | |||||
| color: mix($-color-white, #999, 60%); | |||||
| border-color: mix($-color-white, #999, 85%); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| &:not([hover-class]):active { | |||||
| color: mix($-color-white, $-color-black, 50%); | |||||
| } | |||||
| &[size=mini] { | |||||
| font-size: 16px; | |||||
| font-weight: 200; | |||||
| border-radius: 8px; | |||||
| } | |||||
| &.uni-btn-small { | |||||
| font-size: 14px; | |||||
| } | |||||
| &.uni-btn-mini { | |||||
| font-size: 12px; | |||||
| } | |||||
| &.uni-btn-radius { | |||||
| border-radius: 999px; | |||||
| } | |||||
| &[type=primary] { | |||||
| @include is-color($uni-primary); | |||||
| @include is-plain($uni-primary) | |||||
| } | |||||
| &[type=success] { | |||||
| @include is-color($uni-success); | |||||
| @include is-plain($uni-success) | |||||
| } | |||||
| &[type=error] { | |||||
| @include is-color($uni-error); | |||||
| @include is-plain($uni-error) | |||||
| } | |||||
| &[type=warning] { | |||||
| @include is-color($uni-warning); | |||||
| @include is-plain($uni-warning) | |||||
| } | |||||
| &[type=info] { | |||||
| @include is-color($uni-info); | |||||
| @include is-plain($uni-info) | |||||
| } | |||||
| } | |||||
| /* #endif */ | |||||
+ 24
- 0
uni_modules/uni-scss/styles/setting/_text.scss
View File
| @ -0,0 +1,24 @@ | |||||
| @mixin get-styles($k,$c) { | |||||
| @if $k == size or $k == weight{ | |||||
| font-#{$k}:#{$c} | |||||
| }@else{ | |||||
| #{$k}:#{$c} | |||||
| } | |||||
| } | |||||
| @each $key, $child in $uni-headings { | |||||
| /* #ifndef APP-NVUE */ | |||||
| .uni-#{$key} { | |||||
| @each $k, $c in $child { | |||||
| @include get-styles($k,$c) | |||||
| } | |||||
| } | |||||
| /* #endif */ | |||||
| /* #ifdef APP-NVUE */ | |||||
| .container .uni-#{$key} { | |||||
| @each $k, $c in $child { | |||||
| @include get-styles($k,$c) | |||||
| } | |||||
| } | |||||
| /* #endif */ | |||||
| } | |||||
+ 146
- 0
uni_modules/uni-scss/styles/setting/_variables.scss
View File
| @ -0,0 +1,146 @@ | |||||
| // @use "sass:math"; | |||||
| @import '../tools/functions.scss'; | |||||
| // 间距基础倍数 | |||||
| $uni-space-root: 2 !default; | |||||
| // 边框半径默认值 | |||||
| $uni-radius-root:5px !default; | |||||
| $uni-radius: () !default; | |||||
| // 边框半径断点 | |||||
| $uni-radius: map-deep-merge( | |||||
| ( | |||||
| 0: 0, | |||||
| // TODO 当前版本暂时不支持 sm 属性 | |||||
| // 'sm': math.div($uni-radius-root, 2), | |||||
| null: $uni-radius-root, | |||||
| 'lg': $uni-radius-root * 2, | |||||
| 'xl': $uni-radius-root * 6, | |||||
| 'pill': 9999px, | |||||
| 'circle': 50% | |||||
| ), | |||||
| $uni-radius | |||||
| ); | |||||
| // 字体家族 | |||||
| $body-font-family: 'Roboto', sans-serif !default; | |||||
| // 文本 | |||||
| $heading-font-family: $body-font-family !default; | |||||
| $uni-headings: () !default; | |||||
| $letterSpacing: -0.01562em; | |||||
| $uni-headings: map-deep-merge( | |||||
| ( | |||||
| 'h1': ( | |||||
| size: 32px, | |||||
| weight: 300, | |||||
| line-height: 50px, | |||||
| // letter-spacing:-0.01562em | |||||
| ), | |||||
| 'h2': ( | |||||
| size: 28px, | |||||
| weight: 300, | |||||
| line-height: 40px, | |||||
| // letter-spacing: -0.00833em | |||||
| ), | |||||
| 'h3': ( | |||||
| size: 24px, | |||||
| weight: 400, | |||||
| line-height: 32px, | |||||
| // letter-spacing: normal | |||||
| ), | |||||
| 'h4': ( | |||||
| size: 20px, | |||||
| weight: 400, | |||||
| line-height: 30px, | |||||
| // letter-spacing: 0.00735em | |||||
| ), | |||||
| 'h5': ( | |||||
| size: 16px, | |||||
| weight: 400, | |||||
| line-height: 24px, | |||||
| // letter-spacing: normal | |||||
| ), | |||||
| 'h6': ( | |||||
| size: 14px, | |||||
| weight: 500, | |||||
| line-height: 18px, | |||||
| // letter-spacing: 0.0125em | |||||
| ), | |||||
| 'subtitle': ( | |||||
| size: 12px, | |||||
| weight: 400, | |||||
| line-height: 20px, | |||||
| // letter-spacing: 0.00937em | |||||
| ), | |||||
| 'body': ( | |||||
| font-size: 14px, | |||||
| font-weight: 400, | |||||
| line-height: 22px, | |||||
| // letter-spacing: 0.03125em | |||||
| ), | |||||
| 'caption': ( | |||||
| 'size': 12px, | |||||
| 'weight': 400, | |||||
| 'line-height': 20px, | |||||
| // 'letter-spacing': 0.03333em, | |||||
| // 'text-transform': false | |||||
| ) | |||||
| ), | |||||
| $uni-headings | |||||
| ); | |||||
| // 主色 | |||||
| $uni-primary: #2979ff !default; | |||||
| $uni-primary-disable:lighten($uni-primary,20%) !default; | |||||
| $uni-primary-light: lighten($uni-primary,25%) !default; | |||||
| // 辅助色 | |||||
| // 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 | |||||
| $uni-success: #18bc37 !default; | |||||
| $uni-success-disable:lighten($uni-success,20%) !default; | |||||
| $uni-success-light: lighten($uni-success,25%) !default; | |||||
| $uni-warning: #f3a73f !default; | |||||
| $uni-warning-disable:lighten($uni-warning,20%) !default; | |||||
| $uni-warning-light: lighten($uni-warning,25%) !default; | |||||
| $uni-error: #e43d33 !default; | |||||
| $uni-error-disable:lighten($uni-error,20%) !default; | |||||
| $uni-error-light: lighten($uni-error,25%) !default; | |||||
| $uni-info: #8f939c !default; | |||||
| $uni-info-disable:lighten($uni-info,20%) !default; | |||||
| $uni-info-light: lighten($uni-info,25%) !default; | |||||
| // 中性色 | |||||
| // 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 | |||||
| $uni-main-color: #3a3a3a !default; // 主要文字 | |||||
| $uni-base-color: #6a6a6a !default; // 常规文字 | |||||
| $uni-secondary-color: #909399 !default; // 次要文字 | |||||
| $uni-extra-color: #c7c7c7 !default; // 辅助说明 | |||||
| // 边框颜色 | |||||
| $uni-border-1: #F0F0F0 !default; | |||||
| $uni-border-2: #EDEDED !default; | |||||
| $uni-border-3: #DCDCDC !default; | |||||
| $uni-border-4: #B9B9B9 !default; | |||||
| // 常规色 | |||||
| $uni-black: #000000 !default; | |||||
| $uni-white: #ffffff !default; | |||||
| $uni-transparent: rgba($color: #000000, $alpha: 0) !default; | |||||
| // 背景色 | |||||
| $uni-bg-color: #f7f7f7 !default; | |||||
| /* 水平间距 */ | |||||
| $uni-spacing-sm: 8px !default; | |||||
| $uni-spacing-base: 15px !default; | |||||
| $uni-spacing-lg: 30px !default; | |||||
| // 阴影 | |||||
| $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default; | |||||
| $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default; | |||||
| $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default; | |||||
| // 蒙版 | |||||
| $uni-mask: rgba($color: #000000, $alpha: 0.4) !default; | |||||
+ 19
- 0
uni_modules/uni-scss/styles/tools/functions.scss
View File
| @ -0,0 +1,19 @@ | |||||
| // 合并 map | |||||
| @function map-deep-merge($parent-map, $child-map){ | |||||
| $result: $parent-map; | |||||
| @each $key, $child in $child-map { | |||||
| $parent-has-key: map-has-key($result, $key); | |||||
| $parent-value: map-get($result, $key); | |||||
| $parent-type: type-of($parent-value); | |||||
| $child-type: type-of($child); | |||||
| $parent-is-map: $parent-type == map; | |||||
| $child-is-map: $child-type == map; | |||||
| @if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){ | |||||
| $result: map-merge($result, ( $key: $child )); | |||||
| }@else { | |||||
| $result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) )); | |||||
| } | |||||
| } | |||||
| @return $result; | |||||
| }; | |||||
+ 31
- 0
uni_modules/uni-scss/theme.scss
View File
| @ -0,0 +1,31 @@ | |||||
| // 间距基础倍数 | |||||
| $uni-space-root: 2; | |||||
| // 边框半径默认值 | |||||
| $uni-radius-root:5px; | |||||
| // 主色 | |||||
| $uni-primary: #2979ff; | |||||
| // 辅助色 | |||||
| $uni-success: #4cd964; | |||||
| // 警告色 | |||||
| $uni-warning: #f0ad4e; | |||||
| // 错误色 | |||||
| $uni-error: #dd524d; | |||||
| // 描述色 | |||||
| $uni-info: #909399; | |||||
| // 中性色 | |||||
| $uni-main-color: #303133; | |||||
| $uni-base-color: #606266; | |||||
| $uni-secondary-color: #909399; | |||||
| $uni-extra-color: #C0C4CC; | |||||
| // 背景色 | |||||
| $uni-bg-color: #f5f5f5; | |||||
| // 边框颜色 | |||||
| $uni-border-1: #DCDFE6; | |||||
| $uni-border-2: #E4E7ED; | |||||
| $uni-border-3: #EBEEF5; | |||||
| $uni-border-4: #F2F6FC; | |||||
| // 常规色 | |||||
| $uni-black: #000000; | |||||
| $uni-white: #ffffff; | |||||
| $uni-transparent: rgba($color: #000000, $alpha: 0); | |||||
+ 62
- 0
uni_modules/uni-scss/variables.scss
View File
| @ -0,0 +1,62 @@ | |||||
| @import './styles/setting/_variables.scss'; | |||||
| // 间距基础倍数 | |||||
| $uni-space-root: 2; | |||||
| // 边框半径默认值 | |||||
| $uni-radius-root:5px; | |||||
| // 主色 | |||||
| $uni-primary: #2979ff; | |||||
| $uni-primary-disable:mix(#fff,$uni-primary,50%); | |||||
| $uni-primary-light: mix(#fff,$uni-primary,80%); | |||||
| // 辅助色 | |||||
| // 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。 | |||||
| $uni-success: #18bc37; | |||||
| $uni-success-disable:mix(#fff,$uni-success,50%); | |||||
| $uni-success-light: mix(#fff,$uni-success,80%); | |||||
| $uni-warning: #f3a73f; | |||||
| $uni-warning-disable:mix(#fff,$uni-warning,50%); | |||||
| $uni-warning-light: mix(#fff,$uni-warning,80%); | |||||
| $uni-error: #e43d33; | |||||
| $uni-error-disable:mix(#fff,$uni-error,50%); | |||||
| $uni-error-light: mix(#fff,$uni-error,80%); | |||||
| $uni-info: #8f939c; | |||||
| $uni-info-disable:mix(#fff,$uni-info,50%); | |||||
| $uni-info-light: mix(#fff,$uni-info,80%); | |||||
| // 中性色 | |||||
| // 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。 | |||||
| $uni-main-color: #3a3a3a; // 主要文字 | |||||
| $uni-base-color: #6a6a6a; // 常规文字 | |||||
| $uni-secondary-color: #909399; // 次要文字 | |||||
| $uni-extra-color: #c7c7c7; // 辅助说明 | |||||
| // 边框颜色 | |||||
| $uni-border-1: #F0F0F0; | |||||
| $uni-border-2: #EDEDED; | |||||
| $uni-border-3: #DCDCDC; | |||||
| $uni-border-4: #B9B9B9; | |||||
| // 常规色 | |||||
| $uni-black: #000000; | |||||
| $uni-white: #ffffff; | |||||
| $uni-transparent: rgba($color: #000000, $alpha: 0); | |||||
| // 背景色 | |||||
| $uni-bg-color: #f7f7f7; | |||||
| /* 水平间距 */ | |||||
| $uni-spacing-sm: 8px; | |||||
| $uni-spacing-base: 15px; | |||||
| $uni-spacing-lg: 30px; | |||||
| // 阴影 | |||||
| $uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5); | |||||
| $uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2); | |||||
| $uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); | |||||
| // 蒙版 | |||||
| $uni-mask: rgba($color: #000000, $alpha: 0.4); | |||||
+ 31
- 0
uni_modules/uni-transition/changelog.md
View File
| @ -0,0 +1,31 @@ | |||||
| ## 1.3.6（2025-07-18） | |||||
| - 修复 nvue 页面，样式错误问题 | |||||
| ## 1.3.5（2025-06-11） | |||||
| - 修复 第一次执行不显示动画的问题 | |||||
| ## 1.3.4（2025-04-16） | |||||
| - 修复 页面数据更新到底动画复原的问题 | |||||
| - 修复 示例页面打开报错的问题 | |||||
| ## 1.3.3（2024-04-23） | |||||
| - 修复 当元素会受变量影响自动隐藏的bug | |||||
| ## 1.3.2（2023-05-04） | |||||
| - 修复 NVUE 平台报错的问题 | |||||
| ## 1.3.1（2021-11-23） | |||||
| - 修复 init 方法初始化问题 | |||||
| ## 1.3.0（2021-11-19） | |||||
| - 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) | |||||
| - 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition) | |||||
| ## 1.2.1（2021-09-27） | |||||
| - 修复 init 方法不生效的 Bug | |||||
| ## 1.2.0（2021-07-30） | |||||
| - 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) | |||||
| ## 1.1.1（2021-05-12） | |||||
| - 新增 示例地址 | |||||
| - 修复 示例项目缺少组件的 Bug | |||||
| ## 1.1.0（2021-04-22） | |||||
| - 新增 通过方法自定义动画 | |||||
| - 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 | |||||
| - 优化 动画触发逻辑，使动画更流畅 | |||||
| - 优化 支持单独的动画类型 | |||||
| - 优化 文档示例 | |||||
| ## 1.0.2（2021-02-05） | |||||
| - 调整为 uni_modules 目录规范 | |||||
+ 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) | |||||
| } | |||||
+ 292
- 0
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
View File
| @ -0,0 +1,292 @@ | |||||
| <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: 0, | |||||
| 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 this | |||||
| Object.keys(obj).forEach(key => { | |||||
| const value = obj[key] | |||||
| if (typeof this.animation[key] === 'function') { | |||||
| Array.isArray(value) ? | |||||
| this.animation[key](...value) : | |||||
| this.animation[key](value) | |||||
| } | |||||
| }) | |||||
| this.animation.step(config) | |||||
| return this | |||||
| }, | |||||
| /** | |||||
| * ref 触发 执行动画 | |||||
| */ | |||||
| run(fn) { | |||||
| if (!this.animation) return | |||||
| this.animation.run(fn) | |||||
| }, | |||||
| // 开始过度动画 | |||||
| open() { | |||||
| clearTimeout(this.timer) | |||||
| this.isShow = true | |||||
| // 新增初始状态重置逻辑（关键） | |||||
| this.transform = this.styleInit(false).transform || '' | |||||
| this.opacity = this.styleInit(false).opacity || 0 | |||||
| // 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常 | |||||
| this.$nextTick(() => { | |||||
| // TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器 | |||||
| this.timer = setTimeout(() => { | |||||
| this.animation = createAnimation(this.config, this) | |||||
| this.tranfromInit(false).step() | |||||
| this.animation.run(() => { | |||||
| // #ifdef APP-NVUE | |||||
| this.transform = this.styleInit(false).transform || '' | |||||
| this.opacity = this.styleInit(false).opacity || 1 | |||||
| // #endif | |||||
| // #ifndef APP-NVUE | |||||
| this.transform = '' | |||||
| this.opacity = this.styleInit(false).opacity || 1 | |||||
| // #endif | |||||
| this.$emit('change', { | |||||
| detail: this.isShow | |||||
| }) | |||||
| }) | |||||
| }, 80) | |||||
| }) | |||||
| }, | |||||
| // 关闭过度动画 | |||||
| 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: '', opacity: 1 } | |||||
| const buildStyle = (type, mode) => { | |||||
| const value = this.animationType(type)[mode] // 直接使用 type 控制状态 | |||||
| if (mode.startsWith('fade')) { | |||||
| styles.opacity = value | |||||
| } else { | |||||
| styles.transform += value + ' ' | |||||
| } | |||||
| } | |||||
| 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 ? 1 : 0, | |||||
| '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> | |||||
+ 112
- 0
uni_modules/uni-transition/package.json
View File
| @ -0,0 +1,112 @@ | |||||
| { | |||||
| "id": "uni-transition", | |||||
| "displayName": "uni-transition 过渡动画", | |||||
| "version": "1.3.6", | |||||
| "description": "元素的简单过渡动画", | |||||
| "keywords": [ | |||||
| "uni-ui", | |||||
| "uniui", | |||||
| "动画", | |||||
| "过渡", | |||||
| "过渡动画" | |||||
| ], | |||||
| "repository": "https://github.com/dcloudio/uni-ui", | |||||
| "engines": { | |||||
| "HBuilderX": "", | |||||
| "uni-app": "^4.12", | |||||
| "uni-app-x": "" | |||||
| }, | |||||
| "directories": { | |||||
| "example": "../../temps/example_temps" | |||||
| }, | |||||
| "dcloudext": { | |||||
| "sale": { | |||||
| "regular": { | |||||
| "price": "0.00" | |||||
| }, | |||||
| "sourcecode": { | |||||
| "price": "0.00" | |||||
| } | |||||
| }, | |||||
| "contact": { | |||||
| "qq": "" | |||||
| }, | |||||
| "declaration": { | |||||
| "ads": "无", | |||||
| "data": "无", | |||||
| "permissions": "无" | |||||
| }, | |||||
| "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | |||||
| "type": "component-vue", | |||||
| "darkmode": "x", | |||||
| "i18n": "x", | |||||
| "widescreen": "x" | |||||
| }, | |||||
| "uni_modules": { | |||||
| "dependencies": [ | |||||
| "uni-scss" | |||||
| ], | |||||
| "encrypt": [], | |||||
| "platforms": { | |||||
| "cloud": { | |||||
| "tcb": "x", | |||||
| "aliyun": "x", | |||||
| "alipay": "x" | |||||
| }, | |||||
| "client": { | |||||
| "uni-app": { | |||||
| "vue": { | |||||
| "vue2": "√", | |||||
| "vue3": "√" | |||||
| }, | |||||
| "web": { | |||||
| "safari": "√", | |||||
| "chrome": "√" | |||||
| }, | |||||
| "app": { | |||||
| "vue": "√", | |||||
| "nvue": "√", | |||||
| "android": "√", | |||||
| "ios": "√", | |||||
| "harmony": "√" | |||||
| }, | |||||
| "mp": { | |||||
| "weixin": { | |||||
| }, | |||||
| "alipay": { | |||||
| }, | |||||
| "toutiao": { | |||||
| }, | |||||
| "baidu": { | |||||
| }, | |||||
| "kuaishou": { | |||||
| }, | |||||
| "jd": { | |||||
| }, | |||||
| "harmony": "-", | |||||
| "qq": "√", | |||||
| "lark": "-" | |||||
| }, | |||||
| "quickapp": { | |||||
| "huawei": "√", | |||||
| "union": "√" | |||||
| } | |||||
| }, | |||||
| "uni-app-x": { | |||||
| "web": { | |||||
| "safari": "-", | |||||
| "chrome": "-" | |||||
| }, | |||||
| "app": { | |||||
| "android": "-", | |||||
| "ios": "-", | |||||
| "harmony": "-" | |||||
| }, | |||||
| "mp": { | |||||
| "weixin": "-" | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
+ 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 | |||||