例:想要实现一些东西,比如在点击按钮的时候,希望按钮能有一些样式上的变化?(vue)
<wx-open-subscribe id="subscribe-btn" @success="successSubscribe($event,group)" @error="subErrorSubscribe">
<script type="text/wxtag-template">
<style>
.subscribe-btn{
height: 32px;
width: 58px;
}
</style>
<button class="subscribe-btn">订阅+1</button>
</script>
</wx-open-subscribe>
1. <wx-open-subscribe>该标签作为在html能正常使用的标签,其点击事件是否能自定义?
2. 如果 <wx-open-subscribe>标签没有点击事件(或其他实现的方案),想在插槽内实现,js要怎么写呢?
3. 有其他方式能更好的实现该需求么?
初次接触,可能是很浅显的问题,希望能有人能解答一二...谢谢
大哥,请问一下wx-open-subscribe只在微信开发者工具里点击能弹出来,放到真机上就怎么点都不生效是咋回事
请问您的<wx-open-subscribe>组件是怎么显示出来的呢?我的这个组件在页面中显示不出来
我vue是通过if/else来渲染不同dom来实现效果切换的,给你参考一下。
<wx-open-subscribe v-if="forms.join.subscribes.length > 0" style="width: 100%;height:26px;" :template="templates.join(',')" @success="handleSuccess($event)" @error="handleError" key="template-subscribe-on"> <script type="text/wxtag-template"> <style> .switch-btn{position:relative;width:50px;height:26px;border-radius:30px;float:right;appearance:none;} .switch-off {background-color:#f8f8f8;border:1px solid #f1f1f1;} .switch-off:after{position:absolute;left:2px;top:1px;content:""; height:22px;width:22px;border-radius:30px;background-color:#ffffff;} .switch-on {background-color:#4573ab;border:1px solid #35639b;} .switch-on:after{position:absolute;right:2px;top:1px;content:""; height:22px;width:22px;border-radius:30px;background-color:#ffffff;} </style> <button class="switch-btn switch-on"></button> </script> </wx-open-subscribe> <wx-open-subscribe v-else style="width: 100%;" :template="templates.join(',')" @success="handleSuccess($event)" @error="handleError" key="template-subscribe-off"> <script type="text/wxtag-template"> <style> .switch-btn{position:relative;width:50px;height:26px;border-radius:30px;float:right;appearance:none;} .switch-off {background-color:#f8f8f8;border:1px solid #f1f1f1;} .switch-off:after{position:absolute;left:2px;top:1px;content:""; height:22px;width:22px;border-radius:30px;background-color:#ffffff;} .switch-on {background-color:#4573ab;border:1px solid #35639b;} .switch-on:after{position:absolute;right:2px;top:1px;content:""; height:22px;width:22px;border-radius:30px;background-color:#ffffff;} </style> <button class="switch-btn switch-off"></button> </script> </wx-open-subscribe>