compdfkit_web_cn/components/CodePreviewIndex.vue

<template>
  <div class="platform-sdk-code rounded-20px">
    <div class="relative flex justify-between rounded-t-30px border-b-1px border-b-[#EEEEEE] <lg:hidden">
      <div
        v-for="(device, index) in devices"
        :key="index"
        :class="[
          'item',
          'relative',
          'flex',
          'flex-col',
          'items-center',
          'mb-10px',
          'py-12px',
          'font-bold',
          'cursor-pointer',
          'hover:text-[#272E3B]',
          device === currentPlatform ? '!text-brand-0' : 'text-[#AAAEB7]',
          { active: device === currentPlatform }
        ]"
        @click="currentPlatform = device"
      >
        <component :is="device" />
        <span class="inline-block mt-10px text-tiny">{{ device }}</span>
      </div>
    </div>
    <div class="code-container relative flex flex-1 flex-col lg:mt-40px <lg:mt-16px text-left rounded-16px overflow-hidden <lg:hidden">
      <div class="px-24px pt-24px pb-44px bg-[#272E3B]">
        <div class="options">
          <span
            v-for="(value, key, index) in code[currentPlatform]"
            :key="key"
            class="code-tab inline-block p-8px rounded-4px text-sm font-bold text-[#FFFFFFA6]"
            :class="[
              'relative',
              currentLanguageIndex === index ? '!text-white bg-[#545C6A]' : 'hover:text-white active:text-[#FFFFFFD9]',
              index && 'ml-16px',
              'text-sm',
              'cursor-pointer'
            ]"
            @click="changeLanguage(key, index)"
          >{{ key }}</span>
        </div>
        <pre
          class="flex-grow-1 h-550px mt-24px pb-44px overflow-auto"
        ><code
            ref="code-content"
            class="text-sm text-white whitespace-pre-wrap"
            v-html="code[currentPlatform][currentLanguage]"
          ></code></pre>
        <transition>
          <span
            v-show="copied"
            class="toast absolute bottom-170px right-14px opacity-100 py-5px px-8px text-sm rounded-4px bg-[#CCCCCC] transition-all duration-300"
          >Copied</span>
        </transition>
        <span class="<lg:hidden absolute bottom-120px right-24px flex justify-center items-center w-46px h-46px cursor-pointer bg-[#FFFFFF29] text-[#FFFFFFA6] rounded-full hover:text-[#FFFFFF] active:text-[#FFFFFFD9]">
          <Copy
            @click="copy(code[currentPlatform][currentLanguage])"
          />
        </span>
      </div>
      <div class="help relative flex items-center py-24px pl-24px bg-white rounded-b-16px">
        <a v-if="currentPlatform !== 'Web' && currentPlatform !== 'Linux'" class="flex items-center mr-28px cursor-pointer" :href="getGuidesUrl()">
          <Guides /><span class="text-brand-3 text-sm ml-6px hover:text-brand-0">操作指南</span>
        </a>
        <a class="flex items-center cursor-pointer mr-28px" href="/contact-sales">
          <Contact class="rounded-full bg-[#EBF2FF] text-[#256FFF]" /><span class="text-brand-3 text-sm ml-6px hover:text-brand-0">联系我们</span>
        </a>
        <a class="flex items-center cursor-pointer" href="https://www.pdfreaderpro.com/online-tools">
          <Trial /><span class="text-brand-3 text-sm ml-6px hover:text-brand-0">在线试用</span>
        </a>
      </div>
    </div>
    <template
      v-for="(device, index) in devices"
    >
      <div
        :key="index"
        ref="platform"
        :class="[
          'relative',
          'flex',
          'items-center',
          'justify-between',
          'rounded-8px',
          'p-16px',
          'mt-16px',
          'bg-white',
          'lg:hidden',
          'font-bold',
          'cursor-pointer',
          device === currentPlatform && !minHidden ? 'text-brand-0' : 'text-[#AAAEB7]',
        ]"
        @click="handlePlatformChange(device, index)"
      >
        <div class="flex items-center">
          <component :is="device" class="w-24px h-auto" />
          <span class="inline-block <lg:ml-16px <lg:text-16px <lg:leading-16px">{{ device }}</span>
        </div>
        <Arrow class="w-16px h-auto transform" :class="currentPlatform === device && !minHidden ? 'rotate-270' : 'rotate-90'" />
      </div>
      <div v-if="device === currentPlatform && width < 930 && !minHidden" class="code-container relative flex flex-1 flex-col lg:mt-40px <lg:mt-16px text-left rounded-16px overflow-hidden lg:hidden">
        <div class="px-24px pt-24px pb-44px bg-[#272E3B]">
          <div class="options">
            <span
              v-for="(value, key, index) in code[currentPlatform]"
              :key="key"
              class="code-tab inline-block p-8px rounded-4px text-sm font-bold text-[#FFFFFFA6]"
              :class="[
                'relative',
                currentLanguageIndex === index ? '!text-white bg-[#545C6A]' : 'hover:text-white active:text-[#FFFFFFD9]',
                index && 'ml-16px',
                'text-sm',
                'cursor-pointer'
              ]"
              @click="changeLanguage(key, index)"
            >{{ key }}</span>
          </div>
          <pre
            class="flex-grow-1 h-550px mt-24px pb-44px overflow-auto"
          ><code
              ref="code-content"
              class="text-sm text-white whitespace-pre-wrap"
              v-html="code[currentPlatform][currentLanguage]"
            ></code></pre>
          <transition>
            <span
              v-show="copied"
              class="toast absolute bottom-170px right-14px opacity-100 py-5px px-8px text-sm rounded-4px bg-[#CCCCCC] transition-all duration-300"
            >Copied</span>
          </transition>
          <span class="<lg:hidden absolute bottom-120px right-24px flex justify-center items-center w-46px h-46px cursor-pointer bg-[#FFFFFF29] text-[#FFFFFFA6] rounded-full hover:text-[#FFFFFF] active:text-[#FFFFFFD9]">
            <Copy
              @click="copy(code[currentPlatform][currentLanguage])"
            />
          </span>
        </div>
        <div class="help relative flex items-center py-24px pl-8px bg-white rounded-b-16px">
          <a v-if="currentPlatform !== 'Web' && currentPlatform !== 'Linux'" class="flex items-center mr-13px cursor-pointer" :href="getGuidesUrl()">
            <Guides /><span class="text-brand-3 text-sm ml-6px hover:text-brand-0">操作指南</span>
          </a>
          <a class="flex items-center cursor-pointer mr-13px" href="/contact-sales">
            <Contact class="rounded-full bg-[#EBF2FF] text-[#256FFF]" /><span class="text-brand-3 text-sm ml-6px hover:text-brand-0">联系我们</span>
          </a>
          <a class="flex items-center cursor-pointer" href="https://www.pdfreaderpro.com/online-tools">
            <Trial /><span class="text-brand-3 text-sm ml-6px hover:text-brand-0">在线试用</span>
          </a>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { ResizeObserver } from '@juggle/resize-observer'
import clipboard from 'copy-to-clipboard'
import iOS from '~/assets/images/icons/apple.svg?inline'
import Mac from '~/assets/images/icons/macos.svg?inline'
import Android from '~/assets/images/icons/android.svg?inline'
import Windows from '~/assets/images/icons/windows.svg?inline'
import Web from '~/assets/images/icons/web.svg?inline'
import Copy from '~/assets/images/icons/copy.svg?inline'
import Guides from '~/assets/images/icons/guides.svg?inline'
import Contact from '~/assets/images/icons/contact.svg?inline'
import Arrow from '~/assets/images/icons/arrow.svg?inline'
import Trial from '~/assets/images/icons/trial.svg?inline'
import Linux from '~/assets/images/icons/linux.svg?inline'
export default {
  components: {
    iOS,
    Mac,
    Android,
    Windows,
    Web,
    Copy,
    Guides,
    Contact,
    Arrow,
    Trial,
    Linux
  },
  props: {
    platform: {
      default: 'iOS'
    },
    language: {
      default: 'Objective-C'
    },
    languageIndex: {
      default: 0
    },
    code: Object,
    devices: Array
  },
  data () {
    return {
      currentPlatform: this.platform,
      currentLanguage: this.language,
      currentLanguageIndex: this.languageIndex,
      copied: false,
      timer: null,
      showOptions: false,
      width: 929,
      minHidden: false
    }
  },
  watch: {
    code () {
      if (!this.code.Web) {
        this.currentPlatform = 'iOS'
        this.currentLanguage = 'Objective-C'
      }
    },
    currentPlatform (value, oldValue) {
      if (value === oldValue) {
        return
      }
      this.currentLanguageIndex = 0
      switch (value) {
        case 'iOS':
        case 'Mac':
          this.currentLanguage = 'Objective-C'
          break
        case 'Android':
          this.currentLanguage = 'Java'
          break
        case 'Windows':
          this.currentLanguage = 'C# WPF'
          break
        case 'Web':
          this.currentLanguage = 'JavaScript'
          break
        case 'Linux':
          this.currentLanguage = 'CMD'
          break
      }
    }
  },
  mounted () {
    document.addEventListener('click', () => {
      if (this.showOptions) {
        this.showOptions = false
      }
    })
    const ro = new ResizeObserver((entries, observer) => {
      entries.forEach((entry, index) => {
        const { inlineSize: width } = entry.borderBoxSize[0]
        this.width = width
      })
    })
    ro.observe(document.body)
  },
  methods: {
    changeLanguage (language, index) {
      if (this.currentLanguage === language) {
        return
      }
      this.currentLanguage = language
      this.currentLanguageIndex = index
    },
    handlePlatformChange (platform, index) {
      if (platform === this.currentPlatform) {
        if (this.width < 930) {
          this.minHidden = !this.minHidden
        }
        return
      }
      this.minHidden = false
      this.currentPlatform = platform
      this.$nextTick(() => {
        window.scrollTo({
          left: 0,
          top: this.$refs.platform[index].offsetTop - 66
        })
      })
    },
    getGuidesUrl () {
      if (this.currentPlatform === 'Web' || this.currentPlatform === 'Linux') {
        return false
      } else {
        return 'https://www.compdf.com/guides/' + this.currentPlatform.toLowerCase()
      }
    },
    copy (content) {
      content = content.replace(/<\/?.+?>/g, '')
      content = content.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"')
      clipboard(content, {
        format: 'text/plain'
      })
      this.copied = true
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.copied = false
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
  .item.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -11px;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #1460F3;
    transition: width .3s;
  }
  .item {
    width: 28%;
    max-width: 204px;
    svg {
      width: auto;
      height: 35px;
    }
  }
  .over-arrow::after {
    margin-top: -5px;
    border-color: transparent transparent #000 transparent;
  }
  .code-tab {
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      display: block;
      width: 0;
      height: 2px;
      background-color: transparent;
      transition: width .3s;
    }
    &.active::after {
      width: calc(100% - 40px);
      background-color: #0097FF;
    }
  }
  .code-container {
    box-shadow: 0px 3px 35px rgba(129, 149, 200, 0.18);
  }
  .toast.v-enter, .toast.v-leave-to {
    opacity: 0;
    bottom: 50px;
  }
  pre {
    code {
      font-family: Consolas, Helvetica;
      ::v-deep {
        .hljs-variable, .statement {
          color: #7B563D;
        }
        .hljs-string, .string {
          color: #C0402D;
        }
        .hljs-keyword, .keyword {
          color: #A0459F;
        }
        .hljs-title, .title {
          color: #367AAC;
        }
        .hljs-comment, .comment {
          color: #70A14F;
        }
      }
    }
  }
  .help::after {
    content: '';
    position: absolute;
    top: -19px;
    left: 0;
    display: block;
    width: 100%;
    height: 19px;
    background: linear-gradient(90deg, rgba(20, 96, 243, 0.9) 29.22%, rgba(255, 255, 255, 0.1) 100%);
  }
  @media screen and (max-width: 929px) {
    pre::-webkit-scrollbar{
      width: 6px;
      height: 6px;
    }
    pre::-webkit-scrollbar-thumb{
      background: rgba(255, 255, 255, 0.32);
      border-radius:10px;
    }
    pre::-webkit-scrollbar-corner {
      background-color: transparent;
    }
  }
</style>