2020-08-22

Js是一个易于使用的Web应用程序框架，我们可以使用它开发交互式前端应用程序。在本文中，我们将了解添加旋转木马、警报、拖放和视频播放器的最佳包。

适用于Vue.js
SickforVue.js允许我们在Vue应用程序中添加一个旋转木马。

想系统学习前端web的朋友，欢迎私信奕辰获取免费学习教程。

1.评论文章，没字数限制，一个字都行！ 2.关注奕辰，成为的粉丝！ 3.私信奕辰：“web”，“1”获取前端学习面试资料。

大家一起学习（群主会不定时更新学习资料，以及面试题文档）

或者可以添加我的个人微信号：wdnmd__xxx

小助理微信：lyf___1201

为了使用它，我们运行：

npm i vue-slick

然后我们可以用它写：

<template>
  <div>
    <slick ref="slick" :options="slickOptions">
      <a href="http://placekitten.com/200/200">
        <img src="http://placekitten.com/200/200" alt>
      </a>
      <a href="http://placekitten.com/200/200">
        <img src="http://placekitten.com/200/200" alt>
      </a>
    </slick>
  </div>
</template>
 
<script>
import Slick from "vue-slick";
import "../../../node_modules/slick-carousel/slick/slick.css";export default {
  components: { Slick },  data() {
    return {
      slickOptions: {
        slidesToShow: 1
      }
    };
  },  methods: {
    next() {
      this.$refs.slick.next();
    },    prev() {
      this.$refs.slick.prev();
    },    reInit() {
      this.$nextTick(() => {
        this.$refs.slick.reSlick();
      });
    }
  }
};

我们使用slick组件来添加旋转木马。它有按钮。我们将其设置为每页显示一张幻灯片，slidesToShow选择。此外，我们导入样式使其正确显示。

Vue-甜警报器2
Vue-甜警报2允许我们在我们的应用程序中添加一个警报显示。

要安装它，我们运行：

npm i vue-sweetalert2

然后我们可以用它写：

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";Vue.use(VueSweetalert2);
Vue.config.productionTip = false;new Vue({
  render: h => h(App)
}).$mount("#app");
App.vue

<template>
  <button @click="showAlert">click me</button>
</template>
 
<script>
export default {
  methods: {
    showAlert() {
      this.$swal("Hello!");
    }
  }
};

我们使用$swal方法来创建我们自己的警报。我们可以更改按钮的颜色，也可以添加自定义样式。

为此，我们写道：

import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";const options = {
  confirmButtonColor: "green",
  cancelButtonColor: "blue"
};Vue.use(VueSweetalert2, options);
Vue.config.productionTip = false;new Vue({
  render: h => h(App)
}).$mount("#app");

我们用对象设置“确认”和“取消”按钮的颜色。

视频播放器
Vue-视频播放器是一个视频播放器组件，我们可以添加到一个Vue应用程序。

要安装它，我们运行：

npm i vue-video-player

然后我们可以用它写：

<template>
  <video-player
    class="video-player-box"
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="true"
  ></video-player>
</template>
 
<script>
export default {
  data() {
    return {
      playerOptions: {
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src:
              "https://mirrors.standaloneinstaller.com/video-sample/P6090053.mp4"
          }
        ],
        poster: "https://placekitten.com/200/200"
      }
    };
  },  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  methods: {}
};

我们添加了video-player组件。我们刚开始src视频的位置。

poster我们在播放视频之前看到的图片。

video-player还会发出所有视频元素事件，如play , pause , canplay还有更多。

Vue-拖拽
Vue-拖放为我们提供组件，让我们在VUE应用程序中添加拖放功能。

要安装它，我们运行：

npm i vue-drag-drop

然后我们可以用它写：

main.js

import Vue from "vue";
import App from "./App.vue";
import { Drag, Drop } from "vue-drag-drop";Vue.component("drag", Drag);
Vue.component("drop", Drop);
Vue.config.productionTip = false;new Vue({
  render: h => h(App)
}).$mount("#app");
App.vue

<template>
  <div>
    <drag class="drag" :transfer-data="{ draggable }">{{ draggable }}</drag>
    <drop class="drop" @drop="handleDrop">Dropzone</drop>
  </div>
</template>
 
<script>
export default {
  data() {
    return { draggable: "Drag Me" };
  },
  methods: {
    handleDrop() {
      alert("dropped");
    }
  }
};
</script><style>
.drag,
.drop {
  display: inline-block;
  position: relative;
  padding: 30px;
  text-align: center;
  vertical-align: top;
}

我们有drag和drop组件来自库。我们可以拖动drag组件的drop组件。然后drop事件，并且handleDrop方法正在运行。

想系统学习前端web的朋友，欢迎私信奕辰获取免费学习教程。

1.评论文章，没字数限制，一个字都行！ 2.关注奕辰，成为的粉丝！ 3.私信奕辰：“web”，“1”获取前端学习面试资料。

大家一起学习（群主会不定时更新学习资料，以及面试题文档）

或者可以添加我的个人微信号：wdnmd__xxx

小助理微信：lyf___1201