lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add highlight demo

Browse Source
This commit is contained in:
陈凯龙
2022-01-27 10:10:25 +08:00
parent 535a31b35e
commit eb206b0cc3
5 changed files with 53 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/Components/Qrcode.vue
View File

@@ -34,19 +34,19 @@ const disabledClick = () => {
<ElRow :gutter="20" justify="space-between">
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.basicUsage') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.basicUsage') }}</div>
<Qrcode :text="title" />
</ElCard>
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.imgTag') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.imgTag') }}</div>
<Qrcode :text="title" tag="img" />
</ElCard>
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.style') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.style') }}</div>
<Qrcode
:text="title"
:options="{
@@ -60,31 +60,31 @@ const disabledClick = () => {
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.click') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.click') }}</div>
<Qrcode :text="title" @click="codeClick" />
</ElCard>
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.asynchronousContent') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.asynchronousContent') }}</div>
<Qrcode :text="asyncTitle" />
</ElCard>
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.invalid') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.invalid') }}</div>
<Qrcode :text="title" disabled @disabled-click="disabledClick" />
</ElCard>
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.logoConfig') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.logoConfig') }}</div>
<Qrcode :text="title" :logo="logoImg" />
</ElCard>
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.logoStyle') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.logoStyle') }}</div>
<Qrcode
:text="title"
:logo="{
@@ -99,7 +99,7 @@ const disabledClick = () => {
</ElCol>
<ElCol :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<ElCard shadow="hover" class="mb-10px text-center">
<div class="font-bold mb-10px">{{ t('qrcodeDemo.size') }}</div>
<div class="font-bold">{{ t('qrcodeDemo.size') }}</div>
<Qrcode :text="title" :width="250" />
</ElCard>
</ElCol>