微信小程式 彈窗元件
阿新 • • 發佈:2020-08-13
效果圖
資料夾列表
popup.wxml
<view class="wx-popup" hidden="{{flag}}"> <view class='popup-container'> <view class="wx-popup-title">{{title}}</view> <view class="wx-popup-con">{{content}}</view> <view class="wx-popup-btn"> <button class="btn-no"bindtap='_error' style="font-weight: 400;">{{btn_no}}</button> <button type="primary" plain="true" class="btn-ok" bindgetuserinfo="getUserInfo" open-type="getUserInfo" style="font-weight: 400;border:none;">{{btn_ok}}</button> </view> </view> </view>
popup.wxss
/* components/popup.wxss */ .wx-popup { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); } .popup-container { position: absolute; left: 50%; top: 50%; width: 80%; max-width: 600rpx; border: 2rpx solid #ccc; border-radius: 10rpx; box-sizing: bordre-box; transform: translate(-50%, -50%); overflow: hidden; background: #fff; } .wx-popup-title { width: 100%; /* padding: 20rpx; */ text-align: center; font-size: 40rpx; padding-top: 25rpx; } .wx-popup-con { /* margin: 65rpx 10rpx; */ text-align: center; color: gray; margin-bottom: 75rpx; width: 100%; margin-top: 60rpx; } .wx-popup-btn { display: flex; justify-content: space-around; border-top: 2rpx solid #dedede; } .wx-popup-btn button { display: flex; align-items: center; justify-content: center; width: 50%; height: 88rpx; background: none; } .btn-no{ border-right: 1px solid #dedede; }
popup.json
{ "component": true }
popup.js
Component({ options: { multipleSlots: true // 在元件定義時的選項中啟用多slot支援 }, /** * 元件的屬性列表 */ properties: { title: { // 屬性名 type: String, // 型別(必填),目前接受的型別包括:String, Number, Boolean, Object, Array, null(表示任意型別) value: '登入提示' // 屬性初始值(可選),如果未指定則會根據型別選擇一個 }, // 彈窗內容 content: { type: String, value: '由於您尚未登入,請先登入' }, // 彈窗取消按鈕文字 btn_no: { type: String, value: '稍後登入' }, // 彈窗確認按鈕文字 btn_ok: { type: String, value: '立即登入' } }, /** * 元件的初始資料 */ data: { flag: true, }, /** * 元件的方法列表 */ methods: { //隱藏彈框 hidePopup: function () { this.setData({ flag: !this.data.flag }) }, //展示彈框 showPopup () { this.setData({ flag: !this.data.flag }) }, /* * 內部私有方法建議以下劃線開頭 * triggerEvent 用於觸發事件 */ _error () { //觸發取消回撥 this.triggerEvent("error") }, _success () { //觸發成功回撥 this.triggerEvent("success"); }, // 小程式註冊獲取使用者資訊 getUserInfo(e) { var self = this; console.log("-----------"); console.log(e.detail); // 拒絕授權 if (e.detail.errMsg === "getUserInfo:fail auth deny") { wx.showToast("由於您尚未授權登入,後續操作將受影響。"); return false; } // 允許授權 if (e.detail.errMsg === "getUserInfo:ok" && e.detail.iv.length > 0) { wx.login({ success: function (res) { loginCodeNew = res.code; // 呼叫伺服器介面 } }); } }, } })
index.wxml
<view class="container"> <view class="userinfo" style="margin-top: 300rpx;"> <button bindtap="showPopup" style="background-color: #fdad0e;color: #fff;"> 點我 </button> </view> <popup id='popup' bind:error="_error" bind:success="getUserInfo"></popup> </view>
index.json
{
"usingComponents": {
"popup": "/components/popup/popup"
}
}
index.js
var app = getApp() Page({ onReady: function () { //獲得popup元件 this.popup = this.selectComponent("#popup"); }, showPopup() { this.popup.showPopup(); }, //取消事件 _error() { console.log('你點選了取消'); this.popup.hidePopup(); }, //確認事件 getUserInfo(){ // console.log('你點選了確認'); this.popup.getUserInfo(); }, })