4dkankan-components/packages/components/basic/guide/index.vue

<template>
    <div v-if="mount && (msg || $slots.default)" ref="guideRef" class="guide" :class="{ 'floating-mode': floatClass }">
        <slot name="content" :show="shouldShow" />
        <UIFloating v-if="floatClass" :mount="mountEl" :refer="guideRef" dire="bottom" :class="`guide-floating ${props.floatClass}  ${type}`">
            <Bubble :show="shouldShow" class="guide-bubble" :type="type">
                <template v-if="msg">
                    <p class="default-msg">{{ msg }}</p>
                </template>
                <slot v-else />

                <span class="guide-close" @click="shouldShow = false">
                    <ui-icon type="close" ctrl />
                </span>
            </Bubble>
        </UIFloating>

        <Bubble v-else :show="shouldShow" class="guide-bubble" :type="type">
            <template v-if="msg">
                <p class="default-msg">{{ msg }}</p>
            </template>
            <slot v-else />

            <span class="guide-close" @click="shouldShow = false">
                <ui-icon type="close" ctrl />
            </span>
        </Bubble>
    </div>
    <slot v-else name="content" :show="false" />
</template>

<script setup>
import { ref, watch } from 'vue'
import Bubble from '../bubble'
import UIFloating from '../floating/index.vue'

const props = defineProps({
    mark: {
        type: String,
    },
    msg: {
        type: String,
    },
    floatClass: {
        type: String,
    },
    type: {
        type: String,
        default: 'top',
    },
})

const mountEl = document.body
const guideRef = ref()
const shouldShow = ref(true)
if (props.mark) {
    shouldShow.value = !localStorage.getItem(props.mark)
    if (shouldShow.value) {
        watch(shouldShow, (newv, oldv) => {
            if (!newv && oldv) {
                setTimeout(() => {
                    localStorage.setItem(props.mark, 1)
                })
            }
        })
    }
} else {
    shouldShow.value = true
}

const mount = ref(shouldShow.value)
</script>

<script>
export default { name: 'UiGuide' }
</script>