web前端
十年4646454sdg5sagsa
这个作者很懒,什么都没留下…
展开
-
js两张图片合成一张图片,使用canvas方法
是拿到本地的图片,因为vite不能用import语法,只能使用这个语法 new URL(注:图片是本地的图片,因为我用接口返回的图片地址的图片会有跨域问题,只好把要合成的图片放assets里。是将画布转为base64图片。原创 2024-07-15 16:32:01 · 379 阅读 · 1 评论 -
vue检测页面手指滑动距离,执行回调函数,使用混入的语法,多个组件都可以使用
vue检测页面手指滑动距离,执行回调函数,使用混入mixin的语法,多个组件都可以使用原创 2024-07-15 16:21:12 · 939 阅读 · 0 评论 -
vue router 切换路由的时候,页面的动画效果,使页面切换好看,以及控制有的页面使用切换路由特效,有的页面不用
vue3 router 切换路由的时候,页面的动画效果,使页面切换好看,以及控制有的页面使用切换路由特效,有的页面不用原创 2024-07-15 16:07:57 · 449 阅读 · 0 评论 -
对于数据应该做好非空判断
正常情况下运行良好的代码,在接口返回的数据字段有缺失时(非正常情况),要保证程序可以正常运行需要对返回值做判断。如果直接把null传到接口可能会报错,空就不会。给接口传值时要判断val?一定要判断arr的length大于0,取数组的arr[0].text时候。原创 2023-06-09 11:25:35 · 147 阅读 · 0 评论 -
padEnd使用出错问题
将val不足number位的在后边用空格补足位数,val不能为数字类型 null undefined。否则会报错(•̀⌓•́)シ886。原创 2023-06-09 11:19:49 · 157 阅读 · 0 评论 -
nodejs,处理表单提交文件和普通参数(enctype=“multipart/form-data“),使用插件multiparty,将图片上传到服务器的文件夹中
目录1. 页面form是有text类型和file类型输入框,所以需要将form提交类型设置为enctype="multipart/form-data" method="post"2.普通的参数只需要req.body.id就可以取到,而文件在这种状态下只有一个文件名,enctype="multipart/form-data",可以传输文件,但node不可以使用req.body.id来接受数据。需要用到插件multiparty。1. 页面form是有text类型和file类型输入框,所...原创 2021-04-14 15:36:39 · 1201 阅读 · 3 评论 -
node接口数据 处理富文本中的图片加域名,以在前端显示 img src 正则
item.content = item.content.replace(/<img [^>]*src=['"]/g,"<img src=\"http://localhost:8080")原创 2021-03-04 15:10:04 · 346 阅读 · 1 评论 -
文字和图片同行,垂直居中的三种方式
1.img div :display:inline-block;vertical-align: middle;2.父元素:display:flex父元素flex,子元素自动消除高度差,可以很简单的实现,只是不兼容ie,flex布局时css3的,兼容性不强。3.img: transform: translateY(10px);改变y值向上向下移动...原创 2021-03-04 11:23:07 · 1030 阅读 · 1 评论 -
vue中图片的src是变量的时候,
直接把循环所得的变量放在src会出错,需要使用require导入图片,但是不能直接在src那里写导入,我这么写也报错,放在一个函数里面不会报错,因为require在上标签写的时候,只读取字符串,不会拼接。 <div v-for="item in arr"> <div class="imgBox"> <img :src="getImg(item.img)" alt=""> &.原创 2021-03-01 14:52:31 · 977 阅读 · 3 评论 -
容器宽度适应内部文字宽度
做p的border-bottom充当文字下划线的时候,p的宽度自适应csswidth:fit-content; width:-webkit-fit-content; width:-moz-fit-content;原创 2021-03-01 10:23:46 · 214 阅读 · 0 评论 -
vue-watch监听对象数组的变化
1.对数组嵌套对象进行监听的时候,这时就需要深度监听listData: { handler (val) { console.log(val); this.paginationChange(); }, // 这里是关键,代表递归监听 demo 的变化 deep: true },2.监听对象'demo.child': { handler: function (val) { con.原创 2021-03-01 09:26:18 · 4129 阅读 · 0 评论 -
vue-cli+axios请求本地的json文件的方法-404解决办法
最重要的是json文件的位置要放在public中。请求方法this.$http.get(‘js/districts.json’)getData(){ this.$http.get('js/districts.json') .then(function(res){ console.log(res) }) },,我之前一直放在static文件夹中,总是报404的错。查了之后https://www.cnblogs.com/sllz原创 2021-02-26 15:27:10 · 384 阅读 · 0 评论 -
vue-mixin混入
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。使用示例:需求:假设我 demoA组件和demoB组件中有相同的一些方法和处理逻辑。这时候我们为了不写重复的代码,可以视情况使用混入mixins.在mixins.js里定义了混入对象 并通过export导出:// 定义一个混入对象:(这里是局部混入,全局混入官网详见:https://cn.vuejs.org原创 2021-02-25 17:14:00 · 99 阅读 · 0 评论 -
vue-transitions切换路由时更加平滑
我们都知道vue可以做成单页应用 点击的时候就能切换 如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签在使用这个标签之前需要了解下他的6个类使得切换路由时更加平滑第一步在app.vue里使用transition标签在手机上判断前进后退页面左出右进的方法https://www.cnblogs.com/xiechuanghong/p/10881784.html...原创 2021-02-25 16:16:34 · 476 阅读 · 0 评论 -
vue中 ;失效的解决方法
在vue中此种空格无效<p>'助力数字政务 打造智慧信息系统 规范管理、让交易更安全便捷</p>使用v-html=’'可原样输出<p v-html="'助力数字政务 &n原创 2021-02-25 16:09:38 · 11677 阅读 · 0 评论 -
解决layui的弹框出现位置不居中问题layer.ready(function () {})
layui.use(['layer'], function () { var layer = layui.layer; //询问框 layer.ready(function () { // 弹框代码 layer.confirm('<br/> xxxxxxxxx<br/>', { btn: ['确定'], title:'通知',//按钮 }, func.原创 2021-02-19 09:01:45 · 1522 阅读 · 0 评论 -
文字和图片水平对齐
1.flex布局父级元素使用flex,display:flex;justfy-content:center实现水平居中对齐,2.图片transform: translateY(14px);图片向下移动原创 2021-02-07 15:00:43 · 1346 阅读 · 0 评论 -
移动端的rem屏幕适配css文件 于蓝湖配合使用 pc端和移动端的适配,写两套css
375px宽度设计稿对应22px=1rem设置蓝湖的自定义css rem 点击确定就可以直接看到计算好的rem值。非常方便效果:@media only screen and (min-width: 320px) { html { font-size: 18.773px !important }}@media only screen and (min-width: 340px) { html { font-size: 20px.原创 2021-02-07 11:42:54 · 3417 阅读 · 0 评论 -
js常用的公共方法文件
//////////////////////////////////////////////////---------公共js验证方法---------------///////////////////////////////////////拆分地址function getUrlParam(val) { var url = decodeURI(window.location.href); if (url.indexOf('?') != -1) { var urlString = url.spl.原创 2021-02-06 16:32:56 · 459 阅读 · 1 评论 -
文字的前后伪类装饰
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 1000px; margin: 10px auto; border: 1px solid r.原创 2021-02-06 11:05:39 · 188 阅读 · 0 评论 -
2021/2/5滑动效果插件:Better-Scroll
7.滑动效果插件:Better-Scroll/iScroll(不维护了)1.局部滚动实现:<div>ul>li*100</div>i:原生:父组件div给固定高度可以实现局部滚动height:200px;overflow-y:scroll(这个属性自带overflow:hidden;);ii:使用Better-Scroll插件:<div class='wrapper'><div class='content'>u.原创 2021-02-05 14:50:43 · 170 阅读 · 0 评论 -
Webstorm快捷输入Emmet简单语法
HTML模板生成,这个貌似 sublime Text 中用的多,不过也应该知道一下。!+Tab (Emmet语法默认最后都是+Tab ,下面我就不再多说了)意思就是打完快捷输入后按tab键例子:语法五:最后来个嵌套多的。(细品,你细品就会发现很多时候都会用到。)#page>div.logo+ul#nav>li*5>a{Item $}<div id="page"> <div class="logo"></div>...转载 2021-02-05 11:31:28 · 326 阅读 · 0 评论 -
viewer.js插件--图片预览,放大,旋转,镜像翻转,幻灯片播放等功能
var viewer = new Viewer(document.getElementById('yyzh_img'), { url: 'data-original', toolbar: { zoomIn: 4, zoomOut: 4, oneToOne: false, reset: true, prev: false, play: { show: false, size: 'large', }, next: .原创 2021-02-04 10:57:04 · 2743 阅读 · 1 评论 -
2021-01-12vue输入数字或金额,保留两位小数,不允许输入空格和文字,字母
<el-form-item label="保费(保留两位小数):" > <el-input type="text" @keyup.native="premium =premium = premium.replace(/[^\d.]/g,''); premium = premium.replace(/\.{2,}/g,'.'); premium = premium.replace(/^\./g,''); .原创 2021-01-12 08:47:48 · 255 阅读 · 0 评论 -
flex css底部tabbar四个部分均分一行,居中
tab-bar大的父元素tab-bar-item 子元素原创 2021-01-05 14:29:40 · 448 阅读 · 0 评论 -
前端假分页js一个函数搞定
pageTotal数组长度 // pageSize每页显示 10 条this.pageNum第几页paginationChange分页函数,所有数据在list中,pageData是分页数组,currentPageData是页面展示数据pageData[this.pageNum-1] 分页函数和改变页数和size函数更新数据和改变size时调用分页函数,改变页数时只改变当前页面数据值// 分页查询// pageTotal数组长度// pageSize每页显示 10 条pa.原创 2020-12-19 15:12:33 · 863 阅读 · 1 评论 -
pdf预览 iframe src赋值 word预览
pdf预览 iframe src赋值word预览1,http://view.officeapps.live.com/op/view.aspx?src=‘公网地址’2.word转pdf<el-dialog title="预览文件" :visible="viewFileDialogVisible" fullscreen :before-close="handleClose" > <div> <原创 2020-12-08 15:04:25 · 1933 阅读 · 0 评论 -
vue监听dom渲染结束再触发方法 this.$nextTick
// 文件预览 handleview(index, row) { console.log(index, row); console.log(row.zbwjurl) this.viewFileDialogVisible = true//组件加载,组件可见 加载的组件中的dom获取不到:打印相关信息,发现:this.refs成功打印,且包含了a的信息,但是this.refs成功打印,且包含了a的信息,但是this.refs成功打印,且包含了a的原创 2020-12-08 09:28:24 · 2524 阅读 · 0 评论 -
html5 iframe实现页面预览pdf
一个可以把上传文件的绝对地址拿到的方法: //建立一个可存取到该file的url function getObjectURL(file) { var url = null; // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(fi原创 2020-12-02 17:34:30 · 3233 阅读 · 0 评论 -
jquery封装公共的header、footer等组件
在 index.html 中先引入 jquery.min.js在index.html 页面中预留公共页面的引入位置:…写一个公共js,在每个html中引入该js对于选中当前页面对应的菜单项处理方法,一定要放在公共页面加载完毕之后。<style> .footer{ width: 100%;padding: 20px 0;text-align: center;font-size: 16px;background:#FAFAFA;color: #..原创 2020-11-30 12:44:12 · 2124 阅读 · 3 评论 -
vue-cli配置sass,使用全局sass变量
vue-cli创建vue2.0项目,安装sass步骤创建vue2.0项目:vue init webpack 项目名安装sass步骤:npm install node-sass@4.14.1npm install sass-loader@7.3.1 --save-dev不要使用一条命令npm i --save-dev node-sass sass-loader因为最新安装的sass-loader是8.0,会报错!就这两个步骤,即可在项目里使用sass(scss)!不需要在build文件夹下的原创 2020-11-28 10:19:33 · 766 阅读 · 0 评论 -
vue-elementui实现三级的地址选择
vue引入文件js使用this.$axios.get(“http://localhost:8080/static/jsc-json/districts.json”)<el-form-item prop="qyzcd"> <el-cascader placeholder="请点击选择地址" :options="options" v-mo原创 2020-11-27 10:06:36 · 2235 阅读 · 1 评论 -
uniapp做高德地图
这是在uniapp中集成高德地图,需要城市名字确定地图城市,使用精准定位并且设为地图中心,在初始化地图的时候先不设置center,在下面得到精准定位之后onComplete的参数data中的lng,lat是精准定位,可以用来设置地图中心点,map.setCenter([data.lng,data.lat]),就完成了地图定位AMap.plugin('AMap.Geolocation', function() { var geolocation = new AMap.Geolocation(原创 2020-11-12 19:26:39 · 1659 阅读 · 0 评论 -
h5和安卓混合开发做微信支付 和jsapi做微信支付
如果在微信非内置浏览器过程是通过后台拿appid等参数请求微信后台返给前台参数,前台拿到参数appId":res.appid,//公众号名称,由商户传入“timeStamp”:res.timestamp, //时间戳,自1970年以来的秒数“nonceStr”:res.nonce_str, //随机串“package”:“prepay_id=”+res.prepay_id,“signType”:“MD5”, //微信签名方式:“paySign”:res.sig原创 2020-11-07 19:29:57 · 399 阅读 · 0 评论 -
h5与安卓交互的方法
app:指安卓页面一. Vue打开app并携带参数方法vue定义点击事件@click=“vidoe(item.id)”然后写方法://h5跳转到原生app的方法vidoe:function(id){window.FindActivity.toVideo(id);},toVideo是安卓中定义的方法名!二. app向vue(h5)中传参方法在mounted() {window.getFromAndroid = this.getFromAndroid},中定义这个方法然后,在met原创 2020-11-07 19:06:04 · 1575 阅读 · 0 评论 -
vue响应接口
Vue 可以添加数据动态响应接口。Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。Vue 不能检测到对象属性的添加或删除,最好的方式就是在初始化实例前声明根级响应式属性,哪怕只是一个空值。Vue.setVue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:Vue.set( target, key, value )Vue.deleteVue.delete 用于删除动态添加的属性 语法格式:Vue.delete( target, key )翻译 2020-11-07 18:59:58 · 272 阅读 · 0 评论 -
js 对象数组中的已知对象的属性得到对象下标
arr 对象数组, wyw已知属性多用于接口返回数据后根据已知属性查其他属性var arr = new Array({"name": "wxx", "age": 2}, {"name": "wyw", "age": 6});var index = arr.findIndex(function(item) { return item.name === "wyw";});console.log(index);...原创 2020-11-07 15:44:31 · 3980 阅读 · 0 评论 -
vue树形选择框 树形数据展示和选择框的结合
treeSelect.vue<template> <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle"> <el-option :value="valueTitle" :label="valueTitle" class="options"> <el-tree id="tree-option" ref="select原创 2020-11-07 10:14:49 · 1002 阅读 · 0 评论 -
网页性能优化之异步加载js文件
将<script>标签放到<body>底部严格来说,这并不算是异步加载,但是这也是常见的通过改变js加载方式来提升页面性能的一种方式,所以也就放到这里来说。将<script>放到<body>底部,解决上上面说到的几个问题,一是不会造成页面解析的阻塞,就算加载时间过长用户也可以看到页面而不是一片空白,而且这时候可以在脚本中操作DOM。defer属性通过给<script>标签设置defer属性,将脚本文件设置为延迟加载,当浏览器遇到带有..转载 2020-10-19 13:10:28 · 237 阅读 · 0 评论 -
移动端,div点击瞬间,去掉出现阴影问题。
/移动端,div点击瞬间,出现阴影问题。/div,a,img {-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;user-select:none;}原创 2020-10-11 17:42:52 · 752 阅读 · 3 评论