Skip to content

梁建民 / wmsMin

Go to a project
Commit 1dd19fc2 by LJM
Options

js

parent 0983f604
Inline Side-by-side
Showing with 614 additions and 1074 deletions
assets/css/scanInventory/index.scss
...@@ -54,7 +54,8 @@ ...@@ -54,7 +54,8 @@
text { text {
font-size: 26rpx; font-size: 26rpx;
color: #197adb; color: #197adb;
margin-right: 10rpx; margin-right: 60rpx;
font-weight: bold;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
...@@ -63,6 +64,7 @@ ...@@ -63,6 +64,7 @@
} }
} }
.uni-table-box { .uni-table-box {
padding-top: 24rpx;
padding-bottom: 24rpx; padding-bottom: 24rpx;
background-color: #ffffff; background-color: #ffffff;
::v-deep .uni-table-scroll { ::v-deep .uni-table-scroll {
...@@ -81,7 +83,7 @@ ...@@ -81,7 +83,7 @@
height: 98rpx; height: 98rpx;
background: #ffffff; background: #ffffff;
padding: 0 24rpx; padding: 0 24rpx;
z-index: 999; z-index: 98;
.t1 { .t1 {
font-size: 22rpx; font-size: 22rpx;
color: #404547; color: #404547;
...@@ -116,6 +118,7 @@ ...@@ -116,6 +118,7 @@
border-radius: 4rpx; border-radius: 4rpx;
font-size: 28rpx; font-size: 28rpx;
color: #ffffff; color: #ffffff;
margin-bottom: 100rpx;
} }
} }
...@@ -160,4 +163,10 @@ ...@@ -160,4 +163,10 @@
.uni-table-td { .uni-table-td {
border-right: 1px #ebeef5 solid; border-right: 1px #ebeef5 solid;
} }
.pop-list .uni-table-th {
width: 33.3% !important;
}
.pop-list .uni-table-td {
width: 33.3% !important;
}
} }
pages/scanInventory/index.vue
<template> <template>
<view class="scanInventory"> <view class="scanInventory">
<view class="scanInven-form-item"> <view class="scanInven-form-item">
<view class="box row verCenter operate"><text>箱列表</text></view> <view class="box row verCenter operate">
<text @click="exportChange()">导出</text>
<text @click="getBoxSnAndNumAll()">箱列表</text>
</view>
<view class="box row verCenter"> <view class="box row verCenter">
<view class="label">箱号</view> <view class="label">箱号</view>
<input v-model="box_sn" @input="inputChange" placeholder-style="font-size:24rpx;" class="uni-input" placeholder="请输入箱号" /> <input v-model="box_sn" @input="inputChange" placeholder-style="font-size:24rpx;" class="uni-input" placeholder="请输入箱号" />
...@@ -17,7 +20,7 @@ ...@@ -17,7 +20,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="addRow row rowCenter verCenter">新增行</view> <view class="addRow row rowCenter verCenter" @click="addRowChange()">新增行</view>
<view class="uni-table-box"> <view class="uni-table-box">
<uni-table type="selection" border stripe emptyText="暂无更多数据" @selection-change="selectionChange"> <uni-table type="selection" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr> <uni-tr>
...@@ -28,8 +31,8 @@ ...@@ -28,8 +31,8 @@
</uni-tr> </uni-tr>
<uni-tr v-for="(item, index) in list" :key="index"> <uni-tr v-for="(item, index) in list" :key="index">
<uni-td align="center">{{ index + 1 }}</uni-td> <uni-td align="center">{{ index + 1 }}</uni-td>
<uni-td align="center"><input class="uni-input" :value="item.goods_sn" /></uni-td> <uni-td align="center"><input class="uni-input" v-model="list[index].goods_sn" /></uni-td>
<uni-td align="center"><input class="uni-input" :value="item.goods_num" /></uni-td> <uni-td align="center"><input class="uni-input" v-model="list[index].goods_num" /></uni-td>
<uni-td align="center">{{ item.scan_time_cn }}</uni-td> <uni-td align="center">{{ item.scan_time_cn }}</uni-td>
</uni-tr> </uni-tr>
</uni-table> </uni-table>
...@@ -42,6 +45,22 @@ ...@@ -42,6 +45,22 @@
</view> </view>
<view class="btn row rowCenter verCenter" @click="deleteChange">删除</view> <view class="btn row rowCenter verCenter" @click="deleteChange">删除</view>
</view> </view>
<uni-popup ref="popup" type="center" background-color="#fff">
<view class="uni-table-box pop-list" style="width: 550rpx;">
<uni-table border stripe emptyText="暂无更多数据">
<uni-tr>
<uni-th align="center">箱号</uni-th>
<uni-th align="center">货品数</uni-th>
<uni-th align="center">保存时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in listPop" :key="index">
<uni-td align="center">{{ item.box_sn }}</uni-td>
<uni-td align="center">{{ item.box_sn_goods_num }}</uni-td>
<uni-td align="center">{{ item.scan_time_cn }}</uni-td>
</uni-tr>
</uni-table>
</view>
</uni-popup>
</view> </view>
</template> </template>
...@@ -55,14 +74,28 @@ export default { ...@@ -55,14 +74,28 @@ export default {
code_str: 'QTY:500 PN:PR03-1R CPN:PR03000201008JAC00 PO:18365781/11 CPO:B131190+A64120 MFR:VISHAY MPN:PR03000201008JAC00 RoHS', code_str: 'QTY:500 PN:PR03-1R CPN:PR03000201008JAC00 PO:18365781/11 CPO:B131190+A64120 MFR:VISHAY MPN:PR03000201008JAC00 RoHS',
code_type: '', code_type: '',
list: [], list: [],
listPop: [],
selectedIndexs: [], selectedIndexs: [],
index: -1, index: -1,
array: ['扫描digikey', '扫描Mouser', '扫描Arrow', '扫描Rochester', '扫描TME', '扫描Chip1stop'], array: ['扫描digikey', '扫描Mouser', '扫描Arrow', '扫描Rochester', '扫描TME', '扫描Chip1stop'],
arrar_val: ['digikey', 'Mouser', 'Arrow', 'Rochester', 'TME', 'Chip1stop'] arrar_val: ['digikey', 'Mouser', 'Arrow', 'Rochester', 'TME', 'Chip1stop']
}; };
}, },
created() {},
methods: { methods: {
getBoxSnAndNumAll() {
this.request(API.getBoxSnAndNum, 'POST', { box_sn: '' }, true).then(res => {
if (res.err_code === 0) {
this.listPop = res.data;
this.$refs.popup.open('center');
} else {
uni.showModal({
title: '提示',
content: res.err_msg,
showCancel: false
});
}
});
},
getBoxSnAndNum() { getBoxSnAndNum() {
this.request(API.getBoxSnAndNum, 'POST', { box_sn: this.box_sn }, false).then(res => { this.request(API.getBoxSnAndNum, 'POST', { box_sn: this.box_sn }, false).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
...@@ -82,7 +115,7 @@ export default { ...@@ -82,7 +115,7 @@ export default {
this.list.unshift({ this.list.unshift({
goods_num: res.data.num || '', goods_num: res.data.num || '',
goods_sn: res.data.sn || '', goods_sn: res.data.sn || '',
scan_time: '', scan_time_cn: '',
wsbxnmsn_id: '' wsbxnmsn_id: ''
}); });
} else { } else {
...@@ -128,6 +161,47 @@ export default { ...@@ -128,6 +161,47 @@ export default {
this.list.splice(this.selectedIndexs[i], 1); this.list.splice(this.selectedIndexs[i], 1);
} }
}, },
exportChange() {
this.request(API.getBoxSnAndNum, 'POST', { box_sn: this.box_sn, export: 1 }, true).then(res => {
if (res.err_code === 0) {
uni.downloadFile({
url: res.data,
success: function(res) {
const filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
showMenu: true,
success: function(res) {
console.log('打开文档成功');
},
fail: function() {
uni.showModal({
title: '提示',
content: '暂不支持该文件类型预览',
showCancel: false
});
console.log('打开文档失败');
}
});
}
});
} else {
uni.showModal({
title: '提示',
content: res.err_msg,
showCancel: false
});
}
});
},
addRowChange() {
this.list.unshift({
goods_num: '',
goods_sn: '',
scan_time_cn: '',
wsbxnmsn_id: ''
});
},
submit() { submit() {
let params = {}; let params = {};
let arr = []; let arr = [];
...@@ -140,7 +214,7 @@ export default { ...@@ -140,7 +214,7 @@ export default {
} }
params.list = JSON.stringify(arr); params.list = JSON.stringify(arr);
params.box_sn = this.box_sn; params.box_sn = this.box_sn;
this.request(API.submitBoxSnAndNum, 'POST', params, false).then(res => { this.request(API.submitBoxSnAndNum, 'POST', params, true).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
......
uni_modules/uni-popup/changelog.md
## 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.2（2021-08-24）
- 新增 支持国际化 - 新增 支持国际化
## 1.6.1（2021-07-30） ## 1.6.1（2021-07-30）
......
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
...@@ -10,12 +10,12 @@ ...@@ -10,12 +10,12 @@
</view> </view>
<view v-else class="uni-dialog-content"> <view v-else class="uni-dialog-content">
<slot> <slot>
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" > <input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" >
</slot> </slot>
</view> </view>
<view class="uni-dialog-button-group"> <view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog"> <view class="uni-dialog-button" @click="closeDialog">
<text class="uni-dialog-button-text">{{cancelText}}</text> <text class="uni-dialog-button-text">{{closeText}}</text>
</view> </view>
<view class="uni-dialog-button uni-border-left" @click="onOk"> <view class="uni-dialog-button uni-border-left" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text> <text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
initVueI18n initVueI18n
} from '@dcloudio/uni-i18n' } from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js' import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages) const { t } = initVueI18n(messages)
/** /**
* PopUp 弹出层-对话框样式 * PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式 * @description 弹出层-对话框样式
...@@ -57,6 +57,10 @@ ...@@ -57,6 +57,10 @@
mixins: [popup], mixins: [popup],
emits:['confirm','close'], emits:['confirm','close'],
props: { props: {
inputType:{
type: String,
default: 'text'
},
value: { value: {
type: [String, Number], type: [String, Number],
default: '' default: ''
...@@ -84,6 +88,14 @@ ...@@ -84,6 +88,14 @@
beforeClose: { beforeClose: {
type: Boolean, type: Boolean,
default: false default: false
},
cancelText:{
type: String,
default: ''
},
confirmText:{
type: String,
default: ''
} }
}, },
data() { data() {
...@@ -95,10 +107,10 @@ ...@@ -95,10 +107,10 @@
}, },
computed: { computed: {
okText() { okText() {
return t("uni-popup.ok") return this.confirmText || t("uni-popup.ok")
}, },
cancelText() { closeText() {
return t("uni-popup.cancel") return this.cancelText || t("uni-popup.cancel")
}, },
placeholderText() { placeholderText() {
return this.placeholder || t("uni-popup.placeholder") return this.placeholder || t("uni-popup.placeholder")
...@@ -162,10 +174,10 @@ ...@@ -162,10 +174,10 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup-dialog { .uni-popup-dialog {
width: 300px; width: 300px;
border-radius: 15px; border-radius: 11px;
background-color: #fff; background-color: #fff;
} }
...@@ -175,8 +187,7 @@ ...@@ -175,8 +187,7 @@
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
padding-top: 15px; padding-top: 25px;
padding-bottom: 5px;
} }
.uni-dialog-title-text { .uni-dialog-title-text {
...@@ -191,12 +202,12 @@ ...@@ -191,12 +202,12 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 5px 15px 15px 15px; padding: 20px;
} }
.uni-dialog-content-text { .uni-dialog-content-text {
font-size: 14px; font-size: 14px;
color: #6e6e6e; color: #6C6C6C;
} }
.uni-dialog-button-group { .uni-dialog-button-group {
...@@ -228,7 +239,8 @@ ...@@ -228,7 +239,8 @@
} }
.uni-dialog-button-text { .uni-dialog-button-text {
font-size: 14px; font-size: 16px;
color: #333;
} }
.uni-button-color { .uni-button-color {
......
uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup-message { .uni-popup-message {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
......
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
...@@ -59,16 +59,16 @@ ...@@ -59,16 +59,16 @@
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png', icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina' name: 'sina'
}, },
{ // {
text: '百度', // text: '百度',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png', // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
name: 'copy' // name: 'copy'
}, // },
{ // {
text: '其他', // text: '其他',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png', // icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
name: 'more' // name: 'more'
} // }
] ]
} }
}, },
...@@ -103,9 +103,11 @@ ...@@ -103,9 +103,11 @@
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" >
.uni-popup-share { .uni-popup-share {
background-color: #fff; background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
} }
.uni-share-title { .uni-share-title {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
......
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
<template> <template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear"> <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart" > <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="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap"> :duration="duration" :show="showTrans" @click="onTap" />
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view> <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> </uni-transition>
</view> </view>
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
...@@ -13,391 +17,458 @@ ...@@ -13,391 +17,458 @@
</template> </template>
<script> <script>
// #ifdef H5 // #ifdef H5
import keypress from './keypress.js' import keypress from './keypress.js'
// #endif // #endif
/** /**
* PopUp 弹出层 * PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题 * @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出 * @value top 顶部弹出
* @value center 中间弹出 * @value center 中间弹出
* @value bottom 底部弹出 * @value bottom 底部弹出
* @value left 左侧弹出 * @value left 左侧弹出
* @value right 右侧弹出 * @value right 右侧弹出
* @value message 消息提示 * @value message 消息提示
* @value dialog 对话框 * @value dialog 对话框
* @value share 底部分享示例 * @value share 底部分享示例
* @property {Boolean} animation = [ture|false] 是否开启动画 * @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗 * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {String} backgroundColor 主窗口背景色 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {Boolean} safeArea 是否适配底部安全区 * @property {String} backgroundColor 主窗口背景色
* @event {Function} change 打开关闭弹窗触发，e={show: false} * @property {String} maskBackgroundColor 蒙版颜色
* @event {Function} maskClick 点击遮罩触发 * @property {Boolean} safeArea 是否适配底部安全区
*/ * @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default { export default {
name: 'uniPopup', name: 'uniPopup',
components: { components: {
// #ifdef H5 // #ifdef H5
keypress keypress
// #endif // #endif
},
emits:['change','maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
backgroundColor: {
type: String,
default: 'none'
}, },
safeArea:{ emits: ['change', 'maskClick'],
type: Boolean, props: {
default: true // 开启动画
} animation: {
}, type: Boolean,
default: true
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
}, },
immediate: true // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
}, // message: 消息提示 ; dialog : 对话框
isDesktop: { type: {
handler: function(newVal) { type: String,
if (!this.config[newVal]) return default: 'center'
this[this.config[this.type]](true)
}, },
immediate: true // maskClick
}, isMaskClick: {
/** type: Boolean,
* 监听遮罩是否可点击 default: null
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
}, },
immediate: true // TODO 2 个版本后废弃属性 ，使用 isMaskClick
} maskClick: {
}, type: Boolean,
data() { default: null
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: { backgroundColor: {
position: 'fixed', type: String,
bottom: 0, default: 'none'
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
}, },
transClass: { safeArea: {
position: 'fixed', type: Boolean,
left: 0, default: true
right: 0 },
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
}, },
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
}
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
}, },
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') { watch: {
return 'transparent' /**
* 监听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
} }
return this.backgroundColor },
} data() {
}, return {
mounted() { duration: 300,
const fixSize = () => { ani: [],
const { windowWidth, windowHeight, windowTop, safeAreaInsets } = uni.getSystemInfoSync() showPopup: false,
this.popupWidth = windowWidth showTrans: false,
this.popupHeight = windowHeight + windowTop popupWidth: 0,
// 是否适配底部安全区 popupHeight: 0,
if(this.safeArea){ config: {
this.safeAreaInsets = safeAreaInsets top: 'top',
}else{ bottom: 'bottom',
this.safeAreaInsets = 0 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: this.isDesktop ? 'fixforpc-top' : 'top'
} }
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
created() {
this.mkclick = this.maskClick
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
},
methods: {
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
}, },
/** computed: {
* 公用方法，遮罩层禁止点击 isDesktop() {
*/ return this.popupWidth >= 500 && this.popupHeight >= 500
disableMask() { },
this.mkclick = false bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
}, },
// TODO nvue 取消冒泡 mounted() {
clear(e) { const fixSize = () => {
// #ifndef APP-NVUE const {
e.stopPropagation() 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 // #endif
this.clearPropagation = true
}, },
// #ifndef VUE3
open(direction) { // TODO vue2
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share'] destroyed() {
if (!(direction && innerType.indexOf(direction) !== -1)) { this.setH5Visible()
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
}, },
close(type) { // #endif
this.showTrans = false // #ifdef VUE3
this.$emit('change', { // TODO vue3
show: false, unmounted() {
type: this.type this.setH5Visible()
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
}, },
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容 // #endif
touchstart(){ 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.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
},
onTap() { open(direction) {
if (this.clearPropagation) { // fix by mehaotian 处理快速打开关闭的情况
// fix by mehaotian 兼容 nvue if (this.showPopup) {
this.clearPropagation = false clearTimeout(this.timer)
return this.showPopup = false
}
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()
} }
}) let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
}, if (!(direction && innerType.indexOf(direction) !== -1)) {
/** direction = this.type
* 底部弹出样式处理 }
*/ if (!this.config[direction]) {
bottom(type) { console.error('缺少类型：', direction)
this.popupstyle = 'bottom' return
this.ani = ['slide-bottom'] }
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
},
this.transClass = { onTap() {
position: 'fixed', if (this.clearPropagation) {
left: 0, // fix by mehaotian 兼容 nvue
right: 0, this.clearPropagation = false
bottom: 0, return
paddingBottom: (this.safeAreaInsets && this.safeAreaInsets.bottom) || 0, }
backgroundColor: this.bg this.$emit('maskClick')
} if (!this.mkclick) return
// TODO 兼容 type 属性 ，后续会废弃 this.close()
if (type) return },
this.showPopup = true /**
this.showTrans = true * 顶部弹出样式处理
}, */
/** top(type) {
* 中间弹出样式处理 this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
*/ this.ani = ['slide-top']
center(type) { this.transClass = {
this.popupstyle = 'center' position: 'fixed',
this.ani = ['zoom-out', 'fade'] left: 0,
this.transClass = { right: 0,
position: 'fixed', backgroundColor: this.bg
/* #ifndef APP-NVUE */ }
display: 'flex', // TODO 兼容 type 属性 ，后续会废弃
flexDirection: 'column', if (type) return
/* #endif */ this.showPopup = true
bottom: 0, this.showTrans = true
left: 0, this.$nextTick(() => {
right: 0, if (this.messageChild && this.type === 'message') {
top: 0, this.messageChild.timerClose()
justifyContent: 'center', }
alignItems: 'center' })
} },
// TODO 兼容 type 属性 ，后续会废弃 /**
if (type) return * 底部弹出样式处理
this.showPopup = true */
this.showTrans = true bottom(type) {
}, this.popupstyle = 'bottom'
left(type) { this.ani = ['slide-bottom']
this.popupstyle = 'left' this.transClass = {
this.ani = ['slide-left'] position: 'fixed',
this.transClass = { left: 0,
position: 'fixed', right: 0,
left: 0, bottom: 0,
bottom: 0, paddingBottom: this.safeAreaInsets + 'px',
top: 0, backgroundColor: this.bg
backgroundColor: this.bg, }
/* #ifndef APP-NVUE */ // TODO 兼容 type 属性 ，后续会废弃
display: 'flex', if (type) return
flexDirection: 'column' this.showPopup = true
/* #endif */ this.showTrans = true
} },
// TODO 兼容 type 属性 ，后续会废弃 /**
if (type) return * 中间弹出样式处理
this.showPopup = true */
this.showTrans = true center(type) {
}, this.popupstyle = 'center'
right(type) { this.ani = ['zoom-out', 'fade']
this.popupstyle = 'right' this.transClass = {
this.ani = ['slide-right'] position: 'fixed',
this.transClass = { /* #ifndef APP-NVUE */
position: 'fixed', display: 'flex',
bottom: 0, flexDirection: 'column',
right: 0, /* #endif */
top: 0, bottom: 0,
backgroundColor: this.bg, left: 0,
/* #ifndef APP-NVUE */ right: 0,
display: 'flex', top: 0,
flexDirection: 'column' justifyContent: 'center',
/* #endif */ 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
} }
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.uni-popup { .uni-popup {
position: fixed; 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 */ /* #ifndef APP-NVUE */
display: block; z-index: 99;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */ /* #endif */
&.top,
&.left, &.left,
&.right { &.right {
/* #ifdef H5 */ /* #ifdef H5 */
padding-top: var(--window-top); top: var(--window-top);
/* #endif */ /* #endif */
/* #ifndef H5 */ /* #ifndef H5 */
padding-top: 0; 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 */ /* #endif */
flex: 1; &.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
} }
} }
}
.fixforpc-z-index { .fixforpc-z-index {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 999; z-index: 999;
/* #endif */ /* #endif */
} }
.fixforpc-top { .fixforpc-top {
top: 0; top: 0;
} }
</style> </style>
uni_modules/uni-popup/package.json
{ {
"id": "uni-popup", "id": "uni-popup",
"displayName": "uni-popup 弹出层", "displayName": "uni-popup 弹出层",
"version": "1.6.2", "version": "1.8.2",
"description": " Popup 组件，提供常用的弹层", "description": " Popup 组件，提供常用的弹层",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -17,12 +17,8 @@ ...@@ -17,12 +17,8 @@
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [ "sale": {
"前端组件",
"通用组件"
],
"sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
}, },
...@@ -38,10 +34,12 @@ ...@@ -38,10 +34,12 @@
"data": "无", "data": "无",
"permissions": "无" "permissions": "无"
}, },
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [ "dependencies": [
"uni-scss",
"uni-transition" "uni-transition"
], ],
"encrypt": [], "encrypt": [],
...@@ -81,7 +79,7 @@ ...@@ -81,7 +79,7 @@
}, },
"Vue": { "Vue": {
"vue2": "y", "vue2": "y",
"vue3": "u" "vue3": "y"
} }
} }
} }
......
uni_modules/uni-popup/readme.md
...@@ -3,294 +3,15 @@ ...@@ -3,294 +3,15 @@
## Popup 弹出层 ## Popup 弹出层
> **组件名：uni-popup** > **组件名：uni-popup**
> 代码块： `uPopup` > 代码块： `uPopup`
> 关联组件：`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition` > 关联组件：`uni-transition`
弹出层组件，在应用中弹出一个消息提示窗口、提示框等 弹出层组件，在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> **注意事项**
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件，需要和 `uni-popup` 配套使用，暂不支持单独使用
> - `nvue` 中使用 `uni-popup` 时，尽量将组件置于其他元素后面，避免出现层级问题
> - `uni-popup` 并不能完全阻止页面滚动，可在打开 `uni-popup` 的时候手动去做一些处理，禁止页面滚动
> - 如果想在页面渲染完毕后就打开 `uni-popup` ，请在 `onReady` 或 `mounted` 生命周期内调用，确保组件渲染完毕
> - 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题
> - 使用 `npm` 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目
> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿
> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
> - 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
```
```javascript
export default {
methods:{
open(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('top')
}
}
}
```
### 设置主窗口背景色
在大多数场景下，并不需要设置 `background-color` 属性，因为`uni-popup`的主窗口默认是透明的，在向里面插入内容的时候 ，样式完全交由用户定制，如果设置了背景色 ，例如 `uni-popup-dialog` 中的圆角就很难去实现，不设置背景色，更适合用户去自由发挥。
而也有特例，需要我们主动去设置背景色，例如 `type = 'bottom'` 的时候 ，在异型屏中遇到了底部安全区问题（如 iphone 11），因为 `uni-popup`的主要内容避开了安全区（设置`safe-area:true`），导致底部的颜色我们无法自定义，这时候使用 `background-color` 就可以解决这个问题。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
```
### 禁用打开动画
在某些场景 ，可能不希望弹层有动画效果 ，只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
```
### 禁用点击遮罩关闭
默认情况下，点击遮罩会自动关闭`uni-popup`，如不想点击关闭，只需将`mask-click`设置为`false`，这时候要关闭`uni-popup`，只能手动调用 `close` 方法。
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" :mask-click="false">
<text>Popup</text>
<button @click="close">关闭</button>
</uni-popup>
```
```javascript
export default {
data() {
return {}
},
onReady() {},
methods: {
open() {
this.$refs.popup.open('top')
},
close() {
this.$refs.popup.close()
}
}
}
```
## API
### Popup Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|animation|Boolean|true|是否开启动画|
|type|String|'center'|弹出方式|
|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
|background-color|String|'none'|主窗口背景色|
|safe-area|Boolean|true|是否适配底部安全区|
#### Type Options
|属性名|说明|
|:-:| :-:|
|top|顶部弹出 |
|center|居中弹出|
|bottom|底部弹出|
|left|左侧弹出|
|right|右侧弹出|
|message|预置样式 ：消息提示|
|dialog|预置样式 ：对话框|
|share|预置样式 ：底部弹出分享示例 |
### Popup Methods
|方法称名 |说明|参数|
|:-:|:-:|:-:|
|open|打开弹出层|open(String:type) ，如果参数可代替 type 属性|
|close|关闭弹出层 |-|
### Popup Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|change|组件状态发生变化触发|e={show: true｜false,type:当前模式}|
|maskClick|点击遮罩层触发|-|
## 扩展组件说明
`uni-popup` 其实并没有任何样式，只提供基础的动画效果，给用户一个弹出层解决方案，仅仅是这样并不能满足开发需求，所以我们提供了三种基础扩展样式
### uni-popup-message 提示信息
将 `uni-popup` 的`type`属性改为 `message`，并引入对应组件即可使用消息提示 ，*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="message">
<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
</uni-popup>
```
### PopupMessage Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|消息提示主题|
|message|String|-|消息提示文字|
|duration|Number|3000|消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭|
#### Type Options
|属性名|说明|
|:-:| :-:|
|success|成功 |
|warn|警告|
|error|失败|
|info|消息|
### PopupMessage Slots
|名称|说明|
|:-:|:-:|
|default|消息内容，会覆盖 message 属性|
### uni-popup-dialog 对话框
将 `uni-popup` 的`type`属性改为 `dialog`，并引入对应组件即可使用对话框 ，*该组件不支持单独使用*
**示例**
```html
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
```
```javascript
export default {
methods: {
open() {
this.$refs.popup.open()
},
/**
* 点击取消按钮触发
* @param {Object} done
*/
close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
},
/**
* 点击确认按钮触发
* @param {Object} done
* @param {Object} value
*/
confirm(value) {
// 输入框的值
console.log(value)
// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
// ...
this.$refs.popup.close()
}
}
}
```
### PopupDialog Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:|:-:|
|type|String|success|对话框标题主题，可选值： success/warn/info/error|
|mode|String|base| 对话框模式，可选值：base（提示对话框）/input（可输入对话框）|
|title|String|-|对话框标题|
|content|String|-|对话框内容，base模式下生效|
|value| String\Number|-|输入框默认值，input模式下生效|
|placeholder|String|-|输入框提示文字，input模式下生效|
|before-close|Boolean|false | 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
#### PopupDialog Events
|事件称名 |说明|返回值|
|:-:|:-:|:-:|
|close|点击dialog取消按钮触发|-|
|confirm|点击dialog确定按钮触发|e={value:input模式下输入框的值}|
### PopupDialog Slots
|名称|说明|
|:-:|:-:|
|default|自定义内容，回覆盖原有的内容显示|
### uni-popup-share 分享示例
分享示例，不作为最终可使用的组件，只做为样式组件，供用户自行修改，`后续的开发计划是实现实际的分享逻辑，参数可配置`。
将 `uni-popup` 的 `type` 属性改为 `share`，并引入对应组件即可使用 ，*该组件不支持单独使用*
**示例**
```html
<uni-popup ref="popup" type="share">
<uni-popup-share title="分享到" @select="select"></uni-popup-share>
</uni-popup>
```
### PopupShare Props
|属性名|类型|默认值|说明|
|:-:|:-:|:-:| :-: |
|title|String|-|分享弹窗标题|
|before-close|Boolean|false | 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
### PopupShare Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|select|选择触发|e = {item,index}：所选参数|
**Tips**
- share 分享组件，只是作为一个扩展示例，如果需要修改数据源，请到组件内修改
## 帮助
在使用中如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup)
\ No newline at end of file
uni_modules/uni-transition/changelog.md
## 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） ## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834) - 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1（2021-05-12） ## 1.1.1（2021-05-12）
- 新增 示例地址 - 新增 示例地址
- 修复 示例项目缺少组件的Bug - 修复 示例项目缺少组件的 Bug
## 1.1.0（2021-04-22） ## 1.1.0（2021-04-22）
- 新增 通过方法自定义动画 - 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式 - 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
...@@ -10,4 +17,4 @@ ...@@ -10,4 +17,4 @@
- 优化 支持单独的动画类型 - 优化 支持单独的动画类型
- 优化 文档示例 - 优化 文档示例
## 1.0.2（2021-02-05） ## 1.0.2（2021-02-05）
- 调整为uni_modules目录规范 - 调整为 uni_modules 目录规范
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
...@@ -112,7 +112,7 @@ export default { ...@@ -112,7 +112,7 @@ export default {
if (obj.duration) { if (obj.duration) {
this.durationTime = obj.duration this.durationTime = obj.duration
} }
this.animation = createAnimation(Object.assign(this.config, obj)) this.animation = createAnimation(Object.assign(this.config, obj),this)
}, },
/** /**
* 点击组件触发回调 * 点击组件触发回调
......
uni_modules/uni-transition/package.json
{ {
"id": "uni-transition", "id": "uni-transition",
"displayName": "uni-transition 过渡动画", "displayName": "uni-transition 过渡动画",
"version": "1.2.0", "version": "1.3.1",
"description": "元素的简单过渡动画", "description": "元素的简单过渡动画",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
}, },
"uni_modules": { "uni_modules": {
"dependencies": [], "dependencies": ["uni-scss"],
"encrypt": [], "encrypt": [],
"platforms": { "platforms": {
"cloud": { "cloud": {
...@@ -76,6 +76,10 @@ ...@@ -76,6 +76,10 @@
"快应用": { "快应用": {
"华为": "u", "华为": "u",
"联盟": "u" "联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
} }
} }
} }
......
uni_modules/uni-transition/readme.md
...@@ -7,391 +7,5 @@ ...@@ -7,391 +7,5 @@
元素过渡动画 元素过渡动画
> **注意事项** ### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。 #### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
> - 组件需要依赖 `sass` 插件 ，请自行手动安装 \ No newline at end of file
> - rotate 旋转动画不需要填写 deg 单位，在小程序上填写单位动画不会执行
> - NVUE 下修改宽高动画，不能定位到中心点
> - 百度小程序下修改宽高 ，可能会影响其他动画，需注意
> - nvue 不支持 costom-class , 请使用 styles
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
### 基本用法
在 ``template`` 中使用组件
```html
<template>
<view>
<button type="primary" @click="open">fade</button>
<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
</view>
</template>
<script>
export default {
data() {
return {
show: false,
}
},
onLoad() {},
methods: {
open(mode) {
this.show = !this.show
},
change() {
console.log('触发动画')
}
}
}
</script>
```
### 样式覆盖
**注意：`nvue` 不支持 `custom-class` 属性 ，需要使用 `styles` 属性进行兼容**
使用 `custom-class` 属性绑定样式，可以自定义 `uni-transition` 的样式
```html
<template>
<view class="content">
<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
</view>
</template>
<style>
/* 常规样式覆盖 */
.content >>> .custom-transition {
width:100px;
height:100px;
background-color:red;
}
</style>
<style lang="scss">
/* 如果使用 scss 需要使用 /deep/ */
.content /deep/ .custom-transition {
width:100px;
height:100px;
background-color:red;
}
</style>
```
如果使用 `styles` 注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
```html
<template>
<view class="content">
<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
</view>
</template>
<script>
export default {
data() {
return {
styles:{
'width':'100px',
'height':'100px',
'backgroundColor':'red'
}
}
}
}
</script>
```
### 自定义动画
当内置动画类型不能满足需求的时候 ，可以使用 `step()` 和 `run()` 自定义动画,入参以及具体用法参考下方属性说明
`init()` 方法可以覆盖默认配置
```html
<template>
<view>
<button type="primary" @click="run">执行动画</button>
<uni-transition ref="ani" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" />
</view>
</template>
<script>
export default {
data() {
return {
show: true,
}
},
onReady() {
this.$refs.ani.init({
duration: 1000,
timingFunction: 'linear',
transformOrigin: '50% 50%',
delay: 500
})
},
methods: {
run() {
// 同时右平移到 100px,旋转 360 读
this.$refs.ani.step({
translateX: '100px',
rotate: '360'
})
// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
this.$refs.ani.step({
translateX: '0px',
rotate: '0'
},
{
timingFunction: 'ease-in',
duration: 200
})
// 开始执行动画
this.$refs.ani.run(()=>{
console.log('动画支持完毕')
})
}
}
}
</script>
```
## API
### Transition Props
|属性名 |类型 |默认值 |说明 |
|:-: |:-: |:-: |:-:|
|show |Boolean|false |控制组件显示或隐藏 |
|mode-class |Array/String |- |内置过渡动画类型 |
|custom-class |String |- |自定义类名 |
|duration |Number |300 |过渡动画持续时间 |
|styles |Object |- |组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red` |
#### mode-class 内置过渡动画类型说明
**格式为** ：`'fade'` 或者 `['fade','slide-top']`
|属性名 |说明 |
|:-: |:-: |
|fade |渐隐渐出过渡 |
|slide-top |由上至下过渡 |
|slide-right |由右至左过渡 |
|slide-bottom |由下至上过渡 |
|slide-left |由左至右过渡 |
|zoom-in |由小到大过渡 |
|zoom-out |由大到小过渡 |
**注意**
组合使用时，同一种类型相反的过渡动画如（slide-top、slide-bottom）同时使用时，只有最后一个生效
### Transition Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|click |点击组件触发 |- |
|change |过渡动画结束时触发 | e = {detail:true} |
### Transition Methons
|方法名|说明|参数|
|:-:|:-:|:-:|
|init()|手动初始化配置|Function(OBJECT:config)|
|step()|动画队列|Function(OBJECT:type,OBJECT:config)|
|run()|执行动画|Function(FUNCTION:callback) |
### init(OBJECT:config)
**通过 ref 调用方法**
手动设置动画配置，需要在页面渲染完毕后调用
```javascript
this.$refs.ani.init({
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
```
### step(OBJECT:type,OBJECT:config) 动画队列
**通过 ref 调用方法**
调用 `step()` 来表示一组动画完成，`step` 第一个参数可以传入任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。`step` 第二个参数可以传入一个跟 `uni.createAnimation()` 一样的配置参数用于指定当前组动画的配置。
Tips
- 第一个参数支持的动画参考下面的 `支持的动画`
- 第二个参数参考下面的 `动画配置`，可省略，如果省略继承`init`的配置
```javascript
this.$refs.ani.step({
translateX: '100px'
},{
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
```
### run(FUNCTION:callback) 执行动画
**通过 ref 调用方法**
在执行 `step()` 后，需要调用 `run()` 来运行动画 ，否则动画会一直等待
`run()` 方法可以传入一个 `callback` 函数 ，会在所有动画执行完毕后回调
```javascript
this.$refs.ani.step({
translateX: '100px'
})
this.$refs.ani.run(()=>{
console.log('动画执行完毕')
})
```
### 动画配置
动画配置 ， `init()` 与 `step()` 第二个参数配置相同 ，如果配置`step() `第二个参数，将会覆盖 `init()` 的配置
|属性名|值|必填|默认值|说明|平台差异|
|:-:|:-:|:-:|:-:|:-:|:-:|
|duration|Number|否|400|动画持续时间，单位ms|-|
|timingFunction|String|否|"linear"|定义动画的效果|-|
|delay|Number|否|0|动画延迟时间，单位 ms|-|
|needLayout|Boolean|否|false |动画执行是否影响布局|仅 nvue 支持|
|transformOrigin|String |否|"center center"|设置 [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)|-|
### timingFunction 属性说明
|值|说明|平台差异|
|:-:|:-:|:-:|
|linear|动画从头到尾的速度是相同的|-|
|ease|动画以低速开始，然后加快，在结束前变慢|-|
|ease-in| 动画以低速开始|-|
|ease-in-out| 动画以低速开始和结束|-|
|ease-out|动画以低速结束|-|
|step-start|动画第一帧就跳至结束状态直到结束|nvue不支持|
|step-end|动画一直保持开始状态，最后一帧跳到结束状态|nvue不支持|
```javascript
// init 配置
this.$refs.ani.init({
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
// step 配置
this.$refs.ani.step({
translateX: '100px'
},{
duration: 1000,
timingFunction:'ease',
delay:500,
transformOrigin:'left center'
})
```
### 支持的动画
动画方法
如果同一个动画方法有多个值，多个值使用数组分隔
```javascript
this.$refs.ani.step({
width:'100px',
scale: [1.2,0.8],
})
```
**样式：**
|属性名|值|说明|平台差异|
|:-:|:-:|:-:|:-:|
|opacity|value|透明度，参数范围 0~1|-|
|backgroundColor|color|颜色值|-|
|width|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-|
|height|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-|
|top|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|left|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|bottom|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
|right|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
```javascript
this.$refs.ani.step({
opacity: 1,
backgroundColor: '#ff5a5f',
widht:'100px',
height:'50rpx',
})
```
**旋转：**
旋转属性的值不需要填写单位
|属性名|值|说明|平台差异 |
|:-:|:-:|:-:|:-:|
|rotate|deg|deg的范围-180~180，从原点顺时针旋转一个deg角度 |-|
|rotateX|deg|deg的范围-180~180，在X轴旋转一个deg角度 |-|
|rotateY|deg|deg的范围-180~180，在Y轴旋转一个deg角度 |-|
|rotateZ|deg|deg的范围-180~180，在Z轴旋转一个deg角度 |nvue不支持|
|rotate3d|x,y,z,deg| 同 [transform-function rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()) |nvue不支持|
```javascript
this.$refs.ani.step({
rotateX: 45,
rotateY: 45
})
```
**缩放：**
|属性名|值|说明|平台差异|
|:-:|:-:|:-: |:-:|
|scale|sx,[sy]|一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数|-|
|scaleX|sx|在X轴缩放sx倍数|-|
|scaleY|sy|在Y轴缩放sy倍数|-|
|scaleZ|sz|在Z轴缩放sy倍数|nvue不支持|
|scale3d|sx,sy,sz|在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数|nvue不支持|
```javascript
this.$refs.ani.step({
scale: [1.2,0.8]
})
```
**偏移：**
|属性名|值|说明|平台差异|
|:-:|:-:|:-:|:-:|
|translate|tx,[ty]|一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。|-|
|translateX|tx| 在X轴偏移tx，单位px|-|
|translateY|ty| 在Y轴偏移tx，单位px|-|
|translateZ|tz| 在Z轴偏移tx，单位px|nvue不支持|
|translate3d|tx,ty,tz| 在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px|nvue不支持|
```javascript
this.$refs.ani.step({
translateX: '100px'
})
```
## 组件示例
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment