js-plug-in

2019-09-19

插件使用

音频视频：plyr

npm：https://www.npmjs.com/package/plyr

安装：
1
npm i plyr

引用：

1 2	import Plyr from "plyr"; import "plyr/dist/plyr.css";

使用：

<!--src 音频地址-->
<audio id="player" controls iconPrefix="../assets/combinedShape.png">
    <source :src="audio" type="audio/mp3" />
</audio>

<!--controls 配置，可以自己设置包括播放按钮，播放进度，播放时间-->
this.player = new Plyr("#player", {
  controls: ["play-large", "play", "progress", "current-time"]
});
<!--播放-->
this.player.play();
<!--暂停-->
this.player.pause();

<!--动态改变音频src-->
<!--先销毁-->
this.player.destroy();
<!--修改src-->
这里需要注意一点，是单独只更改src绑定的sudio的值，是改变不了播放的src的，需要改变src属性，然后把改元素关掉再打开
this.audio = sea.res_url;
$("#player").attr("src", this.audio);
<!--控制音频元素是否显示-->
this.isExplain = false;
this.isExplain = true;
<!--重置-->
this.player = new Plyr("#player", {
    controls: ["play-large", "play", "progress", "current-time"]
});
this.player.play();

json文件动画：lottie

npm：https://www.npmjs.com/package/vue-lottie

安装：
1
npm i vue-lottie

引用：
可以在main.js里全局引用，也可以在单文件里引用

1
2
3

<!--全局引用-->
import lottie from "vue-lottie";
Vue.component("lottie", lottie);

使用
设计给到json格式的文件
在页面引入

1	import xiaoyun from "../assets/smile_home.json";

<!--当动画暂停时显示图片-->
<lottie
  v-show="xiaoyuning"
  :options="xiaoyun.defaultOptions"
  :height="43"
  :width="41"
  v-on:animCreated="handleXiaoYun"
/>
<img
  v-if="!xiaoyuning"
  class="xiaoyuning"
  src="../assets/ic_yuyin_xiaoyun.png"
/>

data数据  defaultOptions里animationData的值对应引入文件的名，anim是动画的配置
xiaoyun: {
    defaultOptions: { animationData: xiaoyun },
    animationSpeed: 1,
    anim: {}
},
事件
handleXiaoYun: function(anim) {
  this.xiaoyun.anim = anim;
},
<!--播放-->
this.xiaoyun.anim.play();
<!--暂停-->
this.xiaoyun.anim.pause();

微信查看图片缩放滑动：photoswipe

npm：https://www.npmjs.com/package/vue-image-swipe

安装
1
npm i vue-image-swipe

生成二维码：qr-code-with-logo

npm：https://www.npmjs.com/package/qr-code-with-logo

安装
1
npm i qr-code-with-logo

引用

1	import QrCodeWithLogo from 'qr-code-with-logo'

使用

html

1 2	<!--在页面上写一个canvas的标签--> <canvas id="canvas"></canvas>

const myCanvas = document.getElementById('canvas')
let qrcode = QrCodeWithLogo.toCanvas({
  canvas: myCanvas,
  // 二维码内容
  content: '1QYDCK2',
  width: 172,
  height: 172,
  borderSize: 0,
  nodeQrCodeOptions: {
    <!--外白色边框大小-->
    margin: 0,
  }
})

注：还有很多配置，可以配置Logo，有需要的可以参考npm：https://www.npmjs.com/package/qr-code-with-logo