第二次冲刺03

聊天室的chat组件

template>

  <!--接收信息提示音-->

  <audio id="tip-music">

    <source src="@/assets/message/notice.mp3" type="audio/mp3" />

  </audio>

  <div absolute right-30px top-15px >

    <el-switch

      class="chat-switch-music"

      v-model="store.openMusic"

      inline-prompt

      active-text="开提示"

      inactive-text="关提示"

    />

  </div>

  <el-row type="flex" align="middle" justify="center">

    <el-card shadow="hover" class="lg:w-1200px w-full mt-30px chat-container">

      <ChatContainer :key="key"></ChatContainer>

    </el-card>

  </el-row>

</template>

 

<script setup lang="ts">

import {ref, watch} from "vue";

  import { useMainStore } from "@/store/main"

  import { useButtonStore } from '@/store';

  const buttonStore = useButtonStore();

  const buttonClickCount = buttonStore.buttonClickCount;

  const store = useMainStore()

  // 监听声音开启

  watch(

    () => store.openMusic,

    (newVal, oldVal) => {

      if (newVal) {

        store.tipMusic = document.getElementById("tipMusic") as HTMLMediaElement

      }

    }

  )

let key = ref(0);

  watch(() => buttonStore.buttonClickCount, (newValue, oldValue) => {

    console.log(buttonClickCount);

    key.value++;

    console.log(key);

  });

</script>

 

<style scoped lang="scss">

  .chat-switch-music{

    :deep(.ep-switch__core){

      width: 100px;

    }

  }

  .chat-container{

    :deep(.ep-card__body){

      padding-left: 0!important;

      @media (max-width: 1024px){

        padding-right: 0!important;

      }

    }

  }