Sozialer Chat von Nuxt und Vue

Question

Ich habe das Vue-Social-Chat-Modul in meiner Nuxt-App installiert, kann aber nicht verstehen, wie die Requisiten und Farbeinstellungen funktionieren. Derzeit funktioniert alles einwandfrei, obwohl das angezeigte WhatsApp-Symbol schwarz ist und sich die obere Leiste innerhalb der Sprechblase befindet. Wie würde ich diese Einstellung in Nuxt ändern? Der Autor empfiehlt, CSS-Variablen zu verwenden, aber ich weiß nicht, wo ich diese Variablen einfügen und wie ich sie in meinem Code verwenden soll.

Nuxt verfügt auch nicht über App.vue, daher habe ich das Modul direkt importiert, was zu funktionieren scheint, aber ich bin mir nicht sicher, ob ich es richtig mache.

So sieht meine aktuelle default.vue-Seite aus. Ich werde dieses Modul nicht woanders importieren.

<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

这主要是总体需要的

我们也可以使用 --vsc-bg-button: Pink !important; 来代替 :root #social-button CSS 选择器，但我不喜欢破坏 CSS 的特异性。
另外，样式可以是 scoped 但无论如何这里没有真正的含义，因为您不会在这里遇到任何范围界定问题。

可以在此处找到 github 存储库：https://github.com/kissu/vue-social

这里提供了一个托管工作示例：https://so-vue-social.netlify。应用程序/