最近写二维码的时候，突然想起之前项目遇到过的一个问题，网上也没有这方面解答，想到大家今后可能也会遇到这类问题，在此记录下来，希望对你们有所帮助，大佬们不喜勿喷，qrcode配合画布canvas本地生成二维码的时候第一次能够正常显示，最下方会贴出代码
跨页面后显示异常
刚开始是有些头疼的，因为控制台一切正常，没有抛出错误，然后去看qrcode的参数属性也没有问题，我是多个页面需要生成多个二维码，封装了qrcode组件
F12逐步排查看html结构，生成多个二维码之后并没有销毁
所以第一想到的是可能是覆盖问题，我也不知道为什么关闭窗口后并没有销毁，那么就手动remove()销毁它吧，结果还是悲剧的，依旧没有效果，通过打印结果可以得知二维码是正常生成了的只是没有被渲染上去
难道是跨页面的时候当前页面的id和其他页面的id重复导致qrcode生成二维码成功了但是画布无法正常显示吗，那么只需要每个引用了qrcode组件的页面都传一个唯一的值过来做id就行了，抱着试一试的态度我再次打开了vscode，将父组件的name传了过来
父组件
子组件id
之后再获取到nameOn生成二维码，还挺好用
<div>
<!-- 单据二维码-->
<el-table-column :label="$t('receipt.orderQRCode')"
header-align="center"
align="center"
min-width="150">
<template slot-scope="scope">
<el-button type="primary" @click="createORCode(scope.row.receiptOrder)">
{{$t('receipt.generateQRcode')}}
</el-button>
</template>
</el-table-column>
/**
* 生成二维码
*/
createORCode (orderNumber) {
this.codeDialogVisible = true
this.orderNumber = orderNumber
this.$nextTick(() => {
this.$refs.codeDialog.init()
})
},qrcode公共组件
<template>
<!-- 二维码 -->
<el-dialog
width="400px"
:title="$t('receipt.viewQRCode')"
:close-on-click-modal="false"
:visible.sync="visible"
@closed="visible = false"
:append-to-body="true"
>
<el-container style="margin-left: 5px">
<el-header style="height: 15px">
{{ $t("receipt.documentNo") + "：" + orderNumber }}
</el-header>
<el-main>
<canvas :id="nameOn" class="canvas"></canvas>
</el-main>
</el-container>
</el-dialog>
</template>
<script>
import QRCode from 'qrcode'
export default {
name: 'QRCode',
props: {
orderNumber: {
type: String,
default: ''
},
nameOn: {
type: String,
default: ''
}
},
data () {
return {
visible: false
}
},
methods: {
// 初始化
init () {
this.visible = true
this.$nextTick(() => {
console.log(this.orderNumber, 'orderNumber')
// console.log(this.nameOn, 'name')
if (this.orderNumber) {
// this.viewImgVisible = true
// 生成二维码
let opts = {
errorCorrectionLevel: 'H',
type: 'image/jpeg',
rendererOpts: {
quality: 0.3
}
}
console.log(opts, 'opts')
let canvasEle = document.querySelector(`#${this.nameOn}`)
QRCode.toDataURL(canvasEle, this.orderNumber, opts, function (err) {
if (err) throw err
})
}
})
}
}
}
</script>
<style scoped>
.canvas {
margin-left: 10%;
width: 80% !important;
height: 80% !important;
}
</style>
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/
我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article