uniapp 自定义组件

简单弹窗实现

<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="cancel">
          {{ 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 = {};
　　 confirm() {
　　　　opts.onConfirm && opts.onConfirm();
　　　　opts = Object.assign({},opts, {isVisible: false})
　　}　
    return {
      defaultOptions,
      opts,
　　　 confirm
    };
  },
});
</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