介绍

​ vue3+ts的一些自定义指令

NPM官方源安装

npm i -g nrm
nrm use npm
npm i @yhwang911/yh-directives

使用

在mian.ts文件中引入
import { YhDirectivesPlugin } from '@yhwang911/yh-directives'
app.use(YhDirectivesPlugin)

鼠标划过 v-hover

<template>
  <div>
    <div class="box1" v-hover="{ backgroundColor: 'green', color: 'white' }">
      失败乃你之母
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
.box1 {
  background-color: red;
  color: black;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}
</style>

v-infinite-scroll

<template>
  <div v-infinite-scroll="loadMoreData" class="box">
    <h3>InfiniteScrollDemo</h3>
  </div>
</template>

<script setup  lang="ts">
const loadMoreData = () => {
  console.log("loadMoreData");
};
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  height: 2000px;
  background-color: red;
}
</style>

v-lazy

<template>
  <div>
    <img
      v-lazy="'/vite.svg'"
      src="https://lekuzhima.club/cdn/images/kitty.gif"
      alt=""
    />

    <!-- <img src="/default.webp" alt="" /> -->

    <MyLazyImg
      class="mli"
      loading="/vite.svg"
      src="https://lekuzhima.club/cdn/images/dameizi.jpg"
    ></MyLazyImg>
  </div>
</template>

<script setup lang="ts">
import MyLazyImg from "@/components/MyLazyImg.vue";
</script>

<style lang="scss" scoped>
.mli {
  width: 100px;
}
</style>

v-pin

<template>
  <div class="pin-demo-root">
    <h3>PinDemo</h3>

    <!-- 吸顶效果 -->
    <h3 v-pin="50" v-pin:left="500">吸顶效果</h3>

    <!-- 吸底效果 -->
    <h3 v-pin:bottom="10" v-pin:right="100">吸附底部</h3>
    <h3 v-pin:left="0">吸附左边</h3>
    <h3 v-pin:right="50">吸附右边</h3>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.pin-demo-root {
  width: 2000px;
  height: 2000px;
}
</style>

v-throttle

<template>
  <form action="#" v-throttle:submit="{ delay: 3000, handler: onSubmit }">
    <input type="text" placeholder="please enter username"/>
    <input type="password" placeholder="please enter password"/>
    <button>submit</button>
  </form>

  <button v-throttle:click="{ delay: 3000, handler: onClick }">click me</button>
</template>

<script setup  lang="ts">
const onSubmit = () => console.log("onSubmit");
const onClick = () => console.log("onClick");
</script>

<style lang="scss" scoped></style>

v-click-outside

<template>
  <div ref="popupRef" class="popup" v-click-outside="closePopup"></div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const popupRef = ref(null);

const closePopup = () => {
  console.log("closePopup");
  (popupRef.value! as HTMLElement).classList.add("hidden");
};
</script>

<style lang="scss" scoped>
.popup {
  width: 600px;
  height: 400px;
  margin: 100px auto;
  border: 1px solid black;
}

.hidden {
  display: none;
}
</style>