闲来无事写个Component弹窗

建立文件夹showTip位于component下面:

对应Component四个文件搞好：

json:

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

js:

// component/showTip/showtip.js Component({ /** * 组件的属性列表 */ properties: { // 显示控制 is_show:{ type:Boolean, value:false }, // 标题 title: { // 属性名 type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个 }, // 弹窗内容 content: { type: String, value: '内容' }, // 按钮内容 btn: { type: String, value: '知道了' }, }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { /** * 关闭自定义弹窗 */ exitShowtip(){ this.setData({ is_show:!this.data.is_show, }) } }, })

wxss:

/* component/showTip/showtip.wxss */ .showtip-box{ width: 400rpx; height: 500rpx; background: #F5F5F5; border-radius: 30rpx; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 0 30rpx; } .showtip-box .title{ font-size: 32rpx; text-align: center; line-height: 80rpx; } .showtip-box .btn{ background: #0000FF; color: #fff; line-height: 70rpx; border-radius: 12rpx; text-align: center; font-size: 26rpx; margin: 30rpx 0 0 0; } .showtip-box .show-content{ height: 300rpx; font-size: 26rpx; color: #333; text-align: center; }

wxml:

<!--component/showTip/showtip.wxml--> <view class="showtip-box" wx:if="{{ is_show }}"> <view class="title">{{ title }}</view> <view class="show-content"> {{ content }} </view> <view class="btn" bindtap="exitShowtip">{{ btn }}</view> </view>

调用：在pages里随便建立一个，用于演示

谁调用谁json文件要引入

我建立index,那么index.json要引入

{ "usingComponents": { "showtip": "/component/showTip/showtip" } }

要调用wxml:

<showtip is_show='true' title='标题' content='我是内容'></showtip>