Vue3 QR코드 스타일

로고와 스타일이 있는 QR코드를 생성하는 JavaScript 라이브러리
이것은 https://qr-code-styling.com의 클론 복제본입니다.
질문/제안/주석/질문이 있으면 질문을 열거나 저에게 연락 주세요.우리 함께 멋진 라이브러리를 만들자.

예.

장치

npm install vue3-qr-code-styling

사용법

<template>
  <div>
   <VueQr3
          :width="200"
          :height="200"
          data="https://diadal.com.ng"
          :qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
          :imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
          :dotsOptions="{
            type: 'dots',
            color: '#26249a',
            gradient: {
              type: 'linear',
              rotation: 0,
              colorStops: [
                { offset: 0, color: '#26249a' },
                { offset: 1, color: '#26249a' },
              ],
            },
          }"
          :backgroundOptions="{ color: '#ffffff' }"
          image="https://diadal.com.ng/icons/favicon-96x96.png"
          :cornersSquareOptions="{ type: 'dot', color: '#000000' }"
          :cornersDotOptions="{ type: undefined, color: '#000000' }"
          fileExt="png"
          :download="true"
          myclass="my-qur"
          imgclass="img-qr"
          downloadButton="my-button"
          :downloadOptions="{ name: 'vqr', extension: 'png' }"
        >
    </VueQr3>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  defineAsyncComponent
} from 'vue'

export default defineComponent({
  name: 'VueQr3',
  components: {
    VueQr3: defineAsyncComponent(() =>
      Promise.resolve(import('vue3-qr-code-styling'))
    )
  },
  setup () {
    return {
    }
  }
})
</script>

<style lang="sass">
.my-qur
//   overflow-wrap: anywhere
</style>

API 문서

VQRcodeStyleing 인스턴스

new VQRCodeStyling(options) => VQRCodeStyling팔람
타입
묘사
옵션
대상
객체 초기화options 패브릭
재산.
타입
기본값
묘사
너비
세다300캔버스의 크기
높이.
세다300캔버스의 크기
다운로드
부울 값
거짓
다운로드 중지 버튼
우리 반
꿰미
''
이미지 분할 클래스
imgclass
꿰미
''
이미지 클래스
다운로드 버튼
꿰미
''
다운로드 버튼 클래스
다운로드 옵션
대상
다운로드 옵션 이름 및 확장자
데이터
꿰미
날짜가 QR코드로 인코딩됩니다.
이미지
꿰미
이미지가 QR코드 중심에 복사됩니다.
가장자리
세다0캔버스 주위의 여백
qrOptions
대상
옵션이 qrcode-generatorlib에 전달됨
이미지 옵션
대상
구체적인 이미지 옵션, 상세한 내용은 아래 문장을 보십시오.
점적
대상
도트 유형 옵션
구석구석
대상
구석에 있는 사각형 스타일 옵션
구석 옵션 도우미
대상
구석 유형 옵션
배경 옵션
대상
QR 배경 스타일 옵션options.qrOptions 패브릭
재산.
타입
기본값
상점
숫자0 - 400패턴
문자열 ('Numeric' 'Alphanumeric' 'Byte' 'Kanji'오류 보정 수준
문자열 ('L' 'M' 'Q' 'H''Q' options.imageOptions 패브릭
재산.
타입
기본값
묘사
배경점 숨기기
부울 값true이미지가 덮어쓰는 모든 점 숨기기
이미지 크기
세다0.4이미지 크기의 계수입니다.오버 0.5는 권장하지 않습니다.낮을수록 좋다
가장자리
세다0픽셀 단위 이미지 여백
교차 기원
문자열 ('anonymous' 'use-credentials'다른 소스에서 QR코드를 다운로드하려면 [익명]을 설정합니다.options.dotsOptions 패브릭
재산.
타입
기본값
묘사
색상
꿰미'#000'QR 포인트 색상
경도
대상
QR 점의 경사도
타입
문자열 ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded''square'QR 점 스타일options.backgroundOptions 패브릭
재산.
타입
기본값
색상
꿰미'#fff'경도
대상options.cornersSquareOptions 패브릭
재산.
타입
기본값
묘사
색상
꿰미
네모난 구석의 색
경도
대상
직각 경사도
타입
문자열 ('dot' 'square' 'extra-rounded'네모난 구석 스타일options.cornersDotOptions 패브릭
재산.
타입
기본값
묘사
색상
꿰미
구석 색상
경도
대상
각도
타입
문자열 ('dot' 'square'구석 스타일
계단식 구조options.dotsOptions.gradient options.backgroundOptions.gradient options.cornersSquareOptions.gradient options.cornersDotOptions.gradient재산.
타입
기본값
묘사
타입
문자열 ('linear' 'radial'선형
계단식 확산 유형
빙글빙글 돌다
세다
0
그래디언트 회전 호도(Math.PI==180도)
색조
객체 배열
그래디언트예제[{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }]그라데이션 구조options.dotsOptions.gradient.colorStops[] options.backgroundOptions.gradient.colorStops[] options.cornersSquareOptions.gradient.colorStops[] options.cornersDotOptions.gradient.colorStops[]재산.
타입
기본값
묘사
상쇄하다
숫자0 - 1그래디언트 범위 내의 색상 위치
색상
꿰미
그라데이션 범위 내의 정지 색상

VQRcodeStyleing 방법

VQRCodeStyling.append(container) => void팔람
타입
묘사
용기.
DOM 요소
이 컨테이너는 QR코드를 첨부하는 데 사용됩니다.VQRCodeStyling.update(options) => void팔람
타입
묘사
옵션
대상
초기화 옵션과 동일VQRCodeStyling.download(downloadOptions) => void팔람
타입
묘사
다운로드 옵션
대상
확장자 및 파일 이름이 있는 옵션(필요하지 않음)downloadOptions 패브릭
재산.
타입
기본값
묘사
이름:
꿰미'qr'다운로드한 파일의 이름
뻗치다
문자열 ('png' 'jpeg' 'webp''png'파일 확장자
질문이 있으면check
너도 나에게 커피 한 잔 사줄 수 있어Patreon

라이선스

MIT License . 저작권 소유(c) 2021년 Diadal Nig