JumpCard

JumpCard is a fully open source component for vue3 that allows you to use it on any project (including commercial ones).It is based on element-plus for secondary packaging.It can only be used in vue3, vue2 will not be allowed.

You can import our plugin in these different ways, but you should install it first.

npm install vue-plugin-jumpcard

How to import it?

import { createApp } from "vue";
import Jumpcard from "vue-plugin-jumpcard";
import App from "./App.vue";

const app = createApp(App);
app.use(Jumpcard); // without config
app.mount("#app");

How to use it on your project?

Warning

ExternalJumpCard and InternalJumpCard will be deprecated in the future; please replace them with JumpCard.JumpCard will automatically determine whether a link is internal or external based on the parameters passed in.

<template>
  <jumpcard
    header="Title"
    content="main info"
    buttontext="text on button"
    link="https://www.example.com/path/index.html"
    shadow="hover"
  />
</template>

attributes

attributes	type	required	note
link	string	true	External or internal links.
buttontext	string		The text for the jump button. If not defined, it will be generated by the component or a predefined function.
header	string		The title of the card.
content	string		The content of the card.
avatar	string		Display the avatar to the right of the title. When the header does not exist, display the avatar in the title position.
shadow	string		The default value is hover and you can set it to always or never.Which determines when the card's shadow is displayed.

slots

slot	note
default	#default slot => content option
icon	Custom icon displayed before buttontext.

plugin config

externalButtonText

The button text of JumpCard consisting of external links.

• type: function
• options: object
• return: string

options	type	note
<object>.header	string | undefined	The header returned by the component.
<object>.content	string | undefined	The content returned by the component.
<object>.link	string	The returned link. For example, https://www.example.com/path/to

Example:

import { createApp } from "vue";
import Jumpcard from "vue-plugin-jumpcard";
import App from "./App.vue";

const app = createApp(App);
app.use(Jumpcard, {
  externalButtonText: ({ header, content, link }) => {
    return `Jump to ${header}`;
  },
});
app.mount("#app");

internalButtonText

The button text of JumpCard consisting of internal links.

• type: function
• options: object
• return: string

options	type	note
<object>.header	string | undefined	The header returned by the component.
<object>.content	string | undefined	The content returned by the component.
<object>.link	string	The returned link. For example, /path/to

Example:

import { createApp } from "vue";
import Jumpcard from "vue-plugin-jumpcard";
import App from "./App.vue";

const app = createApp(App);
app.use(Jumpcard, {
  internalButtonText: ({ header, content, link }) => {
    return `Jump to ${header}`;
  },
});
app.mount("#app");

onClickExternalLinkButton

The button text of JumpCard consisting of internal links.

• type: function
• options: string
• return: undefined

options	type	note
link	string	The returned link. For example, https://www.example.com/path/to

Example:

import { createApp } from "vue";
import Jumpcard from "vue-plugin-jumpcard";
import App from "./App.vue";

const app = createApp(App);
app.use(Jumpcard, {
  onClickExternalLinkButton: (link) => {
    window.open(link, "_blank");
  },
});
app.mount("#app");