小程式開發之模態框元件封裝
阿新 • • 發佈:2020-04-26
本文例項為大家分享了小程式模態框元件的封裝具體程式碼,供大家參考,具體內容如下
一、前言
對於模態框肯定大家都知道,諸如:Bootstartp、element-ui、layui等等都有自己的彈出層,並可以之定義內容,但是小程式的彈出層原生的太簡單,那麼我們如果自定義呢?
其實很簡單,就是一個遮罩、一個view內容區就搞定了!接下來看一下我自己封裝後的模態框效果:
感覺還可以哈!
二、模態框元件的使用
1.先在使用頁面的json註冊該元件
{ "navigationBarTitleText": "XXXX","usingComponents": { "print-popups": "/components/popups/popups" } }
2.使用元件
<view> <print-popups ifOpen='{{modelStatus}}' bind:ifClose='closeModel'> <view slot='popups_main' class='popups_main'> <view class='popups_item'>新增新裝置</view> <view class='popups_item print_name'> <input class='print_input' value='裝置1' auto-focus /> <view class='print_tip'>(點選裝置可編輯)</view> </view> <view class='popups_item print_id'> <input placeholder="請輸入新添裝置ID" /> <view class='print_id_check'>可用</view> </view> <button class='popups_item print_btn' type='primary' size='mini'>新增</button> </view> </print-popups> </view>
3.新增隱藏/顯示方法
Page({ /** * 頁面的初始資料 */ data: { modelStatus: false },/** * 點選按鈕開啟模態框 */ openModel () { const modelStatus = !this.modelStatus this.setData({ modelStatus}) },/** * 子元件觸發的事件 */ closeModel (event) { console.log(event.detail.value) this.setData({ modelStatus: event.detail.value }) } })
三、模態框元件原始碼
1.Json檔案
{ "component": true,"usingComponents": {} }
2.wxml檔案
需要在阿里圖示庫找一張close.png的圖片。
<!--components/popups/popups.wxml--> <view wx:if="{{ifOpen}}"> <view class='popups_shade' bindtap='popupsClose'></view> <view class='popups_content'> <image src='./images/close.png' class='popups_close' bindtap='popupsClose'></image> <slot name='popups_main'/> </view> </view>
3.wxss檔案
/* components/popups/popups.wxss */ /* 遮罩 */ .popups_shade { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.7; overflow: hidden; } /* 彈出層內容 */ .popups_content { width: 500rpx; height: 350rpx; overflow: hidden; position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; z-index: 1001; background: #FAFAFA; border-radius: 5px; } .popups_close { width: 30rpx; height: 30rpx; position: absolute; right: 3px; top: 3px; }
4.js檔案
// components/popups/popups.js Component({ options: { multipleSlots: true },/** * 元件的屬性列表 */ properties: { ifOpen: Boolean },/** * 元件的初始資料 */ data: { },/** * 父子元件通訊 * 元件的方法列表 */ methods: { popupsClose () { console.log('關閉彈出層' + this.properties.ifOpen) this.triggerEvent('ifClose',{ value: !this.properties.ifOpen}) } } })
四、思路
主要是使用slot插槽可以不需要定義內容,可以在使用元件的頁面自定義,這樣就可以很好提高擴充套件性!
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。