- 博客(141)
- 资源 (7)
- 收藏
- 关注
RSS订阅原创 vue3中子组件获取父组件的name，父组件不做修改动作
在 Vue 3 中，子组件若要获取父组件的 name，且父组件不做额外操作，可以借助 getCurrentInstance 来实现。getCurrentInstance 方法能获取当前组件实例，进而访问其父组件实例及其属性。.type.__name 获取父组件的 name。借助 getCurrentInstance 获取当前组件实例。.parent 访问父组件实例。父组件（ParentComponent.vue）把获取到的父组件 name 展示在模板中。// 获取父组件的 name。// 定义父组件名称。
2025-03-06 10:18:44
376
原创 大屏可视化适配2k，4k，8k屏幕
2K分辨率：通常指2560 x 1440像素（QHD或1440p），总像素数大约为370万。4K分辨率：通常指3840 x 2160像素（UHD或2160p），总像素数大约为830万。使用postcss-pxtorem插件将代码中的px单位转换为rem单位，并且使用css媒体查询屏幕宽度，宽度不同时，改变html的fontsize值。8K分辨率：通常指7680 x 4320像素，总像素数约为3300万。4K分辨率提供比2K更清晰的图像，细节更加锐利和精细，在更大的屏幕上这种差异会更加明显。
2025-03-03 18:39:00
248
原创 vue3多个页面/组件，复用同一段render页面根据接口返回的数据动态渲染逻辑，使用setup+组合式API
组件reusableComponent是可供多个组件复用的getData请求接口，render渲染数据父页面使用组件并传name进去渲染指定的页面
2025-02-14 11:26:02
741
原创 使用vue-grid-layout插件，实现页面模块的可移动，配置，调整大小
页面的模块使用vue-grid-layout进行调整位置，大小，vue2
2025-01-23 11:18:12
197
原创 git上feature合并到development分支
git上从development分支拉了一个feature分支开发新内容，development也有新内容在开发，feature分支内容开发完毕后，如何合并feature分支新内容到development分支，要确保不会覆盖development分支的新内容以下是将feature分支的新内容合并到分支且确保不会覆盖。
2024-11-13 14:21:43
692
原创 echart类似仪表盘的环形分割图
/ text: ‘{rate|98%}\n{name|总好评率}’,40部分是背景色，从0开始反向遮挡环形图的40%，形成进度条。color: ‘#00B9FF’, // 100% 处的颜色。color: ‘#A0E5FF’, // 0% 处的颜色。其实是两个扇图，分割线是splitLine: {option = {//设置中心文字和样式。length控制分割线长度。width控制分割线的宽度。
2024-10-17 11:14:20
342
原创 js两张图片合成一张图片，使用canvas方法
是拿到本地的图片，因为vite不能用import语法，只能使用这个语法 new URL(注：图片是本地的图片，因为我用接口返回的图片地址的图片会有跨域问题，只好把要合成的图片放assets里。是将画布转为base64图片。
2024-07-15 16:32:01
677
1
原创 vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用
vue检测页面手指滑动距离，执行回调函数，使用混入mixin的语法，多个组件都可以使用
2024-07-15 16:21:12
1046
原创 vue router 切换路由的时候，页面的动画效果，使页面切换好看，以及控制有的页面使用切换路由特效，有的页面不用
vue3 router 切换路由的时候，页面的动画效果，使页面切换好看，以及控制有的页面使用切换路由特效，有的页面不用
2024-07-15 16:07:57
821
原创 vite配置环境变量和使用，配置正确后import.meta.env.VITE_APP_BASE_URL编译报错的解决方法
vite环境变量配置以及使用import.meta.env.*报错解决
2024-07-15 15:09:04
3707
原创 全屏时框架的message alert 下拉框失效问题
在工作中将#app div设为全屏后，elementUI的message和alert和下拉框展开都不见了，解决方法是将设为全屏。
2024-03-18 11:23:22
823
原创 对于数据应该做好非空判断
正常情况下运行良好的代码，在接口返回的数据字段有缺失时(非正常情况)，要保证程序可以正常运行需要对返回值做判断。如果直接把null传到接口可能会报错，空就不会。给接口传值时要判断val?一定要判断arr的length大于0，取数组的arr[0].text时候。
2023-06-09 11:25:35
197
原创 padEnd使用出错问题
将val不足number位的在后边用空格补足位数，val不能为数字类型 null undefined。否则会报错(•̀⌓•́)シ886。
2023-06-09 11:19:49
201
原创 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
1267
3
原创 mongodb导入导出数据库
在使用navciat导出的时候，选择cvs格式，其他默认，导出的文件，用来导入的时候，选择cvs格式，并且手动设置id，等要求为数字类型的字段为int64，否则服务器会报错，比如id原本是数字类型，如果在导入时候没有手动设置，会出现冲突这个报错是因为id的类型不是int，查不到，所以要注意如果选择DBase格式会使得我的富文本编辑器字段不完整，数据不完整，故选择cvs文件...
2021-03-19 12:10:25
322
原创 node-设置允许跨域请求
app.all("*",function(req,res,next){ //设置允许跨域的域名，*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin","*"); //允许的header类型 res.header("Access-Control-Allow-Headers","content-type"); //跨域允许的请求方式 res.header("Access-Control-Allow-Methods","DELETE,PU
2021-03-08 11:28:29
384
原创 node接口数据 处理富文本中的图片加域名，以在前端显示 img src 正则
item.content = item.content.replace(/<img [^>]*src=['"]/g,"<img src=\"http://localhost:8080")
2021-03-04 15:10:04
384
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
1078
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
1049
3
原创 容器宽度适应内部文字宽度
做p的border-bottom充当文字下划线的时候，p的宽度自适应csswidth:fit-content; width:-webkit-fit-content; width:-moz-fit-content;
2021-03-01 10:23:46
239
原创 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
4214
转载 输入框鼠标悬停效果
<div class="col-3"> <input class="effect-7" type="text" placeholder="请输入您要查询的地域关键词"/> <span class="focus-border"> <i></i> </span></div>、.col-3{ width: 400px; height: 38px; position: relative;display.
2021-02-27 09:48:32
989
原创 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
410
原创 vue-mixin混入
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。使用示例：需求：假设我 demoA组件和demoB组件中有相同的一些方法和处理逻辑。这时候我们为了不写重复的代码，可以视情况使用混入mixins.在mixins.js里定义了混入对象 并通过export导出：// 定义一个混入对象：（这里是局部混入，全局混入官网详见：https://cn.vuejs.org
2021-02-25 17:14:00
124
原创 vue-transitions切换路由时更加平滑
我们都知道vue可以做成单页应用 点击的时候就能切换 如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签在使用这个标签之前需要了解下他的6个类使得切换路由时更加平滑第一步在app.vue里使用transition标签在手机上判断前进后退页面左出右进的方法https://www.cnblogs.com/xiechuanghong/p/10881784.html...
2021-02-25 16:16:34
517
原创 vue中 ；失效的解决方法
在vue中此种空格无效<p>'助力数字政务 打造智慧信息系统 规范管理、让交易更安全便捷</p>使用v-html=’'可原样输出<p v-html="'助力数字政务 &n
2021-02-25 16:09:38
12075
原创 解决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
1606
原创 文字和图片水平对齐
1.flex布局父级元素使用flex，display:flex;justfy-content:center实现水平居中对齐，2.图片transform: translateY(14px);图片向下移动
2021-02-07 15:00:43
1367
原创 移动端的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
3679
原创 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
485
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
218
原创 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
193
转载 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
369
原创 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
2846
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
269
在uniapp做高德地图，发布为h5网页
2020-11-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人