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。应用程序/