How to call jq-signature on popup component?

Questions
1

Hi guys, I try to call jq-signature on popup component. It can only works on dynamic creating mode. But it did not call the func outside the creating function. my test code as follow :

createPopup: function () {
  const that = this;
      //
  if(!that.popup) {
    that.popup = that.$f7.popup.create({
      content:'' +
        '<div class="popup">\n' +
        '  <div class="page">\n' +
        '    <div class="navbar">\n' +
        '      <div class="navbar-inner">\n' +
        '        <div class="title">Dynamic Popup</div>\n' +
        '        <div class="right"><a href="#" class="link popup-close">Close</a></div>\n' +
        '      </div>\n' +
        '    </div>\n' +
        '    <div class="page-content">\n' +
        '      <div class="block">\n' +
        '         <div class="js-signature"\n' +
        '                   data-width="400"\n' +
        '                   data-height="200"\n' +
        '                   data-border="1px solid #1ABC9C"\n' +
        '                   data-background="#aaa"\n' +
        '                   data-line-color= \'#ABCDEF\'\n' +
        '                   data-auto-fit="true"></div>' +
      //
        '        <p><button id="clearBtn" @click="clearCanvas();">清空</button>' +
        '           <button id="saveBtn" @click="saveSignature();" disabled>保存</button></p>\n' +
        '         <div id="signature"></div>' +
        '      </div>\n' +
        '    </div>\n' +
        '  </div>\n' +
        '</div>' +
        ''.trim(),
    });
  }
  that.popup.open();
  $('.js-signature').jqSignature({width: 400});
  $('.js-signature').on('jq.signature.changed', function() {
    $('#saveBtn').attr('disabled', false);
  });
},

I mean function “clearCanvas” and “saveSignature” did not works.
I will appreciate if there have any reply.

1 Like
2

哥们儿，你这还是没清楚F7的组件加载方式。
严格说F7的popup不过是个模板，为了性能丢弃了一些基础组件的方法，也不是干这样的事情用的啊
没说popup支持类似router组件的加载啊，所以@click没法绑定到组件的methods
如果你非要这样用，那就自己加一个
$(document).on(‘click’,’#clearBtn’,clearCanvas());
委托绑定一下

3

make it routable

https://framework7.io/kitchen-sink/core/
console:

app.views.current.routes.unshift({
  path:'/some-page/',
  popup:{
    component:{
      template:`
        <div class="popup">
          <div class="view">
            <div class="page">
              <div class="navbar">
                <div class="navbar-inner">
                  <div class="title">{{title}}</div>
                </div>
              </div>
              <div class="page-content">
                <div class="block text-align-center">
                  <a @click="clearCanvas">clear Canvas</a>
                </div>
                <div class="block text-align-center">
                  <a @click="saveSignature">save Signature</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      data:function(){
        return {
          title:'popup component'
        }
      },
      methods:{
        clearCanvas:function(e){
          this.$app.dialog.alert('clear Canvas');
        },
        saveSignature:function(e){
          this.$app.dialog.alert('save Signature');
        }
      }
    }
  }
});
app.views.current.router.navigate('/some-page/');
4

啊，原来是这样啊。知道啦。
我还真没有注意，多谢提醒。

5

Hi pipl, thank u for ur reply.

6

Did JS Signature work well with Framework7?