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