NaEasy UI

Appearance

Uniapp封装 API ​

本文档介绍了对Uniapp原生API的封装，提供更便捷的使用方式。

DialogAction ​

对话框相关的封装，提供toast、alert、confirm三种对话框的便捷调用方式。

导入 ​

js
import { toast, alert, confirm } from '@/components/utils/DialogAction'

作为Vue插件使用 ​

js
import DialogAction from '@/components/utils/DialogAction'

app.use(DialogAction)

// 在组件中使用
// this.$toast('提示信息')
// this.$alert({ title: '标题', content: '内容' })
// const result = await this.$confirm({ title: '确认', content: '确定要执行此操作吗？' })

方法 ​

toast(content: string) ​

显示一个文本提示框。

参数 ​
参数说明类型必填默认值
content要显示的提示内容string是-
返回值 ​

无。

示例 ​
js
// 显示简单提示
 toast('操作成功');

// 显示数字类型的提示
 toast(123);

alert(option: object) ​

显示一个确认对话框。

参数 ​
参数说明类型必填默认值
option.title对话框的标题string否-
option.content对话框的内容string否-
返回值 ​

无。

示例 ​
js
// 只显示标题
 alert({ title: '提示' });

// 显示标题和内容
 alert({ 
   title: '系统提示', 
   content: '请完成个人资料填写' 
 });

confirm(option: object) => Promise<boolean> ​

显示一个确认对话框，支持用户选择确定或取消。

参数 ​
参数说明类型必填默认值
option.title对话框的标题string否''
option.content对话框的内容string否''
option.cancelText取消按钮的文本string否'取消'
option.confirmText确认按钮的文本string否'确定'
返回值 ​

返回一个 Promise 对象，当用户点击确定按钮时，Promise 的结果为 true，否则为 false。

示例 ​
js
// 基本使用
async function handleDelete() {
  const confirmed = await confirm({
    title: '删除确认',
    content: '确定要删除这条记录吗？',
    cancelText: '再想想',
    confirmText: '删除'
  });
  
  if (confirmed) {
    // 执行删除操作
    console.log('用户确认删除');
  } else {
    console.log('用户取消删除');
  }
}

// 使用 Promise 链式调用
confirm({
  title: '退出确认',
  content: '确定要退出登录吗？'
}).then((confirmed) => {
  if (confirmed) {
    // 执行退出登录
    logout();
  }
}).catch((error) => {
  console.error('对话框显示失败:', error);
});

全局属性 ​

当作为Vue插件使用时，可以通过以下全局属性访问这些方法：

属性对应方法说明
$toasttoast显示文本提示框
$alertalert显示确认对话框
$confirmconfirm显示确认对话框（带Promise返回）

在Vue组件中使用示例 ​

vue
<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

function showToast() {
  proxy.$toast('操作成功');
}

async function showConfirm() {
  const confirmed = await proxy.$confirm({
    title: '确认操作',
    content: '确定要继续吗？'
  });
  
  if (confirmed) {
    // 执行后续操作
  }
}
</script>

<template>
  <button @click="showToast">显示提示</button>
  <button @click="showConfirm">显示确认框</button>
</template>

PageAction ​

页面导航相关函数封装，提供便捷的页面跳转和数据传递功能。

导入 ​

js
import { back, backReturnData, backAndCallOnPageBack, navTo, callPrevOnPageBack, getCurrentPageUrl } from '@/components/utils/PageAction'

作为Vue插件使用 ​

js
import PageAction from '@/components/utils/PageAction'

app.use(PageAction)

// 在组件中使用
// this.$p.back()
// this.$p.navTo('/pages/detail/index', { id: 123 })
// this.$p.backAndCallOnPageBack('refresh', { updated: true })

方法 ​

back() ​

页面跳转: 后退至上一个页面。

参数 ​

无。

返回值 ​

无。

示例 ​
js
// 简单返回上一页
back();

// 按钮点击事件中使用
function handleBack() {
  back();
}

backReturnData(data: Record<string, unknown>) ​

页面跳转: 后退并返回数据至上一个页面。

参数 ​
参数说明类型必填默认值
data要返回的数据对象Record<string, unknown>是-
返回值 ​

无。

示例 ​
js
// 返回上一页并传递数据
backReturnData({
  selectedId: 1001,
  selectedName: '示例项目',
  isConfirmed: true
});

页面跳转: 跳转到指定页面。

参数 ​
参数说明类型必填默认值
url页面路径string是-
data要传递的数据，可选Record<string, unknown>否{}
返回值 ​

无。

示例 ​
js
// 简单页面跳转
navTo('/pages/detail/index');

// 带参数的页面跳转
navTo('/pages/detail/index', {
  id: 123,
  type: 'product',
  title: '商品详情'
});

// 动态参数跳转
function goToDetail(itemId) {
  navTo('/pages/detail/index', { id: itemId });
}

callPrevOnPageBack(name: string, data: Record<string, unknown>) ​

页面数据传递: 调用上一个页面的 onPageBack 方法。

参数 ​
参数说明类型必填默认值
name方法名标识string是-
data要传递的数据Record<string, unknown>是-
返回值 ​

无。

示例 ​
js
// 调用上一页的刷新方法
callPrevOnPageBack('refresh', {
  updated: true,
  timestamp: Date.now()
});

// 通知上一页数据已更新
callPrevOnPageBack('dataUpdated', {
  list: updatedList,
  total: totalCount
});

backAndCallOnPageBack(name: string, data: Record<string, unknown>) ​

页面跳转: 调用上一个页面的 onPageBack 方法并返回至上一个页面。

参数 ​
参数说明类型必填默认值
name方法名标识string是-
data要传递的数据Record<string, unknown>是-
返回值 ​

无。

示例 ​
js
// 返回上一页并触发刷新操作
backAndCallOnPageBack('refreshList', {
  filter: currentFilter,
  page: 1
});

// 选择完成后返回
function onSelectComplete(selectedItems) {
  backAndCallOnPageBack('selectionComplete', {
    items: selectedItems,
    count: selectedItems.length
  });
}

getCurrentPageUrl() => string | undefined ​

获取当前页面的路径。

参数 ​

无。

返回值 ​

返回当前页面的路径字符串，如果获取失败则返回undefined。

示例 ​
js
// 获取当前页面路径
const currentPath = getCurrentPageUrl();
console.log('当前页面:', currentPath);

// 根据当前页面路径执行不同逻辑
function handleAction() {
  const path = getCurrentPageUrl();
  if (path === '/pages/index/index') {
    // 首页逻辑
  } else if (path?.includes('/pages/detail/')) {
    // 详情页逻辑
  }
}

全局属性 ​

当作为Vue插件使用时，可以通过 $p 对象访问这些方法：

属性对应方法说明
$p.backback后退至上一个页面
$p.backReturnDatabackReturnData后退并返回数据
$p.navTonavTo跳转到指定页面
$p.callPrevOnPageBackcallPrevOnPageBack调用上一页的onPageBack方法
$p.backAndCallOnPageBackbackAndCallOnPageBack调用onPageBack并返回

在Vue组件中使用示例 ​

vue
<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

// 返回上一页
function handleBack() {
  proxy.$p.back();
}

// 跳转到详情页
function goToDetail(itemId) {
  proxy.$p.navTo('/pages/detail/index', { id: itemId });
}

// 返回并传递数据
function submitAndBack() {
  proxy.$p.backAndCallOnPageBack('formSubmitted', {
    formData: currentForm,
    success: true
  });
}
</script>

<template>
  <button @click="handleBack">返回</button>
  <button @click="goToDetail('1001')">查看详情</button>
  <button @click="submitAndBack">提交并返回</button>
</template>

上一页接收数据示例 ​

vue
<script setup>
// 在被返回的页面中定义onPageBack方法
const onPageBack = (name, data) => {
  switch (name) {
    case 'refreshList':
      // 刷新列表数据
      console.log('刷新参数:', data);
      loadData(data.filter, data.page);
      break;
    case 'selectionComplete':
      // 处理选择结果
      console.log('已选择项目:', data.items);
      updateSelectedItems(data.items);
      break;
    case 'formSubmitted':
      // 处理表单提交结果
      if (data.success) {
        showSuccessMessage();
      }
      break;
  }
};

// 导出给PageAction调用
defineExpose({ onPageBack });
</script>