1. Install the plug-in
npm install --save qrcode.vue
or
yarn add qrcode.vue
Second, introduce the plug-in to the page
import QrcodeVue from 'qrcode.vue'
Three, page realization
<qrcode-vue :value="qrCode123" size:300 ></qrcode-vue>
:value="qrCode123" is the value in the QR code
Four, all code
<template>
<el-button text @click="dialogVisible = true"
>click to open the Dialog</el-button
>
<el-dialog
v-model="dialogVisible"
title="Tips"
width="30%"
:before-close="handleClose"
>
<qrcode-vue :value="qrCode123" size:300 ></qrcode-vue>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false"
>Confirm</el-button
>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import QrcodeVue from 'qrcode.vue'
const dialogVisible = ref(false)
const qrCode123 = ref("我是二维码信息")
const handleClose = (done: () => void) => {
ElMessageBox.confirm('Are you sure to close this dialog?')
.then(() => {
done()
})
.catch(() => {
// catch error
})
}
</script>
<style scoped>
.dialog-footer button:first-child {
margin-right: 10px;
}
</style>
Introduction to Vue3 (ignore)
What vue3.0 brings
1. Performance improvement,
package size reduced by 41%,
initial rendering is 55% faster, updated rendering block is 133%,
memory is reduced by 54%
......
2. Source code upgrade
uses Proxy instead of defineProperty to achieve Responsive
Rewrite the implementation of virtual DOM and Tree-Sharking
......
3. Embrace TypeScript
vue3.0 to better support TypeScript
4. The new feature
Composition API (combination api)
. setup configuration
. ref and reactive
。watch与watchEffect
. provide and inject
。 .......
new built-ins
。 Fragment
。Teleport
。Suspense
other changes
. new lifecycle hook
. The data option should always be declared as a function
. Remove keyCode support as v-on modifier