【鸿蒙征文】从现在起，你的非原生弹窗“组件”们(自定义Toast、Modal等)只需要配置一次！

介绍

👋 hello, 您那要是早上，那祝你早安。要是下午，那祝你午安。晚上看？那还是别看了，点个赞，明天再看

我是 skiyee 是本篇的作者，常活跃在 uni-app 生态领域

随着 Harmony 不断增强以及大力推广，更多的应用场景进入我们的眼帘

我就在想，要是 uni-app 也适配了 Harmony，那不就省事了，一键多端共同开发，不再需要花费更多的学习成本

您猜怎么着，uni-app 还真适配 Harmony Next 了，那么我们就可以结合 uni-app 原本的生态来开发了！

痛点

很多朋友在编写弹窗时，觉得原生的鸿蒙弹窗不好看，就想自定义一个美美滴。但发现，uni-app 中居然没有地方能够一键进行设置，全局就可以调用的

朋友们所期望的应该是像体验原生一般，如 uni.showToast({...}) 这种，在任何地方都能调起的

为了解决这个痛点，我结合 uni-app 使用的底层构建工具 vite 开发了一个模拟根组件能力的组件！@uni-ku/root

开始

安装

在我们的 HBuilder 中，选择我们的项目打开命令行窗口，输入命令

npm install -D @uni-ku/root

配置

在 vite.config.js 中引入 @uni-ku/root

// vite.config.js  
import Uni from '@dcloudio/vite-plugin-uni'  
import UniKuRoot from '@uni-ku/root'  
import { defineConfig } from 'vite'  

export default defineConfig({  
  plugins: [  
    // 文档: https://github.com/uni-ku/root  
    UniKuRoot(),  
    Uni()  
  ]  
})

使用

创建关键 App.ku.vue 文件，并通过标签 <KuRootView /> 或 <ku-root-view /> 指定视图存放位置

<script setup>  
import { ref } from 'vue'  

const UniKuRoot = ref('Hello UniKu Root')  
</script>  

<template>  
  <div>{{ UniKuRoot }}</div>  
  <!-- 视图存放位置 -->  
  <KuRootView />  
</template>

封装

编写自定义的 Toast 组件

<!-- components/GlobalToast.vue -->  

<script setup>  
import { useToast } from '@/composables/useToast'  

const { globalToastState, hideToast } = useToast()  
</script>  

<template>  
  <div v-if="globalToastState" class="toast-wrapper" @click="hideToast">  
    <div class="toast-box">  
      welcome to use @uni-ku/root  
    </div>  
  </div>  
</template>  

<style scoped>  
.toast-wrapper{  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  background-color: rgba(0, 0, 0, 0.5);  
  display: flex;  
  align-items: center;  
  justify-content: center;  
}  

.toast-box{  
  background: white;  
  color: black;  
}  
</style>

实现 Toast 调起方法

// composables/useToast.js  

import { ref } from 'vue'  

const globalToastState = ref(false)  

export function useToast() {  
  function showToast() {  
    globalToastState.value = true  
  }  

  function hideToast() {  
    globalToastState.value = false  
  }  

  return {  
    globalToastState,  
    showToast,  
    hideToast,  
  }  
}

挂载至 App.ku.vue

<!-- App.ku.vue -->  

<script setup>  
import GlobalToast from '@/components/GlobalToast.vue'  
</script>  

<template>  
  <KuRootView />  
  <GlobalToast />  
</template>

视图内部触发 Toast 组件

<!-- pages/index(或者其他页面).vue -->  

<script setup lang="ts">  
import { useToast } from '@/composables/useToast'  

const { showToast } = useToast()  
</script>  

<template>  
  <view>  
    Hello UniKuRoot  
  </view>  
  <button @click="showToast">  
    视图内触发展示Toast  
  </button>  
</template>