parent
765511b4d4
commit
458edcfccd
@ -0,0 +1,363 @@ |
|||||||
|
<template> |
||||||
|
<view class="all-container pd-main backcor6 font15"> |
||||||
|
<view class=" width100 mart10"> |
||||||
|
<button class="btns icon tianjia" @click.stop="clickToAdd()">新增</button> |
||||||
|
</view> |
||||||
|
<view class="mart20 backcorfff"> |
||||||
|
<view class="dis-flex height40 bor-botm1"> |
||||||
|
<view class="flex-1 fotct fontwig6 ">名称</view> |
||||||
|
<!-- <view class="flex-1 fotct fontwig6">排序<text class="icon xia font14 "></text></view> --> |
||||||
|
<view class="flex-1 fotct fontwig6">操作</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="dis-flex bor-botm1 paddtop10 paddbotm10 " v-for="(item,index) in categoryList" :key="index"> |
||||||
|
<view class="flex-1 fotct text1"> |
||||||
|
{{item.name}} |
||||||
|
</view> |
||||||
|
<view class="flex-1 fotct dis-flex"> |
||||||
|
<view class="marglerig fcorred" @click="toDeleteCategory(item)">删除<text |
||||||
|
class="icon shanchu font14 fcorred"></text></view> |
||||||
|
<view class="marglerig fcor41c" @click="clickToAdd(item)">编辑<text |
||||||
|
class="icon bianji font14 fcor41c"></text></view> |
||||||
|
<next-bubble-menu class="flex-1" :d-width="150" :dataList="item.status |filterDataList" |
||||||
|
bingEleId="moreType" @change="getItem($event,item)"> |
||||||
|
<view class="marglerig font15 " id="moreType">更多<text class="icon xia font14"></text></view> |
||||||
|
</next-bubble-menu> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
<!-- 弹窗编辑分类 --> |
||||||
|
<uni-popup ref="inputDialog" type="dialog"> |
||||||
|
<uni-popup-dialog ref="inputClose" mode="input" title="输入分类名称" :before-close="true" :value="categoryName" placeholder="请输入分类名称" |
||||||
|
@confirm="dialogInputConfirm" @close="close"></uni-popup-dialog> |
||||||
|
</uni-popup> |
||||||
|
<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="500" width="500" :scrollY="true" |
||||||
|
radius="6" :showCloseIcon="true"> |
||||||
|
<view class="pop-contain pd-main"> |
||||||
|
<view class="pop-title fontwig6"><text>详情</text></view> |
||||||
|
|
||||||
|
<view class="dis-flex flex-wrap" v-if="categoryDetail"> |
||||||
|
<view class="width100 dis-flex bor-botm1"> |
||||||
|
<view class=" fotct fontwig6 backcor6 titleWidth minheight40">分类名称</view> |
||||||
|
<view class="flex-1 fotct ">{{categoryDetail.name}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
|
||||||
|
</view> |
||||||
|
</wybPopup> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { |
||||||
|
editCategory, |
||||||
|
getALLCategory, |
||||||
|
delCategory, |
||||||
|
sortUp, |
||||||
|
sortDown, |
||||||
|
getCategory |
||||||
|
} from '@/Utils/groupBuying.js'; |
||||||
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'; |
||||||
|
import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
storeId: '', //门店id |
||||||
|
categoryName: '', |
||||||
|
categoryId: '', |
||||||
|
categoryList: [], |
||||||
|
categoryDetail: null, //分类详情 |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { |
||||||
|
wybPopup, |
||||||
|
nextBubleMenu |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
filterDataList(type) { |
||||||
|
let arr; |
||||||
|
arr = [{ |
||||||
|
id: 1, |
||||||
|
text: '详情', |
||||||
|
}, { |
||||||
|
id: 2, |
||||||
|
text: '上移', |
||||||
|
}, { |
||||||
|
id: 3, |
||||||
|
text: '下移', |
||||||
|
}]; |
||||||
|
|
||||||
|
return arr |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.storeId = options.storeId; |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.getALLCategory(true); //查询所有的分类列表 |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
clickToAdd(item) { |
||||||
|
this.formatCategory() |
||||||
|
|
||||||
|
if (item) { |
||||||
|
this.categoryId = item.id; |
||||||
|
this.categoryName = item.name; |
||||||
|
} |
||||||
|
|
||||||
|
this.$refs.inputDialog.open() |
||||||
|
}, |
||||||
|
/* 确定修改，编辑分类 */ |
||||||
|
dialogInputConfirm(e) { |
||||||
|
this.categoryName = e; |
||||||
|
this.editCategory() |
||||||
|
console.log(this.categoryName) |
||||||
|
}, |
||||||
|
/* 点击取消按钮触发 */ |
||||||
|
close() { |
||||||
|
this.formatCategory(); |
||||||
|
this.$refs.inputDialog.close(); |
||||||
|
}, |
||||||
|
formatCategory() { |
||||||
|
this.categoryName = ''; |
||||||
|
this.categoryId = ''; |
||||||
|
}, |
||||||
|
/* 得到点击更多的 菜单选项 ，1：详情 2：上移 3：下移*/ |
||||||
|
getItem(data, item) { |
||||||
|
|
||||||
|
if (data.id == 1) { //详情 |
||||||
|
|
||||||
|
this.getCategory(item); //查询分类详情 |
||||||
|
} else if (data.id == 2) { //上移 |
||||||
|
this.sortUp(item.id) |
||||||
|
} else if (data.id == 3) { //下移 |
||||||
|
this.sortDown(item.id) |
||||||
|
} |
||||||
|
console.log(data, item) |
||||||
|
}, |
||||||
|
/* 查询分类详情 */ |
||||||
|
getCategory(item) { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中' |
||||||
|
}) |
||||||
|
let params = { |
||||||
|
id: item.id |
||||||
|
} |
||||||
|
getCategory(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.categoryDetail = res.return_data; |
||||||
|
this.$refs.popup.show(); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}).catch(() => { |
||||||
|
uni.hideLoading(); |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
hide() { |
||||||
|
this.categoryDetail = null; |
||||||
|
}, |
||||||
|
/* 删除分类 */ |
||||||
|
toDeleteCategory(item) { |
||||||
|
let _this = this; |
||||||
|
uni.showModal({ |
||||||
|
title: '提示', |
||||||
|
content: `确定删除‘${item.name}’这个分类吗?`, |
||||||
|
success: function(res) { |
||||||
|
if (res.confirm) { |
||||||
|
let params = { |
||||||
|
id: item.id |
||||||
|
} |
||||||
|
uni.showLoading({ |
||||||
|
title: '删除中' |
||||||
|
}) |
||||||
|
delCategory(params).then(res => { |
||||||
|
let title; |
||||||
|
if (res.return_code == '000000') { |
||||||
|
title = res.return_data; |
||||||
|
_this.getALLCategory(); |
||||||
|
} else { |
||||||
|
title = res.return_msg; |
||||||
|
} |
||||||
|
uni.showToast({ |
||||||
|
title: title, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
}) |
||||||
|
} else if (res.cancel) { |
||||||
|
|
||||||
|
// console.log('用户点击取消'); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
/* 编辑，新增分类 */ |
||||||
|
editCategory() { |
||||||
|
|
||||||
|
if(this.categoryName ==''){ |
||||||
|
uni.showToast({ |
||||||
|
title: "请输入分类名称", |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中' |
||||||
|
}) |
||||||
|
let params = { |
||||||
|
storeId: this.storeId, |
||||||
|
name: this.categoryName, |
||||||
|
} |
||||||
|
if (this.categoryId) { |
||||||
|
params.id = this.categoryId; |
||||||
|
} |
||||||
|
|
||||||
|
editCategory(params).then(res => { |
||||||
|
uni.hideLoading(); |
||||||
|
this.formatCategory(); |
||||||
|
|
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.getALLCategory(); |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_data, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}).catch(()=>{ |
||||||
|
this.$refs.inputDialog.close(); |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
/* 获取分类列表 */ |
||||||
|
getALLCategory(flag) { |
||||||
|
|
||||||
|
if (flag) { |
||||||
|
uni.showLoading({ |
||||||
|
title: '加载中' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
let params = { |
||||||
|
storeId: this.storeId |
||||||
|
} |
||||||
|
getALLCategory(params).then(res => { |
||||||
|
if (flag) { |
||||||
|
uni.hideLoading() |
||||||
|
} |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.categoryList = res.return_data; |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 上移 */ |
||||||
|
sortUp(id) { |
||||||
|
let params = { |
||||||
|
id: id |
||||||
|
} |
||||||
|
sortUp(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.getALLCategory() |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
/* 下移 */ |
||||||
|
sortDown(id) { |
||||||
|
let params = { |
||||||
|
id: id |
||||||
|
} |
||||||
|
sortDown(params).then(res => { |
||||||
|
if (res.return_code == '000000') { |
||||||
|
this.getALLCategory() |
||||||
|
|
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: res.return_msg, |
||||||
|
icon: 'none', |
||||||
|
duration: 2000 |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.btns { |
||||||
|
width: 21%; |
||||||
|
height: 35px; |
||||||
|
line-height: 35px; |
||||||
|
background-color: #0083f5; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 12px; |
||||||
|
padding: 0px; |
||||||
|
margin: 0 0 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* 弹窗 */ |
||||||
|
.pop-contain { |
||||||
|
text-align: center; |
||||||
|
padding-top: 50px; |
||||||
|
background-color: #ffffff; |
||||||
|
|
||||||
|
.pop-title { |
||||||
|
text-align: center; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 18px; |
||||||
|
position: fixed; |
||||||
|
z-index: 10; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
background: #ffffff; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.flex-wrap { |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.titleWidth { |
||||||
|
min-width: 80px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.minheight40 { |
||||||
|
padding: 15px 0; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
## 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 端 |
||||||
@ -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
|
||||||
@ -0,0 +1,275 @@ |
|||||||
|
<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" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" > |
||||||
|
</slot> |
||||||
|
</view> |
||||||
|
<view class="uni-dialog-button-group"> |
||||||
|
<view class="uni-dialog-button" @click="closeDialog"> |
||||||
|
<text class="uni-dialog-button-text">{{closeText}}</text> |
||||||
|
</view> |
||||||
|
<view class="uni-dialog-button 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 {String} type = [success|warning|info|error] 主题样式 |
||||||
|
* @value success 成功 |
||||||
|
* @value warning 提示 |
||||||
|
* @value info 消息 |
||||||
|
* @value error 错误 |
||||||
|
* @property {String} mode = [base|input] 模式、 |
||||||
|
* @value base 基础对话框 |
||||||
|
* @value input 可输入对话框 |
||||||
|
* @property {String} content 对话框内容 |
||||||
|
* @property {Boolean} beforeClose 是否拦截取消事件 |
||||||
|
* @event {Function} confirm 点击确认按钮触发 |
||||||
|
* @event {Function} close 点击取消按钮触发 |
||||||
|
*/ |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "uniPopupDialog", |
||||||
|
mixins: [popup], |
||||||
|
emits:['confirm','close'], |
||||||
|
props: { |
||||||
|
inputType:{ |
||||||
|
type: String, |
||||||
|
default: 'text' |
||||||
|
}, |
||||||
|
value: { |
||||||
|
type: [String, Number], |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
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: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dialogType: 'error', |
||||||
|
focus: false, |
||||||
|
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.val = val |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 对话框遮罩不可点击 |
||||||
|
this.popup.disableMask() |
||||||
|
// this.popup.closeMask() |
||||||
|
if (this.mode === 'input') { |
||||||
|
this.dialogType = 'info' |
||||||
|
this.val = this.value |
||||||
|
} else { |
||||||
|
this.dialogType = this.type |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.focus = true |
||||||
|
}, |
||||||
|
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> |
||||||
@ -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> |
||||||
@ -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: 'wx' |
||||||
|
}, |
||||||
|
{ |
||||||
|
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> |
||||||
@ -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" |
||||||
|
} |
||||||
@ -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 |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
{ |
||||||
|
"uni-popup.cancel": "取消", |
||||||
|
"uni-popup.ok": "确定", |
||||||
|
"uni-popup.placeholder": "请输入", |
||||||
|
"uni-popup.title": "提示", |
||||||
|
"uni-popup.shareTitle": "分享到" |
||||||
|
} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
{ |
||||||
|
"uni-popup.cancel": "取消", |
||||||
|
"uni-popup.ok": "確定", |
||||||
|
"uni-popup.placeholder": "請輸入", |
||||||
|
"uni-popup.title": "提示", |
||||||
|
"uni-popup.shareTitle": "分享到" |
||||||
|
} |
||||||
@ -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
|
||||||
@ -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; |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
@ -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> |
||||||
@ -0,0 +1,473 @@ |
|||||||
|
<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="{ backgroundColor: bg }" :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 {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)' |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
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: { |
||||||
|
position: 'fixed', |
||||||
|
left: 0, |
||||||
|
right: 0 |
||||||
|
}, |
||||||
|
maskShow: true, |
||||||
|
mkclick: true, |
||||||
|
popupstyle: 'top' |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
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 |
||||||
|
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() { |
||||||
|
// #ifdef H5 |
||||||
|
// fix by mehaotian 处理 h5 滚动穿透的问题 |
||||||
|
document.getElementsByTagName('body')[0].style.overflow = 'visible' |
||||||
|
// #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 |
||||||
|
} |
||||||
|
// 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 |
||||||
|
} |
||||||
|
// TODO 兼容 type 属性 ，后续会废弃 |
||||||
|
if (type) return |
||||||
|
this.showPopup = true |
||||||
|
this.showTrans = true |
||||||
|
}, |
||||||
|
/** |
||||||
|
* 中间弹出样式处理 |
||||||
|
*/ |
||||||
|
center(type) { |
||||||
|
this.popupstyle = 'center' |
||||||
|
this.ani = ['zoom-out', 'fade'] |
||||||
|
this.transClass = { |
||||||
|
position: 'fixed', |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: 'flex', |
||||||
|
flexDirection: 'column', |
||||||
|
/* #endif */ |
||||||
|
bottom: 0, |
||||||
|
left: 0, |
||||||
|
right: 0, |
||||||
|
top: 0, |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center' |
||||||
|
} |
||||||
|
// 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, |
||||||
|
/* #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, |
||||||
|
/* #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> |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
{ |
||||||
|
"id": "uni-popup", |
||||||
|
"displayName": "uni-popup 弹出层", |
||||||
|
"version": "1.8.4", |
||||||
|
"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" |
||||||
|
}, |
||||||
|
"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" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
|
||||||
|
|
||||||
|
## Popup 弹出层 |
||||||
|
> **组件名：uni-popup** |
||||||
|
> 代码块： `uPopup` |
||||||
|
> 关联组件：`uni-transition` |
||||||
|
|
||||||
|
|
||||||
|
弹出层组件，在应用中弹出一个消息提示窗口、提示框等 |
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup) |
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,22 @@ |
|||||||
|
## 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 目录规范 |
||||||
@ -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) |
||||||
|
} |
||||||
@ -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 ? 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> |
||||||
@ -0,0 +1,84 @@ |
|||||||
|
{ |
||||||
|
"id": "uni-transition", |
||||||
|
"displayName": "uni-transition 过渡动画", |
||||||
|
"version": "1.3.2", |
||||||
|
"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" |
||||||
|
}, |
||||||
|
"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" |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
|
||||||
|
|
||||||
|
## Transition 过渡动画 |
||||||
|
> **组件名：uni-transition** |
||||||
|
> 代码块： `uTransition` |
||||||
|
|
||||||
|
|
||||||
|
元素过渡动画 |
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition) |
||||||
|
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 |
||||||
Loading…
Reference in new issue