1.下包
npm i qrcode
2.导包
import QrCode from 'qrcode'
3.制作一个弹层
<el-dialog :visible.sync="showCode" title="二维码">
<!-- 放置el-row主要是为了布局 -->
<el-row type="flex" justify="center">
<canvas ref="canvas" />
</el-row>
</el-dialog>
4.js代码
<script>
import QrCode from 'qrcode'
export default {
data() {
return {
userId: this.$route.params.id,
showCode: false
}
},
methods: {
showQrCode(url) {
if (url) {
this.showCode = true
this.$nextTick(() => {
QrCode.toCanvas(this.$refs.canvas, url)
})
} else {
this.$message.warning('该用户还未上传头像')
}
}
}
打印
1.下包
npm i vue-print-nb
2.注册插件
import Print from 'vue-print-nb'
Vue.use(Print)
3.打印按钮
<el-row type="flex" justify="end">
<!-- 利用 v-print指令完成页面的打印 -->
<el-button v-print="printObj" size="small" type="primary">打印</el-button>
</el-row>
4.js
<script>
import { getPersonalDetail, getJobDetail } from '@/api/employees'
import { getUserDetailById } from '@/api/user'
export default {
data() {
return {
printObj: {
id: 'myPrint'
},
formData: {},
userId: this.$route.params.id,
type: this.$route.query.type
}
},
created() {
this.type === 'personal' ? this.getPersonalDetail() : this.getJobDetail()
},
methods: {
async getPersonalDetail() {
this.formData = await getPersonalDetail(this.userId)
},
async getJobDetail() {
const userInfo = await getUserDetailById(this.userId)
const jobInfo = await getJobDetail(this.userId)
this.formData = { ...userInfo, ...jobInfo }
}
}
}
</script>