Библиотека функциональных компонентов vue, которую вы можете использовать, и она постоянно совершенствуется...

Vue.js

Ежедневная разработка и использование библиотек компонентов, как правило, может удовлетворить большинство потребностей, но некоторые функциональные компоненты могут отсутствовать в библиотеке.Вот некоторые компоненты с открытым исходным кодом, которые могут использоваться в конкретных проектах, я надеюсь помочь всем~

Начать быстро

  • Установить
npm i vue-gn-components
  • представлять
整体引入:
import VueGnComponents from "vue-gn-components";
import "vue-gn-components/lib/style/index.css";
Vue.use(VueGnComponents)

按需引入:
import { CheckIn, watermark } from "vue-gn-components";
import "vue-gn-components/lib/style/index.css";
Vue.use(CheckIn).use(watermark)

Адрес источника

адрес исходного кода vue-gn-components

Введение компонента

1. Лупа

  • Установка компонента:
import { Magnifier } from 'vue-gn-components';
Vue.use(Magnifier)
  • Особенности компонента:

независимо от компонентаdomТам, где местоположение на странице, будет автоматически и точно рассчитать положение мыши справа, чтобы просмотреть область подвески, а когда правильное положение по границе, область просмотра появится автоматически слева.

  • Компонентный звонок:
<magnifier
  :boxSize="400"
  :minImgUrl="require('./img/min.jpg')"
  :maxImgUrl="require('./img/max.jpg')"
></magnifier>
  • параметр:

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

minImgUrl: эскиз увеличительного стеклаurl.

maxImgUrl: увеличительное стекло для увеличения изображенияurl.

autoReverse: Нужно ли открывать нужное расстояние за границу, адаптивная подвеска рамы слева. По умолчаниюtrue.

direction: Направление плавающей рамки, по умолчаниюrightВерно. необязательныйleft.

2. Регистрация

  • Установка компонента:
import { CheckIn } from 'vue-gn-components';
Vue.use(CheckIn)
  • Особенности компонента:

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

Вызов компонента:

<template>
  <check-in :checkIns="checkIns" />
</template>

export default {
  return {
    checkIns: ['2019-12-15', '2019.12.18', 1576250061182]
  }
}
  • параметр:

checkIns: передать набор одномерных массивов дат регистрации, которые могут быть метками времени,2019-11-11,2019.11.11Формат.

size: общий размер компонента возврата, по умолчанию500Размер адаптации.

3. Метка изображения (ImgLabel)

  • Установка компонента:
import { ImgLabel } from 'vue-gn-components';
Vue.use(ImgLabel)
  • Особенности компонента:

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

  • Вызов компонента:
<img-label :src="require('./img/timg.jpg')"></img-label>
  • параметр:

isShowSaveBtn: Отображать ли кнопку сохранения, по умолчаниюtrue, который сохранит данные тега в локальном кэше.

src: нужно добавить изображение меткиurl.

width: Ширина изображения, по умолчанию 500.

theme: цвет темы, по умолчанию#3b8bcc.

В-четвертых, проверка слайдов (SlideCheck)

  • Установка компонента:
import { SlideCheck } from 'vue-gn-components';
Vue.use(SlideCheck)
  • Особенности компонента:

Он имитирует проверку регистрации бизнеса электронной коммерции, но использует чистыйcanvasРисование, в том числе вырезание головоломок и рендеринг картинок. И в случае успешной отправки проверки будет зафиксировано максимальное расстояние, на которое пользователь качается вверх-вниз в процессе скольжения. (Возможно машина не будет трястись, добавив немного безопасности)

  • Вызов компонента:
<slide-check 
  :width="300" 
  :height="300" 
  :src="src" 
  @success="success" 
  @fail="fail">
</slide-check>

export default {
  data() {
    src: [
      require("./img/timg.jpg"),
      require("./img/min.jpg")
    ]
  }
}
  • параметр:

radius: Значение радиуса центра выделения головоломки, то есть размер нарисованной головоломки, значение по умолчанию10.

src: Одинurlили большеurlКоллекция массивов. Если их больше одного, в случае неудачной или успешной проверки будет случайным образом выбрано другое изображение.

width: Ширина области проверки, даcanvasконтейнерwidth.

height: Высота области проверки.

theme: цвет темы, по умолчанию#369.

  • мероприятие:

success: Обратный вызов для успешной проверки отправит объект, который является максимальным значением верхнего и нижнего колебаний.

fail: Обратный вызов для неудачной проверки.

5. Обратный отсчет

  • Установка компонента:
import { Countdown } from 'vue-gn-components';
Vue.use(Countdown)
  • Особенности компонента:

Два режима, один - входящая временная метка или2022-5-12-17-20или2022.5.12.17.20Этот формат больше, чем текущее время. Другой - входящий60С такими секундами обновление страницы после начала обратного отсчета не будет происходить повторно. ничего не сделалcssУкрашение, которое использует только слот с заданной областью для отправки соответствующего значения.

  • Компоненты используют:
<template>
<div>
  <countdown :time="date">
    <template v-slot="{date}">
      {{date.year}}年-{{date.month}}月-{{date.date}}日-{{date.hours}}小时-{{date.minutes}}分钟-{{date.seconds}}秒
    </template>
  </countdown>
  <countdown isSMSMode :totalTime="timeLeft">
    <template v-slot="{date}">{{date.timeLeft}}秒</template>
  </countdown>
</div>
</template>

export default {
  data() {
    return {
      date: "2022.11.11",
      timeLeft: 60
    };
  }
  • параметр:

time: передать в формате времени больше, чем текущее время.

isSMSMode: Будь то второй режим обратного отсчета, по умолчаниюfalse.

totalTime: максимальное количество секунд в режиме обратного отсчета.

  • слот с прицелом

year: год;

month: Луна;

date: день;

hours: Час;

minutes: минута;

seconds: секунды;

timeLeft: обратный отсчет оставшихся секунд.

  • мероприятие:

end: Обратный отсчет окончен.

  • метод:

start:Начинать.

pause:Пауза.

6. Водяной знак

  • Установка компонента:
import { watermark } from 'vue-gn-components';
Vue.use(watermark)
  • Основные моменты инструкции:

В виде пользовательской инструкции инструкция будет применена кimgЭтикетки со временем заменяются наcanvasЭтикетка. Использовать за кадромcanvasрисовать, один рисует изображение, другой рисует водяной знак и, наконец, сливается в одинcanvasЭтикетка.

  • Вызов команды:
<template>
  <div>
    <img v-watermark="{src: src, text: 'hello world'}"/>
  </div>
</template>

export default {
  data() {
    return {
      src: require("./img/min.jpg")
    };
  }
}
  • Параметры команды:

src: картинаurl.

text: Текст водяного знака.

opacity: прозрачность водяного знака, по умолчанию0.3.

rotate: угол поворота, по умолчанию20.

fontSize: размер шрифта водяного знака, по умолчанию20.

type: Способ рисования водяного знака, по умолчаниюrepeatПолная перерисовка экрана. Когда нарисован только один водяной знак, необязательныйleft-topверхний левый,right-topв правом верхнем углу,right-bottomпрямо маленький,left-bottomНижняя левая.

Семь, перетащите компоненты (DragWrap/DragItem)

  • Установка компонента:
import { DragWrap, DragItem } from 'vue-gn-components';
Vue.use(DragWrap).use(DragItem)
  • Особенности компонента:

Конкретное содержание перетаскивания может быть полностью написано пользователем, или контрольная точка перетаскивания может быть написана им самим.

  • Вызов компонента:
<template>
  <drag-wrap class="wrap" :data="list" @watchData="watchData">
    <drag-item class="item" v-for="(item, index) in list" :key="index">
      <template #drag>
        <div>拖拽Dom</div>
      </template>
      <div>{{item}}</div>
    </drag-item>
  </drag-wrap>
</template>

export default {
  data() {
    return {
      list: [111, 222, 333, 444, 555, 666, 777, 888, 999]
    };
  },
  methods: {
    watchData(newList) {
      console.log("newList", newList);
    }
  }
}
  • параметр:

data: формат массива,DomСуществует соответствующий массив рендеринга, когдаDomПосле изменения позиции изменится и массив, переданный компоненту, и компонент будет отправлен после изменения.

  • мероприятие:

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

  • Слот:

drag: Пользователь определяет контрольную точку перетаскивания, а при отсутствии перетаскиванияDomТовар может быть где угодно.

Восемь, найдите компонент отличия (FindDiff)

  • Установка компонента:
import { FindDiff } from 'vue-gn-components';
Vue.use(FindDiff)
  • Особенности компонента:

«Вспомогательный» завершил игру «Все придираются».

  • Вызов компонента:
<template>
  <find-diff/>
</template>

Более

В будущем будут добавлены и оптимизированы дополнительные компоненты, добро пожаловатьprРазличные функциональные компоненты, которые вы используете. Адрес источникаvue-gn-components, если это поможет вам, пожалуйста, дайтеStarТеперь это также является мотивацией для меня продолжать улучшать этот проект.

Категории