Render 添加浮动显示---二维码信息

 render: (h, params) => {
          return [h('Poptip', {
            props: {
              trigger: 'hover',
              // trigger: 'click',
              transfer: true,
              title: '二维码 ' + params.row.deviceno
              // content: params.row.name
            },
            on: {
              'on-popper-show': () => {
                document.getElementById('qrCodeDiv_' + params.row.deviceno).innerHTML = ''
                this.$nextTick(function() {
                  new QRCode(document.getElementById('qrCodeDiv_' + params.row.deviceno), {
                    text: params.row.deviceno,
                    width: 200,
                    height: 200,
                    colorDark: '#333333', // 二维码颜色
                    colorLight: '#ffffff', // 二维码背景色
                    correctLevel: QRCode.CorrectLevel.L // 容错率,L/M/H
                  })
                });
              },
              'on-popper-hide': () => {
                document.getElementById('qrCodeDiv_' + params.row.deviceno).innerHTML = ''
              }
            }
          },
          [
            h('div', {
              slot: 'content',
              attrs: {
                id: 'qrCodeDiv_' + params.row.deviceno
              }
              // style: {
              //   margin: "25px"
              // }
            }, ''),
            h('Icon', {
              props: {
                type: 'person'
              }
            }),
            h('Tag', {
              style: {
                cursor: 'pointer'
              }
            },
            [ h('strong', {
              style: {
                color: 'red'
              }
            },
            params.row.deviceno)])
          ])];
        }

  

 

posted @ 2022-01-06 11:45  Barry_Song  阅读(79)  评论(0编辑  收藏  举报