Nuxt 和 Vue 社交聊天

Question

我将 Vue Social Chat 模块安装到我的 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

这主要是整体需要的

<template>
  <div class="layout">
    <nuxt />
    <social-chat id="social-button" icon :attendants="attendants">
      <p slot="header">
        Click on one of our attendants below to chat on WhatsApp.
      </p>
      <template #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>
    </social-chat>
  </div>
</template>

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

export default {
  name: 'DefaultLayout',
  components: {
    SocialChat,
  },
  data() {
    return {
      attendants: [
        {
          app: 'whatsapp',
          label: 'Technical support',
          name: 'Alan Ktquez',
          number: '5581983383532',
          avatar: {
            src: 'https://avatars0.githubusercontent.com/u/8084606?s=460&u=20b6499a416cf7129a18e5c168cf387e159edb1a&v=4',
            alt: 'Alan Ktquez avatar',
          },
        },
      ],
    }
  },
}
</script>

<style>
:root #social-button {
  --vsc-bg-header: orange;
  --vsc-bg-footer: #fafafa;
  --vsc-text-color-header: yellow;
  --vsc-text-color-footer: green;
  --vsc-bg-button: pink;
  --vsc-text-color-button: purple;
  --vsc-outline-color: #333;
  --vsc-border-color-bottom-header: teal;
  --vsc-border-color-top-footer: #f3f3f3;
}
</style>

我们可能也使用了 --vsc-bg-button: pink !important; 而不是 :root #social-button CSS 选择器，但我不喜欢核对 CSS 特异性。
此外，样式可以是 scoped，但这里并没有真正的含义，因为你不会在这里遇到任何范围问题。

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

此处提供托管工作示例：https://so-vue-social.netlify.app/

Nuxt 和 Vue 社交聊天

Nuxt & Vue Social Chat

javascript

css-variables

vue.js

vuejs2

nuxt.js