vue3自定义指令-根据内容超出范围显示省略号并自动添加title；自定义拖拽

vue3自定义指令-根据内容超出范围显示省略号并自动添加title

在我们日常开发中，经常会遇到标题等信息超出后自动隐藏并添加省略号，如果统一在标签上添加title属性，则会出现不管文字内容是多少都会出现

使用方式： 直接在标签上添加 v-ellipsis，如一行就超出隐藏 v-ellipsis， 多行 v-ellipsis=“行数”

<!-- 一行超出隐藏 -->
<div class="text" v-ellipsis>不安于小成，然后足以成大器；不诱于小利，然后可以立远功。</div>
<!-- 两行超出隐藏 -->
<div class="text" v-ellipsis="2">不安于小成，然后足以成大器；不诱于小利，然后可以立远功。不安于小成，然后足以成大器；不诱于小利，然后可以立远功。</div>
<!-- 三行超出隐藏 -->
<div class="text" v-ellipsis="3">不安于小成，然后足以成大器；不诱于小利，然后可以立远功。</div>

.text {
  width: 300px;
  border: 1px solid #fff;
  padding: 3px;
  border-radius: 5px;
  margin-bottom: 30px;
}

1. 创建 directive 文件并在main.ts 文件中导入

import { ellipsis } from './directive/index'

.directive('ellipsis', ellipsis)

2. 添加自定义指令

import { Directive, DirectiveBinding } from "vue";

/**
 * 自定义指令：根据显示信息是否超出显示省略号动态添加title
 * 行数不传默认为 1
 */
export const ellipsis: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const rowNum: number = Number(binding.value);
    el.style.overflow = 'hidden';
    if (rowNum) {
      el.style.display = '-webkit-box';
      el.style.webkitLineClamp = String(rowNum);
      el.style.webkitBoxOrient = 'vertical';
      if (el.clientHeight < el.scrollHeight) {
        el.title = el.innerText;
      }
    } else {
      el.style.textOverflow = 'ellipsis';
      el.style.whiteSpace = 'nowrap';
      if (el.clientWidth < el.scrollWidth) {
        el.title = el.innerText;
      }
    }
  }
};

 

效果图
一行超出范围显示省略号并自动添加 title 属性

两行超出范围显示省略号并自动添加 title 属性

两行显示完成不添加省略号并不添加 title 属性

vue3自定义指令-鼠标拖拽

在我们日常开发中，经常会遇到鼠标拖拽相关功能

使用方式： 直接在标签上添加 v-drag，如v-drag=" ‘.header’ " 如果不传则拖拽范围作用于添加指令元素，如果传了则则拖拽范围作用于当前添加指令元素后代为传递的选择器元素节点

新建 drag.ts 文件

import { Directive, DirectiveBinding } from "vue";

interface IPosition {
  x: number;
  y: number;
}

const movePosition: IPosition = {
  x: 0,
  y: 0
}

const drag: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    console.log(el, binding)
    const elementBox: HTMLElement = el;
    let dom = el;
    if (binding.value) {
      const _temp: HTMLElement = el.querySelector(binding.value);
      if(_temp) {
        dom = _temp
      }
    }

    const mouseDownHandel = (event: MouseEvent) => {
      movePosition.x = event.pageX - elementBox.offsetLeft;
      movePosition.y = event.pageY - elementBox.offsetTop;
      event.currentTarget.style.cursor = 'move';
      window.onmousemove = mouseMoveHandel;
    }

    /**
   * 弹窗拖拽事件鼠标按下移动
   * @param event
   */
    const mouseMoveHandel = (event: { pageX: number; pageY: number; }) => {
      let moveLeft: string = event.pageX - movePosition.x + 'px';
      let moveTop: string = event.pageY - movePosition.y + 'px';
      elementBox.style.left = moveLeft;
      elementBox.style.top = moveTop;
    }

    /**
     * 弹窗拖拽事件鼠标弹起
     * @param event
     */
    const mouseUpHandel = (event: { currentTarget: { style: { cursor: string; }; }; }) => {
      window.onmousemove = null;
      event.currentTarget.style.cursor = 'move';
    }

    dom.addEventListener('mousedown', (evt: MouseEvent) => {
      mouseDownHandel(evt)
    }, false)
    dom.addEventListener('mouseup', (evt) => {
      mouseUpHandel(evt)
    }, false)

  }
}

export default drag;

<template>
<!-- 
    v-drag  不传选择器  则在 .model 元素上任意位置拖拽
    v-drag="'.header'"  则在 .model下的 .header 元素上任意位置拖拽
    v-drag="'.body'"  则在 .model下的 .body 元素上任意位置拖拽
  -->
<div class="model" v-drag="'.header'">
  <div class="header">header</div>
  <div class="body">body</div>
</div>
</template>

<script setup>
// 注意；使用 setup 语法糖时自定义指令需要用 v 开头
import vDrag from '@/directive/drag.ts' // 根据自己实际项目结构位置
</script>

<style lang="less" scoped>
.model {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 300px;
  height: 300px;
  border: 1px solid red;
  transform: translate(-50%, -50%);
  .header {
    width: 100%;
    height: 50px;
    border: 1px solid red;
  }
  .body {
    width: 100%;
    height: 250px;
    border: 1px solid red;
  }
}
</style>