1ron3Man-CSDN博客

原创 vue中自定义指令的使用场景及示例

关于自定义组件还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景。

2023-09-19 10:33:41 218

原创 promise的异步同步关键一点

js 中 promise 自己的记录

2023-02-02 15:34:49 170

原创 vue，自定义指令在v-for中自动执行的问题

类似以上代码在v-for中使用自定义指令并且传值到方法中会造成此goto方法在页面渲染时会自动执行，就算你的v-on-go只设置了click事件方法，但是基于v-for指令他总是会自动执行。解决：将自定义指令放到v-for的外层盒子上可以解决，具体的可以根据实际需求调整，目前看来反正v-for将自定义指令套入其中并传入变量到方法中执行会出现问题。

2022-12-15 15:52:26 377

原创 electron两个渲染窗口(进程)中通信：

electron 渲染进程(窗口)之间通信

2022-11-30 09:41:06 1105

原创 webstrom开发使用git常见步骤

webstrom开发使用git常见步骤，一个最普通的webstorm共同开发项目，使用git管理代码的方式。

2022-11-04 14:38:49 1811

需求：6.2. 小于 1 小时，按最小单位显示：xx 分钟前（1 分钟以内统一用：1 分钟前）；6.3. 大于 24 小时显示为当天的日期：xx 月 xx 日；6.4. 大于 1 个自然年，显示 xx 年 xx 月 xx 日；6.5. 不可点击。/** * @description: 获取格式化时间结果 * @param {Object} * @return: */export function gettimerst(now, pass, lang) { // cons...

2020-11-26 11:32:26 331

原创前端富文本显示文本和img内容宽高自适应万能写法

//markdown-box 为父盒子类名.markdown-box ::v-deep * { word-break: break-word; max-width: 100% !important; width: auto !important;}.markdown-box ::v-deep img { width: auto !important; height: auto !important; max-width: 100% !important; max-hei.

2020-11-10 15:43:45 1252

原创 js将数组中某元素浅拷贝复制N份

//根据现有数组中某个元素复制N个该元素输入到新数组this.newarr = Array(20).fill(res.data.list[0]);//索引0代表复制源数组的某个元素索引 20代表想要复制数量 //这里只是描述使用fill方法进行的浅拷贝！！！数组中对象深拷贝方法此处不做描述！...

2020-11-05 16:56:13 1033

原创前端通过firebase接入google、apple、twitter登录

准备工作: 在firebase将相关项目信息进行申请firebasehttps://console.firebase.google.com/这里不赘述平台配置过程。。。firebase基于oAuth整合集成了各个平台的登录接入，我们使用firebase只需要与其通信而其作为中间媒介将帮你做对接其他第三方平台的工作。web端的google、apple、twitter login接入过程：import firebase from "firebase/app";import "firebas.

2020-11-02 17:40:34 2131

原创将H5通过webview嵌入到原生IOS/Android页面，如何传参交互？

这里主要描述H5的操作方式H5给原生传参：ios：window.webkit.messageHandlers.sendData.postMessage(params);android:window.android.sendData(params);//sendData 为原生调用的变量名，params为H5中给原生传递的相关参数H5调用原生提供的方法：ios：window.webkit.messageHandlers.toUserDetails.postMessage(nul...

2020-10-27 15:55:21 1286 1

原创 vuetify dialog组件使用clipboard.js 无效怎么办？

在 vue + vuetify 项目中使用clipboard.js复制功能，普通组件都能正常使用，但是在<v-dialog>中无效，查找大量资料，有绑定ref，有使用vue-clipboard发现都不管用，最后使用如下execCommand原生方式解决复制问题: onCopy(str) { //vuetify 的dialog组件中使用插件clipboard.js无效使用以下原生方式实现复制功能: str = this.shareUrl; const

2020-10-23 14:12:14 676

原创 H5网站-微信浏览器中打开底部fixed遮住内容区域问题

其他安卓浏览器都没问题，在微信浏览器中会出现这种情况，是因为fixed兼容性问题造成，但是此时absolute并不能满足需求，故使用如下方式解决：<div><div class="content-box"></div><div class="nav-bottom"></div></div>.nav-bottom{position:fixed;bottom:0;left:0;r...

2020-09-30 15:28:54 1549

原创 div contenteditable 中如何将光标聚焦到最后位置

如果你是通过配置div 的contenteditable 属性将其转变为一个可编辑输入框则可以使用以下方式代替focus()更合理聚焦getSelectPos(obj){varesrc=document.getElementById(obj);varrange=document.createRange();range.selectNodeContents(esrc);range.collapse(false);...

2020-09-09 10:14:07 4215 2

原创 vue中beforeRouterEnter使用vm配置data无效

在页面中很多地方会使用组件路由守卫进行控制页面权限，同时也会在守卫中通过vm进行一系列操作，但是你会发现很多时候你通过vm设置的data无效（延迟赋值），那是因为执行顺序是：beforeRouteEnter => created => mounted =>beforeRouteEnter的next() , 导致你在next()中做的赋值操作是在组件初始化之后才产生，这很不方便。beforeRouteEnter:(to,from,next)=>{let...

2020-09-09 10:10:56 4588 1

原创 git新建一个分支，在此分支上编写代码结束合并到master的几步操作

git checkout -b dev //新建一个分支并切换到该分支上//在此分支上编写相关代码完成。。。git add .git commit -m ‘dev'git push -u origin dev //提交子分支上的代码到远程仓库git checkout master //切换到主分支git pull origin master // 拉取最新的master上的代码git merge dev //将dev子分支完成编写的代码合并到mastergit stat...

2020-08-24 15:01:51 434

原创如何使除＜input＞外的label 可以实现编辑效果

<div class="self-input"id="databox"contenteditable@input="initContent"placeholder="问题的详细描述(选填)"></div>...

2020-08-21 14:40:08 179

原创 vue中watch和computed的概念性区别

computed：计算属性，依赖其他的属性值，并且computed的值有缓存当它依赖的属性值发生改变时，下一次获取computed的值时才会重新计算。watch：观测属性，无缓存，更多的作用在于观察，类似于某些数据的监听回调，当监听的属性值发生改变时会触发其绑定的回调函数来进行后续操作。当我们需要深度监听对象（某监听对象下含有具有多层嵌套的对象）中的属性时，可以使用deep：true，这样便会对对象的每一项都进行监听。运用场景：当我们需要进行数值计算，并且依赖于其他数据时..

2020-08-07 16:03:16 146

原创利用vuex配合i18n做国际化切换语言时部分数据不刷新问题

vue项目中点击类似按钮切换页面语言环境：运用的方法此处不做详细描述，思路是手动编写相关语言包，将lang配置到vuex中，切换语言是则是全部改变store中变量lang的值。使用时遇到问题：页面中以下区域的文字未能正常转换，需要刷新页面才会按需替换：发现：此tab的列表数据是配置在组件的data(){}中，eg：tablist:[ { name: this.$t("common-myCourses"), path: "/cr

2020-07-31 15:34:10 3268 5

原创 webpack中前端格式化warning如何解决？

script语句，出现warning解决方式：Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.如果项目使用prettier代码格式化检测工具，则template中的warning，可以在IDEA中安装如下插件并重新格式化warning的文件：template的warning：...

2020-07-27 10:40:23 749

转载转载（10个超级实用的js es6操作方法）

众所周知，JavaScript 一直在快速变化。在新的 ES2020 中，有很多很棒的特性，我们大都已经迫不及待尝试了。老实说，有时我们可以用不同角度来编写代码，同样也能达到相同的效果，而且有的还会更简短，更清晰。下面是列出一些 JavaScript 有用的技巧，相信总有一天会对你有所帮助。1.方法参数验证ES6 中可以为函数的参数设置默认值，有了这个，我们可以实现一个验证方法参数不能为空的巧妙技巧。constisRequired=()=>{thrownewErro...

2020-07-10 14:50:22 685

原创 word-break:break-all和break-word的区别

word-break:break-all和word-wrap:break-word都是能使其容器如baiDIV的内容自动du换行。它们的bai区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。2，word-wrap:br

2020-07-09 16:53:39 1020

jun999