import Vue from "vue"; import slideVerify from "vue-monoplasty-slide-verify"; Vue.use(slideVerify);
<template> <div> <button @click="demo=true">打开</button> <!-- 弹出窗口不应设置宽度，因为页面是自适应的，如果设置宽度，组件不能同步，可能有大空白或图片溢出弹出窗口，所以弹出窗口的宽度取决于组件中的图片 --> <van-popup v-model="demo" :close-on-click-overlay="false" > <div class="line-two"> <slide-verify :l="slideObj.l" :r="slideObj.r" :w="slideObj.w" :h="slideObj.h" slider-text="请拖动滑块完成验证，确认领取" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :imgs="imgs" :accuracy='5' ></slide-verify> <!-- accuracy容错率 --> </div> </van-popup> </div> </template> <script> export default {
data() {
return {
slideObj: {
l: 42, //滑动碎片的大小 r: 10, //滑动碎片的圆角 w: 310, //画布的宽 h: 155, //画布的高 }, demo: false, imgs: [ "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1411%2F03%2Fc11%2F40513136_1415006215595.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=66cafeed4b05e3cc2337bd619564552a", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0146425bbdc6efa801213dead7d60e.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=e11d669624d5ac428996e933f67f5d93", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428190056_cnorp.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=a174254b82136a546d08f4e903dddb59", "https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/baike/pic/item/14ce36d3d539b6005fd3d015e550352ac65cb777.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F18d8bc3eb13533fa828b4f630598ea1f4134970aed60&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658045243&t=fb598fe1de3576cf76269f913d9fad0b", ], //可以将所需的图片放在一个数组中，刷新后组件会自动随机抽取图片 }; }, mounted() {
let clientWidth = document.documentElement.clientWidth; //获取HTML文档所在窗口的当前宽度 let ratio = (clientWidth / 375) * 20; //计算基数为40的比例,然后动态计算画布在当前窗口的宽高，撑开弹窗 this.slideObj.l = 1.2 * ratio; this.slideObj.r = 0.3 * ratio; this.slideObj.w = 12.6 * ratio; this.slideObj.h = 7.8 * ratio; }, methods: {
onSuccess() {
console.log("成功回调"); }, onFail() {
console.log("失败回调"); }, onRefresh() {
console.log("刷新回调"); }, }, }; </script> <style> .line-two {
padding: 1rem; background: white; } </style>
