随笔分类 - VUE从入门到放弃
摘要：默认插槽： this.$slots.default[0].context.showUser();
阅读全文
摘要：*只有前端部分 1.首先data需要储存几个值： payUrl: "", // 订单支付跳转链接 isFetchCode: false, //正在生成订单 payStatus: "", // 订单状态，用于判断是否还需要继续请求订单支付结果接口 userDown: false, // 用户点击已支付
阅读全文
摘要：<img src="./images/copy.png" @click="copyUrl" /> copyTextArea() { const shareUrl = "http://www.xxx.com"; const textarea = document.createElement("text
阅读全文
摘要：需求： 英雄展示页面提供纵向头像滚动切换功能，需要支持循环滚动、拖动切换、前后按钮切换、点击头像图标切换等功能。 代码： <div :class="$style.swiperBox"> <swiper ref="heroSwiper" :options="swiperOptions" :class=
阅读全文
摘要：1.放大的圈 @keyframes zoom3 { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; } 100% { opacity: 0.7; transform: scale(1); } } .play { position:
阅读全文
摘要：swiper6中一些配置会失效 原因是控件需要单独引入 如我 这次用的swiper相关版本是： npm i swiper@6.8.4 vue-awesome-swiper@4.1.1 在滚轮切换、分页、左右切换和动效配置中，都需要单独引入控件 import { Swiper, SwiperSlide
阅读全文
摘要：方案1：js绘制条形验证码 参考文档：https://blog.csdn.net/LOVE_mingjing/article/details/130622848 utils文件夹下新建GVerify.js文件： function GVerify(options) { // 创建一个图形验证码对象，接
阅读全文
摘要：很垃圾的弧形轮播效果，其实不算弧形，只是一个爬坡效果，最终否了 但保留一下配置项的代码。。 方案1： swiperOptions: { direction: "vertical", spaceBetween: -80, slidesPerView: 5, loop: true, centeredSl
阅读全文
摘要：需求：表单中直接使用input进行文件上传，并直接传到后端表单接口 出现的问题： 1.全局接口配置的请求头是application/json，要传formData需要修改请求头（不可能，绝对不可能） 2.后端不单独对文件进行储存，因此无法使用独立封装的上传组件 解决方案：file转base64编码，
阅读全文
摘要：报错内容： Error: Cannot find module ‘babel-preset-es2015‘ 根据官方文档指引，有一步骤是修改.babelrc文件的配置，但实际此写法早已废弃，（如果没有.babelrc文件，那么就是修改根目录下的babel.config.js）可以修改为： modul
阅读全文
摘要：插件：vue-clipboard2 【是一个很常用的插件，网上教程很多】 简单使用： (1）引入 （2）页面代码 <div :class="$style.copyLine"> <div :class="$style.copyContent">邀请码: {{ code }}</div> <div v-
阅读全文
摘要：首先附上文档链接： 1.微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111 2.免费生成二维码的草料官网：https://cli.im/text/other 需求： 在浏览器分享链接时
阅读全文
摘要：参考文档：https://www.duidaima.com/Group/Topic/Vue/12272 前提不赘述，npm引入插件并全局导入 components文件夹下创建ArticleEditor.vue： <template> <div class=""> <!-- 富文本框 --> <qui
阅读全文
摘要：可能是因为数据是动态渲染的，在请求到数据之前，就已经完成了swiper的初始化，因此解决方案有： 1.swiper组件添加v-if：（如以下代码中的v-if="banner.length"） <!-- 轮播图 --> <div :class="$style.newsBanner"> <div :cl
阅读全文
摘要：第一种 俺写在index.html中的head标签与body标签中间（2560是pc端设计稿的宽度）： <script> //设置 webview 字体大小不受系统修改而改变 (function () { if (window.HiSpaceObject) { window.HiSpaceObjec
阅读全文
摘要：效果（进入预约里程碑模块后，小人从第一个台阶逐个闪烁出现在当前预约等级之前的台阶并消失，最终停留在当前预约等级的台阶上）： 虽然很low但是！就是这么设计的！于是在原本静态的代码上稍加了些修改（为什么，为什么，想问天问大地） 首先是台阶部分的代码： <div :class="$style.reser
阅读全文
摘要：<span :class="[$style.wxCode, isShow && $style['show']]" @touchstart="touchStart()" @touchend="touchEnd()" ></span> ps.span元素为图片元素，我这里把图片设置为元素背景了，可以直接
阅读全文
摘要：需求： 在页面中显示一个数字，并在进入视口时显示计时器滚动效果： 效果如上 ↑ 新建组件ScrollNumber.vue： <template> <div style=" display: inline-flex; justify-content: flex-start; align-items:
阅读全文
摘要：在后台项目的实际开发过程中，涉及到表单的部分通常会使用动态渲染的方案进行实现，由后端接口返回表单配置，前端进行遍历渲染。考虑到通用后台需要具备的功能，除了基础的表单项如输入、下拉、多选、开关、时间、日期等，还需要具备上传、富文本框等功能。 首先导入一个百度来的富文本框插件：npm install v
阅读全文
摘要：登录后，应有一个主页，可以展示当前用户的一些信息，例如上次登录时间地点、修改手机号、重置密码等简单功能，如图： 首先在views下新建HomeView.vue文件： <template> <el-row> <el-col :span="24"> <!-- user卡片 --> <el-card> <
阅读全文
浙公网安备 33010602011771号