小程序点击一次按钮采集多个formid

用户1437675

发布于 2019-03-06 16:32:20

1.5K0

发布于 2019-03-06 16:32:20

文章被收录于专栏：Angular&服务Angular&服务

废话不多说,直接上代码

原理：是用事件穿透来实现的执行顺序是从内往外执行、所以最后执行的事件为formSubmit 事件，也是最外面的事件。

html 代码

<view style="position:relative">
    <form bindsubmit="formSubmit" report-submit="true">
        <button formType="submit" class="btn">
            <view class="vv">
                <form bindsubmit="formSubmit1" report-submit="true">
                    <button formType="submit" class="btn">
                        <view class="vv">
                            <form bindsubmit="formSubmit1" report-submit="true">
                                <button formType="submit" class="btn">
                                    <view class="vv">
                                        <form bindsubmit="formSubmit1" report-submit="true">
                                            <button formType="submit" class="btn">
                                                <view class="vv">
                                                    <form bindsubmit="formSubmit1" report-submit="true">
                                                        <button formType="submit" class="btn">
                                                            <view class="vv" style="margin:0 15px;">
                                                                formid
                                                            </view>
                                                        </button>
                                                    </form>
                                                </view>
                                            </button>
                                        </form>
                                    </view>
                                </button>
                            </form>
                        </view>
                    </button>
                </form>
            </view>
        </button>
    </form>
</view>

.btn {
    width: 100%;
    height: 0rpx;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
    position: absolute;
    top: 0;
    overflow: inherit;
    margin-bottom: 40px;
}

button::after {
    border: none;
}

.vv {
    background: #1AAD19;
    line-height: 2.55555556;
    font-size: 18px;
    text-align: center;
    top: 0;
    color: #fff;
    border: 0;
    border-radius: 5px;
}

JavaScript

{

 formSubmit: function (e) {
    this.formids = this.formids +  e.detail.formId ;
    console.log('所有的formid',this.formids);
    console.log(this.formids);
    this.formids = '';
  },
  formSubmit1: function (e) {
    this.formids = this.formids + e.detail.formId + ',';
  },
  formids: ''
}

这样很像官方的按钮组件样式。而且按钮位置也不浮动不过，唯一不足的是该按钮不占位置，所以我们需要给最父级view 添加伪样式，让按钮隔绝出来。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.02.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript