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

朱雀 2022-03-08 08:42 150阅读 0赞

![2019031418190514.png][]

confirm.wxml代码如下

.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;
    }

![20190314182120771.png][]

在sale.wxml引入confirm.wxml

sale.wxml代码如下

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
        })
      }
    })

[2019031418190514.png]: /images/20220308/e13bd8ba0cd64575a9afe5b88fac91ce.png
[20190314182120771.png]: /images/20220308/8a7107489158444fa92867418dba5bf4.png