VueSliderShow故名思意，vue的轮播图组件插件，该插件： 1、支持浏览器任意放缩，兼容移动端， 2、支持自动切换，鼠标经过停止切换，分页/任意页点击切换，左右切换， 3、支持文字介绍（超过一行自动省略） 本文讲述的是从开发一款基于Vue2x的响应式自适应轮播组件插件的一个全过程，包含发布到npm，构建自己的npm包，供下载安装使用的技巧，阅读本文需要些Vue的语法糖（自定义标签、计算属性、父子组件通信等），以及ES6、npm等基...
vue： V2.5.11 此篇尽量详细，清楚的讲解vue插件的开发到npm的发布，想想将你自己做的东西展示给广大“网民”，心里还是有点小激动的...…^_^ 先上一下插件效果图------github传送门下面我们就来说说详细做法： 1. 初始化项目 vue init webpack-simple vue-pay-keyboard使用vue创建一个简单的项目，删除src中除了main.js和app.vue外的文件，清空app.vue中无用内容整理完后项目目录2.编写插件 vue-pay-pop (源码大家可到github中自行...
在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下： step1: 在项目中安装vue-i18插件 cnpm install vue-i18n --save-dev step2:在项目的入口文件main.js中引入vue-i18n插件 import Vue from vue import router from ./router import VueI18n from vue-i18n Vue.use(VueI18n) const i18n = new VueI18n({ locale: zh, // 语言标识 messages: { zh: require(./assets/lang/zh), en: require(./a...
Swiper简介 Swiper常用于移动端网站的内容触摸滑动。 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 解决vue中使用swiper插件，在引入swiper插件后，发现无法正常运行问题 这次我们模拟从后台取下数据，然后数据绑定在swiper标签中。 <template> <div clas...
本文介绍了使用vue-aplayer插件时出现的问题的解决，分享给大家，具体如下： 安装$ npm install vue-aplayer --save使用<aplayer autoplay :music="{title: Preparation,author: Hans Zimmer/Richard Harvey,url: http://devtest.qiniudn.com/Preparation.mp3,pic: http://devtest.qiniudn.com/Preparation.jpg,lrc: [00:00.00]lrc here\n[00:01.00]aplayer }"> </aplayer> // ES6import Aplayer from vue-aplayernew Vue({compone...
Vue实践分享（三）在实际项目的开发过程中，经常会遇到页面还没渲染完成而插件就已经开始加载的问题，这样就会导致显示和功能出错。 可以通过Vue中的nextTick来解决 Vue.nextTick(function() {//widget });这样就会在页面渲染完成后再执行nextTick内的插件 以上这篇基于Vue渲染与插件的加载顺序的问题详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
利用vue组件创建模板，使用webpack打包生成插件再全局使用 1、vue init webpack-simple 生成项目目录 2、调整目录结构3、修改webpack.config.js var path = require(path) var webpack = require(webpack)module.exports = {entry: ./src/index.js,output: {path: path.resolve(__dirname, ./dist),publicPath: /dist/,filename: vue-toast.js,// 打包后的格式（三种规范amd,cmd,common.js)通过umd规范可以适应各种规范，以及全局w...
BetterScroll号称目前最好用的移动端滚动插件，因此它的强大之处肯定是存在的。要不...哈哈。个人感觉还是很好用的。这篇文章不是笼统的讲 BetterScroll ，而是单讲滚动，想要深入了解它，请移步这里 。 滚动原理better-scroll 是什么滚动原理 better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature...
1、首先在npm上下载vue-lazyload的引用包 npm install vue-lazyload --save-dev2、然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件 import Vue from vue; import App from ./App.vue import router from ./router; import VueLazyload from "vue-lazyload"3、然后我们配置vue-lazyload Vue.use(VueLazyload, { error: static/error.png,//这个是请求失败后显示的图片 loading: static/loading.gif...
有时候我们在做开发的时候，就想自己写一个插件然后就可以使用自己的插件，那种成就感很强。博主最近研究element-ui和axios的时候，发现他们是自定义组件，但是唯一有一点不同的是，在用element-ui的时候是使用Vue.use()语句来使用的，而axios的时候，不用Vue.use()，只要import就可以导入进来了，感觉很神奇，细细的发现，原来他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法，下面就利用这个install来...
版本选择swiper是个常用的插件，现在已经迭代到了第四代：swiper4。常用的版本是swiper3和swiper4，我选择的是swiper3。 安装安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S这里一个小知识，查看node包的所有版本号的方法： npm view 包名 versions组件编写swiper官方的使用方法分为4个流程： 加载插件HTML内容给Swiper定义一个大小初始化Swiper我也按照这个流程编写组件： 加载插件import Swiper from swiper; import swiper...
一、背景在Vue项目中使用了第三方的datepicker插件，在选择日期后vue无法检测到datepicker输入框的变化<label class="fl">日期：</label><div class="input-wrapper fr"><input class="daterangepicker" ref="datepicker" v-model="dateRange"/><a href="javascript:;" rel="external nofollow" ></a></div> export default {data() {return {dateRange: }},watch: {dateRange(newVal, oldVal) {console.log(newVal) // 选择日期后...
什么是 better-scrollbetter-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，#8;它和 iscroll 的主要区别在 这里 。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。 在需要的文件中添加import BScorll from better-scroll;引用的示例代码:let scroll = new BScroll(Dom对象, {//optionsstartX: 0,startY: 0 })Vue获得Dom对象方法,<div v-el:food-wrapper></div>//定义对象 this....
本文介绍了关于新版 vue-awesome-swiper，分享给大家，具体如下： 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题?为什么我的vue-awesome-swiper不会自动播放？为什么我的vue-awesome-swiper没有？使用 引入（前面的步骤和往常一样） npm install vue-awesome-swiper --save在 main,js 里引入（全局）: import VueAwesomeSwiper from vue-awesome-swiper Vue.use(VueAwesomeSwiper) import swiper/dist/css/s...
最近在撸一个电商网站，有一个需求是要像淘宝商品详情页那样，鼠标放在主图上，显示图片放大镜效果，找了一下貌似没有什么合适的vue插件，于是自己撸了一个，分享一下。小白第一次分享，各位大神莫见笑。 vue-piczoompicture magnifier component for Vue.js 2.x基于vue2.x的电商图片放大镜插件GIF 动画截图Build Setup 使用步骤# 安装 install npm install vue-piczoom --save使用 use--scriptimport PicZoom from vue-piczoom ex...