-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deploying to gh-pages from @ 6cb96f1 🚀
- Loading branch information
0 parents
commit 18c033e
Showing
5 changed files
with
357 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
qr-vue.tie.pub |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,342 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta | ||
name="viewport" | ||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" | ||
/> | ||
<meta name="mobile-web-app-capable" content="yes" /> | ||
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||
<title>qrcode.vue - A Vue.js component to generate QRCode</title> | ||
<meta name="author" content="@scopewu" /> | ||
<meta name="Keywords" content="qrcode.vue,qrcode,component" /> | ||
<meta | ||
name="description" | ||
content="qrcode.vue - A Vue.js component for QRCode." | ||
/> | ||
<link rel="canonical" href="https://qr-vue.tie.pub" /> | ||
<meta property="og:site_name" content="qrcode.vue" /> | ||
<meta property="og:type" content="website" /> | ||
<meta property="og:title" content="QRCode Vue" /> | ||
<meta property="og:description" content="qrcode.vue - A Vue.js component to generate QRCode" /> | ||
<meta property="og:url" content="https://qr-vue.tie.pub" /> | ||
|
||
<meta name="twitter:card" content="summary" /> | ||
<meta name="twitter:title" content="QRCode Vue" /> | ||
<meta name="twitter:description" content="qrcode.vue - A Vue.js component to generate QRCode" /> | ||
<meta name="twitter:url" content="https://qr-vue.tie.pub" /> | ||
<meta name="twitter:label1" content="Written by" /> | ||
<meta name="twitter:data1" content="scopewu" /> | ||
<meta name="twitter:creator" content="@ngwwj" /> | ||
<link | ||
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
rel="stylesheet" | ||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" | ||
crossorigin="anonymous" | ||
referrerpolicy="no-referrer" | ||
/> | ||
<style> | ||
body { | ||
font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, | ||
'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', | ||
'Microsoft YaHei', SimSun, sans-serif; | ||
color: #333; | ||
} | ||
|
||
h1 { | ||
margin-bottom: 0.67em; | ||
} | ||
|
||
.fork { | ||
width: 150px; | ||
height: 150px; | ||
position: absolute; | ||
top: 0; | ||
right: 0; | ||
} | ||
.fork img { | ||
max-width: 100%; | ||
} | ||
|
||
.qrcode-wrap.border { | ||
display: inline-block; | ||
border-width: 6px !important; | ||
} | ||
|
||
.qrcode { | ||
vertical-align: middle; | ||
} | ||
|
||
@media screen and (min-width: 768px) { | ||
.container-fluid { | ||
max-width: 798px; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 470px) { | ||
h1 { | ||
font-size: 26px; | ||
} | ||
|
||
.fork { | ||
width: 100px; | ||
height: 100px; | ||
} | ||
} | ||
.widget a { | ||
text-decoration: none; | ||
outline: 0 | ||
} | ||
|
||
.widget { | ||
display: inline-block; | ||
overflow: hidden; | ||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; | ||
font-size: 0; | ||
line-height: 0; | ||
white-space: nowrap | ||
} | ||
|
||
.btn, .social-count { | ||
position: relative; | ||
display: inline-flex; | ||
height: 20px; | ||
padding: 2px 5px; | ||
font-size: 11px; | ||
font-weight: 600; | ||
line-height: 14px; | ||
vertical-align: bottom; | ||
cursor: pointer; | ||
-webkit-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
user-select: none; | ||
background-repeat: repeat-x; | ||
background-position: -1px -1px; | ||
background-size: 110% 110%; | ||
border: 1px solid | ||
} | ||
|
||
.btn { | ||
border-radius: .25em | ||
} | ||
|
||
.btn:not(:last-child) { | ||
border-radius: .25em 0 0 .25em | ||
} | ||
|
||
.social-count { | ||
border-left: 0; | ||
border-radius: 0 .25em .25em 0 | ||
} | ||
|
||
.widget-lg .btn, .widget-lg .social-count { | ||
height: 16px; | ||
padding: 5px 10px; | ||
font-size: 12px; | ||
line-height: 16px | ||
} | ||
|
||
.octicon { | ||
display: inline-block; | ||
vertical-align: text-top; | ||
fill: currentColor; | ||
overflow: visible | ||
} | ||
|
||
.btn { | ||
color: #24292f; | ||
background-color: #ebf0f4; | ||
border-color: #ccd1d5; | ||
border-color: rgba(27, 31, 36, .15); | ||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e"); | ||
background-image: -moz-linear-gradient(top, #f6f8fa, #ebf0f4 90%); | ||
background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%); | ||
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF6F8FA', endColorstr='#FFEAEFF3') | ||
} | ||
|
||
:root .btn { | ||
filter: none | ||
} | ||
|
||
.btn:focus, .btn:hover { | ||
background-color: #e9ebef; | ||
background-position: 0 -0.5em; | ||
border-color: #caccd1; | ||
border-color: rgba(27, 31, 36, .15); | ||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f3f4f6'/%3e%3cstop offset='90%25' stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e"); | ||
background-image: -moz-linear-gradient(top, #f3f4f6, #e9ebef 90%); | ||
background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%); | ||
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FFF3F4F6', endColorstr='#FFE8EAEE') | ||
} | ||
|
||
:root .btn:focus, :root .btn:hover { | ||
filter: none | ||
} | ||
|
||
.btn:active { | ||
background-color: #e5e9ed; | ||
border-color: #c7cbcf; | ||
border-color: rgba(27, 31, 36, .15); | ||
box-shadow: inset 0 .15em .3em rgba(27, 31, 36, .15); | ||
background-image: none; | ||
filter: none | ||
} | ||
|
||
.social-count { | ||
color: #24292f; | ||
background-color: #fff; | ||
border-color: #ddddde; | ||
border-color: rgba(27, 31, 36, .15) | ||
} | ||
|
||
.social-count:focus, .social-count:hover { | ||
color: #0969da | ||
} | ||
|
||
.octicon-heart { | ||
color: #bf3989 | ||
} | ||
.space-x-2 :not(:first-of-type){ | ||
margin-left: 0.5rem; | ||
} | ||
[v-cloak] { | ||
display: none; | ||
} | ||
</style> | ||
<script type="module" src="https://cdn.jsdelivr.net/gh/scopewu/qrcode.vue@gh-pages/static/js/244.0608197f.js"></script><script type="module" src="https://cdn.jsdelivr.net/gh/scopewu/qrcode.vue@gh-pages/static/js/index.792f9eb1.js"></script></head> | ||
<body> | ||
<div id="root"> | ||
<div class="container-fluid mb-5"> | ||
<header class="border-bottom mt-4 mb-3 pb-2"> | ||
<div class='row align-items-center my-3'> | ||
<h1 class='col-sm-8 m-0'>qrcode.vue:</h1> | ||
<div class='col-4 space-x-2 text-end'> | ||
<a | ||
href='https://github.com/scopewu/qrcode.vue' | ||
class='link-dark link-underline-opacity-25 link-underline-opacity-100-hover' | ||
>GitHub</a> | ||
<a | ||
href='https://tie.pub' | ||
class='link-dark link-underline-opacity-25 link-underline-opacity-100-hover' | ||
target='_blank' | ||
rel='noopener' | ||
>Author</a> | ||
</div> | ||
</div> | ||
<div class='row'> | ||
<div class='col-4'> | ||
<div class="widget" v-cloak> | ||
<a class="btn" href="https://github.com/scopewu/qrcode.vue" rel="noopener" target="_blank" aria-label="Star qrcode.vue on GitHub"> | ||
<svg viewBox="0 0 16 16" width="14" height="14" class="octicon octicon-mark-github" aria-hidden="true"> | ||
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path> | ||
</svg> | ||
<span> </span> | ||
<span>Star</span> | ||
</a> | ||
<a class="social-count" href="https://github.com/scopewu/qrcode.vue/stargazers" rel="noopener" target="_blank" :aria-label="`${stargazersCount} stargazers on GitHub`">{{ stargazersCount }}</a> | ||
</div> | ||
</div> | ||
</div> | ||
</header> | ||
<form v-cloak> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">Value:</label> | ||
<div class="col-sm-10"> | ||
<textarea v-model="value" class="form-control" rows="3"></textarea> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">Size:</label> | ||
<div class="col-sm-10"> | ||
<div class='row'> | ||
<div class='col-8'> | ||
<input | ||
type="range" | ||
v-model="size" | ||
min="100" | ||
max="800" | ||
step="20" | ||
class="form-range" | ||
/> | ||
</div> | ||
<div class='col-auto'>{{size}}</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">Margin:</label> | ||
<div class="col-sm-10"> | ||
<div class='row'> | ||
<div class='col-8'> | ||
<input | ||
type="range" | ||
v-model="margin" | ||
min="0" | ||
max="10" | ||
step='1' | ||
class="form-range" | ||
/> | ||
</div> | ||
<div class='col-auto'>{{margin}}</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">Level:</label> | ||
<div class="col-sm-10"> | ||
<select v-model="level" class="form-select"> | ||
<option value="L">L</option> | ||
<option value="M">M</option> | ||
<option value="Q">Q</option> | ||
<option value="H">H</option> | ||
</select> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">renderAs:</label> | ||
<div class="col-sm-10"> | ||
<select v-model="renderAs" class="form-select"> | ||
<option value="svg">svg</option> | ||
<option value="canvas">canvas</option> | ||
</select> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">Background:</label> | ||
<div class="col-sm-10"> | ||
<input type="color" class="border border-3 rounded" v-model="background"> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">Foreground:</label> | ||
<div class="col-sm-10"> | ||
<input type="color" class="border border-3 rounded" v-model="foreground"> | ||
</div> | ||
</div> | ||
<div class="row mb-3"> | ||
<label class="col-sm-2 col-form-label">QR_CODE:</label> | ||
<div class="col-sm-10"> | ||
<div class="form-control-static"> | ||
<div class="border qrcode-wrap"> | ||
<qrcode-vue | ||
class="qrcode" | ||
:value="value" | ||
:margin='Number(margin)' | ||
:render-as="renderAs" | ||
:size="Number(size)" | ||
:level="level" | ||
:background="background" | ||
:foreground='foreground' | ||
:image-settings='imageSettings' | ||
></qrcode-vue> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</form> | ||
</div> | ||
</div> | ||
</body> | ||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
/*! #__NO_SIDE_EFFECTS__ */ | ||
|
||
/** | ||
* vue v3.5.12 | ||
* (c) 2018-present Yuxi (Evan) You and Vue contributors | ||
* @license MIT | ||
**/ |
Oops, something went wrong.