Nuxt 和 Vue 社交聊天

Question

我將 Vue 社交聊天模組安裝到我的 Nuxt 應用程式中，但無法理解道具和顏色設定的工作原理。目前，一切工作正常，儘管顯示的 Whatsapp 圖示是黑色的，並且頂部欄位於語音氣泡內。我將如何在 Nuxt 中更改此設定。作者說使用 css 變量，但我不知道將這些變數放在哪裡以及如何在我的程式碼中使用它們。

Nuxt 也沒有 App.vue，所以我直接導入了模組，這似乎可以工作，但我不確定我是否正確執行。

這就是我目前的 default.vue 頁面的樣子。我不會在其他地方導入該模組。

<template>
  <v-app dark>
    <v-main>
      <Nuxt />
    </v-main>
    <div>
      <SocialChat
        icon
        :attendants="attendants"
      >
        <p slot="header" >Chat to us on whatsapp for any question, or sales related topics.</p>
        <template v-slot:button>
          <img
            src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
            alt="icon whatsapp"
            aria-hidden="true"
          >
        </template>
        <small slot="footer">Opening hours: 8am to 6pm</small>
      </SocialChat>
    </div>
  </v-app>
</template>

<script>
import { SocialChat } from 'vue-social-chat'

export default {
  name: 'DefaultLayout',
  components: {
    SocialChat
  },
  data() {
    return {
      attendants: [
        {
          app: 'whatsapp',
          label: '',
          name: '',
          number: '',
          avatar: {
            src: '',
            alt: ''
          }
        },
        // ...
      ],
    }
  },
}
</script>

<style>
.container {
  max-width: 1200px;
}
</style>

Answer 1

這主要是總體需要的

sssccc

我們也可以用--vsc-bg-button: Pink !important; 來取代:root #social-button CSS 選擇器，但我不喜歡破壞CSS 的特異性。
另外，樣式可以是 scoped 但無論如何這裡沒有真正的意義，因為您不會在這裡遇到任何範圍界定問題。

可以在此處找到 github 儲存庫：https://github.com/kissu/vue-social

#這裡提供了一個託管工作範例：https://so-vue-social.netlify。應用程式/