Commit e7fbda84 authored by ly's avatar ly

底部tab和更新

parent 03a9b3cc
No preview for this file type
<template>
<view class="content">
dhh
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style src='./index.less' lang="less" scoped></style>
<template>
<view class="i-page">
dhh
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style src='./index.less' lang="less" scoped></style>
<template>
<view class="i-page">
<view class='i-header'>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style src='./index.less' lang="less" scoped></style>
<template>
<view class="i-page">
<view class='i-header'>
<view class='header-title'>多典花</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style src='./index.less' lang="less" scoped></style>
<template>
<view class="i-page">
<view class='i-header'>
<view :class="isFixed==true ? 'header-titles':'header-title' ">多典花</view>
</view>
<view class='i-contain'>
<view class='header-img' @click="goRecruit">
<image class='img-banner' src='https://ddh.yyhock.com/ddhMall/ddh-banner.png'></image>
</view>
<view class="i-main">
<view class='mian-item' v-for="item in list" :key="item.id" @click="goItem">
<image class='item-img' :src='item.url'></image>
<view class='item-text'>{{item.name}}</view>
</view>
</view>
<view class="i-mall">
<view :class="isFixed==true ? 'hot-tab-fixed':'hot-tab'">
<view :class="hotIndex==item.id ?'hot-header-text':'hot-show'" @click="hotShow(item)" v-for="item in hotList" :key='item.id'>
<view class='hot-ative'>{{item.title}}</view>
<view :class="hotIndex==item.id ?'hot-icon-show':'hot-icon'"></view>
</view>
</view>
<view-goods></view-goods>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[
{url:'https://ddh.yyhock.com/ddhMall/list-o.png',name:'鉴定评估'},
{url:'https://ddh.yyhock.com/ddhMall/list-t.png',name:'我的需要'},
{url:'https://ddh.yyhock.com/ddhMall/list-th.png',name:'我的关注'},
{url:'https://ddh.yyhock.com/ddhMall/list-f.png',name:'用户反馈'}
],
hotList:[
{title:'浏览量',id:0},
{title:'价格',id:1},
],
hotIndex:0,
isFixed: false,
headerHeight: 0,
scrollTop:0,
}
},
onPageScroll(e) {
// 页面滚动时设置isFixed和scrollTop
console.log(e,'876')
this.scrollTop = e.scrollTop;
if( e.scrollTop > 280){
this.isFixed = true;
}else{
this.isFixed = false;
}
},
onLoad() {
},
onReady() {
const isAgree = uni.getStorageSync('m-agreement')
if (!isAgree) {
this.Go('uni:/pages/agreement/index')
}
},
methods: {
goDetail(){
this.Go('uni:/pages/productDetails/productDetails')
},
goItem(){
this.Go('uni:/pages/lookGoods/lookGoods')
},
goRecruit(){
console.log(877)
// this.Go('uni:/pages/recruit/index')
},
hotShow(item){
console.log(item,'9655')
this.hotIndex=item.id
},
toupperTop(e){
console.log(e,'到顶了');
},
lowerMore(e){
console.log(e,'触底了');
}
},
onShow() {
}
}
</script>
<style src='./index.less' lang="less" scoped></style>
......@@ -2,7 +2,6 @@
import { convertPromise } from './utils/header.js'
import Permission from '@/js_sdk/wa-permission/permission'
import { SelectLocation } from "./utils/authPerission";
import { switchShowTabbar } from './utils/filters'
import silentlyAppUpdate from '@/pages/app-update/js-sdk/silentlyAppUpdate'
export default {
onLaunch: function() {
......@@ -13,19 +12,59 @@
this.loadNetwork();
this.loadLocation();
this.loadUuid()
// const isAgree = uni.getStorageSync('m-agreement')
// console.log(isAgree,'isAgree1')
}
/*** tabbar*/
switchShowTabbar()
this.switchShowTabbar()
//app更新版本
silentlyAppUpdate()
if (plus.runtime.isAgreePrivacy()) {
// setDevice()
silentlyAppUpdate()
}
silentlyAppUpdate()
if (plus.runtime.isAgreePrivacy()) {
// setDevice()
silentlyAppUpdate()
}
plus.screen.lockOrientation("portrait-primary")
console.log('App Launch')
},
methods:{
methods:{
//tab的信息
switchShowTabbar(){
const token=uni.getStorageSync('token')
if (!token) {
console.log(token,'tokentab')
uni.setTabBarItem({
index: 1,
visible: false
})
} else {
const self=this
self.$request('/pawn/setting/other/switch/loan','GET').then(res => {
const {data}=res.result
if (res.code == 200 && data == true) {
try {
console.log(data,'显示')
uni.setTabBarItem({
index: 1,
text: '贷款',
visible: true,
})
} catch (error) {
console.log(error);
}
} else {
console.log(data,'隐藏')
uni.setTabBarItem({
index: 1,
visible: false
})
}
})
}
},
// 获取common当中的设备信息
loadDevice: function() {
const that = this;
......@@ -69,76 +108,84 @@
});
})
},
// 获取common当中的网络信息
loadNetwork: function() {
const that = this;
convertPromise('getNetworkType').then(result => {
const networkInfo = {
networkStatus: result.networkType
};
// 网络信息存储
uni.setStorage({
key: 'm-network-info',
data: JSON.stringify(networkInfo),
success: function() {
console.log('m-network-info存储成功');
}
});
}).catch(err => {
that.toast('获取网络信息失败')
})
// 获取common当中的网络信息
loadNetwork: function() {
const that = this;
convertPromise('getNetworkType').then(result => {
const networkInfo = {
networkStatus: result.networkType
};
// 网络信息存储
uni.setStorage({
key: 'm-network-info',
data: JSON.stringify(networkInfo),
success: function() {
console.log('m-network-info存储成功');
}
});
}).catch(err => {
that.toast('获取网络信息失败')
})
},
//获取uuid
loadUuid: function() {
// plus.device.uuid
plus.device.getInfo({
success: function(e) {
const deviceInfo = {
token: e.uuid,
};
uni.setStorage({
key: 'm-load-udid',
data: JSON.stringify(deviceInfo),
success: function() {
console.log('uuid存储成功');
}
})
},
fail: function(e) {
console.log('getDeviceInfo failed: ' + JSON.stringify(e));
}
});
//获取uuid
loadUuid: function() {
// plus.device.uuid
plus.device.getInfo({
success: function(e) {
const deviceInfo = {
token: e.uuid,
};
uni.setStorage({
key: 'm-load-udid',
data: JSON.stringify(deviceInfo),
success: function() {
console.log('uuid存储成功');
}
})
},
fail: function(e) {
console.log('getDeviceInfo failed: ' + JSON.stringify(e));
}
});
},
// 获取common当中的位置信息
loadLocation: function() {
const that = this;
// 苹果测试手机如果没有插入手机卡,获取定位之后会解析失败,报错
SelectLocation(() => {
convertPromise('getLocation', {
type: 'wgs84',
geocode: true
}).then(result => {
const locationInfo = {
lat: String(result.latitude),
lng: String(result.longitude)
};
uni.setStorage({
key: 'm-location-info',
data: JSON.stringify(locationInfo),
success: function() {
console.log('m-location-info存储成功');
}
});
}).catch(err => {
console.log(err, '错误了')
// that.toast('获取位置信息失败')
// 获取common当中的位置信息
loadLocation: function() {
const that = this;
// 苹果测试手机如果没有插入手机卡,获取定位之后会解析失败,报错
SelectLocation(() => {
convertPromise('getLocation', {
type: 'wgs84',
geocode: true
}).then(result => {
const locationInfo = {
lat: String(result.latitude),
lng: String(result.longitude)
};
uni.setStorage({
key: 'm-location-info',
data: JSON.stringify(locationInfo),
success: function() {
console.log('m-location-info存储成功');
}
});
}).catch(err => {
console.log(err, '错误了')
// that.toast('获取位置信息失败')
})
})
})
}
},
onShow: function() {
console.log('App Show')
console.log('App Show')
/*** tabbar*/
this.switchShowTabbar()
// 版本更新
silentlyAppUpdate()
if (plus.runtime.isAgreePrivacy()) {
// setDevice()
silentlyAppUpdate()
}
},
onHide: function() {
......@@ -147,6 +194,7 @@
}
</script>
<style>
<style >
/*每个页面公共css */
</style>
// common.js
import {initHeaderDevice} from '../utils/header.js'
import api from '@/config/api.js'
export const getAppVersion=function(url,data) {
const baseUrl=api.common
// 这里确保一定是可以获取得到的
const headerDevice = uni.getStorageSync('m-header-device')
let rd = null;
if (headerDevice) {
rd = headerDevice
} else {
const common = initHeaderDevice()
rd = JSON.stringify(common)
}
return new Promise((resolve,reject)=>{
const token=uni.getStorageSync('token')
const tokenFinance=uni.getStorageSync('tokenFinance')
uni.request({
url:baseUrl+url,
method: "GET",
data:{
...data
},
header: {
Accept: "application/json;charset=UTF-8",
"Content-Type": "application/json;charset=UTF-8",
device:rd,
Authorization:tokenFinance,//贷超
Author:token,//多典花
},
success:(res)=>{
const {data, statusCode} = res
if(statusCode==200){
if (data.success==true) {
return resolve(data)
}
}
},
fail:(err)=>{
reject(err);
}
})
})
}
\ No newline at end of file
......@@ -9,7 +9,7 @@ export default {
aMapKey: "d04c16e59eab35d19812634b2b7cb548", //在高德中申请Web服务key
scanAuthNavigation:['https://mobile.meimeiyouxin.com'], //扫码认证跳转域名配置 会根据此处配置的路由进行跳转
iosAppId:"id6450257420", //AppStore的应用地址id 具体在分享->拷贝链接中查看
logo:"https://mmyx-res.meimeiyouxin.com/duodianhua/logo.png", //logo地址
logo:"https://mmyx-res.meimeiyouxin.com/huahuayoumi/logo.png", //logo地址
customerServiceMobile:"4001035066", //客服电话
customerServiceEmail:"hhym@huahuayoumi.com", //客服邮箱
customerServiceUrl: "https://chatbot.aliyuncs.com/intl/index.htm?from=Knv39Casa0", // 阿里云客服
......
......@@ -8,6 +8,7 @@ import mixin from './mixin/index'
import Modal from './components/modal/modal'
import goodsItem from './components/goodsItem/index'
import request from './utils/request.js'
Vue.component('view-modal', Modal);
Vue.component('view-goods', goodsItem);
Vue.prototype.$request = request
......
......@@ -37,6 +37,7 @@
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.INTERNET\"/>",
"<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/> ",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
......
......@@ -149,6 +149,22 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/app-update/index",
"style": {
"disableScroll": true,
"app-plus": {
"backgroundColorTop": "transparent",
"background": "transparent",
"titleNView": false,
"scrollIndicator": false,
"popGesture": "none",
"animationType": "fade-in",
"animationDuration": 200,
"disableSwipeBack": true
}
}
},
{
"path": "pages/agreement/index",
"style": {
......
No preview for this file type
......@@ -32,6 +32,7 @@
</template>
<script>
export default {
name:"Agreement",
data() {
......
<template>
<view class="appUploadAlertBox">
<u-popup ref="popup" mode="center" :maskCloseAble="false" @touchmove.stop.prevent zIndex="9999" width="590rpx" border-radius="10">
<uni-popup ref="popup" mode="center" :maskCloseAble="false" @touchmove.stop.prevent zIndex="9999" width="590rpx" border-radius="10">
<view class="content_popup" :style="{backgroundColor: bgColor}">
<!-- 关闭app -->
<u-icon v-if="!isForceUpdata" class="close" name="close" :size="closeIconSize"
:color="closeIconColor" @click="closeUpdate"></u-icon>
<!-- 版本提示 -->
<view class="version" :style="{color: versionColor}">v{{version}}</view>
<!-- 背景 -->
<image class="backgroundImg" width="100%" height="100%" src="./img/appUploadAlertBoxBg.png"></image>
<!-- 关闭app type="closeempty" size="32"
color="#ff0000"-->
<view v-if="!isForceUpdata" class="close" @click="closeUpdate">暂不更新</view>
<!-- 版本提示 -->
<view class="version" :style="{color: versionColor}">v{{version}}</view>
<!-- 背景 -->
<image class="backgroundImg" width="100%" height="100%" src="./img/appUploadAlertBoxBg.png"></image>
<!-- 更新详细信息 -->
<view class="info center">
<text class="title" :style="{color: titleColor}">{{title}}</text>
......@@ -58,7 +58,7 @@
</view> -->
</view>
</view>
</u-popup>
</uni-popup>
</view>
</template>
......@@ -229,7 +229,8 @@
// 检查版本 需要更新时才会触发回调
checkVersion().then((res) => {
// 非静默更新时触发
if (!res.is_silently) {
if (!res.is_silently) {
// 读取下载好的包的缓存
const appDownLoadTempFilePath = uni.getStorageSync('appDownLoadTempFilePath');
// 更新的版本号
......@@ -372,8 +373,15 @@
uni.setStorageSync('userLastRefuseTime', this.userLastRefuseTime);
},
// 关闭更新框
closeUpdate() {
if (this.downloading) {
closeUpdate() {
uni.setStorage({
key: "m-agreement",
data: 'true',
success: function () {
}
})
if (this.downloading) {
console.log(1,'9')
uni.showModal({
title: '是否取消下载?',
cancelText: '否',
......@@ -388,7 +396,8 @@
}
}
});
} else {
} else {
console.log(2,'9')
this.$refs.popup.close();
// 如果用户短期内不更新
if (this.userNotRemind) {
......@@ -429,7 +438,9 @@
width: 100%;
}
.content_popup {
.content_popup {
width: 640rpx;
height: 690rpx;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
......@@ -437,12 +448,18 @@
background-color: #FFF;
padding-bottom: 40rpx;
position: relative;
.close {
position: absolute;
position: absolute ;
right: 15rpx;
top: 15rpx;
z-index: 3;
z-index: 10000001;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: right;
font-style: normal;
}
.version {
......
......@@ -6,7 +6,7 @@
* 3. 使用上步取出的版本包的版本号 和传参 appVersion、wgtVersion 来检测是否有更新,必须同时大于这两项,否则返回暂无更新
* 4. 如果库中 wgt包 版本大于传参 appVersion,但是不满足 min_uni_version < appVersion,则不会使用wgt更新,会接着判断库中 app包version 是否大于 appVersion
*/
// import { getAppVersion } from "@/api/message.js";
import { getAppVersion } from "@/api/api.js";
export default function checkVersion() {
......@@ -18,9 +18,11 @@ export default function checkVersion() {
// 获取本机版本号
let type;
platform === "android" ? (type = "ANDROID") : (type = "IOS");
getAppVersion(type).then((res) => {
if (res.data.success) {
let response = res.data.result;
getAppVersion(`/pawn/setting/other/appVersion/${type}`).then((res) => {
if (res.success==true) {
let response = res.result.data;
console.log(response,'appVersion')
let result = {};
result.versionCode = response.version;
result.versionName = response.versionName;
......
......@@ -34,8 +34,10 @@ export const compare = (v1 = '0', v2 = '0') => {
return result;
}
export default function silentlyAppUpdate() {
checkVersion().then(res => {
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
checkVersion().then(res => {
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
if (compare(res.versionName, wgtinfo.version) === 1) {
uni.redirectTo({
url: "/pages/app-update/index",
......
......@@ -72,6 +72,7 @@
</template>
<script>
import silentlyAppUpdate from '@/pages/app-update/js-sdk/silentlyAppUpdate'
export default {
data() {
return {
......@@ -109,13 +110,14 @@
},
onReady() {
const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo,'systemInfo')
if(systemInfo.platform === 'ios'){
const isAgree = uni.getStorageSync('m-agreement')
console.log(isAgree,'isAgree1')
if (!isAgree) {
console.log(isAgree,'isAgree')
this.Go('uni:/pages/agreement/index')
}else{
// silentlyAppUpdate()
}
}
},
......
......@@ -171,8 +171,12 @@
const { deviceId}=userInfo
uni.setStorageSync('deviceId',deviceId)
}
uni.setStorageSync('mobileCall',self.mobile)
uni.setStorageSync('token',token)
self.loginNocheck()
// self.loginNocheck()
uni.navigateBack({
delta: 1
})
}).catch(err=>{
console.log(err,'请求出错')
})
......
# APP版本更新、强制更新、漂亮的更新界面、IOS更新(跳转IOS store)、wgt更新
### QQ交流群(学习干货多多) 607391225
![QQ交流群](http://qn.kemean.cn//upload/202004/14/15868301778472k7oubi6.png)
# [点击跳转-插件示例](https://ext.dcloud.net.cn/plugin?id=2009)
# [点击跳转-5年的web前端开源的uni-app快速开发模板-下载看文档](https://ext.dcloud.net.cn/plugin?id=2009)
### 常见问题
1.安卓apk下载完成后没有更新APP?
答:问题是因为没有添加APP安装应用的权限,解决方法在`manifest.json`文件里面`APP模块权限配置``Android打包权限配置`勾选以下权限
```
<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/>
<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/>
```
若还有问题请看[安装apk无法执行的解决方案](https://ask.dcloud.net.cn/article/35703 "安装apk无法执行的解决方案")
2.APP更新后版本号没变,还是之前的版本号?
答:可能是更新的安装包没有升级版本号,`manifest.json`文件里面基本设置`应用版本号``应用版本名称`需要升高
3.APP更新后没有覆盖之前的APP?
答:可能是更新的安装包`包名`和APP的`包名`不一样
### 第一步配置APP更新接口
`APPUpdate.js`里面`getServerNo`函数方法配置更新接口
```
let httpData = {
version:version
};
if (platform == "android") {
httpData.type = 1101;
} else {
httpData.type = 1102;
}
/* 接口入参说明
* version: 应用当前版本号(已自动获取)
* type:平台(1101是安卓,1102是IOS)
*/
// 可以用自己项目的请求方法
$http.get("api/kemean/aid/app_version", httpData).then(res => {
/*接口出参说明 (res数据说明)
* | 参数名称 | 一定返回 | 类型 | 描述
* | -------------|--------- | --------- | ------------- |
* | versionCode | y | int | 版本号 |
* | versionName | y | String | 版本名称 |
* | versionInfo | y | String | 版本信息 \n 换行(例如:1.修改了bug1 \n 2.修改了bug2 \n 3.修改了bug3) |
* | forceUpdate | y | boolean | 是否强制更新 |
* | downloadUrl | y | String | 版本下载链接 `IOS安装包更新请放跳转store应用商店链接,安卓apk和wgt文件放文件下载链接` |
*/
// 只要callback上面的数据就ok(返回数据就表示接口允许更新)
// 示例返回数据
callback && callback({
versionCode: 101,
versionName: "1.0.1",
versionInfo: "1.修改了bug1 \n 2.修改了bug2 \n 3.修改了bug3",
forceUpdate: false,
downloadUrl: "http://www.xxx.com/download/123",
});
});
```
### 第二步 使用方法
```
// App.vue页面
// #ifdef APP-PLUS
import APPUpdate from "@/plugins/APPUpdate";
// #endif
onLaunch: function(e) {
// #ifdef APP-PLUS
APPUpdate();
// #endif
}
```
### 第三步 添加APP安装应用的权限
`manifest.json`文件里面`APP模块权限配置``Android打包权限配置`勾选以下权限
```
<uses-permission android:name=\"android.permission.INSTALL_PACKAGES\"/>
<uses-permission android:name=\"android.permission.REQUEST_INSTALL_PACKAGES\"/>
```
### 修改弹窗的主题色或弹窗图标
`APPUpdate.js`里面上面`$mainColor`常量中定义主题颜色,`$iconUrl`常量中定义图标地址
### 检查APP是否有新版本(一般在设置页面使用)
```
// #ifdef APP-PLUS
import APPUpdate, { getCurrentNo } from "@/plugins/APPUpdate";
// #endif
export default {
data() {
return {
version: "" // 版本号
};
},
//第一次加载
onLoad(e) {
// #ifdef APP-PLUS
getCurrentNo(res => {
// 进页面获取当前APP版本号(用于页面显示)
this.version = res.version;
});
// #endif
},
//方法
methods: {
// 检查APP是否有新版本
onAPPUpdate() {
// true 没有新版本的时候有提示,默认:false
APPUpdate(true);
}
}
}
```
\ No newline at end of file
This diff is collapsed.
## 1.9.2(2024-09-21)
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
## 1.9.1(2024-04-02)
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
## 1.9.0(2024-03-28)
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
## 1.8.9(2024-03-20)
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
## 1.8.8(2024-02-20)
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
## 1.8.7(2024-02-02)
- 新增 uni-popup-dialog 新增属性focus:input模式下,是否自动自动聚焦
## 1.8.6(2024-01-30)
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
## 1.8.5(2024-01-26)
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
## 1.8.4(2023-11-15)
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
## 1.8.3(2023-04-17)
- 修复 uni-popup 重复打开时的 bug
## 1.8.2(2023-02-02)
- uni-popup-dialog 组件新增 inputType 属性
## 1.8.1(2022-12-01)
- 修复 nvue 下 v-show 报错
## 1.8.0(2022-11-29)
- 优化 主题样式
## 1.7.9(2022-04-02)
- 修复 弹出层内部无法滚动的bug
## 1.7.8(2022-03-28)
- 修复 小程序中高度错误的bug
## 1.7.7(2022-03-17)
- 修复 快速调用open出现问题的Bug
## 1.7.6(2022-02-14)
- 修复 safeArea 属性不能设置为false的bug
## 1.7.5(2022-01-19)
- 修复 isMaskClick 失效的bug
## 1.7.4(2022-01-19)
- 新增 cancelText \ confirmText 属性 ,可自定义文本
- 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题
## 1.7.3(2022-01-13)
- 修复 设置 safeArea 属性不生效的bug
## 1.7.2(2021-11-26)
- 优化 组件示例
## 1.7.1(2021-11-26)
- 修复 vuedoc 文字错误
## 1.7.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
## 1.6.2(2021-08-24)
- 新增 支持国际化
## 1.6.1(2021-07-30)
- 优化 vue3下事件警告的问题
## 1.6.0(2021-07-13)
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.0(2021-06-23)
- 新增 mask-click 遮罩层点击事件
## 1.4.5(2021-06-22)
- 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
## 1.4.4(2021-06-18)
- 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
## 1.4.3(2021-06-08)
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容,再点击遮罩无法关闭的Bug
## 1.4.2(2021-05-12)
- 新增 组件示例地址
## 1.4.1(2021-04-29)
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题
## 1.4.0 (2021-04-29)
- 新增 type 属性的 left\right 值,支持左右弹出
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色
- 新增 safeArea 属性,是否适配底部安全区
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
- 修复 App 端弹出等待的Bug
- 优化 提升低配设备性能,优化动画卡顿问题
- 优化 更简单的组件自定义方式
## 1.2.9(2021-02-05)
- 优化 组件引用关系,通过uni_modules引用组件
## 1.2.8(2021-02-05)
- 调整为uni_modules目录规范
## 1.2.7(2021-02-05)
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
// #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
<template>
<view class="uni-popup-dialog">
<view class="uni-dialog-title">
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
</view>
<view v-if="mode === 'base'" class="uni-dialog-content">
<slot>
<text class="uni-dialog-content-text">{{content}}</text>
</slot>
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
:placeholder="placeholderText" :focus="focus">
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const {
t
} = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {Boolean} focus input模式下是否自动聚焦,默认为true
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
* @value info 消息
* @value error 错误
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
export default {
name: "uniPopupDialog",
mixins: [popup],
emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: {
inputType: {
type: String,
default: 'text'
},
showClose: {
type: Boolean,
default: true
},
// #ifdef VUE2
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [Number, String],
default: ''
},
// #endif
placeholder: {
type: [String, Number],
default: ''
},
type: {
type: String,
default: 'error'
},
mode: {
type: String,
default: 'base'
},
title: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
},
cancelText: {
type: String,
default: ''
},
confirmText: {
type: String,
default: ''
},
maxlength: {
type: Number,
default: -1,
},
focus: {
type: Boolean,
default: true,
}
},
data() {
return {
dialogType: 'error',
val: ""
}
},
computed: {
okText() {
return this.confirmText || t("uni-popup.ok")
},
closeText() {
return this.cancelText || t("uni-popup.cancel")
},
placeholderText() {
return this.placeholder || t("uni-popup.placeholder")
},
titleText() {
return this.title || t("uni-popup.title")
}
},
watch: {
type(val) {
this.dialogType = val
},
mode(val) {
if (val === 'input') {
this.dialogType = 'info'
}
},
value(val) {
if (this.maxlength != -1 && this.mode === 'input') {
this.val = val.slice(0, this.maxlength);
} else {
this.val = val
}
},
val(val) {
// #ifdef VUE2
// TODO 兼容 vue2
this.$emit('input', val);
// #endif
// #ifdef VUE3
// TODO 兼容 vue3
this.$emit('update:modelValue', val);
// #endif
}
},
created() {
// 对话框遮罩不可点击
this.popup.disableMask()
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value;
// #ifdef VUE3
this.val = this.modelValue;
// #endif
} else {
this.dialogType = this.type
}
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input') {
this.$emit('confirm', this.val)
} else {
this.$emit('confirm')
}
if (this.beforeClose) return
this.popup.close()
},
/**
* 点击取消按钮
*/
closeDialog() {
this.$emit('close')
if (this.beforeClose) return
this.popup.close()
},
close() {
this.popup.close()
}
}
}
</script>
<style lang="scss">
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
background-color: #fff;
}
.uni-dialog-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 25px;
}
.uni-dialog-title-text {
font-size: 16px;
font-weight: 500;
}
.uni-dialog-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
.uni-dialog-content-text {
font-size: 14px;
color: #6C6C6C;
}
.uni-dialog-button-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
border-top-color: #f5f5f5;
border-top-style: solid;
border-top-width: 1px;
}
.uni-dialog-button {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
height: 45px;
}
.uni-border-left {
border-left-color: #f0f0f0;
border-left-style: solid;
border-left-width: 1px;
}
.uni-dialog-button-text {
font-size: 16px;
color: #333;
}
.uni-button-color {
color: #007aff;
}
.uni-dialog-input {
flex: 1;
font-size: 14px;
border: 1px #eee solid;
height: 40px;
padding: 0 10px;
border-radius: 5px;
color: #555;
}
.uni-popup__success {
color: #4cd964;
}
.uni-popup__warn {
color: #f0ad4e;
}
.uni-popup__error {
color: #dd524d;
}
.uni-popup__info {
color: #909399;
}
</style>
<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>
<template>
<view class="uni-popup-share">
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
<view class="uni-share-content">
<view class="uni-share-content-box">
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
<text class="uni-share-text">{{item.text}}</text>
</view>
</view>
</view>
<view class="uni-share-button-box">
<button class="uni-share-button" @click="close">{{cancelText}}</button>
</view>
</view>
</template>
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
export default {
name: 'UniPopupShare',
mixins:[popup],
emits:['select'],
props: {
title: {
type: String,
default: ''
},
beforeClose: {
type: Boolean,
default: false
}
},
data() {
return {
bottomData: [{
text: '微信',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'ali'
},
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
// name: 'copy'
// },
// {
// text: '其他',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
// name: 'more'
// }
]
}
},
created() {},
computed: {
cancelText() {
return t("uni-popup.cancel")
},
shareTitleText() {
return this.title || t("uni-popup.shareTitle")
}
},
methods: {
/**
* 选择内容
*/
select(item, index) {
this.$emit('select', {
item,
index
})
this.close()
},
/**
* 关闭窗口
*/
close() {
if(this.beforeClose) return
this.popup.close()
}
}
}
</script>
<style lang="scss" >
.uni-popup-share {
background-color: #fff;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.uni-share-title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
}
.uni-share-title-text {
font-size: 14px;
color: #666;
}
.uni-share-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: center;
padding-top: 10px;
}
.uni-share-content-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
width: 360px;
}
.uni-share-content-item {
width: 90px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
justify-content: center;
padding: 10px 0;
align-items: center;
}
.uni-share-content-item:active {
background-color: #f5f5f5;
}
.uni-share-image {
width: 30px;
height: 30px;
}
.uni-share-text {
margin-top: 10px;
font-size: 14px;
color: #3B4144;
}
.uni-share-button-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
padding: 10px 15px;
}
.uni-share-button {
flex: 1;
border-radius: 50px;
color: #666;
font-size: 16px;
}
.uni-share-button::after {
border-radius: 50px;
}
</style>
{
"uni-popup.cancel": "cancel",
"uni-popup.ok": "ok",
"uni-popup.placeholder": "pleace enter",
"uni-popup.title": "Hint",
"uni-popup.shareTitle": "Share to"
}
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
}
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}
// #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
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;
},
}
}
<template>
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
<view @click.stop>
<slot></slot>
</view>
</view>
</template>
<script>
type CloseCallBack = ()=> void;
let closeCallBack:CloseCallBack = () :void => {};
export default {
emits:["close","clickMask"],
data() {
return {
isShow:false,
isOpen:false
}
},
props: {
maskClick: {
type: Boolean,
default: true
},
},
watch: {
// 设置show = true 时,如果没有 open 需要设置为 open
isShow:{
handler(isShow) {
// console.log("isShow",isShow)
if(isShow && this.isOpen == false){
this.isOpen = true
}
},
immediate:true
},
// 设置isOpen = true 时,如果没有 isShow 需要设置为 isShow
isOpen:{
handler(isOpen) {
// console.log("isOpen",isOpen)
if(isOpen && this.isShow == false){
this.isShow = true
}
},
immediate:true
}
},
methods:{
open(){
// ...funs : CloseCallBack[]
// if(funs.length > 0){
// closeCallBack = funs[0]
// }
this.isOpen = true;
},
clickMask(){
if(this.maskClick == true){
this.$emit('clickMask')
this.close()
}
},
close(): void{
this.isOpen = false;
this.$emit('close')
closeCallBack()
},
hiden(){
this.isShow = false
},
show(){
this.isShow = true
}
}
}
</script>
<style>
.popup-root {
position: fixed;
top: 0;
left: 0;
width: 750rpx;
height: 100%;
flex: 1;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
z-index: 99;
}
</style>
\ No newline at end of file
This diff is collapsed.
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.9.2",
"description": " Popup 组件,提供常用的弹层",
"keywords": [
"uni-ui",
"弹出层",
"弹窗",
"popup",
"弹框"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
"uni-scss",
"uni-transition"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
## Popup 弹出层
> **组件名:uni-popup**
> 代码块: `uPopup`
> 关联组件:`uni-transition`
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
## 1.0.3(2022-01-21)
- 优化 组件示例
## 1.0.2(2021-11-22)
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1(2021-11-22)
- 修复 vue3中scss语法兼容问题
## 1.0.0(2021-11-18)
- init
@import './styles/index.scss';
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
`uni-sass``uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
## 1.3.3(2024-04-23)
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.2(2023-05-04)
- 修复 NVUE 平台报错的问题
## 1.3.1(2021-11-23)
- 修复 init 方法初始化问题
## 1.3.0(2021-11-19)
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
## 1.2.1(2021-09-27)
- 修复 init 方法不生效的 Bug
## 1.2.0(2021-07-30)
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1(2021-05-12)
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.0(2021-04-22)
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑,使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.2(2021-02-05)
- 调整为 uni_modules 目录规范
// 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)
}
<template>
<!-- #ifndef APP-NVUE -->
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
},
onceRender:{
type:Boolean,
default:false
},
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 0 : 1,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>
{
"id": "uni-transition",
"displayName": "uni-transition 过渡动画",
"version": "1.3.3",
"description": "元素的简单过渡动画",
"keywords": [
"uni-ui",
"uniui",
"动画",
"过渡",
"过渡动画"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
## Transition 过渡动画
> **组件名:uni-transition**
> 代码块: `uTransition`
元素过渡动画
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!doctype html><html data-scale="true" lang="en"><head><meta charset="utf-8"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-title" content="盈盈有钱"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><meta content="email=no" name="format-detection"/><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta name="x5-page-mode" content="app"><meta name="format-detection" content="telephone=yes"/><script src="https://sj.jqtianxia.com/public/AppBridge.js"></script><script src="https://bank.jqtianxia.com/public/libs/flexible.js"></script><meta name="theme-color" content="#000000"><link rel="manifest" href="http://backtest.jqtianxia.com/1.5.2/manifest.json"><link rel="stylesheet" href="https://sj.jqtianxia.com/public/swiper.min.css"><script src="https://jic.talkingdata.com/app/h5/v1?appid=1EF9D61C606E4AF5B80D65ABBEDF4B5F"></script><script>window.Promise||document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"><\/script>'),window.win=null</script><link href="http://backtest.jqtianxia.com/1.5.2/static/css/25.3e0df96d.chunk.css" rel="stylesheet"><link href="http://backtest.jqtianxia.com/1.5.2/static/css/main.428bac2a.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(u){function e(e){for(var t,r,n=e[0],a=e[1],o=e[2],c=0,f=[];c<n.length;c++)r=n[c],l[r]&&f.push(l[r][0]),l[r]=0;for(t in a)Object.prototype.hasOwnProperty.call(a,t)&&(u[t]=a[t]);for(b&&b(e);f.length;)f.shift()();return d.push.apply(d,o||[]),i()}function i(){for(var e,t=0;t<d.length;t++){for(var r=d[t],n=!0,a=1;a<r.length;a++){var o=r[a];0!==l[o]&&(n=!1)}n&&(d.splice(t--,1),e=s(s.s=r[0]))}return e}var r={},f={28:0},l={28:0},d=[];function s(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return u[e].call(t.exports,t,t.exports,s),t.l=!0,t.exports}s.e=function(d){var e=[];f[d]?e.push(f[d]):0!==f[d]&&{2:1,4:1,5:1,6:1,7:1,8:1,9:1,10:1,11:1,12:1,13:1,14:1,15:1,16:1,17:1,18:1,19:1,20:1,21:1,22:1,23:1,24:1,27:1}[d]&&e.push(f[d]=new Promise(function(e,n){for(var t="static/css/"+({}[d]||d)+"."+{0:"31d6cfe0",1:"31d6cfe0",2:"0a2222b5",4:"237f0abd",5:"51b9f549",6:"e75eb872",7:"c0e557b7",8:"52423a9c",9:"0a43a441",10:"cd5bdacf",11:"1f0cb8ed",12:"68abaa09",13:"90b02d2b",14:"0b128aba",15:"7c32e690",16:"71885239",17:"4e8b3121",18:"868fcb85",19:"c1c49245",20:"e2942e1f",21:"e1df0114",22:"6d59483e",23:"efc116b9",24:"4e6edbf3",26:"31d6cfe0",27:"26900eb2"}[d]+".chunk.css",a=s.p+t,r=document.getElementsByTagName("link"),o=0;o<r.length;o++){var c=(u=r[o]).getAttribute("data-href")||u.getAttribute("href");if("stylesheet"===u.rel&&(c===t||c===a))return e()}var f=document.getElementsByTagName("style");for(o=0;o<f.length;o++){var u;if((c=(u=f[o]).getAttribute("data-href"))===t||c===a)return e()}var i=document.createElement("link");i.rel="stylesheet",i.type="text/css",i.onload=e,i.onerror=function(e){var t=e&&e.target&&e.target.src||a,r=new Error("Loading CSS chunk "+d+" failed.\n("+t+")");r.request=t,n(r)},i.href=a,document.getElementsByTagName("head")[0].appendChild(i)}).then(function(){f[d]=0}));var r=l[d];if(0!==r)if(r)e.push(r[2]);else{var t=new Promise(function(e,t){r=l[d]=[e,t]});e.push(r[2]=t);var n,a=document.getElementsByTagName("head")[0],o=document.createElement("script");o.charset="utf-8",o.timeout=120,s.nc&&o.setAttribute("nonce",s.nc),o.src=s.p+"static/js/"+({}[d]||d)+"."+{0:"f5176b69",1:"c3c22efa",2:"c391a915",4:"42dd17df",5:"9b9b4d1e",6:"5d0ec2ff",7:"6faf0d00",8:"5a4b2252",9:"163c12bc",10:"322bf751",11:"5c493e0a",12:"dfe07b56",13:"b0f2b8a1",14:"b44c743e",15:"068e71dd",16:"a7d80c20",17:"f3d04a46",18:"488a75b1",19:"c4286287",20:"54437612",21:"63b9075f",22:"3994a400",23:"84971afc",24:"3d03a0e3",26:"22535f5f",27:"c7c75581"}[d]+".chunk.js",n=function(e){o.onerror=o.onload=null,clearTimeout(c);var t=l[d];if(0!==t){if(t){var r=e&&("load"===e.type?"missing":e.type),n=e&&e.target&&e.target.src,a=new Error("Loading chunk "+d+" failed.\n("+r+": "+n+")");a.type=r,a.request=n,t[1](a)}l[d]=void 0}};var c=setTimeout(function(){n({type:"timeout",target:o})},12e4);o.onerror=o.onload=n,a.appendChild(o)}return Promise.all(e)},s.m=u,s.c=r,s.d=function(e,t,r){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(s.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(r,n,function(e){return t[e]}.bind(null,n));return r},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="http://backtest.jqtianxia.com/1.5.2/",s.oe=function(e){throw console.error(e),e};var t=window.webpackJsonp=window.webpackJsonp||[],n=t.push.bind(t);t.push=e,t=t.slice();for(var a=0;a<t.length;a++)e(t[a]);var b=n;i()}([])</script><script src="http://backtest.jqtianxia.com/1.5.2/static/js/25.7d054e2f.chunk.js"></script><script src="http://backtest.jqtianxia.com/1.5.2/static/js/main.ea265ee2.chunk.js"></script></body></html>
\ No newline at end of file
import Vue from "vue";
// import { switchTabbar } from '@/api/other'
export function switchShowTabbar() {
const token=uni.getStorageSync('token')
if (!token) {
console.log(token,'token')
uni.setTabBarItem({
index: 1,
visible: false
})
} else {
console.log(token,'token2')
switchTabbar().then(res => {
if (res.data.code === 200 && res.data.result) {
try {
uni.setTabBarItem({
index: 1,
text: '贷款',
visible: true,
})
} catch (error) {
console.log(error);
}
} else {
uni.setTabBarItem({
index: 1,
visible: false
})
}
})
}
}
......@@ -12,7 +12,7 @@ const request=async(url,type,data)=>{
rd = JSON.stringify(common)
}
console.log(baseUrl,'rd')
// console.log(baseUrl,'rd')
return new Promise((resolve,reject)=>{
const token=uni.getStorageSync('token')
const tokenFinance=uni.getStorageSync('tokenFinance')
......
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 to comment