ホームページ >ウェブフロントエンド >jsチュートリアル >Vue2x ベースのレスポンシブアダプティブカルーセルコンポーネントプラグインの VueSliderShow 関数の使用方法

Vue2x ベースのレスポンシブアダプティブカルーセルコンポーネントプラグインの VueSliderShow 関数の使用方法

php中世界最好的语言オリジナル: 2018-05-29 13:39:552074ブラウズ

今回は、Vue2x_ ベースのレスポンシブアダプティブカルーセルコンポーネントプラグインの VueSliderShow 関数の使い方、注意点、レスポンシブアダプティブカルーセルコンポーネントプラグインの VueSliderShow 関数を使用する際の実際的なケースについて説明します。 -in は Vue2x に基づいています。見てみましょう。

VueSliderShow は、Vue 用のカルーセルコンポーネントプラグインです。

1. ブラウザーの任意のスケーリングをサポートし、自動切り替え、切り替えの停止をサポートします。マウスが通過すると、ページネーション/任意クリックしてページを切り替え、左右を切り替えます。

3. サポートテキストの導入 (複数行は自動的に省略されます)

この記事では、応答性の高いアダプティブカルーセルコンポーネントの開発プロセス全体について説明します。 npm への公開を含む Vue2x ベースのプラグイン、ダウンロードおよびインストール用の独自の npm パッケージの構築に関するヒントこの記事を読むには、いくつかの Vue 構文糖 (カスタムタグ、計算されたプロパティ、親子コンポーネント通信など) が必要です。 ES6、npm などの基本的な知識。まずはデモを見てみましょう

パラメータの説明:

1.invTime: カルーセルの速度を制御します2.slides: 3 つのパラメータを含む特定のカルーセルデータ配列形式: 画像、テキスト、とリンク

3. 注: 応答性と適応性に優れているため、プッシュされた画像は一貫性が高くなければなりません npm i vueslideshow

境界線、道路から始めてテーマに入りましょう! ！

前に書いてあります: vue の公式 Web サイトでは、プラグインの開発について説明しています。興味のある方は、まず公式 Web サイトにアクセスして、プロジェクトを作成してください

0。皆さんは Vue を持っていると思いますが、これらの基本的なプロジェクト環境と構築プロジェクト、および初期化された Vue プロジェクトの変換はすべて目と耳の問題なので、ここで簡単に説明します: 1.環境設定、(node、vue-cli)

2. プロジェクトの初期化、Vue init webpack vueslideshow。インストールは npm install に依存します (vue-router はインストール中にデフォルトでインストールされます)

変換初期化プロジェクト:

(0) 変換の前に、ニーズを分析しましょう: 応答性の高い適応カルーセルコンポーネント。これは、

動的構成

をサポートするコードセグメントであり、画像とテキスト、自動切り替え、およびオプションの切り替えにすぎません。

(1) app.vueを以下の内容にクリアします

<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'
 }
 ]
 }
 }
}

(2) コンポーネントフォルダ内にindex.vueとsliderShow.vue(サンプルプロジェクトなので仕様は良くありません)を作成して入れますルーターフォルダー Index.js スタートアップページは、index.vue

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

を指します開発プロジェクト:

(1) 親コンポーネントとしてのindex.vue、es6を介してカルーセルコンポーネントを参照し、カルーセルの使用を宣言しますsliderShow コンポーネントは、2 つの invTime および slides 属性パラメータを渡します。これらのパラメータは、カルーセルの切り替え時間とデータ転送です。ここでの slides 配列は、リクエストインターフェイスを通じて要求されたデータです。

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
 }
 ]
})

(2) sliderShow.vue

テンプレートセグメントコードの解釈 (レイアウトについてはここで簡単に説明します)。主な理由は、マウスがクリアインブイベントを通過するときに切り替わらないことです。フォーカス画像をクリックしてジャンプし、マウスを外に移動して runInv イベントを実行すると、トランジションによって 2 つの画像の表示と非表示が制御され、左右に切り替わり、特定の画像をクリックすると便利です。ページングスイッチ。ここでは、一般的な goto() メソッドを使用してさまざまな値を転送し、表示する特定のデータページを決定します。この値は、vue の計算された属性を通じて計算できます。

<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'
 }
 ]
 }
 }
}

ES6 論理セグメントコード解釈、sliderShow.vue は props を通じて親コンポーネントから渡されたデータを受け取ります

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中文网其它相关文章！

Vue2x ベースのレスポンシブ アダプティブ カルーセル コンポーネント プラグインの VueSliderShow 関数の使用方法

関連記事

Vue2x ベースのレスポンシブアダプティブカルーセルコンポーネントプラグインの VueSliderShow 関数の使用方法