uni-app 全局悬浮框插件需求 可以记录时间

发布于 1周前 作者 caililin 来自 Uni-App

uni-app 全局悬浮框插件需求 可以记录时间

Harmonyos Next教程
8 回复

可以做，专业的


测试

插件市场不是有吗

贴个地址

有开发好的全局悬浮窗，支持定时，联系qq：16792999

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解

app全局悬浮框可以记录时间

在uni-app中，实现一个全局悬浮框插件并记录时间，可以通过以下步骤完成。这里我们假设你已经熟悉uni-app的基本开发流程，并且已经安装了uni-app的CLI工具。

1. 创建全局悬浮框组件

首先，我们创建一个全局悬浮框组件GlobalToast.vue，用于显示悬浮框并记录时间。

<template>
  <view v-if="visible" class="toast-container">
    <view class="toast-message">{{ message }}</view>
    <view class="toast-time">{{ currentTime }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
      startTime: null,
      currentTime: ''
    };
  },
  methods: {
    showToast(msg) {
      this.message = msg;
      this.startTime = new Date();
      this.updateTime();
      this.visible = true;
      
      // 自动隐藏悬浮框，例如3秒后
      setTimeout(() => {
        this.hideToast();
      }, 3000);
    },
    hideToast() {
      this.visible = false;
    },
    updateTime() {
      this.currentTime = this.formatTime(new Date() - this.startTime);
      if (this.visible) {
        setTimeout(() => this.updateTime(), 1000);
      }
    },
    formatTime(ms) {
      const totalSeconds = Math.floor(ms / 1000);
      const minutes = Math.floor(totalSeconds / 60);
      const seconds = totalSeconds % 60;
      return `${minutes}m ${seconds}s`;
    }
  }
};
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 9999;
}
.toast-message {
  font-size: 16px;
  margin-bottom: 5px;
}
.toast-time {
  font-size: 14px;
  color: #ccc;
}
</style>

2. 在main.js中注册全局组件

接下来，在main.js中注册这个全局组件，使得它可以在任何页面中使用。

import Vue from 'vue';
import App from './App';
import GlobalToast from './components/GlobalToast.vue';

Vue.config.productionTip = false;

Vue.component('GlobalToast', GlobalToast);

App.mpType = 'app';

const app = new Vue({
  ...App
});
app.$mount();

3. 在页面中使用全局悬浮框

现在，你可以在任何页面中通过this.$refs.toast.showToast('Your message')来显示悬浮框并记录时间。

<template>
  <view>
    <button @click="showGlobalToast">Show Toast</button>
    <GlobalToast ref="toast" />
  </view>
</template>

<script>
export default {
  methods: {
    showGlobalToast() {
      this.$refs.toast.showToast('This is a global toast!');
    }
  }
};
</script>

这样，你就实现了一个全局悬浮框插件，并且能够记录显示时间。

回到顶部