[antoniandre#125] Add an option to open link in a new tab.

Author: antoniandre

src/components/vueperslides/vueperslide.vue

@@ -2,6 +2,7 @@
 component.vueperslide(
   :is="link ? 'a' : 'div'"
   :href="link && !justDragged ? link : false"
+  :target="link && openInNew ? '_blank' : '_self'"
   :class="slideClasses"
   :face="slideFace3d"
   :style="slideStyles"
@@ -45,14 +46,15 @@ component.vueperslide(
 export default {
   inject: ['slides', 'touch', 'updateSlide', 'addClone', 'addSlide', 'removeSlide'],
   props: {
-    clone: { type: Boolean, default: false },
+    clone: { type: Boolean },
     image: { type: String, default: '' },
     video: { type: [String, Object], default: '' },
     title: { type: String, default: '' },
     content: { type: String, default: '' },
     link: { type: String, default: '' },
     duration: { type: Number, default: 0 },
-    lazyloaded: { type: Boolean, default: false }
+    lazyloaded: { type: Boolean },
+    openInNew: { type: Boolean }
   },
   emits: ['mouse-enter', 'mouse-leave'],
 

src/documentation/index.vue

@@ -545,8 +545,19 @@
   p.
     By default, you can put a link on the title or the description of the slide.#[br]
     But if you need to, you can also wrap the whole slide into a link using the #[span.code link] attribute of the #[span.code <vueperslide>] component.
+
+  highlight(type="info").
+    You can also open the link in a new tab with the option: #[code open-in-new] that you can add on
+    each #[span.code <vueper-slide>] tag.
   vueper-slides.text-center.my-4.ex--link-on-the-whole-slide(:dragging-distance="50")
-    vueper-slide(v-for="(slide, i) in slides2" :key="i" :image="slide.image" :title="slide.title" :content="slide.content" :link="slide.link")
+    vueper-slide(
+      v-for="(slide, i) in slides2"
+      :key="i"
+      :image="slide.image"
+      :title="slide.title"
+      :content="slide.content"
+      :link="slide.link"
+      :open-in-new="!i")
   ssh-pre(language="html-vue" label="HTML Vue Template").
     <vueper-slides :dragging-distance="50">
       <vueper-slide
@@ -2047,11 +2058,12 @@
     a(id="vueper-slide--settings" name="vueper-slide--settings")
   p The following options can be applied to every #[span.code <vueper-slide>] tag.
   ssh-pre(language="js").
-    image:    [String], default: ''
-    title:    [String], default: ''
-    content:  [String], default: ''
-    link:     [String], default: ''
-    duration: [Number], default: 0 // Override the global slide duration when autoplaying.
+    image:     [String], default: ''
+    title:     [String], default: ''
+    content:   [String], default: ''
+    link:      [String], default: ''
+    openInNew: [Boolean], default: false // Open a link in a new tab.
+    duration:  [Number], default: 0 // Override the global slide duration when autoplaying.
   h3
     a(href="#vueper-slide--events" v-scroll-to="'#vueper-slide--events'") Events
     a(id="vueper-slide--events" name="vueper-slide--events")