随笔分类 -  VUE从入门到放弃

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

点击右上角即可分享
微信分享提示