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

20
src/views/Components/Highlight.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Highlight } from '@/components/Highlight'
import { ElMessage } from 'element-plus'
const { t } = useI18n()
const keyClick = (key: string) => {
ElMessage.info(key)
}
</script>
<template>
<ContentWrap :title="t('highlightDemo.highlight')">
<Highlight :keys="[t('highlightDemo.keys1'), t('highlightDemo.keys2')]" @click="keyClick">
{{ t('highlightDemo.message') }}
</Highlight>
</ContentWrap>
</template>

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>