微信小程序——弹窗组件

1、父组件.wxml

<view class="content-item-fd" wx:if="{{item.examine===0}}"><button class="weui-button" type="primary" bindtap="auditDialogHidden" size="mini" data-item="{{item}}">审核</button></view><view><auditDialog title="审核" manaStatus="{{manaStatus}}" bind:cancel='handlecancel' bind:confirm="handleConfirm"></auditDialog>
</view>

2、父组件.json

 "usingComponents": {"auditDialog":"../../../components/auditDialog/auditDialog"}

2、父组件.js

    data: {manaStatus: false, //弹窗listId:''},
// 弹窗-展示auditDialogHidden(e) {console.log(e.target.dataset.item)this.setData({listId:e.target.dataset.item.id,manaStatus: true})},// 弹窗-取消按钮handlecancel() {this.setData({manaStatus: false})},
//确定按钮handleConfirm(e) {console.log('aaaaaa', e.detail)//子组件传过来的参数//关闭弹窗this.setData({manaStatus: false})}

3、子组件.wxml

<!--components/auditDialog/auditDialog.wxml-->
<view class="mask" wx:if="{{manaStatus}}"><view class="dialog"><!-- 弹窗标题-父组件设置 --><view class="dialog-header">{{title}}</view><view class="dialog-body"><view class="page-section"><textarea class="weui-input2" bindblur="InputReason" model:value="{{examineReason}}"  placeholder="请输入原因" /></view></view><view class="dialog-footer"><view class="dialog-btn" bindtap='handleCancel'>取消</view><view class="dialog-btn" bindtap='handleConfirm'>确认</view></view></view></view>

4、子组件.js

// components/auditDialog/auditDialog.js// components/dialog/dialog.js
var api = require("../../request/api")
Component({/*** 组件的属性列表，父组件传值过来要在这设置*/properties: {title: {type: String,value: "标题"},content: String,manaStatus: {type: Boolean,value: false,}},/*** 组件的初始数据*/data: {examineReason: '',name:'',id:'',},/*** 组件的方法列表*/methods: {handleCancel() {//调用父组件方法this.triggerEvent("cancel")},handleConfirm() {let name = this.data.namelet examineReason = this.data.examineReasonlet id = this.data.id//调用父组件方法并传值给父组件this.triggerEvent('confirm', {name,examineReason,id})},//textarea，双向赋值InputReason: function (e) {this.setData({examineReason: e.detail.value})},}
})

4、子组件.wxss

/* components/auditDialog/auditDialog.wxss */
.mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgb(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: center;z-index: 1000;
}
.dialog {width: 600rpx;height: auto;background: #fff;border-radius: 30rpx;
}.dialog-header {/* padding: 20rpx 0; */text-align: center;font-size: 36rpx;
margin: auto;
margin-left: -60rpx;
}.dialog-footer {display: flex;
}.dialog-btn {flex: 1;text-align: center;padding: 10rpx 0;border-top: 1rpx solid #eee;
}.dialog-btn:first-child {border-right: 1rpx solid #eee;
}.dialog-body {/* padding: 30rpx; */width: auto;height: auto;
}
.page-section{width: 95%;height: auto;
padding-left: 10rpx;
border-radius: 12%;
padding-bottom: 50rpx;}
.page-section input{
border-bottom: solid 2rpx rgb(180, 180, 180);
margin-bottom: 10rpx;
padding-left: 5rpx;
border-radius: 2%;
font-size: 34rpx;
width: 100%;
word-wrap: break-word;word-break: normal;
}.weui-input{width: 100%;height: 80rpx;
}
.weui-input2{width: 100%;height: 80rpx;padding-left: 25rpx;font-size: 30rpx;
}.dialog-footer {/* text-indent: 72rpx; */color: #333;
}
.dialog-btn{width: auto;height: auto;
}

微信小程序——弹窗组件相关推荐

微信小程序_map组件实现定位
微信小程序_map组件实现定位 map组件这是官方提供的地图组件,很多复杂的功能我暂时没有接触到,而且有的效果似乎只有企业可以使用.我在这里就简单的实现一下map组件的定位用户的位置的功能. 下面的 ...
微信小程序之组件 —— 微信小程序教程系列（19）
什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...
微信小程序电子签名组件
微信小程序电子签名组件,封装抽离可复用,签名成功输出base64和临时文件路径,解决vant弹窗中使用导致背景滚动问题,宽度自适应,高度设置百分比,开箱即用! 文章目录一.效果图二.组件完整代码示 ...
php自定义弹窗,微信小程序弹窗自定义的代码
这篇文章主要介绍了微信小程序弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下微信小程序弹窗首先wxml代 ...
微信小程序相机组件的使用
微信小程序相机组件的使用这一段时间微信小程序更新频率越来越快,几乎每周一更.2017.10.13又更新了相机组件,可谓美翻了,下面让我们来看一下都更新了什么吧. 一.关于更新 ...
Wuss Weapp一款高质量，组件齐全，高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库文档 https://phonycode.github.io/wuss-weapp 扫码体验使用微信扫一扫体验小程序组 ...
Wuss Weapp 一款高质量，组件齐全，高自定义的微信小程序UI组件库
快速上手在开始使用 Wuss Weapp 之前,你需要先阅读微信小程序自定义组件的相关文档. Github 地址(喜欢的可以点个star~) Github Wuss Weapp 文档 wuss- ...
Wuss Weapp 微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库文档 phonycode.github.io/wuss-weapp 扫码体验使用微信扫一扫体验小程序组件示例演示图片 ...
Wuss Weapp 一款高质量，组件齐全，高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库文档 https://phonycode.github.io/wuss-weapp 扫码体验使用微信扫一扫体验小程序组 ...

微信小程序——弹窗组件

微信小程序——弹窗组件相关推荐

最新文章

热门文章