Инструмент всплывающей подсказки на основе Vue

внешний интерфейс GitHub Vue.js
Инструмент всплывающей подсказки на основе Vue

Что ж, гаджет всплывающей подсказки, основанный на Vue, не зависит отpopper.js, который поддерживает регистрацию инструкций и использование служебных функций.

адрес проекта:GitHub.com/kinglisky/V…

Адрес документа:kinglisky.github.io/vtip

屏幕快照 2017-10-31 下午12.27.32.png

屏幕快照 2017-10-31 下午12.27.19.png

В прошлом проект часто сталкивался с необходимостью отображать некоторые информационные детали через всплывающую подсказку.element-ui tool-tipкомпоненты иPopoverвсплывающее окно. Он используется следующим образом:

компонент всплывающей подсказки:

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
  <el-button>上左</el-button>
</el-tooltip>

всплывающее окно:

<el-popover
  ref="popover1"
  placement="top-start"
  title="标题"
  width="200"
  trigger="hover"
  content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
</el-popover>
<el-button v-popover:popover1>hover 激活</el-button>

Даже простое приглашение всплывающей подсказки требует много написания каждый раз, когда оно используется, и экземпляр всплывающей подсказки должен быть сгенерирован для отображения всплывающей подсказки, что потребляет много ресурсов.

Много раз наша всплывающая подсказка просто показывает некоторые советы по копирайтингу, поэтому я лично предпочитаю использовать инструкции vue, такие как:

<button v-tip.top="'执行操作的一些说明'">执行</button>

Привяжите текстовое приглашение, которое должно быть вызвано командой.После наведения мыши содержимое текста будет отображаться прямо над целевым элементом, и больше не нужно явно писать экземпляр компонента, например 👆.

Конечно, иногда нам может понадобиться подключить некоторые всплывающие подсказки.Настройте то, что отображаетсяилиинтерактивный контент, на этот раз директива также может предоставить некоторую пользовательскую конфигурацию:

 <button v-tip="tipOptions">执行</button>
computed: {
  tipOptions () {
    return {
	     width: 'auto',
         theme: 'dark',
         transition: true,
		 // 自定组件
         customComponent: Music,
		 // 组件 props 
         customProps: { id }
		 ... 其他配置****
   }
 }
}

Это будет гораздо удобнее в использовании, ну собственно это и естьvtipреализован, и vtip обеспечиваетодноэлементная реализация,использоватьvitpЕсли на странице есть только один синглтон подсказки, новый экземпляр для содержимого подсказки создаваться не будет.

Маленький Amway, добро пожаловать на шаг наGitHub.com/kinglisky/V…

Категории