柒仔不安-CSDN博客

原创 git 命令行push代码步骤

一、问题以前都是用的小乌龟，这次虚机里面没有小乌龟，由于各种原因也无法安装；只能用 git 命令行提交代码二、解决1、先查看 git 状态 git status2个修改的文件 1个新增的文件2、add：提交文件至本地 git 缓存区 git add .git add . 内容全部添加至本地 git 缓存区git add src/components/error.vue 仅该文件提交至本地 git 缓存区目前我需要的是把所有代码都添加到本地 git 缓存区3、commit：

2021-08-06 19:40:37 14883

原创 uniapp局部上拉加载数据

一、页面局部实现上拉加载数据只有评论区可以上拉加载数据，网上找到了 vue-infinite-scroll二、使用官方示例1、 npm 加载依赖npm install vue-infinite-scroll --save2、单个页面引用import infiniteScroll from 'vue-infinite-scroll'export default { directives: { infiniteScroll }, data() { return { is

2020-12-16 17:18:44 2814 2

原创 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码1、pages.json2、messageBoard.vue用了 uniapp 提供的组件： uni-load-more.vue<uni-load-more :status="loadingText" :contentText="contentText" ></uni-load-more>const loadingTextObj = { more: 'more', no

2020-12-16 17:03:41 1953

原创 uniapp单文件and多文件上传功能

一、上传文件功能前端上传后界面后，点击确定按钮，上传至后台。uniapp拍照上传功能二、代码<view class="top-nav-c"> <view class="before" @tap="isShowDoMessage = false">取消</view> 留言板 <view class="after" :class="{'submit-ck': isSubmit}" @tap="onSubmitMessageClick">确定&l

2020-12-16 16:42:49 1554

原创 uniapp拍照上传功能

一、需求留言板需求，上传留言时，可拍照或者上传图片二、调用拍照/上传文件功能点击拍照按钮，调取相机或者文件<view class="upload-img"> <image src="../../static/image/messageBoard/m_b_upload_btn.png" @tap="onGetImgClick"></image></view>data() { return { imageList:[], }},..

2020-12-16 16:25:45 8124 2

原创 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：uni.previewImage(OBJECT)二、使用html<view class="img-c" v-show="item.pictureUrl"> <image class="img" v-for="(itemImg, imgIndex) in item.pictureUrl" :key="imgIndex" m

2020-12-16 15:57:27 4116

原创微信公众号授权H5页面

一、为何通过微信公众号授权官方:如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。项目：使用 uniapp 开发的 H5 项目，需要通过公众号授权后，才能获取用户信息。PS：如果用 uniapp 开发小程序，可以走小程序的授权，这次用的 H5二、授权大致步骤1、网页授权回调域名在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配

2020-12-16 15:39:03 2753

原创 vue项目之前端生成二维码

一、前提刚开始是通过后台生成二维码并存放在云上的。后来公司的云，在获取到url后，图片不能及时的显示，需要等待几秒；之后，用了腾讯云解决的，在现在这个活动中，竟然出现线上空白的情况最终，选择前端生成二维码二、实现安装依赖包npm install vue-qr --saveHTML:<vue-qr class="vue-qr" :margin="0" :text="downloadData.link" colorDark="#000" colorLight="#fff" size=

2020-12-14 10:33:40 905

原创 uniapp小程序版发布后，报错（MiniProgramError Cannot read property ‘data‘ of undefined）

一、问题小程序上传后，打开页面，不能正常调用接口。通过真机模拟发现报错了，如下：二、解决调用接口时：直接把 baseUrl 写全了，不能通过配置项进行配置。原来的配置：现在：直接改 http 的 baseUrl...

2020-12-09 14:53:55 7991

原创 uniapp 分包--上传功能

一、问题通过HBuilder X-->发行-->小程序--微信(...)后，微信小程序提示上传失败。二、原因小程序上传项目大小限制为：单包2M 总包8M 三、解决uniapp 分包分包时遇到的问题： 1、安装 copy-webpack-plugin 时，提示 webpack 不存在，需要安装。调查后才知道，现在的项目是同事通过 HBuilderX 可视化界面创建的即没有package.json，也没有 webpack 配置。解决：项目工程互换，把原来的工程换位

2020-12-08 18:13:32 1149

原创 vue项目之H5 app 生成海报功能

一、需求本次【世纪盛典】活动，分为三期，每期都有海报相关的工作内容。海报带有动态的个人信息、头像、证书编号及二维码等。本次活动需要在微信h5、小程序、app里面正常启动。二、经过网上查找使用了 html2canvas 这个插件来生成海报。首先，加载依赖包npm install html2canvas --save使用import html2canvas from 'html2canvas'html2canvas 是基于已有 DOM 进行截图生成图片的，已有 DOM 如下： &l

2020-10-28 15:36:04 1474 2

原创 NPM问题之 Unexpected end of JSON input while parsing near ‘...“array-to-sentence“:“‘

问题切换分支后，IDEA提示npm install，执行install之后，一直报错： Unexpected end of JSON input while parsing near '..."array-to-sentence":"'解决npm cache clean --force// 清楚缓存后，再installnpm install

2020-08-19 17:11:52 175

原创 vue项目之H5 app页面通过swiper实现中间变大，两边缩小的滑动轮播功能

一、需求微信H5，小程序，APP三端：手动滑动实现中间放大，两边图片缩小的效果。可视区可看到三张图，其中左右两边的仅出现一小部分。如图二、实现按照依赖包 npm install vue-awesome-swiper --saveHTML: <swiper :options="swiperOption" ref="mySwiper" class="swiper"> <swiper-slide v-for="(item, index) in pictures"

2020-08-14 16:30:59 6137 2

原创小程序uniapp项目之分享好友功能

一、需求点击分享好友或者微信好友，都分享给微信好友二、code都一样，需要调用微信提供的open-type=“share”<button class="btn share_friends" open-type="share">{{dialogTipInfo.btnTxt}}</button>

2020-06-10 16:19:58 5978 3

原创小程序项目之图片不变形

一、问题原图应该显示实际上显示图片变形了。二、解决我们的小程序图片规则已经定义好了宽高比例，需要运营童鞋按照比例给图。这种情况下，image标签用mode='widthFix'属性非常合适<image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"></image>三、扩展圆角设置，不是给image设置圆角的，外面又加了一层view容器，根据ui图的

2020-06-08 11:27:53 1019

原创 vue项目之自定义组件实现PC端下拉加载

一、需求滑动 el-table 滚动条，实现 thead 不动，下拉 tbody 到底部时，el-table加载数据。具体UI请看另一篇文章的需求 PC端下拉加载二、经过同事正好有一个写好的下拉加载的组件，就用了自定义组件 DivScrollPagination.vue<template> <div> <div v-if="loading==0" class="load-more">正在加载...</div> <!--

2020-05-14 17:05:09 2214

原创 vue项目之PC端下拉加载

一、需求产品要求PC端实现下拉加载更多的数据。二、经过经调查，移动端用着比较好，PC端很少有用到。基本都是自己手写一个组件。在git上有一个 vue-mugen-scroll，用的不多，但是实现起来很方便。三、用法先用npm安装了组件npm install --save vue-mugen-scroll然后，下拉加载功能需求在哪个页面用，就importimport MugenScroll from "vue-mugen-scroll"vue – components加入

2020-05-14 15:33:50 3349 1

原创修改hosts文件后，win10提示不能保存文件

一、问题win10 -- C:\Windows\System32\drivers\etc -- host文件，修改后不能保存二、解决途径试了很多方式，有效的方法：1、根据一提供的路径，找到hosts文件2、选中hosts文件，鼠标右键，点击属性选项3、弹出框后，点击安全选项...

2020-02-03 13:49:57 362

原创基于Vue项目的TypeScript之函数基础篇

一、函数methods: { /** * ts-function 之【函数返回值】 * 1、无参 2、有参 */ greet(): string { return "Hello World."; }, greetParams(x: number, y: number): number { return x + y; }, /** * ts-functio...

2019-11-27 11:54:19 925

原创 js之 H5 的 video 标签暂停播放视频

一、问题基于 video 标签播放的视频，大致功能是，点击预览按钮，弹出弹框，可以在线观看视频；如果关闭弹框，视频还是在播放。二、要求关闭弹框，视频也关闭二、codevue...

2019-10-16 16:28:04 2808

原创 vue el-table手动新增行

一、功能点击新增行按钮，el-table 新增一行二、codeVUEjs

2019-10-16 16:07:50 4013

原创 VUE项目之el-input里面有文字出现浮框，没有不出现浮框

一、功能el-input里面有文字出现浮框，没有不出现浮框。刚开始用的因为功能原因，在 template 标签上面加上了 v-ifv-if 时，el-tooltip 标签里加上 el-input; v-else 直接写 el-input 标签加上去之后功能可以了，但是 el-input 有个事件。聚焦时，el-input放大高度；失焦时，el-input 缩小高度el-toolti...

2019-10-16 15:40:45 3836

原创 js之 H5 的 video 标签全屏功能不能用

一、问题H5 的 video 标签全屏功能不能用。二、经过刚开始以为 video 标签全屏功能默认没有开的。后来发现，全屏功能在本地是好使的，服务端就打不开。因为现在这个项目，是嵌套在一个项目的 iframe 页面。三、结果在 iframe 标签里面添加...

2019-10-16 14:39:38 4883 1

原创 vue项目之 el-table 拖拽行

一、功能表格的任意行都可以拖拽位置；默认不能拖拽表格，点击拖拽按钮可以拖拽。二、代码npm 下载 sortablejs页面按钮：页面el-tablejs引入 sortablejsdata() {} 里面的相关数据method: {}disabledRow()...

2019-10-16 10:59:34 3371

原创 js之iframe跨域与父页面进行通信（Blocked a frame with origin...）

一、问题 iframe 这个被嵌套的页面，在打开之前，需要把值传给父页面，本地测试行的通；到服务端就不行了，报错：Blocked a frame with origin...咦，原来 iframe 也存在跨域啊。二、原因本地项目的域名、端口号、当前页面的路径或文件名等，都是一致的，不存在跨域问题。但是服务端已上线的项目，是由两个项目组合的；大的项目里面，用 iframe 嵌套了...

2019-10-16 09:49:16 5395

原创 vue项目之el-table点击表头，进行排序

一、效果二、vue三、JSsettingClass渲染表头： renderHeader排序功能： handleCommand四、less只把排序的样式贴出来，其他根据项目不同，自己设置样式。...

2019-10-11 17:51:04 6233

原创 js之导出Excel

项目基于--vue 做的一个导出 Excel 功能![在这里插入图片描述](https://img-blog.csdnimg.cn/20191011102124138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2N...

2019-10-11 10:21:53 118

原创 vue项目之前后台联调之以数组作为参数传给服务端

一、要求由于项目特殊要求，上传到知识库的文件，再点击保存按钮，保存至项目数据库。由于上传多个文件，保存操作后台要求前端用数组作为参数传过去。二、代码试了很多方式，刚开始用的 axios ，各种不行；最后选择用 jQuery 里面的 $.ajax 联调成功。...

2019-10-09 17:03:55 1901

原创 vue项目之上传单个文件功能

一、效果用 input type="file" 实现文件的上传功能。点击浏览按钮，文件显示在input框；点击上传按钮，上传服务器。二、代码vue文件jsless

2019-10-09 16:37:22 1101 1

原创 input type=file不能重复上传同一个文件

一、问题上传文件用的H5：input type=file，事件用的 change；问题出在，如果上传的第一个文件是 '一站式.txt‘’，之后再上传同一个文件，页面无法显示文件名.注：文件名是通过 change 事件，获取文件信息后，显示到文本框内的，由于是同一个文件名，没有触发 change 事件。二、解决把 input 的 type 类型转变为其他input类型，然后再转成 file...

2019-09-23 16:04:59 5435

原创遍历类数组之获取多个dom节点并遍历

通过类名获取所有改类名的dom节点，并为每个dom设置css样式。第一种方法： // 获取 .tr_height 的所有DOM const treeHei = 66; let trAllDom = document.getElementsByClassName('tr_height'); // 遍历，设置高度 Array.prototype.forEach.call(trAllDo...

2019-06-27 13:19:25 3772

转载 CSS 中已设置的left属性清除

今天遇见这个问题，设置postion left=0，现在想改成right=0,但是样式覆盖不了，同时设置貌似left起作用。CSS 中现在有一个叫做 unset 的关键字，使用可以重置属性值下面是其他讲解unset的链接，博主讲的挺棒：谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset相关...

2019-06-05 16:59:38 2638

原创小程序问题之修改微信小程序默认checkbox框的样式，改为圈圈式

现有的样式index.wxmlindex.jsindex.wxss通过css修改/* 重写 checkbox 样式 *//* 未选中的背景样式 */checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */...

2019-05-09 14:04:35 7878 3

原创 CSS问题之两个dom标签设置 display: inline-block; 宽度正好，还是错位

问题红框中是两个平级的兄弟节点：设置css属性为：dom 渲染效果：错位解决修改css最后，昨天小程序是这个问题导致错位；今天PC Vue项目也是这个问题，还是在博客里记录下吧。...

2019-05-09 10:52:23 799

原创 Vue项目之父子组件实现双向绑定

一、问题项目中有很多关于上传文件的功能，为了方便，把上传文件单独写成一个组件上传文件没有问题，清楚功能，只能在子组件里面清楚，父组件里面还是有第一次上传的数据，再次上传文件，数据依然是第一次上传的信息（没有达到同步的效果）二、经过正好最近正在看一大佬的视频，记得有一节内容就是双向绑定。用 .sync 语法糖实现父子组件的双向绑定v-model 和.sync 都可以实现...

2019-04-18 15:12:57 549

原创 js判断对象是否为空

ES6写法Object.getOwnPropertyNames()变为字符串，匹配{}

2019-04-16 17:26:16 191

原创 download.js问题之文件下载后，内容是url地址

一、问题点击下载按钮，实现文件的下载，而不是新建窗口打开文件用的 download.js 实现，调用时传了三个参数：// 引用 dowload.js 文件import download from '@/lib/dowload.js'// 点击 button 时，调用download(url, name, docType);这样可以下载文件，文件名也对。找到下载好的文件...

2019-04-16 16:04:59 5788 7

转载 Vue的特性精华

以下内容是我在学习和研究Vue时，对Vue的特性、重点和注意事项的提取、精练和总结，可以做为Vue特性的字典；1. 性能优化：相对于计算属性computed、方法methods、观察watch，优先考虑使用计算属性实现，因为计算属性会缓存它的值，只有当计算属性的相关依赖发生改变时才会重新求值；尽可能最大化地让Vue复用可用的元素，即，在用...

2019-04-15 11:31:35 1762

原创 VUE项目之table表格动态添加一列数据，新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

一、问题用elementUi横着增加一行数据没毛病，可以操作添加一列，这新增的这一列，第一次去赋值的时候值是改了，但没生效点击下一行时值就变过来二、原因横向添加是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题而纵向添加的数据，因为没有事先在 el-select v-modle="" 里面定义好字段，定义好的option是通过v-for...

2019-04-10 17:11:02 14621 3

原创 css问题之如何使div四个边框都有阴影

HTML<div class="isShadow"></div>css.isShadow{ background: #fff; box-shadow: #d4d2d2 0px 0px 10px; -webkit-box-shadow: #d4d2d2 0px 0px 10px; -moz-box-shadow: #d4d2d2 0px 0px ...

2019-04-03 14:53:57 2553