- 博客(50)
- 收藏
- 关注
RSS订阅原创 Ant Design Vue组件库,下拉框内容与select分离的问题
问题如下动图:解决方案:select组件的api有一个方法添加上去后就可以了
2021-07-27 10:57:00
1061
原创 在html中使用import遇到的问题
1.目前大部分浏览器已经原生支持HTML imports了,浏览器支持性如图:2.可根据如下代码判断浏览器支不支持HTML imports// main.htmlfunction supportImport() { return 'import' in document.createElement('link');}if (supportImport()) { console.log('浏览器支持import特性');} else { console.log('浏览器不支持im
2020-05-27 14:48:19
14819
5
原创 宝塔面板安装Pure-Ftpd,但ftp无法建立连接问题
1.首先在宝塔面板的软件商店安装Pure-Ftpd如图:2.在你购买服务器的厂商的官网上打开20,21 和 39000-40000端口3.然后再宝塔面板中的安全放行20,21 和 39000-40000端口如图:4.修改Pure-Ftpd配置把#ForcePassiveIP前面的#去掉,并把ip改成你服务器外网的ip如图:5.重启Pure-Ftpd服务6.打开你电脑的IE, 设置->Internet选项->高级把如图的被动模式勾上,已勾的忽略7.建立链接成功
2020-05-21 14:50:16
4654
3
原创 宝塔配置nginx + php,并解决宝塔888端口phpmyadmin无法访问的问题,绝对可用
情景:可能是我前面部署有其他项目吧,用了nginx占用了80端口,导致后面安装php和phpmyadmin的时候,打开phpmyadmin都是无法访问,我用的是华为云,表示安全组和防火墙都放行了888端口,都不行.在网上也找了很多,但都行不同,所以就只能自己想方法了,跟着我的步骤,肯定没错.环境: (请安装好以下版本的环境)宝塔面板 + Linux Centos7.x + nginx 1.16.1 + php7.4 + MySQL 5.7.30 + phpMyAdmin 5.0那么就开始吧!1.编
2020-05-21 11:35:03
9110
3
原创 css实现单色或图片背景透明,而文字不透明的方法
一.单色背景方法: 不使用opacity属性,而是使用rgba例子:<style> .bg { background-color:rgba(0,0,0,0.4) }</style><div class="bg">背景是透明度0.4的黑色，文字不透明</div>效果:二.图片做背景方法1: 将图片跟文字设置成兄弟关系，对图片设置opacity属性，把文字设置成绝对定位，然后将其定位到图片上例子:<style&g
2020-05-19 11:44:28
619
原创 vue cli3.x以上版本搭配vant配置postcss-pxtorem和lib-flexible
1.下载包npm install lib-flexible --savenpm install postcss-pxtorem --save-dev2.在main.js,加入以下代码import "lib-flexible/flexible";3.在public/index.html,删除<meta name=“viewport” …>原因:flexible会为页面根...
2020-05-07 17:03:22
933
原创 vue-cli3.0 axios跨域请求代理配置
假设后端的请求地址: http://127.0.0.1:3000/admin/api1.在根目录下创建vue.config.js文件(vue cli3.x以上版本是没有config文件的),代码如下:module.exports = { devServer: { // 设置代理 proxy: { '/api': { target: 'http:/...
2020-05-02 15:04:37
1005
原创 在vue中,解决papaparse把.csv转成json格式中文乱码问题,并把处理过程进行封装
前后效果图:一.出现这类问题的原因编码格式的问题,默认处理时utf8格式,但可能出现GBK,GB2312…等格式二.解决的方法识别编码,告诉papaparse三.需要的插件jschardet只能检测编码，不能把乱码转成原文四.创建一个文件夹...
2020-04-28 22:11:39
5181
2
原创 广东移动UNT401H南传通过adb装当贝桌面
1.机子如图:2.需要的: 电视盒子,电脑,安装包3.先准备好adb和当贝桌面安装包adb下载链接: 网盘分享,提取码: mtl5当贝桌面: 当贝桌面官网,下载好后把dbzm-xxx.apk的命名改成dbzm.apk,并把dbzm.apk放在解压后的adb目录下4.在机顶盒的设置里面连接上wifi,电脑也要连上,并且要连同一个wifi上.然后到设置里的网络设置里，记下IP地址。5.广...
2020-04-20 13:18:28
18748
6
原创 纯css3实现可按下动效按钮
效果如下:css代码:<style> body { background: #272822; margin: 0; perspective: 600px; -webkit-perspective: 600px; } /* Button ...
2020-03-30 21:23:38
1311
原创 uni-app整合最新版vant-weapp,遇到的问题和解决办法
1.前往github下载vant-weapp组件库,github地址2.在HBuilderX中新建uni-app项目,并在新项目的根目录下新建个目录,用于存放vant-weapp组件,我新建的目录名为wxcomponents为例3.将步骤1的dist文件复制粘贴到wxcomponents目录下,并改名为vant4.使用uni-app提供的easycom组件模式,具体看uni-app文档...
2020-03-30 12:41:13
14814
16
原创 一文彻底弄懂scoped的原理,导致的问题及解决的办法
原理:给元素添加唯一属性（同一组件中所有dom添加的属性值相同），然后通过属性选择器获取该元素(类似于人的身份证,在这个组件中是唯一的)通过 PostCSS 实现以下转换<template> <div class="test">hello</div></template><style scoped>.example {...
2020-03-27 15:04:23
2543
1
原创 解决vue keyup.enter和blur绑定同一事件，触发两次的问题
<el-input ref="editTagFoucus" size="mini" @keyup.enter.native="$event.target.blur" @blur="editCompleteTag(items)" v-model='items.name'> </el-input>
2020-03-15 12:28:07
1817
原创 使用css3的网格(Grid),做出瀑布流式布局
效果如下:关于网格grid,就看大神阮一峰的Grid 网格布局教程效果的代码如下:html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
2020-03-09 17:04:14
4052
原创 在vue中实现图片懒加载,并引入promise判断加载状态和优化
为什么需要懒加载?答: 当你的一个网页,图片有几十张,上百张时,同时的加载,有可能会导致网页出现很长一段时间的空白,而且用户并不一定会浏览全部的图片,全部加载完,也会浪费用户的浏览,这样的体验是很不好的.效果如图:那么如何在vue项目中实现懒加载呢?1.懒加载的原理一张图片就是一个标签,浏览器是根据src的属性发起图片请求的.那么我们实现的依据就是当前图片出现在可视屏幕上,就把图片的地...
2020-02-25 00:27:52
1838
原创 解决vue cli3.x打包更新版本,浏览器缓存问题
问题: 每次打包更新版本发到服务器上，导致偶尔会出现不能及时更新最新代码，浏览器存在缓存的问题。总不能让用户打开新的无痕窗口吧。解决: 我们可以在打包的文件名中添加一个版本号以便浏览器能区分。1.找到vue.config.js(vue cli3.x生成的项目默认没有这个文件,需要自己创建)2.添加如下代码// 时间戳保证不会版本重复const Timestamp = new Date()...
2020-02-24 12:45:45
5573
3
原创 mongoDB开启权限认证及node连接数据库的配置
1.打开cmd命令窗口2.输入mongo,如图3.创建管理用户(这一步一定要给我先做了)use admindb.createUser( {user: "admin",pwd: "123456",roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]})4.找到mongod.cfg文件4.1 windows系统的话,一般在c...
2020-02-15 22:20:58
826
原创 CentOS7.x下,安装node+pm2+mongoDB+nginx部署vue项目
本文章参考了添加链接描述的博客，改动主要在现有版本的更新和自己参考博客搭建遇到的问题（已解决）赋上了说明。一、购买服务器和远程连接1.购买服务器和域名可以选择腾讯或者是其他产商的服务器，购买后会获得服务器ip地址，再购买域名，将域名绑定到ip地址上。2.下载Xshell和XftpXshell是用来远程连接服务器的，Xftp是用来远程上传文件的（你的项目文件），下载地址： 添加链接描述，填...
2020-02-14 17:47:39
594
原创 简单使用Vuex
由例子开始,从中学会简单使用Vuex,需求,把路由的标题应用在网页上,效果如下:环境: 利用了vue cli3.x并在初始化项目时添加了Vuex1.在目录store下的index.js中的代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ sta...
2020-02-06 16:23:23
195
原创 使用vh,vw配合媒体查询做pc端的界面自适应
效果如下:前景提要:因为我司后台管理的页面都需要在可视的浏览界面中展示所有内容,不允许在html,body中出现滚动条,查找了很多的布局方法,都不尽人意.后面看到vw,vh单位,惊喜起来.特写此文章前端的环境:利用vue cli3.x搭建,css预编译使用的是less一.全局引入less的变量1.下载style-resources-loader,使用vue add这样会自动在vue....
2020-02-03 17:25:47
5461
7
原创 mongoose populate 查询返回指定字段
使用mogoose处理分类数据时,还要获取上一级的父类name,默认情况下只找到父_id(存在parent),还要根据父_id查询到name,这时我们需要用到populate方法情况一: 直接链式,返回name(值为1),不返回_id(值为0)Model.find().populate('parent',{name: 1,_id: 0})情况二: 使用通用 CRUD 接口时,部分接口需要特...
2020-02-01 21:42:11
3636
1
原创 在cookie中取对应的值的小方法和使用js-cookie插件
cookie里面有多个字段，你想提取特定的字段的，可以用这个这个大佬的代码，就几行。尊重原创，链接：https://stackoverflow.com/a/21125098代码如下// 取得指定cookie值得方法 function readCookie(name) { var nameEQ = name + '=' var ca = docume...
2020-01-11 23:22:15
284
原创 express-generator脚手架,引入babel,支持import和async,绝对可用
1.首先在package.js中加入如下的依赖包,并需要修改启动的路径(后面有说要自己新增个index.js文件){ "name": "express-app", "version": "0.0.0", "private": true, "scripts": { // 需要改变的启动路径 "start": "node ./index.js", "devstar...
2020-01-11 15:01:35
577
2
原创 canvas制作框内跳动小球
效果如下:思路:1.制定画布,确定好坐标2.绘制出圆形小球3.给圆一个原始坐标,xy轴的速度4.每20毫秒刷新一次,达到变化的目的5.判断边缘全部代码及释义如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...
2019-12-27 11:05:19
431
原创 WebGL实现云朵效果,及遇到的问题,已解决
效果如下:1.原代码地址:https://github.com/wdm510708502/webgl-clouds2.打开index.html,有可能你会惊奇的发现,云呢?云呢? 你可能用的是谷歌浏览器或者360浏览器,而使用Microsoft Edge是可以正常显示的,为什么呢?3.打开F12的console,你会发现,图片被跨域拦截了,因为这并不是img的src4.要怎么解决呢?...
2019-12-23 16:47:12
1140
3
原创 vue+element-ui+sortable.js实现表格拖拽功能
效果如下:1.vue使用cli项目就不说了,本人使用的是cli3.x版本2.下载element-uinpm i element-ui -S3.引入element-ui,找到main.js,加入如下代码// 导入element-ui,和全局使用element-ui样式import ElementUI from "element-ui";import "element-ui/lib/...
2019-12-23 14:26:12
2749
2
原创 vue使用cli3.x整合electron桌面应用
注: 使用yarn,相信我,不然你会遇到很多麻烦1.使用cli3.x创建一个vue项目,过程略vue create hello-world2.进入项目,下载依赖包yarn install3.下载electron相关包yarn add electronyarn add electron-packager4.在vue根目录创建electron.js// Modules to c...
2019-12-18 17:56:42
1821
6
原创 yarn的安装和使用，并配置用户环境变量
1.使用npm安装npm i yarn -g verbose2.切换到淘宝镜像yarn config set registry https://registry.npm.taobao.org3.查看版本号yarn -v4.npm 和 yarn的命令对比初始化 yarn init npm init 安装依赖 ...
2019-12-18 10:45:45
20258
原创 uni-app小程序端调内置地图和打开外部app和调拨打电话
效果如图:部分代码如下:1.html代码 <view class="service"> <a href="#" @click.prevent="openMap"> <image src="../../static/navigation.png" mode=""></image>到这去 </a> ...
2019-12-13 10:12:57
2381
原创 小程序富文本图片自适应屏幕
效果如下:关键代码:let wxWidth = wx.getSystemInfoSync().windowWidthres.data.data.xxx = res.data.data.xxx.replace(/\<img/gi, '<img style="width:' + wxWidth + 'px;vertical-align: middle;"')...
2019-12-06 16:27:30
860
原创 在vue中写一段自适应屏幕代码,并在移动端判断横竖屏
效果如下：只需在app.vue中写入如下代码<script>export default { data() { return { screenWidth: document.body.clientWidth // 网页可见区域宽 }; }, watch: { screenWidth(val) { // 为了避免频繁触发...
2019-11-21 23:41:08
3324
原创 在uni-app中使用vue语法封装个计数器组件
效果如下：1.在components中新建个counter.vue 组件<template> <!-- 计数器 --> <view class="counter-box">单位 : 个 <view class="counter"> <text class="reduce-add" @click="addReduce(0)">...
2019-11-21 23:00:28
1530
原创 vue中,本地图片路径写到js中,图片不显示问题
在vue中,平常引入本地静态图片都是直接写在html中的,今天把本地静态图片通过v-bind绑定到html上却发现图片不显示了.原来是,没把图片导出(加上require就行了),代码如下:<template> <div class="ceshi"> <img :src="ceshi" alt=""> </div></temp...
2019-11-12 14:37:52
3578
3
原创 vue利用事件委托实现按钮互斥,并传递对应的值
效果如下:事件委托:也称事件代理原理:事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理这一类型的所有事件。应用场景:我有一个ul标签，下面有很多li标签，每个li标签都需要添加事件，难道我们要获取每个li然后在添加事件吗？ 这样太浪费内存了，也不利于网页性能优化，我们要尽可能减少dom操作，所以我们能不能只给ul添加点击事件，然后利用事件冒泡，这样每个li标签都有事件了.效果的...
2019-11-06 16:46:18
1599
原创 vue项目通过FormData上传图片并实时显示图片,及elementUI的对话框中遇到的问题
实现的效果如下:所用的技术栈:vue CLI3.x,elementUI本文章只放了关键代码,和部分注意事项1.html的代码 <!-- 对话框 该对话框在mounted时未被挂载--> <el-dialog title="title" :visible.sync="dialogFormVisible"> <el-form :model="for...
2019-11-05 15:58:11
3698
原创 分享一些前端使用的工具
1.本地文件搜索神器-Listary用途: 当你的项目多时,这款神奇能帮你很快找到项目2.真正的截图神器-Snipaste用途: 当你要参考代码时,可以用它来固定3.抓屏工具-FSCapture用途: 不仅仅是个抓屏工具,我更多用他来度量页面尺寸4.思维导图软件-XMind ZEN用途: 当你的项目的页面多时,是它能助你理清页面5.网页调试工具-Postman介绍: post...
2019-10-29 17:59:47
278
原创 页面超出部分滚动,但不显示滚动条
效果如下:最初看到这效果,是在pc端的知乎登录页.所以就去百度了方法.注意:利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>超出部分...
2019-10-29 17:21:03
5907
原创 vue+elementUI表单优化,修改行数据,不用发送请求初始化表单
写出这个优化之前,是因为服务器有点差,每次修改上下架状态的时候,发送修改状态的请求,为了页面显示的"文本"状态也改变,还需要发送一次初始化列表的数据,对于以后数据量大的时候,是很不友好的,而且前端的优化,不就是减少请求么,所以就想着优化一下.思路:1.后端返回的初始化表单数据,我存在了data()的tableData中,上下架的状态( 0:下架 1:下架 )2.html代码,eleme...
2019-10-24 16:23:41
748
原创 vue动态增加,删除表单输入框
效果如下:参考代码:url一. html代码<div class="distribution-set-container"> <!-- 面包屑导航 --> <Bread :fromFather="dataPath"></Bread> <!-- 主体内容 --> <div class="content">...
2019-10-23 16:01:35
3621
原创 vue实现带省市区三级联动的表单demo
效果如下:插件: v-distpickergithub地址: https://github.com/jcc/v-distpicker效果的部分代码:html代码<div class="content"> <!-- 省市区三级联动 --> <v-distpicker @selected="selected"></v-distpic...
2019-10-21 18:21:21
1752
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人