组件封装|小程序封装弹窗组件组件封装|弹窗组件封装

小程序常用弹窗组件封装：
子组件
html部分

样式部分：

.mask { z-index: 100; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .75); text-align: center; }.pop-container { box-sizing: border-box; position: fixed; top: 50%; width: 100%; transform: translateY(-50%); padding-left: 95rpx; padding-right: 95rpx; text-align: center; }.mask-close { display: inline-block; margin-top: 50rpx; width: 80rpx; height: 80rpx; background: url(../../images/close.png) no-repeat; background-size: 100%; } // 自定义弹窗 .pop-content1 { position: relative; box-sizing: border-box; width: 601rpx; height: 734rpx; margin-top: -50rpx; border-radius: 20rpx; backgrount: white; text-align: center; padding-right: 33rpx; padding-top: 462rpx; }

js部分

> export default { data() { return { isShow: false }; }, props: ['run'], name: 'entrancePop', config: { component: true }, methods: { show(value) { this.isShow = true; this.$emit('run', true); } }, hide() { this.isShow = false; this.$emit('run', false); } } };

父组件调用

> import EntrancePop from '../../components/Pop/EntrancePop'; export default { components: { 'entrance-pop': EntrancePop }, methods: { noRoll(slide) { if (slide === true) { this.viewStyle = { position: 'fixed' }; } else if (slide === false) { this.viewStyle = {}; }} }}

【组件封装|小程序封装弹窗组件】弹窗组件的步骤大概就是这样啦希望可以帮助要需要的同学