compdfkit_web_viewer/packages/webview/src/components/Dialogs/LanguageDialog.vue

<template>
  <div v-show="isModalVisible" class="language-setting-popup">
    <div class="wrapper">
      <div className="header-container">
        <span class="title"></span>
        <Button className="close-button" :onClick="handleClose"><CloseModal /></Button>
      </div>
      <div class="content">
        <div class="title">{{ $t('header.language') }}</div>
        <div class="item" @click="selectLanguage('en')">
          <Circled v-if="selectedLanguage === 'en'" />
          <Circle v-else />
          English
        </div>
        <div class="item" @click="selectLanguage('zh-CN')">
          <Circled v-if="selectedLanguage === 'zh-CN'" />
          <Circle v-else />
          简体中文
        </div>
        <span class="set-btn" @click="handleLanguage">{{ $t('ok') }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { useViewerStore } from '@/stores/modules/viewer'
  const { locale } = useI18n()

  const useViewer = useViewerStore()

  const selectedLanguage = ref(locale.value)
  const isModalVisible = computed(() => useViewer.isElementOpen('languageDialog'))
  
  const handleClose = () => {
    useViewer.closeElement('languageDialog')
    selectedLanguage.value = locale.value
  }

  const selectLanguage = (language) => {
    selectedLanguage.value = language
  }

  const handleLanguage = () => {
    locale.value = selectedLanguage.value
    useViewer.closeElement('languageDialog')
  }
</script>

<style lang="scss">
  .language-setting-popup {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .wrapper {
      width: 100%;
      max-width: 252px;
      padding: 20px 16px;
      background-color: var(--c-header-bg);
      box-shadow: 0px 4px 32px 0px rgba(129, 149, 200, 0.32);
      border-radius: 4px;
    }
    .header-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      button {
        margin-right: 0;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      .title {
        margin-bottom: 16px;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
      }
      .item {
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 20px;
        cursor: pointer;
        & + .item {
          margin-top: 6px;
        }
        svg {
          margin-right: 9px;
        }
      }
    }
    .set-btn {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      margin-top: 24px;
      padding: 12px 0;
      font-size: 14px;
      line-height: 16px;
      font-weight: bold;
      border-radius: 4px;
      color: #FFF;
      cursor: pointer;
      background-color: var(--c-popup-bg-active);
    }
  }
</style>