利用vue3仿苹果系统侧边消息提示效果实例

下面我就给您详细讲解利用vue3仿苹果系统侧边消息提示效果的完整攻略。

1. 概述

本文将介绍如何利用vue3实现仿苹果系统侧边消息提示效果。为了达到这个目的，我们将使用一些vue3的特性，如Teleport，Composition API等。

2. 准备工作

在正式开始实现之前，我们需要完成一些准备工作。

2.1 创建项目

首先，我们需要创建一个新的vue3项目。您可以使用vue-cli来完成这个任务。在终端中输入以下命令创建新的vue3项目：

npm install -g @vue/cli
vue create message-notification

2.2 安装依赖

接下来，我们需要安装几个必要的依赖，包括tailwindcss,@headlessui/vue,autoprefixer和postcss。在终端中输入以下命令安装依赖：

npm install tailwindcss @headlessui/vue autoprefixer postcss --save

2.3 配置样式

由于我们使用了tailwindcss，我们需要在项目中初始化它，为此我们需要创建一个tailwind.config.js文件：

npx tailwindcss init

2.4 组件及相关配置

现在我们已经完成了大部分的准备工作。接下来，我们需要创建两个组件，一个是MessageNotification组件，另一个是MessageList组件，用于显示通知。同时，还需要定义一些相关的vuex状态和方法。

具体代码如下：

<!-- src/components/MessageNotification.vue -->
<template>
  <div>
    <Transition
      enter-active-class="transition ease-out duration-150"
      enter-from-class="transform opacity-0 translate-y-2"
      enter-to-class="transform opacity-100"
      leave-active-class="transition ease-in duration-100"
      leave-from-class="transform opacity-100"
      leave-to-class="transform opacity-0 scale-95"
    >
      <div
        v-show="show"
        class="fixed bottom-0 right-0 mb-4 mr-4 z-50 shadow-lg rounded-lg overflow-hidden"
      >
        <div class="bg-white px-4 py-3 flex items-start">
          <div class="flex-shrink-0">
            <svg
              class="h-6 w-6 text-green-400"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path d="M5 13l4 4L19 7"></path>
            </svg>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium text-gray-900">New message from {{ message.from }}</p>
            <p class="mt-1 text-sm text-gray-500">{{ message.content }}</p>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Transition } from '@headlessui/vue'

export default defineComponent({
  name: 'MessageNotification',
  props: {
    message: {
      type: Object,
    },
  },
  setup(props) {
    const show = true

    return {
      show,
    }
  },
})
</script>

<!-- src/components/MessageList.vue -->
<template>
  <div class="max-h-96 overflow-auto pt-3">
    <div v-for="(message, index) in messages" :key="index">
      <MessageNotification :message="message" />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import MessageNotification from '@/components/MessageNotification.vue'

export default defineComponent({
  name: 'MessageList',
  components: {
    MessageNotification,
  },
  computed: {
    messages() {
      return this.$store.getters.getMessages
    },
  },
})
</script>

// src/store/modules/message.js
const state = {
  messages: [],
}

const getters = {
  getMessages: state => state.messages,
}

const mutations = {
  ADD_MESSAGE: (state, message) => {
    state.messages.push(message)
  },
  REMOVE_MESSAGE: (state, index) => {
    state.messages.splice(index, 1)
  },
}

const actions = {
  addMessage: ({ commit }, message) => {
    commit('ADD_MESSAGE', message)
  },
  removeMessage: ({ commit }, index) => {
    commit('REMOVE_MESSAGE', index)
  },
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

import 'tailwindcss/dist/tailwind.css'

const app = createApp(App)

app.use(store)

app.mount('#app')

// src/store/index.js
import { createStore } from 'vuex'
import message from './modules/message'

export default createStore({
  modules: {
    message,
  },
})

3. 示例说明

现在我们已经完成了所有的准备工作。接下来，我们将展示两个例子，说明如何使用我们的MessageNotification组件。

3.1 添加新消息

我们可以在组件挂载后，通过调用store.dispatch()方法，来添加新的消息：

<template>
  <div>
    <MessageList />
  </div>
</template>

<script>
import { defineComponent, onMounted } from 'vue'
import MessageList from '@/components/MessageList.vue'
import { getRandomMessage } from '@/utils/message.js'

export default defineComponent({
  name: 'App',
  components: {
    MessageList,
  },
  setup() {
    onMounted(() => {
      const interval = setInterval(() => {
        const message = getRandomMessage()
        store.dispatch('message/addMessage', message)
      }, 1000)

      return () => clearInterval(interval)
    })
  },
})
</script>

在这个例子中，我们使用了onMounted()钩子，在组件挂载后，每隔一秒钟添加一条随机的消息到消息列表。

3.2 移除消息

我们可以使用v-for来遍历消息列表，并通过点击事件来移除指定的消息：

<template>
  <div class="max-h-96 overflow-auto pt-3">
    <div v-for="(message, index) in messages" :key="index">
      <button
        class="px-2 py-1 text-white bg-red-500"
        @click="removeMessage(index)"
      >
        X
      </button>
      <MessageNotification :message="message" />
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import MessageNotification from '@/components/MessageNotification.vue'

export default defineComponent({
  name: 'MessageList',
  components: {
    MessageNotification,
  },
  computed: {
    messages() {
      return this.$store.getters.getMessages
    },
  },
  methods: {
    removeMessage(index) {
      this.$store.dispatch('message/removeMessage', index)
    },
  },
})
</script>

在这个例子中，我们在每条消息前添加了一个删除按钮，当点击按钮时，会触发removeMessage()方法，来移除指定的消息。