VUE
关注
分享
扫一扫
换日线°
你只管努力 最坏不过大器晚成 WX1010753897
展开
-
VUE封装axios请求配置全局弹窗及跳转（有效果图）
效果图弹窗组件名cu-model.vue<template> <div class="in_alert" v-if="show"> <span class="in_text-overflow">{{content}}</span> </div></template><script>export default { props: ['show', 'content']}</script>原创 2021-11-03 17:07:14 · 1469 阅读 · 0 评论 -
VUE生成海报（HTML转图片）
效果图如下所示引用插件，使用插件//引用插件npm install qrcodejs2 --savenpm install html2canvas --save//在需要生成海报的页面使用import html2canvas from 'html2canvas';import QRcode from 'qrcodejs2';生成海报代码//template<div class="burr_f-haibao" id="posterHtml" v-if="posterIm原创 2020-09-11 09:33:11 · 3096 阅读 · 1 评论 -
VUE监听页面滚动到底部
methods：{ Scrollbottom () { let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = document.documentElement.clientHeight; let scrollHeight = document.documentElement.scrollHeight; if (scrollTop + clientH原创 2020-08-25 17:05:27 · 4659 阅读 · 2 评论 -
VUE快速简单搭建UEditor富文本编辑器
效果图如下所示Installationnpm i vue-ueditor-wrap下载 UEditor官网链接: http://ueditor.baidu.com/website/download.html我的链接: https://pan.baidu.com/s/1zA9RgdeMjMQNSPygWq8Vaw 提取码: qjds将下载的压缩包解压并重命名为 UEditor,放入你项目的 static 目录下，如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入.原创 2020-05-27 10:46:19 · 1413 阅读 · 3 评论 -
VUE自制轮播图（仿京粉轮播）
效果图如下所示这里用到监听滑动组件（vue-touch)文章地址：https://blog.csdn.net/qq_43764578/article/details/104709333<template> <div id="app" style="background-color: #f7f7f7;"> <div class="indes">...原创 2020-04-24 17:33:28 · 860 阅读 · 0 评论 -
vue移动端h5页面根据屏幕适配
效果图如下所示media.js(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { ...原创 2020-04-22 15:44:00 · 1086 阅读 · 0 评论 -
VUE移动到指定位置(scrollIntoView)----亲测避坑
用(scrollIntoView)来实现移动到指定位置建议不要放在(mt-loadmore)里使用，不然头部会被挤上去----亲测html<div id="pronbit" ref="pronbit">需要移动到的位置</div>js//选中iddocument.getElementById(e).scrollIntoView({ behavior: "sm...原创 2020-04-21 15:37:09 · 18500 阅读 · 3 评论 -
VUE实时监听元素距离顶部高度
VUE实时监听元素距离顶部高度效果图如下所示.html<!-- 监听ref距离顶部高度 --><div ref="pronbit"> <div>今日热门</div> <div>今日热销</div></div>.jsmounted(){ window.addEventListener('scr...原创 2020-04-20 14:04:02 · 8913 阅读 · 10 评论 -
安装vue-cli 3 VUE脚手架（详细讲解）
安装vue-cli >= 3 VUE脚手架（详细讲解）vue-cli < 3https://blog.csdn.net/qq_43764578/article/details/102495707这个是之前老版本的讲解vue-cli >= 3为什么要安装vue-cli >= 3，首先vue-cli >= 3的版本，比2.0的配置文件简洁了很多，当然你还得跟上时...原创 2020-04-10 16:00:38 · 4970 阅读 · 0 评论 -
vue复制内容到剪切板（通俗易懂）
vue复制内容到剪切板首先需要安装（vue-clipboard2)npm安装npm install --save vue-clipboard2//main.js中引入全局使用：import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)HTML//复制死内容<div v-clipboard:copy="mes...原创 2020-03-10 11:24:05 · 325 阅读 · 0 评论 -
VUE点击回到顶部（带动画过渡效果）
VUE点击回到顶部（带动画过渡效果）监听路由返回顶部在main.js中写入// 路由变化跳转页面回到顶部router.afterEach((to,from,next) => { window.scrollTo(0,0);})在同页面跳转没发生变化 建议使用点击回到顶部（带动画过渡效果）html<div @click="backtop"> <!--...原创 2020-03-09 10:17:19 · 2988 阅读 · 0 评论 -
VUE监听左右滑动（vue-touch)
VUE监听左右滑动（vue-touch)首先需要安装（vue-touch)npm安装npm install vue-touch@next --save//main.js中引入全局使用：import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})使用方法//html代码<template>...原创 2020-03-07 09:19:24 · 2748 阅读 · 2 评论 -
VUE实时监听滚动条高度
VUE实时监听滚动条高度先看效果图不需要设置屏幕100vh，直接上代码mounted: function() { window.addEventListener('scroll',this.rollingheight,true)},methods: { rollingheight:function(e){ console.log(window.pageYOffset) },...原创 2020-03-03 18:30:53 · 3023 阅读 · 0 评论 -
VUE 返回页面刷新数据
VUE 返回页面刷新数据监听路由watch: { //不推荐 用户体验不好 '$route' (to, from) { // 路由发生变化页面刷新 this.$router.go(0); }},watch: { '$route' (to, from) { this.方法名();//返回页面直接调取方法 }},有什么问题欢迎评论留言，我会及时回复你...原创 2020-01-16 11:46:17 · 2769 阅读 · 0 评论 -
VUE使用Element上传视频及预览
VUE使用Element下载视频及预览.html <div v-if="videoForm.showVideoPath ==''"> <el-upload :action="upimgurl"//接口 v-bind:data="{...原创 2020-01-02 15:07:16 · 12542 阅读 · 8 评论 -
VUE下拉刷新上拉加载更多(mt-loadmore)
VUE下拉刷新上拉加载更多(mt-loadmore)<div style="height:100vh;overflow: scroll;"> <mt-loadmore :bottomMethod="loadBottom" :bottom-all-loaded="allLoaded" :bottomDistance="1...原创 2019-10-24 16:24:41 · 1079 阅读 · 0 评论 -
用VUE"application/x-www-form-urlencoded"传值问题
用"application/x-www-form-urlencoded"传值问题这边我用的是VUE 描述"application/x-www-form-urlencoded"传值问题var qs = require('qs') let param = { 'ids':id }; let token = window.localStorage....原创 2019-10-14 16:37:41 · 3495 阅读 · 0 评论 -
vue显示消息提示框功能
vue显示消息提示框功能效果图 如下所示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .toast { positio...原创 2019-10-12 11:48:51 · 19893 阅读 · 1 评论 -
vue分享一个简单的购物功能
vue分享一个简单的购物功能效果图 如下所示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <table b...原创 2019-10-11 18:38:53 · 274 阅读 · 0 评论 -
vue循环数组改变点击文字的颜色
vue循环数组改变点击文字的颜色效果图 如下所示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ list-style: none; ...原创 2019-10-11 14:59:05 · 1553 阅读 · 0 评论 -
搭建VUE项目(从零开始)
搭建VUE项目(从零开始)首先进node.js官网下载相应安装包：https://nodejs.org/en/下载好就安装到自己的目录里，没有需要注意的地方安装完以后在命令输出 npm -v 看看是否安装成功然后就安装vue-cli脚手架完成以上步骤可以在D盘先新建一个文件夹用来存放将要新建的项目文件，这里命名为：vue-demo打开命令行工具，然后跟着输入，进入项目目录vue-de...原创 2019-10-11 10:23:44 · 467 阅读 · 0 评论