web端新手指引、冷启动、通用组件

桃扇骨 2022-10-19 04:28 210阅读 0赞

1.  Attribute

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>isModal</td> 
   <td>是否需要遮罩层</td> 
   <td>Boolean</td> 
   <td>true / false</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>guideStyle</td> 
   <td>引导框的位置绝对定位</td> 
   <td>String</td> 
   <td>top: 70px; left: -193px;</td> 
   <td>top: 62px; right: 4px;</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>指引标题</td> 
   <td>String</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>指引内容</td> 
   <td>String</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>lineStyle</td> 
   <td>引导线的位置绝对定位</td> 
   <td>String</td> 
   <td>top: -15px;left: 40px;</td> 
   <td>top: -15px;left: 40px;</td> 
  </tr> 
  <tr> 
   <td>stepsActive</td> 
   <td>当前项下标</td> 
   <td>Number</td> 
   <td></td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>stepsNumber</td> 
   <td>步骤数</td> 
   <td>Number</td> 
   <td></td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>activeColor</td> 
   <td>选中颜色</td> 
   <td>String</td> 
   <td></td> 
   <td>#197AFB</td> 
  </tr> 
 </tbody> 
</table>

1.  Methods

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>exitGuide</td> 
   <td>点击退出引导</td> 
   <td>无（关闭指引）</td> 
  </tr> 
  <tr> 
   <td>guideNext</td> 
   <td>下一步</td> 
   <td>index,(下一步的下标)</td> 
  </tr> 
 </tbody> 
</table>

4.Tips

每一步可以使用一次<ColdStart>组件，或者根据每一步去替换组件的参数

5.使用案例

（1）. 所有步骤都在同一页面，不跨组件  
将引进的组件ColdStart与你需要绑定的对象（例如按钮或者文字）放在一起，并给父级节点加上样式：position: relative；以适配屏幕尺寸变化。

![image][]

<div style="position: relative" v-if="isGuideCompleted">
      <div
        class="save-strategy-btn"
        :style="{ 'z-index': stepsActive === 0 ? '9999' : '1' }"  // 修改z-index是为了高亮你要突出的对象
      >
        存为策略组
      </div>
      <ColdStart
        v-if="stepsActive === 0"
        title="存为策略组"
        content="广告信息配置完成后，存为策略组可快速复用和分析广告搭建策略"
        guideStyle="bottom: 66px;right: 227px;top:auto;"
        lineStyle="top: 183px;right: -13px;left: initial;transform: rotate(-90deg);"
        :stepsActive="stepsActive"
        :isModal="false"
        @exit="exitGuide"
        @next="guideNext"
      ></ColdStart>
    </div>

（2）引导步骤跨越子组件，快速定位你需要展示的对象

建议思路是：打开弹窗后先快速定位你需要高亮的元素，这样他的位置是固定的，贴近顶部或底部，然后再根据需要的效果控制引导框和引导线的位置。

this.$nextTick(() => {
              document.querySelector(".fixed-module").scrollIntoView(true);
            });

![image][image 1]  
截图中打开的弹窗是自带遮罩层的，所以此时设置ColdStart组件的isModal = false, 不然会重复遮罩层，弹窗效果的冷启动，建议以弹窗为父级，因为弹窗的大小和位置是固定的。

<el-dialog
        :visible.sync="visible"
        :close-on-click-modal="false"
        :before-close="handleCancel"
        custom-class="cl-dialog--large"
      >
        
        <div v-if="stepsActive === 1">
          <div class="guide-modal1"></div> // 两个自定义模块遮罩层，留出空白的位置以达到高亮指引元素的效果
          <div class="guide-modal2"></div>
          <ColdStart
            title="保存策略组"
            content="<p>锁定内容，保存为固定变量，后续可快速复用；</p><p>不锁定内容，可作为广告的测试变量多次测试。</p>"
            guideStyle="right: 358px;top: 415px;width: 290px;height: 220px;"
            lineStyle="top: -7px;left: -11px;transform: rotate(90deg);"
            :stepsActive="stepsActive"
            :isModal="false"
            @exit="exitGuide"
            @next="guideNext"
          ></ColdStart>
        </div>
        
    </el-dialog>

**其余情况可以自行拓展，更详细的使用可以参照头条-程序化批量的冷启动 ； 或者主面板-广告管理-今日头条-媒体账户的冷启动**

**代码部分**

<template>
      <div>
        <div class="new-guide" v-if="isModal"></div>
        <div class="guide_operate" :style="guideStyle">
          <div class="guide_title">{
       { title }}</div>
          <div class="guide_content">
            <span v-html="content"></span>
          </div>
          <div class="lines" :style="lineStyle">
            <div class="verline"></div>
            <div class="lines_circle"></div>
          </div>
    
          <div class="guide_ct_bottom">
            <div class="circle-item">
              <div
                class="circle"
                v-for="(item, index) in stepsNumber"
                :key="`${item + 1}`"
                :style="{ background: index === stepsActive ? activeColor : '#E8EAEC' }"
              ></div>
            </div>
            <div class="circle-item">
              <div class="exit_guide" @click="exitGuide">退出引导</div>
              <div class="next" @click="guideNext(stepsActive + 1)" v-if="stepsActive != stepsNumber - 1">下一步</div>
              <div class="next" @click="exitGuide" v-else>立即探索</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      props: {
        isModal: {
          type: Boolean,
          default: true,
        },
        guideStyle: {
          type: String,
          default: "",
          require: true,
        },
        title: {
          type: String,
          default: "",
          require: true,
        },
        content: {
          type: String,
          default: "",
          require: true,
        },
        lineStyle: {
          type: String,
          default: "",
        },
        // 当前项
        stepsActive: {
          type: Number,
          default: 0,
          require: true,
        },
        // 步骤数
        stepsNumber: {
          type: Number,
          default: 3,
        },
        // 选中颜色
        activeColor: {
          type: String,
          default: "#197AFB",
        },
      },
      methods: {
        exitGuide() {
          this.$emit("exit");
        },
        guideNext(index) {
          this.$emit("next", index);
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    // 新手引导
    .new-guide {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      display: flex;
      margin: 0;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.46);
    }
    
    .guide_operate {
      position: absolute;
      top: 62px;
      right: 4px;
      z-index: 9999;
      box-sizing: border-box;
      width: 280px;
      height: 178px;
      padding: 24px;
      padding-bottom: 0;
      background: #fff;
      border-radius: 4px;
    }
    
    .lines {
      position: absolute;
      top: -15px;
      left: 40px;
      z-index: 9999;
      display: flex;
      flex-direction: row;
      align-items: center;
      transform: rotate(90deg);
    
      .verline {
        width: 48px;
        height: 2px;
        background: #197afb;
      }
    
      .lines_circle {
        width: 6px;
        height: 6px;
        background: #197afb;
        border-radius: 50%;
      }
    }
    
    .guide_title {
      margin-bottom: 16px;
      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-size: 16px;
      font-weight: bold;
      line-height: 16px;
      color: #333;
      text-align: left;
    }
    
    .guide_content {
      width: 100%;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      font-weight: normal;
      line-height: 21px;
      color: #333;
      text-align: left;
      white-space: pre-wrap;
    }
    
    .exit_guide {
      width: 64px;
      height: 16px;
      margin-right: 17px;
      margin-left: 42px;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      font-weight: normal;
      line-height: 14px;
      color: #999;
      cursor: pointer;
    }
    
    .next {
      width: 88px;
      height: 32px;
      font-family: MicrosoftYaHei;
      font-size: 12px;
      font-weight: normal;
      line-height: 32px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      background: #197afb;
      border-radius: 3px;
    }
    
    .guide_ct_bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      padding-top: 34px;
      position: absolute;
      bottom: 24px;
      width: 86%;
    
      .circle-item {
        display: flex;
        align-items: center;
        .circle {
          width: 4px;
          height: 4px;
          margin-right: 3px;
          border-radius: 50%;
        }
      }
    }
    </style>

[image]: /images/20221005/6c37f57389ae4b079c731f28ec669907.png
[image 1]: /images/20221005/c90aa9b525fd4bb5b62307281e7255f6.png