slot使用

2021-12-07  本文已影响0人  前端陈陈陈
// 子组件
<template>
  <div v-if="isShow">
    <!-- 弹出层 -->
    <div class="protocol_layer show">
      <div class="protocol_lytit">
        <h3>{{ title }}</h3>
        <a class="close" title="关闭" @click="_onHide"></a>
      </div>
      <div class="protocol_lycont">
        <div class="protocol_content">
          <slot></slot>
        </div>
      </div>
      <div class="protocol_lybtn">
// 这里需要加几个按钮,用slot 
        <slot name="nextStep"></slot>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="dialog_overlay" v-if="mask" @click="_onHide"></div>
  </div>
</template>
//父组件
    <popup
      v-model="protocol.show"
      :title="protocol.econtract_name"
      @onSure="protocol.onSureFunc"
    >
//  父组件使用插槽nextStep
      <template #nextStep>
        <div class="protocol_lybtn">
          <a>上一步</a>
          <a>下一步</a>
        </div>
      </template>
      <div v-html="protocol.econtract_content"></div>
    </popup>
image.png
上一篇下一篇

猜你喜欢

热点阅读