chi1130的博客

效果在线demo????????代码TreeItem.vue<template> <div class="tree-item"> <div @click="handleToggle" class="tree-title"> <i v-if="hasChild" :class="open?'el-icon-remove-outline':'el-icon-circle-plus-outline'"></i>

创建方法在utils下创建一个token.js 抛出setToken，getToken方法var jwt = require("jsonwebtoken");var jwtSecret = "write messages"; //签名//登录接口 生成token的方法var setToken = function(_id, openid) { return new Promise((resolve, reject) => { //expiresln 设置token过期的时间

前言近期利用十一的时候写了一个小程序，把node、mongodb、nginx、vue的知识点复习了一遍，从开发到上线流程梳理了一遍，下面是一些涉及到的易错步骤1、如何使用multer实现文件上传及回显2、node server如何实现登录生成token及接口校验token3、mongoose操作数据4、centos7 安装mongodb、pm2等5、nginx http转https6、nodejs服务获取微信用户openid完整代码前端node服务端预览...

前言在移动项目开发中往往会写一些 H5 页面，一个项目可能只有一两个页面，引入其他 UI 组件项目显得太臃肿，也没有啥必要，毕竟那些组件都是被人写的，有的时候不能一味的去使用他人写好的代码，有时间也需要自己谢谢，锻炼自己的同时也在巩固一些基础知识～～问题一个页面弹出一个框，框里的内容可以滚动，但是滚动弹框时，body 内容也在动 【前提是你的 body 超过屏幕的高度】，然而在 iOS13 ...

前言最近看了一篇用 Angular4+ 写的添加水印功能，觉得挺好玩，就自己试着用 vue 写一个相同功能效果LIVE☀️???????????? 在线例子 ????????☃️❄️代码✈️✈️✈️✈️✈️✈️ 直达完整代码 ????✈️????????????????<div class="wrap"> <div class="optea"> <div class="file-upload"&gt...

需求一个表单多个下拉框，假如 options 里有中国，美国，第一个 select 选择里中国那么第二个 select 的 options 中国就置为灰色，反之我第二个选里中国，第一个 options 中中国就置为灰色效果DEMO在线 demo ⛩⛽️????✈️????????????????代码<template> <div> <el-form :model="rul...

前言微信支付时，当调用微信支付的时候，微信会判断当前页面和微信公众号后台设置的支付授权目录是否一致，他会把页面最后一次刷新的url作为判断依据（如果用户刷新了任何页面，这个页面就是支付页面），这个时候，单页应用的路由中‘#’后面的内容也会被传递过去，在微信的判断流程里，这个url和设置的目录是不匹配的，因为涉及到多个页面都会发起支付请求，所有设置多个带页面参数的url是不合理的，所以这里在‘#’...

现象用富文本的情况有很多，例如在后台管理系统排版好的富文本页面，准备在移动端页面去显示，或者在官网显示，两个项目不在一起，在管理系统排好的样式在显示页面显示的一塌糊涂，为啥呢？大多数情况是样式没有引入。解决给容器增加一个class ql-editor，才能正常显示，另外前面是主题类名，不同的主题显示不同的样式 <link href="http://cdn.quilljs.com/1...

问题一个ssr项目添加多个swiper会引起轮播图混乱。前言在使用nuxt.js实际开发项目中，会出现类似这样的情况，一个页面写两个【PC端一个，移动端一个】或者多个【其他需求】，在官方github有关服务端渲染的文档少之又少，只有一个简单的使用demo,且与vue-cli项目使用还有点差别，那怎么解决？单个使用<template> <div v-swiper:my...

前言略去。。。代码<audio id="audio" controls> <source :src="audUrl || '../assets/alarm.ogg'" type="audio/ogg" /></audio>问题发现问题绑定的时候,发现并不管用let audio = document.querySelector('#audio...

预览思路拿到时长做倒计时，时长 = （ 时长 + 1 ） * 100; destroy的时候清除一下代码<div style="display:none"> <audio controls="controls" ref="audio"> <source :src="url || ''" type="audio/mpeg" /> <...

前言最近在项目开发中碰到这样一个问题，刚登录完用 axios 调订单列表接口时，总是提示 token 过期失效。仔细想想，刚登录的返回的 token 都没存在 window.document.cookie 中，怎么会过期呢。经过沿路抽丝剥茧，debugger，打印出来的 token 依然是最新的返回，这使得我不禁陷入了沉思 ????????????????‍♂️，为啥？正常代码 // list getList...

前言最近在vue项目中，全局安装了一下typescript，再看看vue项目代码就有一大堆ts提示错误然后网上一搜也没啥好答案～例如：❌❌解决办法：在设置里面加上 “javascript.validate.enable”: false 禁用默认的 js 验证这样禁用那我js写错了都不知道。。。正解～设置中搜索tsconfig ->Check JS Experimental De...

前说在项目开发中，有很多时候由于某某原因，很多UI组件不能被用，像移动端一个小的H5页面，引入一个大的antd-mobile显然也不合理，所以就有了很多形形色色的自定义组件了。效果LIVEdemo代码drawer.vue<template> <div class="drawer"> <div :class="maskClass" @clic...

官网原话混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项功能～1.选项合并～1.全局混入～1.自定义选项合并策略具体看官网介绍：https://cn.vuejs.org/v2/guide/mixins.html需求假如我们的项目中有很多重复类...

需求用户登录之后，返回access_token, refresh_token 还有返回失效时间20秒.1,假如用户一直在数据交互。当access_token 失效了就用refresh_token 来更新一下 access_token.2,假如用户登录之后啥也不干，那么access_token 失效了就跳到login页面.3,假如用户在失效前30分钟存在数据交互，则用refresh_toke...

之前网上荡了一遍，并没有找到什么好例子，索性自己写个吧。。代码在github上，https://github.com/chengheai/element-tree 欢迎star，follow，谢谢！个人博客 ：https://chengheai.github.io/ 欢迎交流其实很简单的了，还是把代码分享一下吧；template&lt;el-aside style="...

[demo](https://chengheai.github.io/Element-UI/docs/)效果代码 &amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;div v-for=&amp;amp;quot;item in showdetailList&amp;amp;quot; :key='item.message'&amp;amp;amp;gt; &amp;a

vue2.0 + webpack做项目时，css3动画打包前正常，打包后失效，原因是：vue-cli脚手架package.json配置文件里面对浏览器的版本做了css的前缀处理"browserslist": [ "&gt; 1%", "last 2 versions", "not ie &lt;= 8" ]意思是 只兼容主流浏览器的最新两个版本。如果我们要兼容所...

规则级别"off"或者0，不启用这个规则"warn"或者1，出现问题会有警告"error"或者2，出现问题会报错关闭ESLint检测/* eslint-disable */console.log('hello world');/* eslint-enable */配置eslintrc.js// https://eslint.org/docs/user-guide/confi...

效果代码template&lt;template&gt; &lt;div class="sidebar"&gt; &lt;!-- 折叠按钮 --&gt; &lt;div class="collapse-btn" @click="collapseChage"&gt; &lt;i class="el-icon-d-arrow-le

问题当你在中文输入法下输入然后回车后，发现表单提交了。代码&amp;amp;lt;el-col :span=&amp;quot;14&amp;quot;&amp;amp;gt;&amp;amp;lt;el-input type=&amp;quot;text&amp;quot; v-model=&amp;quot;loginForm.content&amp;quot; autocomplete=&amp;quot

效果线上DEMO

第一种方法（当数据不多的情况下使用【比如排行榜10条】）思路每次上滑的时候都调一次接口，直到没有数据就将infinite-scroll-disabled 设为true，每次截取slice(i * 3, (i + 1) * 3）; 3是每次显示的条数代码&amp;lt;div class=&quot;r-contatin&quot;&amp;gt; &amp;lt;img class=&quot;r-title&quot; :src=&am

效果demo代码 [ 日期比较 ] <div class="block"> <span class="demonstration">开始日期：</span> <el-date-picker v-model="startDate" type="date" :picker-options="pick...

效果DEMO点我呀

前提补充在vue中<input v-model="text" />等价于<input :value="text" @input="e => text = e.target.value"/>需求前端提交form表单要求，不能输入 @#¥%……&*…不是提示，而是 禁止输入效果代码** 在mian.js中添加【vue原型上添加方法，...

 方式一：静态&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&