南思琼海

原创 常用的工具函数 （不定时更新）

日期转换/** * @param date 日期 * @param fmt 需要格式化的形式 * @returns {*} * 将 Date 转化为指定格式的String * 月(M)、日(d)、小时(h)、分(m)、秒(s) 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg： * D...

原创 可能用到正则验证 （实用的，不定时更新）

邮箱checkemail(t){ let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; return !reg.test(t);}checkemail ( v ) { let re = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((...

原创 Vs code 创建vue模版

ctrl + shift + p输入 snippets， 新建片段，命名vue, 生成vue.json粘贴替换{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the ..

原创 vscode .vue文件 格式化配置

{ "files.autoSave": "afterDelay", "editor.renderControlCharacters": true, "workbench.iconTheme": "material-icon-theme", "window.zoomLevel": 0, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[javascript]": { "editor.defa

原创 webstorm设置 格式化代码

webstorm设置 格式化代码时自动添加或移除逗号，分号等

原创 一个关于子网与掩码输入的组件基于elementui

copy链接 github带有掩码的不带掩码的截图可能会被吐槽一下 不过不带掩码的只是没有后面部分prop参数size ：'mini' 为不带掩码 ' '空值为带掩码 可选 默认空值defValue：这是一个默认值placeholder：掩码输入框的提示文案组件提供的便利判断了输入长度自动跳转下一个ip输入判断的回退键delete删除到空值在按下自动跳转上...

原创 vue+ts项目 封装element-ui的messagebox

场景问题： 有一个在项目非常常用的确认弹框， 并且使用element-ui的 messageBox;我们不想在每一业务中大量的复制那么多的代码，解决办法： 封装一个函数调用，尽可能给出操作回调代码代码连接 githubimport {MessageBox} from 'element-ui';Vue.prototype.$msgbox = MessageBox;//msgbox....

原创 react 移动端项目配置 postcss-pxtorem

前提*create-react-app 创建的项目通过 eject 命令暴露出react 全部配置 安装配置postcss-pxtoremnpm i postcss-pxtorem -D添加rem转换插件webpack.config.js //104行require('postcss-pxtorem')({ rootValue : 100, selectorBlackLi...

原创 react-router-dom 实现路由跳转

简单的写了一个移动呈现，底部tabbar跳转的demo简述demo 使用 create-react-app 直接创建路由是使用 react-router-dom目录结构稍微改变一下 create-react-app 创建后的src目录， 这里目录和vue相似index.js 中不做改变App.jsApp.js 中 使用 react-router-dom 检测地址 检索 ...

转载 防抖函数与节流函数

原文 https://www.cnblogs.com/chenqf/p/7986725.html应用场景实际工作中，我们经常性的会通过监听某些事件完成对应的需求，比如：通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）通过监听 keyup 事件，监听文字输入并调用接口...

原创 vue cli3 搭建一个通用中台（完）

前文已经完成这个架子的搭建关于登录本地实现图形码， 当然这个并不安全关于 router路由实现到三级动态路由mock中存有路由数据github 地址 https://github.com/nan1010082085/Vue-Asgin.gitcoding 地址 https://git.dev.tencent.com/nan1010082085/vue-asgin.gi...

转载 js对url进行编码和解码（三种方式区别）

js对url进行编码和解码（三种方式区别）*** 只有 0-9[a-Z] $ - _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。1、escape 和 unescape原理：对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码...

原创 vue render jsx 事件绑定 条件渲染 slots 插槽

前文vue中使用 render写一些展示组件通过实现一个简单的单元 cell 组件, 来了解render jsx 在vue的使用将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中...

原创 vue cli3 搭建一个通用中台（二）

前文上一文中已经完成了项目的创建和环境的配置本文将完成以下几点用户登录页面mock数据模拟请求动态路由构建开始先安装我们需要的依赖npm i element-ui axios mockjs vuex-persistedstate vue-particles -S介绍mockjs --> 用来模拟请求element-ui --> 本项目中使用的ui库a...

原创 vue 递归组件使用示例

前文我们需要做一个树形组件用来展示一些无限子级的数据时就要用到vue提供的递归组件首页了解一下 vue 中 name属性 为什么 export 有name这个属性name类型：string限制：只有作为组件选项时起作用。详细：允许组件模板递归地调用自身。 注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。指定 name 选项的另...

原创 vue cli3 搭建一个通用中台（一）

初始化项目vue create vue-asgisncd vue-asgisnnpm run serve一、 已经初始化项目后， 为了开发方便以及维护， 新增一些文件夹 - store //如果用到vuex 此文件用来维护状态 - router //路由的一些配置 - utils //一些公共方法等 - api //接口api之类二、 项目中针对开发环境与生产环境单独配...

原创 二维码生成 qrocde使用

npm install qrcode2代码：// template <div id="qrcode"></div>// css #qrcode { margin: auto; width: 442px; height: 442px; } // script import QRCode from 'qrco...

转载 移动端H5页面截图

两个工具：html2canvas官方地址：https://github.com/niklasvh/html2canvas优点：1.使用人数多，资料更全缺点：1.感觉不怎么维护更新了domtoimage官方地址【github例子很全了】：https://github.com/tsayen/dom-to-image优点：1.有人维护2.git活跃，作者发言3.使用方便缺点：...

转载 javascript 浅拷贝与深拷贝

浅拷贝与深拷贝浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。浅拷贝的实现方式（详见浅拷贝与深拷贝）：Object.assign()：需注意的是目标对象只有一层的时候，是深拷贝；Array.prototype.concat()；Array.prototype.slice()。深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。简单的...

原创 nvm 常用命令

nvm node的版本管理器nvm list 是查找本电脑上所有的node版本- nvm list 查看已经安装的版本- nvm list installed 查看已经安装的版本- nvm list available 查看网络可以安装的版本nvm install 安装最新版本nvmnvm use <version> ## 切换使用指定的版本nodenvm ls ...

原创 git常用命令

整理一些git操作命令初始化操作 $ git config -global user.name <name> #设置提交者名字 $ git config -global user.email <email> #设置提交者邮箱 $ git config -global core.editor <editor> #设置默认文本编辑器...

原创 如何在vue项目中配置你自己的启动命令和打包命令

前文在开发中，通常会需要和后台做一些开发调试， 本地开发， 和线上观测这时 如何用一套代码 加上 几个命令来轻松的做到这些？准备首先除vue项目外 我们还需要安装几个额外的包来帮助我们这只是在 vue-cli2 中的配置 当然 vue-cli3 也可以通过如下方法来配置一些环境 npm i cross-env shelljs -Dcross-env 可以帮助我们更好的来使用更好的...

原创 vue项目中使用 pinyin转换插件

npm install js-pinyin具体使用的文件中 importimport pinyin from '../../../node_modules/js-pinyin/index'使用console.log(pinyin.getFullChars('管理员')) //GuanLiYuan;console.log(pinyin.getCamelChars('管理员'...

原创 怎么写一个vue-插件？ loader加载进度条示例

前文要写一个vue的组件要么根据项目来写要么是自己构造轮子看过很多组件的写法， 无论是你怎么做， 都离不开三个东西 vue实例， dom， 你要实现的逻辑代码地址github https://github.com/nan1010082085/VueComponents/tree/master/loaderloader 组件实现引用import Loader from ...

原创 vue 2.6以上 v-slot的改变为你带来更加明确的代码

转自vue官方文档https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽前文v-slot 的出现让 slot这个插槽变得更加明确，本人认为这个插槽使用起来更加明确且简单尤其是缩写的出现， &lt;&lt; # &gt;&gt;作用域插槽自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。有时...

原创 Vue中props .sync修饰符的使用示例

前文一般情况下我们由父组件传递给子组件的对象并不想在子组件修改对象时改变父组件对象的原数据。这种情况通常在watcher时是使用深度克隆对象供子组件使用，避免某些在数据改变时渲染bug问题但是有一些特殊的得情况需要更新父组件中的数据。这就是下面要说 .sync修饰符正文我们有两个组件父组件 views2&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;d...

转载 ios 最新版 12.1.x 在微信中 input等调起软键盘后页面按钮位置偏移问题，记录一下

原文https://juejin.im/post/5c07442f51882528c4469769这里直接给出解决方案方案1onBlur = (e) =&gt; { const { onBlur } = this.props; document.body &amp;&amp; (document.body.scrollTop = 0); onBlur &amp;&amp; onBlu...

原创 项目中，用过到的组件，记录一下

https://github.com/nan1010082085/VueComponents

转载 webpack中 hash chunkhash contenthash的不同

原文：https://blog.csdn.net/bubbling_coding/article/details/81561362在webpack中有时需要使用hash来做静态资源实现增量更新方案之一，文件名的hash值可以有三种hash生成方式，每一种都有不同应用场景，那么三者有何区别呢？hash、chunkhash、contenthashhash一般是结合CDN缓存来使用，通过webpa...

原创 vuex使用 store.js

store.js 状态汇总文件 暴露import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'import actions from './store/actions'import mutations from...

原创 vue项目中， pdf解析组件

pdf解析组件github地址 https://github.com/nan1010082085/vue-components/tree/master/pdfmain.js 引入使用import PDF from 'pdf'Vue.components('PDF', PDF)//使用&lt;PDF :visible="visible" :pdfUrl="src"&gt;&lt;...

原创 vue项目中使用rimraf dev启动时删除dist目录

//适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录webpack.dev.conf.js'use strict'const utils = require('./utils')const webpack = require('webpack')const config = require('../config')const merge = require('w...

原创 vue自定义日历组件

代码地址https://github.com/nan1010082085/vue-components/tree/master/CustomCalendar享一下组件目录tip: 组件功能：展示当前年份当前月，支持左右 icon自定义支持自定义当前日提示边框颜色支持自定义某一日选择背景颜色， 边框染色如已经自定义边框颜色则为自定义颜色某一日选中采用圆点模式使用引入 mai...

原创 新版本@vue/cli3.x 无法热更新问题

关于这个问题， 我自己也测试了一些解决方案我是使用 webstorm 开发 也尝试修改了 编辑器的配置项但是毫无作用我尝试了更新 @vue/cli , cli-service vue等东西但是也毫无作用官方github中有此问题 issues地址 ：https://github.com/vuejs/vue-cli/issues/3480应用其中回答者给出的解决方案实测使用yarn重...

原创 vue弹出层 +内容手风琴 简单实现

效果草图代码：&lt;!--固定样式弹层--&gt;&lt;template&gt; &lt;div class="e-popup"&gt; &lt;div class="e-popup-container"&gt; &lt;!--手风琴--&gt; &lt;div&gt; &lt;div class="e-accordi

原创 vue项目初始化目录， 包含微信jssdk一些配置 @vue/cli版本^3.3.0

github地址 https://github.com/nan1010082085/vue-components/tree/master/%40vue3-catalogsrc 目录下

转载 console.table()

转载 CSS3属性-webkit-font-smoothing字体抗锯齿渲染

转载 https://www.cnblogs.com/moqiutao/archive/2016/03/18/5291881.htmlCSS3属性-webkit-font-smoothing字体抗锯齿渲染对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后...

原创 Vue-Router, 路由独享的守卫的使用 beforeRouteLeave

一些需求都可以通过阅读文档来解决,简单说下 组件内守卫 使用时next() 方法使用的问题官方文档 https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局后置钩子beforeRouteLeavea 页面 b 页面当从a页面 进入 b页面时，b页面做了一些操作， 在b页面判断离开时，//使用组件内...

原创 4级联动 地址组件 移动端

先发一张手机效果图支持每列单独滑动点击名字选中当前地址点击蒙层 close响应 传递当前数据点击确定 confirm响应 传递当前数据目录mixin ==&amp;amp;amp;gt; 混入文件 控制后三列滑动util ==&amp;amp;amp;gt; 工具文件， 克隆传递过来的数据getAddress.js //获取数据文件 需要在父组件混入propsvisible 控制组件显示隐藏province...