Gauss

Appearance

API ​

useAppStore ​

获取 config/config.json 内配置项

json
{
    "baseUrl": "http://localhost:3000",
    "title": "Gauss Prime"
}
{
    "baseUrl": "http://localhost:3000",
    "title": "Gauss Prime"
}

使用

vue
<script setup>
import { useAppStore } from '@gauss/prime'

const { title, baseUrl } = useAppStore()
</script>
<script setup>
import { useAppStore } from '@gauss/prime'

const { title, baseUrl } = useAppStore()
</script>

useLogout ​

退出登录

vue
<template>
    <el-button @click="logout">退出</el-button>
</template>

<script setup>
import { useLogout } from '@gauss/prime'

const logout = useLogout()
</script>
<template>
    <el-button @click="logout">退出</el-button>
</template>

<script setup>
import { useLogout } from '@gauss/prime'

const logout = useLogout()
</script>

useMenuStore ​

菜单操作

setBadge(code, num) 设置菜单微标 ​

  • code：菜单编码
  • num: 微标数量
vue
<script setup>
import { useMenuStore } from '@gauss/prime'

const menuStore = useMenuStore()
menuStore.setBadge('bpmn', 3)
</script>
<script setup>
import { useMenuStore } from '@gauss/prime'

const menuStore = useMenuStore()
menuStore.setBadge('bpmn', 3)
</script>

checkPermission ​

检测按钮权限，同指令 v-auth 一致。

vue
<script setup>
import { checkPermission } from '@gauss/prime'

checkPermission('add')
</script>
<script setup>
import { checkPermission } from '@gauss/prime'

checkPermission('add')
</script>

closeCurrentTab ​

关闭当前标签页，接受一个参数，指定关闭当前标签页后的跳转路径，可选值。

vue
<script setup>
import { closeCurrentTab } from '@gauss/prime'

const close = () => {
    // 关闭当前标签页
    closeCurrentTab()

    // 关闭当前标签页后，并跳转至 /home
    closeCurrentTab('/home')
}
</script>
<script setup>
import { closeCurrentTab } from '@gauss/prime'

const close = () => {
    // 关闭当前标签页
    closeCurrentTab()

    // 关闭当前标签页后，并跳转至 /home
    closeCurrentTab('/home')
}
</script>

closeAllTabs ​

关闭所有标签页

vue
<script setup>
import { closeAllTabs } from '@gauss/prime'

const close = () => {
    // 关闭所有标签页
    closeAllTabs()
}
</script>
<script setup>
import { closeAllTabs } from '@gauss/prime'

const close = () => {
    // 关闭所有标签页
    closeAllTabs()
}
</script>

setCurrentTabTitle ​

设置当前标签页标题

vue
<script setup>
import { setCurrentTabTitle } from '@gauss/prime'

setCurrentTabTitle('标题')
</script>
<script setup>
import { setCurrentTabTitle } from '@gauss/prime'

setCurrentTabTitle('标题')
</script>

onBeforePageLeave ​

离开页面前的回调，用户可决定是否离开当前界面

假设需求用户离开 A 页面前，判断用户是否已填写完毕，未填写完毕通知用户是否需要离开当前界面。您可在 A 页面添加添加以下代码实现。

vue
<script setup>
import { ref } from 'vue'
import { onBeforePageLeave } from '@gauss/prime'
import { MessageBox } from 'element-plus'

const data = ref()

onBeforePageLeave(({ next }) => {
    if (data.value) {
        next()
        return
    }
    ElMessageBox.confirm('是否离开当前界面?', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
    })
        .then(() => {
            // 进入下一个界面
            next()
        })
        .catch(() => {
            // 保留当前界面
            next(false)
        })
})
</script>
<script setup>
import { ref } from 'vue'
import { onBeforePageLeave } from '@gauss/prime'
import { MessageBox } from 'element-plus'

const data = ref()

onBeforePageLeave(({ next }) => {
    if (data.value) {
        next()
        return
    }
    ElMessageBox.confirm('是否离开当前界面?', 'Warning', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
    })
        .then(() => {
            // 进入下一个界面
            next()
        })
        .catch(() => {
            // 保留当前界面
            next(false)
        })
})
</script>

Copyright © 2023-present Gauss