vue-monoplasty-slide-verify自定义拼图出现位置

自定义拼图出现位置, 配合后台控制成功/失败触发时机

安装 vue-monoplasty-slide-verify

npm install --save vue-monoplasty-slide-verify

在main.js中引入全局组件SlideVerify

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);

参数详情可参考: https://gitee.com/monoplasty/vue-monoplasty-slide-verify

在组件中使用 (不需要后台配合使用)

<template><slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"></slide-verify><button @click="handleClick">在父组件可以点我刷新哦</button><div>{{msg}}</div>
</template><script>export default {name: 'App',data(){return {msg: '',text: '向右滑动->',// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5accuracy: 1,}},methods: {onSuccess(times){console.log('验证通过，耗时 +' times + '毫秒');this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'},onFail(){console.log('验证不通过');this.msg = ''},onRefresh(){console.log('点击了刷新小图标');this.msg = ''},onFulfilled() {console.log('刷新成功啦！');},onAgain() {console.log('检测到非人为操作的哦！');this.msg = 'try again';// 刷新this.$refs.slideblock.reset();},handleClick() {this.$refs.slideblock.reset();},}}
</script>

配合后台随机生成位置, 控制成功/失败事件, 使用方式如下

<template><div class="about"><!-- l => 拼图矩形部分的宽度r => 拼图圆环部分的直径w => 画布宽度h => 画布高度xl => 拼图出现的 x 轴坐标yl => 拼图出现的 y 轴坐标text => 底部滑动部分显示提示内容imgs => 显示图片数组(若传值,则从数组中随机选取图片)--><slide-verify ref="slideblock" :l="40" :r="8" :w="300" :h="200" :xl="xl" :yl="yl" @again="onAgain" @fulfilled="onFulfilled" @sureEndMove="sureEndMove" @fail="onFail" @refresh="onRefresh" :slider-text="text"></slide-verify><p>{{msg}}</p></div>
</template><script>
export default {data() {return {msg: '',text: '向右滑动验证',imgs: [],xl: 150,yl: 100}},methods: {success() {// 成功回调this.$refs.slideblock.sureSuccess('123456789')},error() {// 失败回调this.$refs.slideblock.sureError('abcdefg')},sureEndMove(client, times) {/*** 鼠标抬起触发事件* 在这里执行请求* 这里为模拟判断, 可根据需求在此处进行请求, 获取状态, 判断是否执行 成功/失败 方法* */ console.log('位置', client);if (client >= this.xl-5 && client <= this.xl+5) {this.success()this.msg = `登录成功, 耗时${(times / 1000).toFixed(1)}s`console.log(`login success, 耗时${(times / 1000).toFixed(1)}s`);} else {this.error()this.msg = '重新验证'}},onFail() {console.log('验证不通过');this.msg = '重新验证'},onRefresh() {console.log('点击了刷新小图标');this.msg = ''},onFulfilled() {this.$refs.slideblock.reset();console.log('刷新成功啦！');},onAgain() {console.log('检测到非人为操作的哦！');// 刷新this.$refs.slideblock.reset();},handleClick() {// 父组件直接可以调用刷新方法this.$refs.slideblock.reset();},}
}
</script>

注: 此方式需修改源码, 修改后代码入下, 其余功能可自由发挥

文件目录为 node_modules/vue-monoplasty-slide-verify/dist/slide-verify.js 文件, 直接替换文件内容即可

! function (e, t) {"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("SlideVerify", [], t) : "object" == typeof exports ? exports.SlideVerify = t() : e.SlideVerify = t()
}("undefined" != typeof self ? self : this, function () {return function (e) {function t(n) {if (i[n]) return i[n].exports;var s = i[n] = {i: n,l: !1,exports: {}};return e[n].call(s.exports, s, s.exports, t), s.l = !0, s.exports}var i = {};return t.m = e, t.c = i, t.d = function (e, i, n) {t.o(e, i) || Object.defineProperty(e, i, {configurable: !1,enumerable: !0,get: n})}, t.n = function (e) {var i = e && e.__esModule ? function () {return e.default} : function () {return e};return t.d(i, "a", i), i}, t.o = function (e, t) {return Object.prototype.hasOwnProperty.call(e, t)}, t.p = "/dist/", t(t.s = 2)}([function (e, t) {e.exports ="data:image/png;base64,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"}, function (e, t, i) {"use strict";function n(e, t) {return e + t}function s(e) {return e * e}var r = Math.PI;t.a = {name: "SlideVerify",props: {l: {type: Number,default: 42},r: {type: Number,default: 10},w: {type: Number,default: 310},h: {type: Number,default: 155},sliderText: {type: String,default: "Slide filled right"},accuracy: {type: Number,default: 5},show: {type: Boolean,default: !0},imgs: {type: Array,default: function () {return []}},xl: { // x轴的位置坐标type: Number,default: 100},yl: { // y轴的位置坐标type: Number,default: 100}},data: function () {return {containerActive: !1,containerSuccess: !1,containerFail: !1,canvasCtx: null,blockCtx: null,block: null,block_x: void 0,block_y: void 0,L: this.l + 2 * this.r + 3,img: void 0,originX: void 0,originY: void 0,isMouseDown: !1,trail: [],sliderLeft: 0,sliderMaskWidth: 0,success: !1,loadBlock: !0,timestamp: null}},mounted: function () {this.init()},methods: {init: function () {this.initDom(), this.initImg(), this.bindEvents()},initDom: function () {this.block = this.$refs.block, this.canvasCtx = this.$refs.canvas.getContext("2d"), this.blockCtx = this.block.getContext("2d")},initImg: function () {console.log(this.createImg())var e = this,t = this.createImg(function () {e.loadBlock = !1, e.drawBlock(), e.canvasCtx.drawImage(t, 0, 0, e.w, e.h), e.blockCtx.drawImage(t, 0, 0,e.w, e.h);var i = e.block_x,n = e.block_y,s = e.r,r = e.L,a = n - 2 * s - 1,o = e.blockCtx.getImageData(i, a, r, r);e.block.width = r, e.blockCtx.putImageData(o, 0, a)});this.img = t},drawBlock: function () {// this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10)), this.block_y = this.getRandomNumberByRange(//      10 + 2 * this.r, this.h - (this.L + 10)), this.draw(this.canvasCtx, this.block_x, this.block_y, "fill"),this.block_x = this.xl, this.block_y = this.yl, this.draw(this.canvasCtx, this.block_x, this.block_y, "fill"),this.draw(this.blockCtx, this.block_x, this.block_y, "clip")},draw: function (e, t, i, n) {var s = this.l,a = this.r;e.beginPath(), e.moveTo(t, i), e.arc(t + s / 2, i - a + 2, a, .72 * r, 2.26 * r), e.lineTo(t + s, i), e.arc(t + s + a - 2, i + s / 2, a, 1.21 * r, 2.78 * r), e.lineTo(t + s, i + s), e.lineTo(t, i + s), e.arc(t + a -2, i + s / 2, a + .4, 2.76 * r, 1.24 * r, !0), e.lineTo(t, i), e.lineWidth = 2, e.fillStyle ="rgba(255, 255, 255, 0.7)", e.strokeStyle = "rgba(255, 255, 255, 0.7)", e.stroke(), e[n](), e.globalCompositeOperation ="destination-over"},createImg: function (e) {var t = this,i = document.createElement("img");return i.crossOrigin = "Anonymous", i.onload = e, i.onerror = function () {i.src = t.getRandomImg()}, i.src = this.getRandomImg(), i},getRandomImg: function () {var e = this.imgs.length;return e > 0 ? this.imgs[this.getRandomNumberByRange(0, e) - 1] : "https://picsum.photos/300/150/?image=" + this.getRandomNumberByRange(0, 1084)},getRandomNumberByRange: function (e, t) {return Math.round(Math.random() * (t - e) + e)},refresh: function () {this.reset(), this.$emit("refresh")},sliderDown: function (e) {this.success || (this.originX = e.clientX, this.originY = e.clientY, this.isMouseDown = !0, this.timestamp = +new Date)},touchStartEvent: function (e) {this.success || (this.originX = e.changedTouches[0].pageX, this.originY = e.changedTouches[0].pageY, this.isMouseDown = !0, this.timestamp = +new Date)},bindEvents: function () { // 鼠标放开事件var e = this;document.addEventListener("mousemove", function (t) {if (!e.isMouseDown) return !1;var i = t.clientX - e.originX,n = t.clientY - e.originY;if (i < 0 || i + 38 >= e.w) return !1;e.sliderLeft = i + "px";var s = (e.w - 40 - 20) / (e.w - 40) * i;e.block.style.left = s + "px", e.containerActive = !0, e.sliderMaskWidth = i + "px", e.trail.push(n)}), document.addEventListener("mouseup", function (t) {if (!e.isMouseDown) return !1;if (e.isMouseDown = !1, t.clientX === e.originX) return !1;e.containerActive = !1, e.timestamp = +new Date - e.timestamp;console.log(22222, parseInt(e.block.style.left));e.$emit('sureEndMove', parseInt(e.block.style.left), e.timestamp)// var i = e.verify(),//   n = i.spliced,//   s = i.TuringTest;// if (n) {//     if (-1 === e.accuracy) return e.containerSuccess = !0, e.success = !0, void e.$emit("success", e.timestamp);//   s ? (e.containerSuccess = !0, e.success = !0, e.$emit("success", e.timestamp)) : (e.containerFail = !0,//      e.$emit("again"))// } else e.containerFail = !0, e.$emit("fail"), setTimeout(function() {//    e.reset()// }, 1e3)})},// 成功执行函数sureSuccess: function (val) {var e = this;console.log(val);var i = e.verify(),n = i.spliced,s = i.TuringTest;if (n) {if (-1 === e.accuracy) return e.containerSuccess = !0, e.success = !0, void e.$emit("success", e.timestamp);s ? (e.containerSuccess = !0, e.success = !0, e.$emit("success", e.timestamp)) : (e.containerFail = !0,e.$emit("again"))}},// 失败调用函数sureError: function () {var e = this;e.containerFail = !0, e.$emit('fulfilled')e.reset()// setTimeout(function () {//    e.reset()//     e.$emit('fulfilled')// }, 1e3)},touchMoveEvent: function (e) {if (!this.isMouseDown) return !1;var t = e.changedTouches[0].pageX - this.originX,i = e.changedTouches[0].pageY - this.originY;if (t < 0 || t + 38 >= this.w) return !1;this.sliderLeft = t + "px";var n = (this.w - 40 - 20) / (this.w - 40) * t;this.block.style.left = n + "px", this.containerActive = !0, this.sliderMaskWidth = t + "px", this.trail.push(i)},touchEndEvent: function (e) {var t = this;if (!this.isMouseDown) return !1;if (this.isMouseDown = !1, e.changedTouches[0].pageX === this.originX) return !1;this.containerActive = !1, this.timestamp = +new Date - this.timestamp;var i = this.verify(),n = i.spliced,s = i.TuringTest;if (n) {if (-1 === this.accuracy) return this.containerSuccess = !0, this.success = !0, void this.$emit("success",this.timestamp);s ? (this.containerSuccess = !0, this.success = !0, this.$emit("success", this.timestamp)) : (this.containerFail = !0, this.$emit("again"))} else this.containerFail = !0, this.$emit("fail"), setTimeout(function () {t.reset()}, 1e3)},verify: function () {var e = this.trail,t = e.reduce(n) / e.length,i = e.map(function (e) {return e - t}),r = Math.sqrt(i.map(s).reduce(n) / e.length),a = parseInt(this.block.style.left),o = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;return {spliced: Math.abs(a - this.block_x) <= o,TuringTest: t !== r}},reset: function () {this.success = !1, this.containerActive = !1, this.containerSuccess = !1, this.containerFail = !1, this.sliderLeft =0, this.block.style.left = 0, this.sliderMaskWidth = 0;var e = this.w,t = this.h;this.canvasCtx.clearRect(0, 0, e, t), this.blockCtx.clearRect(0, 0, e, t), this.block.width = e, this.img.src =this.getRandomImg()// , this.$emit("fulfilled")}}}}, function (e, t, i) {"use strict";Object.defineProperty(t, "__esModule", {value: !0});var n = i(3),s = {install: function (e) {e.component(n.a.name, n.a)}};"undefined" != typeof window && window.Vue && window.Vue.use(n.a), t.default = s}, function (e, t, i) {"use strict";function n(e) {i(4)}var s = i(1),r = i(11),a = i(10),o = n,c = a(s.a, r.a, !1, o, "data-v-b2d04a40", null);t.a = c.exports}, function (e, t, i) {var n = i(5);"string" == typeof n && (n = [[e.i, n, ""]]), n.locals && (e.exports = n.locals);i(8)("6b4c9876", n, !0, {})}, function (e, t, i) {var n = i(6);t = e.exports = i(7)(!1), t.push([e.i,".slide-verify[data-v-b2d04a40]{position:relative}.slider-verify-loading[data-v-b2d04a40]{position:absolute;top:0;right:0;left:0;bottom:0;background:hsla(0,0%,100%,.9);z-index:999;animation:loading-data-v-b2d04a40 1.5s infinite}@keyframes loading-data-v-b2d04a40{0%{opacity:.7}to{opacity:1}}.slide-verify-block[data-v-b2d04a40]{position:absolute;left:0;top:0}.slide-verify-refresh-icon[data-v-b2d04a40]{position:absolute;right:0;top:0;width:34px;height:34px;cursor:pointer;background:url(" +n(i(0)) +") 0 -437px;background-size:34px 471px}.slide-verify-slider[data-v-b2d04a40]{position:relative;text-align:center;width:100%;height:40px;line-height:40px;margin-top:15px;background:#f7f9fa;color:#45494c;border:1px solid #e4e7eb}.slide-verify-slider-mask[data-v-b2d04a40]{position:absolute;left:0;top:0;height:40px;border:0 solid #1991fa;background:#d1e9fe}.slide-verify-slider-mask-item[data-v-b2d04a40]{position:absolute;top:0;left:0;width:40px;height:40px;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.3);cursor:pointer;transition:background .2s linear}.slide-verify-slider-mask-item[data-v-b2d04a40]:hover{background:#1991fa}.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon[data-v-b2d04a40]{background-position:0 -13px}.slide-verify-slider-mask-item-icon[data-v-b2d04a40]{position:absolute;top:15px;left:13px;width:14px;height:12px;background:url(" +n(i(0)) +") 0 -26px;background-size:34px 471px}.container-active .slide-verify-slider-mask-item[data-v-b2d04a40]{height:38px;top:-1px;border:1px solid #1991fa}.container-active .slide-verify-slider-mask[data-v-b2d04a40]{height:38px;border-width:1px}.container-success .slide-verify-slider-mask-item[data-v-b2d04a40]{height:38px;top:-1px;border:1px solid #52ccba;background-color:#52ccba!important}.container-success .slide-verify-slider-mask[data-v-b2d04a40]{height:38px;border:1px solid #52ccba;background-color:#d2f4ef}.container-success .slide-verify-slider-mask-item-icon[data-v-b2d04a40]{background-position:0 0!important}.container-fail .slide-verify-slider-mask-item[data-v-b2d04a40]{height:38px;top:-1px;border:1px solid #f57a7a;background-color:#f57a7a!important}.container-fail .slide-verify-slider-mask[data-v-b2d04a40]{height:38px;border:1px solid #f57a7a;background-color:#fce1e1}.container-fail .slide-verify-slider-mask-item-icon[data-v-b2d04a40]{top:14px;background-position:0 -82px!important}.container-active .slide-verify-slider-text[data-v-b2d04a40],.container-fail .slide-verify-slider-text[data-v-b2d04a40],.container-success .slide-verify-slider-text[data-v-b2d04a40]{display:none}",""])}, function (e, t) {e.exports = function (e) {return "string" != typeof e ? e : (/^['"].*['"]$/.test(e) && (e = e.slice(1, -1)), /["'() \t\n]/.test(e) ? '"' +e.replace(/"/g, '\\"').replace(/\n/g, "\\n") + '"' : e)}}, function (e, t) {function i(e, t) {var i = e[1] || "",s = e[3];if (!s) return i;if (t && "function" == typeof btoa) {var r = n(s);return [i].concat(s.sources.map(function (e) {return "/*# sourceURL=" + s.sourceRoot + e + " */"})).concat([r]).join("\n")}return [i].join("\n")}function n(e) {return "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(e)))) + " */"}e.exports = function (e) {var t = [];return t.toString = function () {return this.map(function (t) {var n = i(t, e);return t[2] ? "@media " + t[2] + "{" + n + "}" : n}).join("")}, t.i = function (e, i) {"string" == typeof e && (e = [[null, e, ""]]);for (var n = {}, s = 0; s < this.length; s++) {var r = this[s][0];"number" == typeof r && (n[r] = !0)}for (s = 0; s < e.length; s++) {var a = e[s];"number" == typeof a[0] && n[a[0]] || (i && !a[2] ? a[2] = i : i && (a[2] = "(" + a[2] + ") and (" + i + ")"),t.push(a))}}, t}}, function (e, t, i) {function n(e) {for (var t = 0; t < e.length; t++) {var i = e[t],n = l[i.id];if (n) {n.refs++;for (var s = 0; s < n.parts.length; s++) n.parts[s](i.parts[s]);for (; s < i.parts.length; s++) n.parts.push(r(i.parts[s]));n.parts.length > i.parts.length && (n.parts.length = i.parts.length)} else {for (var a = [], s = 0; s < i.parts.length; s++) a.push(r(i.parts[s]));l[i.id] = {id: i.id,refs: 1,parts: a}}}}function s() {var e = document.createElement("style");return e.type = "text/css", u.appendChild(e), e}function r(e) {var t, i, n = document.querySelector("style[" + g + '~="' + e.id + '"]');if (n) {if (h) return v;n.parentNode.removeChild(n)}if (b) {var r = p++;n = f || (f = s()), t = a.bind(null, n, r, !1), i = a.bind(null, n, r, !0)} else n = s(), t = o.bind(null, n), i = function () {n.parentNode.removeChild(n)};return t(e),function (n) {if (n) {if (n.css === e.css && n.media === e.media && n.sourceMap === e.sourceMap) return;t(e = n)} else i()}}function a(e, t, i, n) {var s = i ? "" : n.css;if (e.styleSheet) e.styleSheet.cssText = A(t, s);else {var r = document.createTextNode(s),a = e.childNodes;a[t] && e.removeChild(a[t]), a.length ? e.insertBefore(r, a[t]) : e.appendChild(r)}}function o(e, t) {var i = t.css,n = t.media,s = t.sourceMap;if (n && e.setAttribute("media", n), m.ssrId && e.setAttribute(g, t.id), s && (i += "\n/*# sourceURL=" + s.sources[0] + " */", i += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(s)))) + " */"), e.styleSheet) e.styleSheet.cssText = i;else {for (; e.firstChild;) e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var c = "undefined" != typeof document;if ("undefined" != typeof DEBUG && DEBUG && !c) throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var d = i(9),l = {},u = c && (document.head || document.getElementsByTagName("head")[0]),f = null,p = 0,h = !1,v = function () { },m = null,g = "data-vue-ssr-id",b = "undefined" != typeof navigator && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports = function (e, t, i, s) {h = i, m = s || {};var r = d(e, t);return n(r),function (t) {for (var i = [], s = 0; s < r.length; s++) {var a = r[s],o = l[a.id];o.refs--, i.push(o)}t ? (r = d(e, t), n(r)) : r = [];for (var s = 0; s < i.length; s++) {var o = i[s];if (0 === o.refs) {for (var c = 0; c < o.parts.length; c++) o.parts[c]();delete l[o.id]}}}};var A = function () {var e = [];return function (t, i) {return e[t] = i, e.filter(Boolean).join("\n")}}()}, function (e, t) {e.exports = function (e, t) {for (var i = [], n = {}, s = 0; s < t.length; s++) {var r = t[s],a = r[0],o = r[1],c = r[2],d = r[3],l = {id: e + ":" + s,css: o,media: c,sourceMap: d};n[a] ? n[a].parts.push(l) : i.push(n[a] = {id: a,parts: [l]})}return i}}, function (e, t) {e.exports = function (e, t, i, n, s, r) {var a, o = e = e || {},c = typeof e.default;"object" !== c && "function" !== c || (a = e, o = e.default);var d = "function" == typeof o ? o.options : o;t && (d.render = t.render, d.staticRenderFns = t.staticRenderFns, d._compiled = !0), i && (d.functional = !0),s && (d._scopeId = s);var l;if (r ? (l = function (e) {e = e || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext,e || "undefined" == typeof __VUE_SSR_CONTEXT__ || (e = __VUE_SSR_CONTEXT__), n && n.call(this, e), e && e._registeredComponents &&e._registeredComponents.add(r)}, d._ssrRegister = l) : n && (l = n), l) {var u = d.functional,f = u ? d.render : d.beforeCreate;u ? (d._injectStyles = l, d.render = function (e, t) {return l.call(t), f(e, t)}) : d.beforeCreate = f ? [].concat(f, l) : [l]}return {esModule: a,exports: o,options: d}}}, function (e, t, i) {"use strict";var n = function () {var e = this,t = e.$createElement,i = e._self._c || t;return i("div", {staticClass: "slide-verify",style: {width: e.w + "px"},attrs: {id: "slideVerify",onselectstart: "return false;"}}, [i("div", {class: {"slider-verify-loading": e.loadBlock}}), e._v(" "), i("canvas", {ref: "canvas",attrs: {width: e.w,height: e.h}}), e._v(" "), e.show ? i("div", {staticClass: "slide-verify-refresh-icon",on: {click: e.refresh}}) : e._e(), e._v(" "), i("canvas", {ref: "block",staticClass: "slide-verify-block",attrs: {width: e.w,height: e.h}}), e._v(" "), i("div", {staticClass: "slide-verify-slider",class: {"container-active": e.containerActive, "container-success": e.containerSuccess, "container-fail": e.containerFail}}, [i("div", {staticClass: "slide-verify-slider-mask",style: {width: e.sliderMaskWidth}}, [i("div", {staticClass: "slide-verify-slider-mask-item",style: {left: e.sliderLeft},on: {mousedown: e.sliderDown,touchstart: e.touchStartEvent,touchmove: e.touchMoveEvent,touchend: e.touchEndEvent}}, [i("div", {staticClass: "slide-verify-slider-mask-item-icon"})])]), e._v(" "), i("span", {staticClass: "slide-verify-slider-text"}, [e._v(e._s(e.sliderText))])])])},s = [],r = {render: n,staticRenderFns: s};t.a = r}])
});
//# sourceMappingURL=slide-verify.js.map

vue-monoplasty-slide-verify自定义拼图出现位置相关推荐

Vue+element登录页面实现拼图验证
Vue+element登录页面实现拼图验证需求分析一.导入二.验证的意义三.常规验证手段详细设计一.使用组件二.轮子已找好,开始拼凑效果展示结尾需求分析一.导入项目开发过程中, ...
使用VUE组件创建SpreadJS自定义单元格(二)
在上篇中,我们介绍了如何通过设置runtimeCompiler为true,在Vue中实现了动态创建电子表格组件.想了解具体内容可看点击查看使用VUE组件创建SpreadJS自定义单元格(一). 但是在 ...
使用VUE组件创建SpreadJS自定义单元格(一)
作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...
[vue] vue给组件绑定自定义事件无效怎么解决？
[vue] vue给组件绑定自定义事件无效怎么解决? 两种方式 1.组件外部加修饰符.navtive 2.组件内部声明$emit('自定义事件') 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放 ...
vue css自定义标签,Vue如何使用CSS自定义变量
目录在 css 自定义变量的功能以及出来许久了,但实际开发中大家使用并不多.归其原因是因为 less.sass 等预处理器已经拥有定义变量的功能,以及Vue.react很方便设置 style 样式, ...
UC浏览器电脑版怎么自定义标签栏标签栏位置修改教程
在UC浏览器中,如果觉得标签栏位置不是很合适的话可以自己来定义,下面小编就告诉你UC浏览器电脑版标签栏位置修改教程. UC浏览器电脑版怎么自定义标签栏标签栏位置修改教程 UC浏览器电脑版怎么自定义标 ...
鼠标图标怎么自定义_苹果ios14怎么自定义图标图标位置自由排列换风格教程
苹果ios14怎么自定义图标图标位置自由排列换风格教程 iOS 14 发布后,自定义主屏幕图标成为了一种流行的趋势,一些用户通过「快捷指令」将默认的应用图标替换为自定义图标,然后将应用本来的图标隐藏 ...
Vue项目中的自定义指令
Vue项目中的自定义指令使用场景:需要对DOM元素进行底层操作局部自定义指令当指令第一次被绑定到元素上的时候,会立即触发 bind() 1 定义与 data 同级在 directives 节 ...

vue-monoplasty-slide-verify自定义拼图出现位置

vue-monoplasty-slide-verify自定义拼图出现位置相关推荐

最新文章

热门文章