小程序篇一：组件template内写事件

 

confirm.wxml代码如下

<template name="wxConfirm">
  <view class='confirm' wx:if="{{showConfirm}}">
    <view class='confirm-content'>
      <view class='confirm-top'>
        <text>抹零</text>
      </view>
      <view class='confirm-input'>
        <input type='digit' placeholder='请输入抹零金额' ></input>
      </view>
      <view class='confirm-bottom'>
        <text catchtap='closeconfirm'>取消</text>
        <text>确定</text>
      </view>
    </view>
  </view>
</template>

.confirm{
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index:2;
}
.confirm-content{
  width: 640rpx;
  margin-left: -320rpx;
  background-color: #fff;
  position: absolute;
  top:30%;
  left:50%;
  border-radius: 10rpx;
}
.confirm-top{
  padding: 30rpx 10rpx;
}
.confirm-top text{
  padding: 0 20rpx;
}
.confirm-input{
  padding: 30rpx 10rpx;
}
.confirm-input input{
  border:1px solid #F0F4F5;
  padding: 20rpx 10rpx;
}
.confirm-bottom{
  width: 100%;
  display: flex;
}
.confirm-bottom text{
  width: 50%;
  padding: 40rpx;
  text-align: center;
}

在sale.wxml引入confirm.wxml

sale.wxml代码如下

<import src="../../components/confirm/confirm.wxml"/>
<template is="wxConfirm" data="{{showConfirm:showConfirm}}"></template>
<view>
    <text class='discounts-txt' bindtap='setzero'>-抹零</text>
</view>

Page({
  data: {
    showConfirm:false
  },
/**这是sale的点击事件*/
  setzero(){
    let that=this;
    that.setData({
      showConfirm: !that.data.showConfirm
    })
  },
/**这是template那个取消按钮的点击事件*/
  closeconfirm() {
    let that = this;
    that.setData({
      showConfirm: !that.data.showConfirm
    })
  }
})