So verwenden Sie die VueSliderShow-Funktion des responsiven adaptiven Karussell-Komponenten-Plug-Ins basierend auf Vue2x

Dieses Mal zeige ich Ihnen, wie Sie die VueSliderShow-Funktion des responsiven adaptiven Karussell-Komponenten-Plug-ins basierend auf Vue2x_ verwenden und welche Vorsichtsmaßnahmen für die Verwendung der VueSliderShow-Funktion des responsiven adaptiven Karussell-Komponenten-Plug-Ins gelten. im basierend auf Vue2x Welche davon sind die folgenden praktischen Fälle, werfen wir einen Blick darauf.

VueSliderShow ist ein Karussell-Komponenten-Plug-in:

1. Unterstützt jede Skalierung des Browsers und ist mit mobilen Endgeräten kompatibel . Unterstützen Sie das automatische Umschalten, stoppen Sie das Umschalten, wenn die Maus vorbeifährt, klicken Sie, um das Blättern/eine beliebige Seite einzuschalten, wechseln Sie nach links und rechts,

3. Unterstützt die Texteinführung (mehr als eine Zeile wird automatisch weggelassen)

In diesem Artikel geht es um die Entwicklung eines responsiven adaptiven Karussellkomponenten-Plug-Ins auf Basis von Vue2x, einschließlich der Veröffentlichung auf npm, dem Erstellen eines eigenen npm-Pakets und Tipps zum Herunterladen und Installieren Vue-Syntaxzucker (benutzerdefinierte Tags, berechnete Attribute, Kommunikation zwischen Eltern-Kind-Komponenten usw.) sowie Grundkenntnisse in ES6, NPM usw. Werfen wir einen Blick auf die Demo

Beispiel-Quellcode-Adresse

Installieren

npm i vueslideshow

Verwendungsbeispiel

in vue2.x:

<template>
 //轮播组件的位置
 <p>
 <slider-show :slides="slides" :inv="invTime"></slider-show>
 </p>
</template>
<script>
import sliderShow from 'vueslidershow'
export default {
 components: {
 sliderShow
 },
 data () {
 return {
 invTime: 2000,
 slides: [
 {
 src: require('../assets/1.jpg'),
 title: '测试测试测试1',
 href: 'detail/analysis'
 }
 ]
 }
 }
}

Parameterbeschreibung: 1.invTime: Steuern Sie die Karussellgeschwindigkeit

2.slides: Spezifische Karusselldaten-Array-Form, einschließlich drei Parametern: Bild, Text und Link

3. Hinweis: Da es reaktionsfähig und anpassungsfähig ist, müssen die Bilder, die Sie pushen, sehr konsistent sein

Trennlinie, fangen wir auf der Straße an und steigen in das Thema ein! !

Vorne geschrieben: Die offizielle Website von Vue bietet eine Einführung in die Entwicklung von Plug-Ins. Interessierte Veteranen können zunächst die offizielle Website besuchen, um Plug-Ins zu entwickeln 🎜>Projekt erstellen

0 Sie alle müssen Erfahrung mit Vue und Front-End sowie der Transformation und Initialisierung von haben Vue-Projekte sind alle mit offenen Augen erledigt, deshalb werde ich sie hier kurz erwähnen: 1. Vue-Umgebungskonfiguration, (Knoten, Vue-Cli) 2. Initialisierungsprojekt

, Vue init webpack vueslideshow. Die Installation hängt von der npm-Installation ab (vue-router wird standardmäßig während der Installation installiert)

Transformationsinitialisierungsprojekt:

(0) Vor der Transformation Lassen Sie uns unsere Bedürfnisse analysieren: Eine reaktionsfähige adaptive Karussellkomponente ist, weil wir hoffen, dass sie die

dynamische Konfiguration unterstützt. automatischer Schalter, optionaler Schalter. (1) Löschen Sie einfach app.vue wie folgt:

<template>
 <p id="app">
 <router-view/>
 </p>
</template>
<script>
export default {
 name: 'App'
}
</script>

(2) Erstellen Sie im Komponentenordner index.vue und sliderShow.vue (da es sich um ein Beispielprojekt handelt). die Spezifikation Schlecht) Lassen Sie die Startseite von index.js im Router-Ordner auf index.vue verweisen

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/index'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 component: Index
 }
 ]
})

Entwicklungsprojekt:

(1 ) index Als übergeordnete Komponente referenziert .vue über es6 die Karussellkomponente, erklärt die Verwendung der Karussell-SliderShow-Komponente und übergibt dann zwei invTime- und slides-Attributparameter an die SliderShow-Komponente, nämlich die Karussell-Umschaltzeit und die Datenübertragung Es gibt ein Slides-Array, es werden statische Simulationsdaten verwendet und die formale Umgebung besteht aus Daten, die über die Anforderungsschnittstelle angefordert werden.

<template>
 <p>
 <slider-show :slides="slides" :inv="invTime"></slider-show>
 </p>
</template>
<script>
import sliderShow from './sliderShow'
export default {
components: {
 sliderShow
},
 data () {
 return {
 invTime: 2000,
 slides: [
 {
 src: require('../assets/1.jpg'),
 title: '测试测试测试1',
 href: 'detail/analysis'
 },
 {
 src: require('../assets/2.jpg'),
 title: '测试测试测试2',
 href: 'detail/count'
 }
 ]
 }
 }
}

(2) sliderShow.vue Beim Lesen des Vorlagensegmentcodes (das Layout wird hier kurz besprochen) gibt es zwei Mäuse in der äußersten Ebene, die das ClearInv-Ereignis durchlaufen, hauptsächlich weil die Maus Beim Durchlaufen des Fokusbildes ist es praktisch, auf das Bild zu klicken, um zu springen und das runInv-Ereignis auszuführen, um mit dem automatischen Wechseln fortzufahren. Der Übergang steuert das Erscheinen und Verschwinden der beiden Bilder, indem er nach links und rechts wechselt. und durch Klicken auf den spezifischen Paging-Schalter wird hier eine gängige Methode „goto“ verwendet, um die anzuzeigende spezifische Datenseite zu bestimmen. Dieser Wert kann über das berechnete Attribut in vue berechnet werden.

<template>
 <p class="slide-show" @mouseover="clearInv" @mouseout="runInv">
 <p class="slide-img">
 <a :href="slides[nowIndex].href" rel="external nofollow" >
 <transition name="slide-fade">
 <img v-if="isShow" :src="slides[nowIndex].src">
 </transition>
 <transition name="slide-fade-old">
 <img v-if="isShows" :src="slides[nowIndex].src">
 </transition>
 </a>
 </p>
 <p class="slide-title"><a>{{ slides[nowIndex].title }}</a></p>
 <ul class="slide-pages">
 <li v-for="(item, index) in slides"
 @click="goto(index)"
 >
 <a :class="{on: index === nowIndex}"></a>
 </li>
 </ul>
 <a @click="goto(prevIndex)" class="callbacks-nav">＜</a>
 <a @click="goto(nextIndex)" class="callbacks-nav next">＞</a>
 </p>
</template>
<script>
export default {
 props: {
 slides: {
 type: Array,
 default: []
 },
 inv: {
 type: Number,
 default: 1000
 }
 },
 data () {
 return {
 nowIndex: 0,
 isShow: true,
 isShows:false
 }
 },
 computed: {
 prevIndex () {
 if (this.nowIndex === 0) {
 return this.slides.length - 1
 }
 else {
 return this.nowIndex - 1
 } 
 },
 nextIndex () {
 if (this.nowIndex === this.slides.length - 1) {
 return 0
 }
 else {
 return this.nowIndex + 1
 }
 }
 },
 methods: {
 goto (index) {
 this.isShow = false
 setTimeout(() => {
 this.nowIndex = index
 this.isShows = true
 }, 10)
 },
 runInv () {
 this.invId = setInterval(() => {
 this.goto(this.nextIndex)
 }, this.inv)
 },
 clearInv () {
 clearInterval(this.invId)
 }
 },
 mounted () {
 this.runInv();
 }
}
</script>

ES6 logische Segmentcode-Interpretation, sliderShow.vue akzeptiert Daten, die von der übergeordneten Komponente über Requisiten übergeben werden

props: {
 slides: {
 type: Array,
 default: []
 },
 inv: {
 type: Number,
 default: 1000
 }
 },

计算属性，前一页，这里就控制nowIndex,在当前数据索引里减一，当是第一条数据的时候，我们要跳到最后一条，所以当第一条数据的时候我们这里判断它并让他赋值最后一条数据，后一页和前一页相似，判断最后一页数据，跳到第一页。

computed: {
 prevIndex () {
 if (this.nowIndex === 0) {
 return this.slides.length - 1
 }
 else {
 return this.nowIndex - 1
 } 
 },
 nextIndex () {
 if (this.nowIndex === this.slides.length - 1) {
 return 0
 }
 else {
 return this.nowIndex + 1
 }
 }
 },

通过Index值,从而改变具体数据

goto (index) {
 this.isShow = false
 setTimeout(() => {
 this.nowIndex = index
 this.isShows = true
 }, 10)
 },

当页面加载完后直接执行runInv()方法，然后自动切换，setInterval（）/ clearInterval()是js内置的定时器，setInterval()里按照父组件里传的时间来调用函数的方法，clearInterval()是结束定时器的循环调用函数

runInv () {
 this.invId = setInterval(() => {
 this.goto(this.nextIndex)
 }, this.inv)
 },
 clearInv () {
 clearInterval(this.invId)
 }
 },
 mounted () {
 this.runInv();
 }

轮播组件插件就基本上ok了，下面讲解一下把这个轮播组件插件放到npm里，构建自己的npm包。

分割线 npm！！！！！

构建npm包：

0、在https://www.npmjs.com创建自己的账号

1、新建一个项目文件夹VueSliderShow，把上面的sliderShow.vue文件复制文件。打开cmd进入到VueSliderShow目录，然后命令行执行：npm init(按流程填写相关信息，都可以按照自己的实际情况写)，然后会生成一个package.json，例如下面是我这个组件的基本信息

{
 "name": "vueslideshow",
 "version": "1.0.2",
 "description": "a slider implement by vuejs",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {
 "type": "git",
 "url": "https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow"
 },
 "author": "HongqingCao",
 "license": "ISC"
}

2、创建一个index.js

var sliderShow = require('./sliderShow')
module.exports = sliderShow

3、创建一个README.md，描述一下这个组件，可以参考一下我写的

# vueslidershow
> a slider implement by vuejs
>一个vue的响应式自适应轮播图组件
[Demo](https://github.com/HongqingCao/My-Code/tree/master/VueSliderShow)
###### ![实例效果](https://github.com/HongqingCao/My-Code/blob/master/VueSliderShow/VueSlider.gif)
## Install
" bash
npm i vueslideshow
"
## 应用案例
#### in vue2.x:
"html
<template>
 <p>
 <slider-show :slides="slides" :inv="invTime"></slider-show>
 </p>
</template>
<script>
import sliderShow from './sliderShow'
export default {
 components: {
 sliderShow
 },
 data () {
 return {
 invTime: 2000,
 slides: [
 {
 src: require('../assets/1.jpg'),
 title: '测试测试测试1',
 href: 'detail/analysis'
 }
 ]
 }
 }
}
"
<br>
### 参数说明：
 1.invTime,控制轮播速度 
 2.slides,具体的轮播数据数组形式，包含图片，文字，链接三个参数 
 3.由于是响应式自适应所以推的图片必须高度一致，更友好
## License
[MIT](LICENSE)

4、命令行npm login，登录自己的账号和密码

 

5、发布到npm执行命令行： npm publish，成功后你会发现你的npm里已经有一个包了

 

你可以点击进入详情看看

 

6、尝试下载安装在自己项目里：npm i vueslideshow，安装完后在node_modules就可以看到自己的插件啦

 

7、应用就如一开始的插件介绍一样，可以往上看

最后总结

从开发到发布一款基于Vue2x的响应式自适应轮播组件插件VueSliderShow，到这里就已经开发完毕，当然里面肯定也有一定的bug在里面，我用了transition去包裹两个img其实目前是没用到这个过渡属性，后期可以各位老铁自己补一些绚丽的切换动画，最后再次附上github示例源码

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用seajs在require书写约定

怎样操作Vue做出高德地图搭建实时公交应用

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die VueSliderShow-Funktion des responsiven adaptiven Karussell-Komponenten-Plug-Ins basierend auf Vue2x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!