vue-ellipsis-tooltip

vue3-Ellipsis

基于 Vue3 的超出宽度显示省略号和tooltips提示框

Install

npm install vue-ellipsis-tooltip --save

Attention

使用该组件时，需要注意父容器有宽度或者最大最小宽度，否则无法生效！

Preview

Usage

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <style>
      .wrapper{
        margin: 0 auto;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.cjs.prod.min.js"></script>
    <script src="./vEllipsis.js"></script>
</head>
<body>
    <div id="app">
        <div class="wrapper" :style="{ width: '200px' }">
          <span  v-ellipsis="{ rows: 1, text: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaazzzzzzzzzz' }" />
        </div>
        <div class="wrapper" :style="{ width: `200px` }">
          <k-ellipsis :rows="3" text=" A design is a plan or specification for the" />
        </div>
    </div>
    <script>
        const App = {
          data() {
            return {
              message: "Hello Element Plus",
            };
          },
        };
        const app = Vue.createApp(App);
        app.use(vEllipsis);
        app.mount("#app");
      </script>
</body>
</html>

<template>
  <div class="wrapper" :style="{ width: `${width}px` }">
    <kEllipsis
      :rows="options.rows"
      :text="options.text"
      :poperOptions="{
          effect: 'light'
        }"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import {kEllipsis} from "vue-ellipsis-tooltip"
const options = ref({
  rows: 1,
  text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
})

const width = ref(200)
</script>

<template>
  <div class="wrapper" :style="{ width: `${width}px` }">
    <span ref="targetRef" v-ellipsis="{ rows: options.rows, text: options.text }" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const options = ref({
  rows: 1,
  text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
})

const width = ref(200)
</script>

<template>
   <div class="wrapper" :style="{ width: `${width}px` }"  ref="wrapperRef">
    <span ref="targetRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const targetRef = ref()
const width = ref(200)
const options = ref({
  rows: 1,
  text: "你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好"
})
useEllipsis(targetRef, options.value, {
  effect: "dark"
})
</script>

Usage（在脚手架中使用）

main.ts

import { createApp } from 'vue'
import "vue-ellipsis-tooltip/dist/style.css"
import vEllipsis from "vue-ellipsis-tooltip"
import App from './App.vue'
const app = createApp(App)
app.use(vEllipsis)
app.mount('#app')

Attributes

poperOptions（弹出窗属性）