npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@yangchanghao/vue-directive-next

v0.0.1-alpha.12

Published

lots of custom vue directive

Downloads

3

Readme

@yangchanghao/vue-directive-next

关于@yangchanghao/vue-directive-next:

一些常用的vue3自定义指令,目前只支持vue3,并没有向下兼容,毕竟vue3已经成为vue-cli的默认版本了,后续会考虑如何兼容uni-app下的不同平台(上班摸鱼的时候写写,嘿嘿嘿),若插件内部的指令有bug,也希望使用的开发者反馈给我,并提出您的宝贵意见,大家一起学习。

联系方式

qq: 1225972361 (添加的时候说明是该npm包就好)

文档

详细使用文档

快速开始

1.下载

npm i @yangchanghao/vue-directive-next --save

2.vue项目src文件下新增declare.d.ts

declare module '@yangchanghao/vue-directive-next';

3.在src/main.ts下

import {createApp,App as AppProps} from 'vue'
import App from './App.vue';
// 引入指令
import directive from '@yangchanghao/vue-directive-next'
// 引入样式
import "../node_modules/@yangchanghao/vue-directive-next/style.css"

const app: AppProps = createApp(App);
app.use(directive)
app.mount('#app')

技术栈

  • [x] vite2
  • [x] vue3.x
  • [x] typescript
  • [x] pinia2.x
  • [x] vue-router4.x

指令基本使用方法

1. v-backtop 滚动条置顶

<!-- 父节点  -->
<div clas="parent">
   <!-- 子节点  -->
  <div class="child"></div>
  <!-- 点击该节点,父节点滚动条置顶 -->
  <div v-backtop class="backtop"></div>
</div>

2. v-copy 复制内容到剪切板

<button v-copy="copyParams">单击复制内容</button>
<button v-copy.dbclick="copyParams">双击复制内容</button>
import { ref } from 'vue';
const copyParams = ref({
  // 需要复制的内容
  content: '复制内容',
  // 回调函数
  callBack: ()=>console.log('复制成功')
})

3. v-debounce 函数防抖

<input type="text" placeholder="请输入" v-model="inputValue2"  v-debounce.input="debounceFunc" />
<input type="text" placeholder="请输入" v-model="inputValue2" v-debounce.input.3="debounceFunc" />
/**
 * @param eventName 函数时间类型 click,input,mousestart等
 * @param debounceTime 防抖时间 1,2,3...秒 默认为1
 */
// v-debounce."eventName"."debounceTime"
const debounceFunc = (e: Event)=>void

4. v-draggable 节点拖拽

注: .test_draggable的div节点必须设置position:relative,不然不会生效

<div class="test_draggable">
  <div v-draggable.limit="moveEvent" class="test_draggable_item">1</div>
  <div v-draggable.limitX class="test_draggable_item">2</div>
  <div v-draggable.limitY class="test_draggable_item">3</div>
  <div v-draggable.x class="test_draggable_item">4</div>
  <div v-draggable.y class="test_draggable_item">5</div>
  <div v-draggable class="test_draggable_item">6</div>
</div>
// v-draggable.draggabelType
enum EDraggable = {
    /** 不限制,x轴,y轴都可随意拖拽,哪怕超出父节点区域 */
    '':'',
    /** limit x轴,y轴都可随意拖拽,但不会超出父节点区域 */
    'limit':'limit',
    /** limitX x轴可拖拽,但不会超出父节点区域 */
    'limitX':'limitX',
    /** limitY Y轴可拖拽,但不会超出父节点区域 */
    'limitY':'limitY',
    /** x轴可拖拽,可以超出父节点区域 */
    'x':'x',
    /** y轴可拖拽,可以超出父节点区域 */
    'y':'y'
} 
/**
 * draggabelType: TDraggable;
 * @param EDraggable 拖拽类型
 */
/** 
 * @param top 距离相对定位父节点顶部距离
 * @param left 距离相对定位父节点左侧距离
*/
const mouseEvent = (top: number,left: number)=>void

5. v-ellipsis 文本超出省略号

注: .test_ellipsis的dom必须设置宽度

 <div v-ellipsis class="test_ellipsis">这是文本内容,这是文本内容, 这是文本内容</div>
 <div v-ellipsis="3" class="test_ellipsis">这是文本内容,这是文本内容, 这是文本内容这是文本内容,这是文本内容, 这是文本内容这是文本内容,这是文本内容, 这是文本内容</div>
// v-ellipsis 单行超出省略号
// v-ellipsis="n" n: number 多行超出省略号

6. v-empty 空状态骨架屏

<div>
  <button @click="checkEmptyParams">切换empty状态</button>
  <div v-empty="emptyParams">
    <div>11111</div>
    <div>2222</div>
    <div>3333</div>
  </div>
</div>
import { ref } from 'vue';
/** 图片 */
import vueLogo from "@/assets/logo.png";
const emptyParams = ref({
  // 是否显示空状态骨架屏
  visible: false,
  // 展示的文字
  content: "暂无数据",
  // 展示的图片
  emptyImgUrl: vueLogo,
})
/** 切换empty状态 */
const checkEmptyParams = () => {
  emptyParams.value = {
    ...emptyParams.value,
    visible: !emptyParams.value.visible,
  };
};

7. v-img-error 图片加载失败

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe59a51ac5f941e4a561a5121157875c~tplv-k3u1fbpfcp-watermark.image"
     v-img-error="vueLogo"
     width="100"
     alt=""
/>
import vueLogo from "@/assets/logo.png";
// v-img-error="vueLogo"
/**
 * 图片加载失败时,将vueLogo替换成img的src
 */

8. v-img-lazy 图片懒加载

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe59a51ac5f941e4a561a5121157875c~tplv-k3u1fbpfcp-watermark.image"
     v-img-lazy="vueLogo"
     width="100"
     alt=""
/>
import vueLogo from "@/assets/logo.png";
// v-img-lazy="vueLogo"
/**
 * 图片没有出现在窗口可视范围内时,img展示vueLogo,一旦出现,就显示设置的src
 */

9. v-load 加载状态

<el-button type="primary" @click="checkLoadOption">切换loading</el-button>
<div class="test_load" v-load="loadOption">内容</div>
import { ref } from 'vue'
const loadOption = ref({
  // 是否展示load状态
  visible: false,
  // load文字
  text: "Loading",
  // load的背景颜色
  background: "rgba(0,0,0,.3)",
});
/** 切换load状态 */
const checkLoadOption = () => {
  loadOption.value = {
    ...loadOption.value,
    visible: !loadOption.value.visible,
  };
};

10. v-longpress 长按事件

<button v-longpress="onLongpress">长按我试试</button>
/** 长按回调 */
const onLongpress = () => {
  console.log("触发长按事件,默认是2s后触发");
};

11. v-resize 监听dom尺寸变化事件

<textarea v-resize="onResize" cols="30" rows="10"></textarea>
interface IResizeProps {
    // 节点大小位置信息 包括width,height,top,left,bottom,right,x,y
    contentRect: DOMRectReadOnly;
    // 当前节点
    target: HTMLElement;
}
/** resize回调 */
const onResize = (info: IResizeProps) => {
  console.log(info);
};

12. v-screenfull 窗口全屏/非全屏

<div v-screenfull class="screen_item"></div>
// 内部会显示是否全屏的图标,点击该节点会触发窗口全屏或非全屏

13. v-throttle 函数节流

<input type="text" v-model="inputValue" placeholder="请输入文本" v-throttle.input="throttleFunc" />
<input type="text" v-model="inputValue" placeholder="请输入文本" v-throttle.input.3="throttleFunc" />
import { ref } from 'vue'
// v-throttle."eventName"."throttleTime"
/** 
 * @param eventName 事件类型 click,input,change,scroll等
 * @param throttleTime 节流事件 number 默认1 代表1s
*/
const inputValue = ref<number>('');
/** 节流函数 */
const throttleFunc = (e: any) => {
  console.log(e.target.value);
};

14. v-tooltip 悬停提示

<span v-tooltip="'点我查看更多点我查看更多点我查看更多'" >点我查看更多</span>
// 实现类element-plus里的<el-tooltip>组件功能,鼠标悬停在节点上会展示悬停提示

15. v-watermark 水印

<p><button @click="resetWaterMark">设置水印</button></p>
<div v-watermark="waterMarkParams" style="background: #f2f2f2">
  <div style="height: 300px">
    <el-button>按钮</el-button>
  </div>
</div>
import { ref } from 'vue'
const waterMarkParams = ref({
  // 水印文字
  content: "这是图片水印",
  // 水印转换的单个图片宽度
  width: 150,
  // 水印转换的单个图片高度
  height: 150,
  // 水印文字大小 px
  fontSize: 18,
});
/** 设置水印 */
const resetWaterMark = () => {
  waterMarkParams.value = {
    ...waterMarkParams.value,
    content:
      waterMarkParams.value.content === "Ant-design-vue"
        ? "Ant-desgin-mobile"
        : "Ant-design-vue",
  };
};