简单弹窗实现
<template> <view class="modal-wrap"> <view class="modal-inner"> <view class="modal-title"></view> <scroll-view class="modal-content" scroll-y scroll-with-animation> <view class="content"> <rich-text :nodes="opts.content" /> </view> </scroll-view> <view class="modal-footer"> <view class="modal-btn" v-if="opts.showCancel" @click="confirm"> {{ opts.cancelText }} </view> <view class="modal-btn" @click="confirm"> {{ opts.confirmText }} </view> </view> </view> </view> </template> <script lang="ts"> import { defineComponent } from "vue"; interface IProps { isVisible: boolean; title: string; content: string; showCancel: boolean; confirmText?: string; cancelText?: string; } export default defineComponent({ setup() { const defaultOptions: IProps = { isVisible: false, title: "标题", content: "内容", showCancel: false, confirmText: "确认", cancelText: "取消", }; let opts: any = {}; return { defaultOptions, opts, }; }, }); </script> <style lang="stylus" scoped> .modal-wrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background-color: rgba($color: #000000, $alpha: 0.4); z-index: 9999; .modal-inner { width: 560rpx; background-color: #ffffff; border-radius: 8rpx; box-sizing: border-box; .modal-title { font-size: 36rpx; font-weight: 400; text-align: center; margin-top: 58rpx; color: #000000; } .modal-content { max-height: 200rpx; line-height: 48rpx; font-size: 30rpx; overflow: auto; padding: 30rpx 60rpx; color: #333333; box-sizing: border-box; .content >>> .center { text-align: center; } } .modal-footer { display: flex; align-items: center; justify-content: center; height: 107rpx; border-top: 1rpx solid #f7f7f7; .modal-btn { flex: 1; text-align: center; &.confirm-btn { color: #2279ea; } } } } } </style>
使用
onReady() { let self: any = this; self.$refs.uniModal.show({ }) },
ref使用,只有页面完成渲染才会有ref实例,
微信:onShow, onReady,onLoad
支付宝: onReady