Monitoring element in html

 

// Attach a scroll event listener

window.addEventListener('scroll', function() {

    const element = document.getElementById('tta');

    const rect = element.getBoundingClientRect();

    // Check if the element is in the viewport

    if (rect.top < window.innerHeight && rect.bottom >= 0) {

        console.log('Element is visible');

    } else {

        console.log('Element is not visible');

    }

})

const element = document.getElementById('tta');

const rect = element.getBoundingClientRect();

console.log('Left:', rect.left);

console.log('Top:', rect.top);

console.log('Right:', rect.right);

console.log('Bottom:', rect.bottom);

public vue library

1, create project and build

 npm create vite@latest hello-world-- --template vue

cd hello-world

npm install

2, delete unnecessary file

delete src/App.vue, src/style.css

3, set vite to library mode

https://vitejs.dev/guide/build#library-mode

// vite.config.js

import { resolve } from "path";

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

export default defineConfig({

  plugins: [vue()],

  build: {

    lib: {

      // Could also be a dictionary or array of multiple entry points

      entry: resolve(__dirname, "src/main.js"),

      name: "HelloWorld",

      // the proper extensions will be added

      fileName: "hello-world",

    },

    rollupOptions: {

      // make sure to externalize deps that shouldn't be bundled

      // into your library

      external: ["vue"],

      output: {

        // Provide global variables to use in the UMD build

        // for externalized deps

        globals: {

          vue: "Vue",

        },

      },

    },

  },

});

// package.json

  "name": "hello-world",

  "private": false,

  "version": "0.0.0",

  "type": "module",

  "files": ["dist"],

  "main": "./dist/hello-world.umd.cjs",

  "module": "./dist/hello-world.js",

  "exports": {

    ".": {

      "import": "./dist/hello-world.js",

      "require": "./dist/hello-world.umd.cjs"

    },

    "./dist/style.css": "./dist/style.css"

  },

// main.js

import HelloWorld from "./components/HelloWorld.vue";

export { HelloWorld };

4,  run following command in project folder

npm link

5, link to other local project

npm link hello-world


6, test library
<script setup>
import { HelloWorld } from "hello-world";
import "hello-world/dist/style.css";
</script>
<template>
  <hello-world msg="large"></hello-world>
</template>
<style></style>