微信公众号二维码长按识别时，不是识别，而是放大

<template>
    <div class="wzhalertcode" :style="{visibility:txqrcodeFlag?'visible':'hidden'}">
        <div class="qrcodeBox">
            <div class="qrcodeBoxtitle">{{wzhtopstr}}</div>
            <img :src="txqrcodeImg"  />
            <p class="qrcodeBoxMsg">-{{short_name}}-</p>
            <slot></slot>
            <div @click="txqrcodetap" class="qrcodeclose">关闭</div>
        </div>
    </div>
</template>
<script>
export default {
    name:'wzhalertcode',
    props: {
        txqrcodeFlag:{
            type:Boolean,
            default:false
        },
        short_name: {
            type: 'string',
        },
        txqrcodeImg:{
            type: 'string',
        },
        wzhtopstr:{
            type: 'string',
        },
    },
    data(){
        return {
        };
    },
    created(){
    },
    methods:{
        txqrcodetap:function(){
           this.$emit('update:txqrcodeFlag',false);
        },
    },
    mounted(){
    }
}
</script>
<style scoped  lang="less">
.wzhalertcode{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    visibility: hidden;
    z-index: 10000;
    background-color: rgba(0,0,0,0.4);
    .qrcodeBox{
        display: block;
        width: 450px;
        background-color: #fff;
        border-radius: 20px;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, 0%);

        display: -webkit-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        z-index: 20;

        max-height: 90%;
        -webkit-box-direction: normal;
        -ms-user-select: none;
        max-width: 100%;
        -webkit-box-orient: vertical;


        .qrcodeBoxtitle{
            font-size: 16px;/*no*/
            text-align: center;
            height: 60px;
            line-height: 60px;
            font-weight: bold;
            padding-top: 8px;/*no*/
            padding-bottom: 15px;/*no*/
        }
        img{
            display: block;
            width:380px;
            margin:0 auto;
            max-width: 380px;
        }
        .qrcodeBoxMsg{
            font-size: 12px;/*no*/
            text-align: center;
            padding-top: 10px;/*no*/
            margin-bottom: 20px;
        }
        .qrcodeclose{
            display: block;
            width: 100%;
            text-align: center;
            height:60px;
            line-height: 60px;
            font-size: 14px;/*no*/
            color: #999;
            border-top: 1px solid #ccc;/*no*/
        }

    }
}
</style>

 

我用的是vue,这是个组件