ExposeMachine

一个支持原生和vue的元素曝光工具

安装

npm i --save expose-machine

用法

1. 引入

import ExposeMachine from 'expose-machine'

new ExposeMachine({
  /* 需要被曝光元素的标记名, 默认expose-target */
  targetName: 'expose-target',

  /* 元素曝光比例的标记名, 默认expose-ratio */
  ratioName: 'expose-ratio',

  /**
   * 监测型元素的标记名
   * 监测型元素能动态监测内部元素的变化，并纳入曝光监测
   * 默认expose-observer
   */
  observerName: 'expose-observer',

  /* 元素曝光回调标记名, 默认expose-callback */
  callbackName: 'expose-callback',

  /* 单次曝光限制元素的标记名, 默认expose-only-once */
  exposeOnlyOnceName: 'expose-only-once',

  /* 曝光元素数据标记名, 默认expose-data */
  dataName: 'expose-data',

  /* 曝光的触发的支持比例, 默认[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] */
  ratioRange: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],

  /* 曝光的触发比例, 默认0 */
  ratio: 0,

  /* 默认的单次曝光限制, 默认false */
  exposeOnlyOnce: false,

  /* 默认的回调, 默认为空 */
  callback: (e) => {
    e.target // 曝光回调元素
    e.data // 曝光传递数据
  }
})

2.使用

目前仅支持原生和vue的使用，对于react的支持还在调研中

vue中使用

<template>
  <!--该层会监听内部的动态变化, 内部非动态变化的可以不加-->
  <div
    expose-observer
  >
    <!--
      1. 曝光component1
      2. 曝光比例为0.3
    -->
    <component1
      expose-target
      expose-ratio="0.3"
    />
    <!--
      1. 曝光component2
      2. 曝光比例为0.5
      3. 不允许多次曝光
      4. 使用私有回调
      5. 回调中会返回 e.data = { d1: data1, d2: data2 } 数据
    -->
    <component2
      expose-target
      expose-ratio="0.5"
      expose-only-once
      :expose-callback="callback"
      :expose-data-d1="data1"
      :expose-data-d2="data1"
    />

    <!--
      tag上的曝光数据如果有大写的话，需要用___识别符号
      如: dD -> d___d
    -->
    <div expose-target :expose-data-d___d="data1"></div>
  </div>
</template>

<script>
  onMounted(() => {
    new ExposeMachine({
      /* 默认的曝光回调 */
      callback: (e) => {
        console.log(e)
      }
    })
  })
</script>

原生中使用

与vue差别不大，但是不支持私有的callback，且属性值仅能传字符串