Daily development using component libraries can generally meet most of the needs, but some functional components may not be in the library, here open source some specific projects may use components, I hope to help you ~

Quick learning

  • The installation
npm i vue-gn-components
Copy the code
  • The introduction of
Import VueGnComponents from"vue-gn-components";
import "vue-gn-components/lib/style/index.css"; Vue.use(VueGnComponents) Import {CheckIn, watermark} from as needed"vue-gn-components";
import "vue-gn-components/lib/style/index.css";
Vue.use(CheckIn).use(watermark)
Copy the code

The source address

Vue-gn-components source code address

Component is introduced

A Magnifier

  • Component installation:
import { Magnifier } from 'vue-gn-components';
Vue.use(Magnifier)
Copy the code
  • Component highlights:

Regardless of where the COMPONENT’s DOM position is on the page, the mouse position is calculated exactly and a view area automatically hangs over the right side, and when the right side is over the edge, the view area automatically appears on the left.

  • Component call:
<magnifier
  :boxSize="400"
  :minImgUrl="require('./img/min.jpg')"
  :maxImgUrl="require('./img/max.jpg')"
></magnifier>
Copy the code
  • Parameters:

BoxSize: Setting the size of the main frame of the magnifying glass will automatically generate a hover box of the same size to view the enlarged image on the right side. Default: 500.

MinImgUrl: The url of the magnifying glass miniaturization.

MaxImgUrl: the URL of the magnifying glass.

AutoReverse: Whether to enable the right distance beyond the boundary when the hover box ADAPTS to the left. True by default.

Direction: Indicates the direction of the hover box. The default value is right. Optional left.

Ii. CheckIn

  • Component installation:
import { CheckIn } from 'vue-gn-components';
Vue.use(CheckIn)
Copy the code
  • Component highlights:

The function is implemented. The date set of the incoming one-dimensional array will be formatted as an object according to the month. When rendering a month, only the check-in days of the corresponding month will be rendered. The array has massive data and will not be rendered in large quantities.

Component call:

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

export default {
  return {
    checkIns: ['2019-12-15'.'2019.12.18', 1576250061182]}}Copy the code
  • Parameters:

CheckIns: Pass in a one-dimensional array collection of check-in dates in timestamp, 2019-11-11, 2019.11.11 formats.

Size: indicates the overall size of the check-in component. The default value is 500.

Iii. Image Label (ImgLabel)

  • Component installation:
import { ImgLabel } from 'vue-gn-components';
Vue.use(ImgLabel)
Copy the code
  • Component highlights:

The function is implemented. Right-click to create a label, double-click to edit a label, you can remove a single label, or delete all of them, save them to the local cache, and export them as images.

  • Component call:
<img-label :src="require('./img/timg.jpg')"></img-label>
Copy the code
  • Parameters:

IsShowSaveBtn: indicates whether to display the save button. The default value is true to save label data to the local cache.

SRC: indicates the URL to which the labeled image is to be added.

Width: image width, default 500.

Theme: Theme color, default # 3b8bCC.

4. SlideCheck

  • Component installation:
import { SlideCheck } from 'vue-gn-components';
Vue.use(SlideCheck)
Copy the code
  • Component highlights:

Imitate the registration verification of an e-commerce, but use pure canvas to draw, including the jigsaw puzzle and picture rendering. Moreover, the maximum jitter distance between the upper and lower parts of the user in the sliding process will be recorded in the event successfully verified and distributed. (Maybe the machine doesn’t shake, which adds a little bit of security)

  • Component call:
<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")]}}Copy the code
  • Parameters:

Radius: The radius of the center of the puzzle. That is, the size of the puzzle. The default value is 10.

SRC: a collection of a single URL or multiple URL arrays. If multiple urls are selected, another image will be randomly selected for verification failure or success.

Width: The width of the validation area, which is the width of the Canvas container.

Height: Verifies the height of the area.

Theme: Theme color, default #369.

  • Events:

Success: Verifies a successful callback, sending an object with the maximum value of the fluctuation.

Fail: Validates failed callbacks.

Five, Countdown

  • Component installation:
import { Countdown } from 'vue-gn-components';
Vue.use(Countdown)
Copy the code
  • Component highlights:

Two modes, one is to pass in the timestamp or 2022-5-12-17-20 or 2022.5.12.17.20 greater than the current time format. The other option is to pass in 60 seconds and refresh the page after the countdown does not reset the timer. You don’t do any CSS beautification, just emit the corresponding values using scoped slots.

  • Component use:
<template>
<div>
  <countdown :time="date">
    <template v-slot="{date}"> {{date. Year}} - on {{date. The month}} - {{date. The date}} - {{date. Hours}} hours - {{date. Minutes}} minutes - {{date. Seconds}} < / template > </countdown> <countdown isSMSMode :totalTime="timeLeft">
    <template v-slot="{date}">{{date.timeleft}} seconds </template> </countdown> </div> </template>export default {
  data() {
    return {
      date: "2022.11.11",
      timeLeft: 60
    };
  }
Copy the code
  • Parameters:

Time: The time format passed is greater than the current time.

IsSMSMode: Indicates whether to enter the countdown mode in seconds. The default value is false.

TotalTime: Maximum number of seconds in countdown mode.

  • Scope slot

Year: the year;

The month, month;

Date: day;

Hours: hours;

Minutes: minutes;

Seconds: seconds;

TimeLeft: Count down the remaining seconds.

  • Events:

“End” : The countdown is over.

  • Methods:

Start: indicates the start.

Pause: pauses.

6. Watermark

  • Component installation:
import { watermark } from 'vue-gn-components';
Vue.use(watermark)
Copy the code
  • Command highlights:

In the form of a custom instruction, the tag applied by the instruction on IMG will eventually be replaced by the Canvas tag. Use off-screen canvas for drawing, one drawing image, the other drawing watermark, and finally merge into a canvas tag.

  • Instruction call:
<template>
  <div>
    <img v-watermark="{src: src, text: 'hello world'}"/>
  </div>
</template>

export default {
  data() {
    return {
      src: require("./img/min.jpg")}; }}Copy the code
  • Command parameters:

SRC: The url of the image.

Text: indicates the watermark text.

Opacity: specifies the opacity of the watermark. The default value is 0.3.

Rotate: Indicates the rotation Angle. The default value is 20.

FontSize: watermark fontSize. The default value is 20.

Type: watermark drawing method. The default is repeat full-screen repeat drawing. If only one watermark is drawn, the options are left-top, right-top, right-bottom, and left-bottom.

Drag component (DragWrap/DragItem)

  • Component installation:
import { DragWrap, DragItem } from 'vue-gn-components';
Vue.use(DragWrap).use(DragItem)
Copy the code
  • Component highlights:

Drag the specific content of the user can write their own, can also write their own drag control points.

  • Component call:
<template>
  <drag-wrap class="wrap" :data="list" @watchData="watchData">
    <drag-item class="item" v-for="(item, index) in list" :key="index">
      <template #drag>The < div > drag and drop the 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); }}}Copy the code
  • Parameters:

Data: array format, Dom has the corresponding render array, when the Dom position changes, the array will also change, passed to the component, the component will be distributed after the change.

  • Events:

WatchData: dispatches the changed array and listens for the method to receive it.

  • Slot:

Drag: User-defined drag control points. If not, you can drag the Dom item anywhere.

8. FindDiff Component

  • Component installation:
import { FindDiff } from 'vue-gn-components';
Vue.use(FindDiff)
Copy the code
  • Component highlights:

‘Assist’ to complete everyone to find fault game.

  • Component call:
<template>
  <find-diff/>
</template>
Copy the code

More and more

More components will be added and optimized in the future, and you are welcome to use various functional components. Source address VUE-GN-Components, if it is helpful to you, please give a Star, this is also my continuous improvement of this project, continuous power.