自定义弹窗组件

示例效果

• 实现一个自定义弹框组件，在点击一个底部按钮时打开。

目录结构：

root:
  - index.js
  - config.json
  - dialog1/
  	- index.js
  	- index.json
    - index.wxml
    - index.wxss

入口文件：index.js

module.exports = function (context, pluginService, pluginParam) {
    return {

        /**
         * 启用V2版本的自定义插件，必须
         */
        enableCustomPluginV2(){
            return true;
        },

        apply() {
            return [
                {
                    event: "form.render.before",
                    functional: function (pluginExecResult, options) {
                        options.buttons.forEach(it=>{
                            if(it.api_name==="button_testplugin__c"){//重写按钮button_testplugin__c的点击行为
                                it.onClick=function (){
                                    //通过context发送事件show-dialog1，通知dialog1弹窗组件触发显示
                                    context.emitEvent("show-dialog1", {test:654987})
                                }
                            }
                        })
                        return {
                            fixedComponents: [{
                                resource: "custom_plugin",//必须，固定写死
                                prop:{//必须，插件组件基本属性
                                    pluginInfo:pluginParam.describe,//必须，插件基本信息
                                    comInfo:{//必须，插件组件信息
                                        name: "dialog1",//必须，自定义组件的名称，根目录config.json文件中components节点中指向对应组件的key
                                        prop: {test: 1},//自定义组件属性，会透传到自定义组件customProp属性，格式不限
                                    }
                                }
                            }]
                        }
                    }
                }
            ]
        }
    }
}

配置文件：config.json

{
	"components":{
		"dialog1": "dialog1/index"
	},
	"main":"index.js"
}

自定义弹框组件：dialog1

dialog1/index.js

Component({
  properties: {
    context:{
      type:Object
    },
    customProp:{
      type:Object
    },
  },
  data: {
    dShow:false,//默认关闭状态
  },
  methods: {
    tapmask(){
      console.log("plugin dialog1 close")
      this.setData({
        dShow:false
      })
    },
    noop(){

    }
  },
  lifetimes:{
    attached() {
      let self = this;
      console.log("plugin dialog1 attached")
      //监听show-dialog1事件，触发展示弹框
      this.data.context.onEvent("show-dialog1", opt=>{
        console.log(opt)
        self.setData({
          dShow:true
        })
      })
    }
  }

});

dialog1/index.wxml

<view wx:if="{{dShow}}">
    <view class="dialog mask" bindtap="tapmask" catch:touchmove="noop"></view>
    <view class="dialog content" bindtap="tapmask" catch:touchmove="noop">
        <view  style="background: white;width: 260;height: 100px;border-radius: 12px;display: flex;flex-direction: column;">
            <view style="padding: 12px;align-self: center;">提示</view>
            <view style="padding: 12px;align-self: center;">联系人已存在</view>
        </view>
    </view>
</view>

dialog1/index.wxss

.dialog{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.mask {
    z-index: 20;
    background-color: black;
    opacity: 0.2;
}

.content {
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: center;

}

dialog1/index.json

{
  "component": true,
  "usingComponents": {
  }
}