Nuxt 및 Vue 소셜 채팅

Question

Nuxt 앱에 Vue 소셜 채팅 모듈을 설치했는데 소품과 색상 설정이 어떻게 작동하는지 이해할 수 없습니다. 현재 Whatsapp 아이콘이 검은색으로 표시되고 상단 표시줄이 말풍선 안에 있지만 모든 것이 잘 작동하고 있습니다. Nuxt.dll에서 이 설정을 어떻게 변경합니까? 저자는 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

주로 전반적인 요구 사항에 대한 것입니다

으아아아

또한 --vsc-bg-button: Pink !important; 来代替 :root #social-button CSS 선택자를 사용할 수도 있지만 저는 CSS의 특수성을 깨뜨리는 것을 좋아하지 않습니다.
또한 스타일은 scoped일 수 있지만 여기서는 범위 지정 문제가 없으므로 여기서는 실제 의미가 없습니다.

github 저장소는 여기에서 찾을 수 있습니다: https://github.com/kissu/vue-social

호스팅의 실제 사례는 여기에서 확인할 수 있습니다: https://so-vue-social.netlify. 애플리케이션/