前端
关注
分享
扫一扫
sxs7970
这个作者很懒，什么都没留下…
展开
-
el-popover的使用
之前在做pc端接通腾讯IM聊天的时候，需要发送表情包，这里用到了element-ui的el-prpover 组件，具体使用也是参考了别人的一篇文章 点击下边是我自己使用的<tempalte> <el-popover placement="top-start" width="400" trigger="click"> <div class="emojis"> <.原创 2021-08-24 15:05:23 · 2633 阅读 · 0 评论 -
使用font-spide压缩字体文件
注：我压缩.otf格式的没有成功，.ttf的可以，（没有研究过，有的可以指出来）全局安装 npm install font-spider -gfont-spider -V 查看有没有安装上在桌面上新建一个文件夹(我在桌面上新建的)，（不在桌面也行，想在哪在哪）我的目录格式：1、在css下创建index.css文件,代码如下@font-face { font-family: "SSB"; src: url("../font/SourceHanSansCN-Bold.tt原创 2021-08-17 11:10:12 · 503 阅读 · 0 评论 -
vue+blob文件流下载导出world、excel、pdf文件
function exportMethod(data) { axios({ method: 'get', url: 'https:xxx/xxx' + data.url,//接口地址 params: data.data,//如果是post参数放到请求体data中 responseType: 'blob', headers: { 'Content-Type': 'application/json' } }).then((res) =>原创 2021-08-13 16:01:16 · 1518 阅读 · 0 评论 -
使用vue-pdf预览pdf文件
本地预览的话，如果是使用cli/3，需要把pdf文件放到 public 文件下中，新建一个 static 文件夹，放入其中使用安装 vue-pdf只能使用绝对路径，而且 / 就表示 public 文件夹，所以需要忽略掉，如下<pdf src="/static/aaa.pdf"></pdf> ...原创 2021-08-13 14:54:05 · 347 阅读 · 0 评论 -
webpack打包图片的时候，发现图片的src的值是[object Moudle]的值
在打包xxx.html中的img的时候，需要通过html-loader进行处理，如果不用则xxx.html中的img不会被打包，这个loader的作用就是，负责引入img，从而能被url-loader进行处理问题：html-loader引入图片是以commonjs(node的)，而url-loader默认是以es6模块化解析，所以导致出错解决：需要在进行图片处理的loader中进行处理rules:[{test:/\.(png|jpg|gih)$/,loader:'url-loade.原创 2021-07-23 17:56:51 · 125 阅读 · 0 评论 -
关于element-ui中table表格的坑
使用element-ui的table的时候，遇到的坑，在使用@row-click和@selection-change 同时的时候，貌似耦合了，直接上：解决方法<el-table @selection-change="onChange_selectChange" ref="twoTable" :data="tableData" style="width: 100%" :expa.原创 2021-07-16 17:16:01 · 341 阅读 · 0 评论 -
pc端做各个屏幕适配(兼容到移动端屏幕尺寸)
做移动端h5适配的，vue-cli2.x的通过使用 lib-flexable 和 px2rem-loader 其实就是通过去把px转换成rem ; 这里有链接 点击vue-cli3.+webpack安装依赖：npm install lib-flexible -Snpm install postcss-plugin-px2rem -Dpostcss-plugin-px2rem； px2rem是postcss的一个插件在 main.js 中引入flexible.js文件，（如果是需要兼.原创 2021-06-22 15:01:56 · 1563 阅读 · 0 评论 -
cs3的旋转木马
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-06-16 16:07:07 · 173 阅读 · 0 评论 -
vue监听localStorage数据
在man.js中// 实施监听本地Vue.prototype.resetSetItem = function (key, newVal) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function (k, val) { localStorage.setItem(k, val); .原创 2021-06-02 13:43:42 · 611 阅读 · 0 评论 -
前端对接stripe支付，创建测试session_is
第一次搞 stripe支付，国外的文档全英文接stripe支付，根据官方文档，首先就是先跟服务端交互，创建session会话，获取id，当服务端不做这个功能时，就需要前端去掉stripe最底层的api，拿到session_id，这时候懵逼了，找吧文档都有官网正常对接服务端的接支付流程：点击创建session会话最底层的api，服务端不对接，需要前端去自己对接，点击这里只是我接触过的，有错误指出来，一起学习，第一次搞这玩意，记录下来，也为后期别的童鞋，让他们少走点弯路.原创 2021-05-21 18:31:32 · 1339 阅读 · 3 评论 -
vue导出excel表格数据
用的vue开发的网站，两种方案，结合element-ui组件库也可以实现，第二种稍微麻烦一点，这里用的第二种1、先下载两个js文件，文件链接在下边，可以直接下载用链接：https://pan.baidu.com/s/1jPSSe5e59k0dKiuLWuRCBw提取码：ymgr复制这段内容后打开百度网盘手机App，操作更方便哦这里单独封装了一下// 封装的导出Excel表格/** * * listArr：导出的表格数据：[{name:'小王',age:'15',gender.原创 2021-05-17 18:07:04 · 188 阅读 · 0 评论 -
微信小程序的rich-text组件解析带有html标签的内容，以及修改内嵌的图片样式
小程序的rich-text 组件可以解析带有html标签的内容，像vue的v-html一样，具体细节还是以小程序官网为准用法<!-- wxml--> <view> <rich-text nodes="{{shopDetailArr}}"></rich-text> </view>//js var htmlDes= '带有html标签的数据'; //这里要处理内嵌的图片样式，要添加class，进行修改 ht.原创 2021-04-26 14:37:23 · 1532 阅读 · 0 评论 -
前端使用bat文件，提高生产力
在开发过程用，每天都要面临打开项目，打开cmd，然后输入npm run dev 或者别的运行命令，以及打包等等命令，一个项目还好，如果手上有多个项目，每次都要重复性的操作这些没有技术可言的东西，还怪麻烦！！！简单的bat文件应用1、新建一个文本文档，修改其属性，为 .bat，例如 test.bat2、写入要做的命令；比如：想要运行一个项目（第一行切换到某盘，然后第二行项目路径，第三方命令运行），bat文件是按顺序进行执行的，如果是多个项目运行就往下继续写3、写完就是这个样子，使用的时候双击就.原创 2021-02-05 14:36:04 · 819 阅读 · 0 评论 -
禁止穿透蒙层滚动
//弹出蒙层调用preventHandle//关闭蒙层调用cancelHandle preventHandle() { //阻止滚动 var mo = function (e) { e.preventDefault(); }; document.body.style.overflow = "hidden"; document.addEventListener("touchmove", mo, false); //禁止页面滑动.原创 2020-09-13 15:41:14 · 348 阅读 · 0 评论 -
video标签自动播放视频，在wx环境下或者app以及Android或者iOS下的兼容
//WeixinJSBridge 只有在wx环境下才有的这个方法属性, if (typeof window.WeixinJSBridge == "undefined") { document.addEventListener("WeixinJSBridgeReady", res => { this.$nextTick(() => { if ( typeof Weixin原创 2020-07-23 22:12:15 · 665 阅读 · 0 评论 -
Error: Can‘t find Python executable “python“, you can set the PYTHON env variable.关于解决报错Python的办法
今天遇到一个问题，安装好依赖，运行的时候，一直报关于python的问题，解决方法有，但是不知道为什么，希望大佬可以解释一下解决方法//以管理员身份运行，安装npm install --global --production windows-build-toolsnpm install --global node-gyp...原创 2020-07-14 20:52:15 · 689 阅读 · 0 评论 -
git clone项目失败，提示Authentication failed报错
1.首先检查user name 和 user email ，输入git config --list，查看user.naem和user.email是否是你的，不是的话进行重新配置git config --global xxxgit config --global xxx@qq.com2.然后修改一下你的windows凭据，没有就添加，有的话就修改一下...原创 2020-07-14 20:47:09 · 1288 阅读 · 0 评论 -
小程序订阅消息uni.requestSubscribeMessage(wx.requestSubscribeMessage)遇到的问题
点击，这个概括的比较全我使用的是uni.requestSubscribeMessage其实和微信小程序用法一样，这个 【订阅消息】 你不管点击 取消 或者是 允许 只要接口调用成功它都走的是success回调，但是，你可以通过TEMPLATE_ID(订阅消息id) 去查看是否同意 订阅消息id所对应的模板消息。值包括’accept’、‘reject’、‘ban’。（这里可以根据回调函数返回是否同意订阅消息id所对应的值去进行后续操作） uni.request({ url: '',原创 2020-07-03 14:12:18 · 15303 阅读 · 1 评论 -
element全局点击遮罩层关闭Dialog弹窗
//main.jsimport ElementUI from 'element-ui';// 修改 el-dialog 默认点击遮照为不关闭ElementUI.Dialog.props.closeOnClickModal.default = false;原创 2020-07-03 13:43:40 · 3633 阅读 · 3 评论 -
oss图片处理
https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.1402.200f1729JSctVl原创 2020-07-02 10:02:27 · 323 阅读 · 0 评论 -
Vue中使用xlsx下载Excel表格
首先安装npm i file-saver -Snpm i xlsx -S<button @click='downTable'>下载表格</button><el-table id="my-table"> </el-table>downTable(){ var xlsxParam = { raw: true }; var wb = XLSX.utils.table_to_book(document.querySel.原创 2020-06-29 16:34:10 · 3607 阅读 · 0 评论 -
腾讯地图与百度地图经纬度互转
在vue项目中 自定义腾讯 与 百度经纬度互转方法//腾讯地图转百度地图经纬度Vue.prototype.TxMapTransBMap=function(lng, lat) {//经度，纬度 let x_pi = Math.PI * 3000.0 / 180.0;//Math.PI ~ 3.14159265358979324 let x = lng; let y = lat; let z = Math.sqrt(x * x + y * y) + 0.0.原创 2020-06-16 13:41:42 · 2621 阅读 · 0 评论 -
删除GIt上的远程文件夹
删除：git rm -r --cached 文件夹名git commit -m "删除某某文件"git push origin 分支名有时候不想上传某些文件，比如在用uni-app开发小程序的时候，运行到微信开发者工具的时候，每个人都会打包编译不同的文件，如果很多人开发，有可能会报冲突，所以提交的时候可以把编译的文件夹忽略掉。直接修改.gitignore文件，将不需要的文件过滤掉。（路径要写对，是相对于.gitignore这个文件夹的）/某文件/某文件...原创 2020-06-15 13:48:52 · 241 阅读 · 0 评论 -
使用zepto库结合weui做移动端选择日期
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。cv走可以直接用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>WeUI</title> <meta name="viewport" content="width=devic.原创 2020-06-10 11:05:07 · 777 阅读 · 0 评论 -
vue中上传图片到阿里云oss
在项目中安装 npm i ali-oss -SconfigOss.jslet OSS = require('ali-oss');export function client(){ var client = new OSS({ region: 'oss-cn-hangzhou',//地域// endpoint:"oss-cn-hangzhou.aliyuncs.com",/...原创 2020-05-01 10:56:26 · 1131 阅读 · 0 评论 -
微信小程序上传文件(图片)到阿里云OSS
官网也有相应的步骤 点击，登录oss控制后台，有新老版本。直接下载所有文件直接可用：这个目录随便取名。config.js配置var fileHost = "https://xxxx.com/";//你自己阿里云oss地址，【一定要在小程序后台开发的uploadFile合法域名白名单中需要配置一下】var config = { //aliyun OSS config...原创 2020-04-06 19:23:46 · 5134 阅读 · 3 评论 -
微信小程序使用setData修改data中的数组或者对象的某一属性
有时候data中是个数组或者对象，但是使用传统的setData修改方式会报错，所以可以使用字符串 拼接起来，然后使用[] 包裹起来当做key；Page({data:{ list:[ {name:'小明',id:'123'} ]},onLoad(options){ this.updataData();},updataData(){ var item="list["+ 0 ...原创 2020-04-01 19:03:49 · 954 阅读 · 0 评论 -
小程序通过web-view跳转并传参给内嵌的h5页面
微信小程序中可以通过<web-view>标签嵌入h5页面，通过 src属性进行跳转，但是好像只能是https的,因为传参带特殊符号，要进行解析;在小程序中Page({ data:{ src:'https://xx.xx.', name:'名字', id:'123456' }, onLoad(options){ var {src,name,id}=this...原创 2020-04-01 11:48:12 · 2483 阅读 · 0 评论 -
微信小程序中使用echarts并且动态获取数据
初步的引入在这里 小程序中使用echarts在页面或者自定义的组件中都可以，下边的例子：用的是自定义组件在js文件中import * as echarts from "../ec-canvas/echarts"var Chart = null;Component({ properties: { }, data: { ec: { // onInit:...原创 2020-03-31 14:26:29 · 3215 阅读 · 1 评论 -
Vue中使用select下拉列表以及修改默认样式
element-ui等前端组件库中，都有人家封装好的组件，可以直接拿来用。不想用的那就只能自己写了。<select class="sel-choose" name="" v-model="selId" @change="choose" :class="{'default-color':selected}"> <option value="" id="0" style="...原创 2020-03-23 13:41:29 · 8435 阅读 · 0 评论 -
微信小程序自定义tab标签页
直接cv走，可以用wxml<view> <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="sw...原创 2020-03-12 14:21:17 · 793 阅读 · 0 评论 -
微信小程序自定义switch
微信小程序自带的switch，可以改变大小，颜色，但是是有局限性的，所以好多时候都需要自己去写一个。修改微信小程序自带对的switch/*swtich整体大小及背景色*/.wx-switch-input{ width:82rpx !important; height:36rpx !important; background: red !important; ...原创 2020-03-09 13:26:03 · 1725 阅读 · 0 评论 -
微信小程序自定义头部导航栏（适应机型）
自定义的头部导航栏的高度，因为机型的原因，很难确定！但是可以通过计算得出来导航栏的高度！（全局 定义、或者 单页面 自定义都可以的）,下边我说的单页面自定义。自己创建一个导航栏组件，比如命名navigationBar在你需要自定义的页面的json文件,进行配置和引入组件{ "usingComponents": { "navigationBar": "../../comp...原创 2020-03-06 22:27:59 · 1192 阅读 · 0 评论 -
微信小程序中引入echarts图表
不多说直接看实际操作去github下载这个微信版的下载完把文件中的ec-canvas这个文件拿出来，放到你的小程序的page目录下，或者你的components组件文件夹下。然后在你自己的页面中的js文件下引入echarts.js文件，例如：例如你的页面名是mypage//在mypage.json中配置{ "usingComponents": { "ec-can...原创 2020-03-02 20:55:31 · 920 阅读 · 0 评论 -
Git push：! [remote rejected] master -> master (pre-receive hook declined)
把本地项目推送到gitlab远程仓储,一直报! [remote rejected] master -> master (pre-receive hook declined)是因为没有权限，Develop角色默认下没有远程访问master的权限...原创 2020-03-02 19:30:06 · 743 阅读 · 0 评论 -
微信小程序点击保存图片到本地相册——踩坑
在微信小程序中要保存图片到本地相册，需要获取相册权限。总之整个功能实现下来需要如下几个小程序的API：wx.getSetting，wx.authorize，wx.openSetting，wx.downloadFile，wx.saveImageToPhotosAlbum但是在openSetting 和 downloadFile 会有坑！openSetting,【打开小程序设置页】有坑...原创 2020-02-26 15:22:42 · 3566 阅读 · 0 评论 -
微信小程序长按图片，实现保存、转发、识别图中二维码
在小程序image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别但是通过wx.previewImage只能实现保存，转发，小程序 只能识别 小程序二维码，别的不能实现。<image src="{{url}}" data-src="{{url}}" bindtap="previewImage"></image>Pa...原创 2020-02-25 11:19:36 · 6185 阅读 · 0 评论 -
Vue中computed与watch的结合使用
<template></template><scripte>export default{ data(){ return{ } }, computed:{ myHandle(){ return xxx; } }, watch:{ myHandle(){ //逻辑代码 } }}</scri...原创 2020-02-21 20:23:18 · 1591 阅读 · 0 评论 -
在组件中调用vuex的getters方法时，只调用一次，后边更新数据反而没有调用
vuex的getters类似于计算属性。但是我遇到的问题是，第一次在getters中可以获取到state的数据更新了，但是之后就不会获取到。官方文档好像说：getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的；而getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。把原来的写法换成方法来写。//gettersmySelf(state){...原创 2020-02-21 18:58:25 · 2759 阅读 · 2 评论 -
Vue中this.$forceUpdate()强制刷新页面
Vue官网的强制更新的具体可以看一下官网有解释，我是遇到一个情况并不一定是一定要刷新一下页面才行，还有别的方法，我只是偶尔看到这个，用法也很简单!比如你做完某个操作需要强制刷新一下页面，在你定义的方法中加入this.$forceUpdate() 就OK了。...原创 2020-02-13 18:20:25 · 1017 阅读 · 0 评论