Nuxt & Vue Social Chat

Question

我在Nuxt应用程序中安装了Vue社交聊天模块，但很难理解道具和颜色设置是如何工作的。目前一切都很好，尽管显示的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-buttonCSS选择器，但我不喜欢破坏CSS的特异性
此外，样式可以是scoped，但这里并没有真正的含义，因为这里不会出现任何作用域问题。

github回购可在此处找到：https://github.com/kissu/vue-social

这里提供了一个托管的工作示例：https://so-vue-social.netlify.app/