- 博客(112)
- 收藏
- 关注
RSS订阅
原创 vscode 实用插件
Chinese (Simplified) Language Pack for Visual Studio Code设置中文显示open in browser从浏览器中查看html文件，使用系统的当前默认浏览器One Dark Pro设置vscode的颜色，这个颜色比默认的黑色更淡，对眼睛没有那么的刺眼Auto Close Tag自动补全html标签Auto Import自动导入包插件Auto Rename Tag重命名一个HTML / XML标签时，自动重命名配..
2021-12-28 13:06:46
1333
1
原创 解决Vue3 默认槽的非函数值 - Non-function value encountered for default slot 的警告
解决警告⚠️：[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
2023-03-07 16:58:34
4087
1
原创 vue3 template编译出来了的，并且出现了#document-fragment，里面的内容显示不出来解决方法
原因猜想：template也是一个html标签，可能为了区分原始的标签和vue的模板吧！3. 解决方法: 在vue3 template编译出来了的，并且出现了#document-fragment，里面的内容显示不出来解决方法template标签上加一个 v-if=“true”现在依然是在页面中没有显现出来，dom元素都没有存在。2. 往div里面再加点内容看看。
2023-02-01 10:45:55
1685
1
原创 vue 接口请求下载文件
在api文件中的接口定义：export function downLoadFile (q) { return axios({ url: '/file/downLoadFile', method: 'get', params: q, responseType: 'blob' }) }下载按钮的调用方法：down(id) { downLoadFile({id}).then(res => { let blob = new
2022-04-28 17:24:02
3507
原创 Object.keys() 返回值顺序
创建一个空的列表用于存放 keys将所有合法的数组索引按升序的顺序存入将所有字符串类型索引按属性创建时间以升序的顺序存入将所有 Symbol 类型索引按属性创建时间以升序的顺序存入返回 keys其中合法的数组索引 ，也即只有正整数才行，负数或者浮点数，一律当做字符串处理。严格来说对象属性没有数字类型的，无论是数字还是字符串，都会被当做字符串来处理。结合上面的规范，可以思考一下下面这段代码会输出什么：const testObj = {}testObj[-1] = ''testObj.
2022-01-25 09:39:17
742
原创 el-tree实现单选
实现之后的单选效果图：下面贴代码：结构：<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><el-tree class="filter-tree" :data="treeObj.optionList" :props="defaultProps" node-key="value" :check-strictly="true" default-expand
2021-12-23 09:32:50
4417
1
原创 滚动条样式优化
我的是vue-element-admin项目搭建的，我在src/style/index.scss中加入下面样式::-webkit-scrollbar { width: 8px;}::-webkit-scrollbar-track { border-radius: 8px;}::-webkit-scrollbar-thumb { border-radius: 8px; background: #ddd;}::-webkit-scrollbar-thumb:hover{ bac
2021-12-17 13:13:55
763
原创 前端入职必备
一、安装vscodevsocode安装二、安装nodenode安装三、安装gitgit安装四、安装nvm前往这个github下载nvm-setup.zip五、安装nrmnpm install -g nrmnrm lsnrm use taobao六、安装Sourcetree下载安装sourcetree七、vscode插件Chinese (Simplified) Language Pack for Visual Studio Code设置中文显示open in brows
2021-09-01 10:47:42
276
1
原创 移动端线上调试工具
在项目index.html中加入这两行代码<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script> <script>eruda.init();</script>
2021-08-12 16:02:18
177
3
原创 2021-07-02
我对闭包的理解：函数嵌套函数，里面的函数词法作用域能访问外部函数的内部作用域，然后把里面的函数本身当作一个值类型进行传递，（在上图中，我们就是将bar所引用的函数对象本身当作返回值）。并且我们通常会期待外部函数的整个内部作用域都被销毁，因为我们知道引擎有垃圾回收器来释放不再使用的内存空间。但是闭包的神奇之处正是可以阻止这件事情的发生，事实上内部作用域依然存在，因此没有被回收，里面的函数在使用这个内部作用域，然而里面函数对该作用域的引用就叫作闭包。其实身边有很多，比如定时器、事件监听器、Ajax请求.
2021-08-02 09:04:23
132
原创 JavaScript数字精度丢失问题的处理
理论上用有限的空间来存储无限的小数是不可能保证精确的，但我们可以处理一下得到我们期望的结果当你拿到 1.4000000000000001 这样的数据要展示时，建议使用 toPrecision 凑整并parseFloat转成数字后再显示，如下：parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True封装成方法就是：function strip(num, precision = 12) { return +parseFloat(
2021-07-28 15:05:12
235
原创 处理浮点数
常见的出现浮点数有以下这些情况：使用原生方法解决：parseFloat((0.1 + 0.2).toFixed(10))// 输出0.3
2021-06-23 16:28:05
226
原创 等待一段时间继续执行-- setTimeout
前言我的业务场景：地址组件从脚本那里拿接口数据，如果表单有两个地址组件，两个地址组件同时加载，以致于第二个组件拿不到数据。所以得每100毫秒调用获取数据的方法，等到第一个组件地址api请求完，然后就有数据返回了。正文promise来包装一下setTimeout()来实现一个sleep()const sleep = function (time) { return new Promise((resolve) => setTimeout(resolve, time))}地址组件数据返回
2021-06-22 16:29:12
520
原创 inject 接收不到 provide 中的值
一、question？？？1. provide传值这个 layoutModel 在data中默认值是1，然后通过接口请求，改变它的值2. inject接收值此时父组件的值为3，但是inject接收到的值为1二、Why因为是接口请求更新数据，但provide在初始的时候就传了一个固定的初始值下去，所以下级组件接收到的是初始值，而不是更新后的值三、Answer在data定义的时候采用对象的形式，这样就是传一个地址过去 而不是一个固定的值...
2021-03-18 16:44:25
2715
1
原创 VSCode配置新版i18n
在VSCode的插件搜索i18n安装好了之后，点击下图的扩展设置设置显示语言- zh指定要使用的框架支持- vue指定启用文件格式- js去掉启用命名空间的勾勾然后就好了，引用了i18n后变成下图这样这样不太习惯这个格式，就可以去掉刚刚配置里的-在路径原位显示翻译文案，而不是附加在末尾的勾勾最后就成这样啦，可读性更高...
2021-02-20 10:47:54
2083
原创 el-input 设置数字框
使用el-input的type属性设置为number，结构为<el-input type="number" :controls="false" size="mini" min="0" max="30" v-model.number="addRuleForm.number"></el-input>但是设置成那个了，还有一个数量的控制键，有点小丑然后就通过了css去掉这个控制键.add-rule-dialog{ input::-webkit-ou
2020-12-19 16:10:39
2221
3
原创 使用el-select时选中值改变但没有渲染变化
在el-select上绑定change方法，使用this.$forceUpdate()强制更新一下select<el-select v-model="value" @change="changeSelect" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.val
2020-12-10 10:17:48
3484
原创 el-table动态合并表格，合并的表格行数是个变量--span-method
根据自己设定的规则，合并动态行数线上例子（可动态点击）：https://codepen.io/luoting249/pen/QWKKZPp下面是代码片段（可把代码粘贴到element在线运行上，可看到效果）：<script src="//unpkg.com/vue/dist/vue.js"></script><script src="//unpkg.com/[email protected]/lib/index.js"></script><d
2020-12-10 10:06:31
272
1
原创 vue 双向绑定问题$emit无效
父组件变量传给子组件，子组件$emit 触发父组件的方法修改父组件的变量，但是父组件的值变了，子组件的值没有改变父组件：<div> // 子组件 <son :status.sync="status"/></div><script>export default { data(){ return{ status:false } }}</script>子组件：<div @click="change">
2020-11-09 19:40:17
3484
原创 数组根据对象属性去重
let arrs = [{user: 1}, {user: 1}, {user: 1}, {user: 2}]let hash = {}arrs.filter(arr => hash[arr.user] ? false : hash[arr.user] = true)
2020-10-22 14:04:29
233
原创 手动触发滚动事件
解决因为监听滚动事件手动计算滚动距离影响其他效果事件（textare滚动事件也算在这里面从而影响了页面效果，需手动让页面滚动1px，避免影响。）let evt = document.createEvent('UIEvents')evt.initUIEvent('scroll', true, false, window, 1)window.dispatchEvent(evt)这段代码可在页面数据请求完后调用，可在上段代码加个定时器，定时器时间为0...
2020-10-22 10:33:17
1476
原创 使用 i18n Ally不生效
把 i18n Ally 的版本号变低点就好了为什么要使用 i18n Ally可以在元素中显示对应的国际化语言，方便开发如下图
2020-10-14 17:15:33
2846
3
原创 发现一个好东西---线上的vue工具 Vue Devtools
强制开启Vue Devtoolshttps://greasyfork.org/zh-CN/scripts/396985-force-enable-vue-devtools如果遇上了这个问题，要安装油猴（Tampermonkey），或者是安装了没有开启
2020-10-09 16:47:28
590
原创 el-time-select数据改变了视图没更新
<el-form-item :label="$t('notificationPush.pushTime')" prop="pushTime" :rules="{required:true, validator:validator_pushTime, trigger: 'change'}"> <span class="date-label">{{$t('label.everyDay')}}</span> <el-time-select
2020-09-30 15:41:35
1882
3
原创 手机端媒体查询
@media (min-width: 320px) and (max-width: 359px){}@media (min-width: 360px) and (max-width: 374px){}@media (min-width: 375px) and (max-width: 385px){}@media (min-width: 386px) and (max-width: 392px) {}@media (min-width: 393px) and (max-widt
2020-09-22 15:55:25
801
原创 vue 监听对象，监听不到发生改变问题
这是我的监听computed: { ...mapGetters([ 'checkList' ]) },watch: { 'checkList': { handler: function (val) { if (this.checkList.salesGroup) { console.log(1) this.memberNum = this.checkList.salesGroup.length }, deep: tr
2020-09-09 17:36:18
1262
原创 钉钉小程序获取corpId和appId
在小程序的app.js中的onLaunch函数，其中参数为options这其中就有corpId和appId，这时我们可以把他存为全局都能访问到的变量在这里插入代码片// app.jsApp({ globalData: { corpId: '', appId: '' }, onLaunch(options) { console.log('options',options) this.globalData.corpId = options.query.co
2020-09-02 09:26:30
6259
原创 Vue.directive 自定义指令的使用
一个组件可能因为层级关系，无法快速显示，这时候就可将一个组件放置body中// append-to-body.jsexport default { inserted: function (el, { value = true }) { if (!value) { return } document.body.appendChild(el) }, unbind (el) { // document.body.removeChild(el) }}
2020-08-31 16:54:09
238
原创 vue 菜单权限
src/router/index.jsimport Vue from 'vue'import Router from 'vue-router'import store from '../store'import NProgress from 'nprogress'import 'nprogress/nprogress.css'import { getToken } from '@/utils/auth'import getPageTitle from '@/utils/get-page-tit
2020-08-26 10:16:00
455
2
原创 关于数组的一切
数组的创建var arr = []; //创建一个空数组 语法糖var arr2 = new Array(); //使用构造函数创建一个空数组关联数组和索引数组索引数组：使用索引值对数组的元素进行编号关联数组：使用字符串作为数组的索引注：关联数组不计算长度（length：0） 无法使用for语句遍历，可以用for...in遍历// 关联数组var arr = []arr['name'] = '张三'arr['age'] = 20arr['sex'] = '男'Array.p
2020-08-12 15:21:54
110
原创 vue项目中，使用bus总线后请求叠加问题
使用bus总线后，发现自己接口请求叠加然后之后发现自己定义和使用了bus总线，但是都没有off掉一般地，在$on前$off掉，在beforeDestory或者destoryed也要$off掉 mounted () { BusVue.$off('isShowBox') BusVue.$on('isShowBox', this.isShowBox) }, beforeDestroy () { BusVue.$off('isShowBox') },...
2020-08-06 19:31:05
246
原创 ElementUI el-upload上传文件
在结构中使用 el-upload<el-upload class="avatar-uploader" action="" :http-request="uploadHttp" :show-file-list="false"> <el-button type="primary" size="small">上传文件</el-button></el-upload>在 script 标签中import { postFileUpload } from '
2020-07-27 19:25:40
546
原创 生成git秘钥后找不到.ssh文件夹
生成 git 秘钥：git config --global user.name "你的名字（最好是中文全名，例章华隽）"git config --global user.email "你的邮箱地址（最好是公司邮箱，例[email protected]）"然后之后发现在我的用户名文件夹中找不到 .ssh 文件,然后使用下面的命令就能生成文件啦ssh-keygen -o一般电脑都是下面这样的路径。...
2020-07-13 21:06:49
8660
4
原创 项目中的规范文件 .editorconfig
改文件放在项目的根目录，与src目录平级，文件名为 .editorconfigroot = true[*]charset = utf-8indent_style = spaceindent_size = 2end_of_line = lfinsert_final_newline = truetrim_trailing_whitespace = true
2020-07-10 17:16:37
220
原创 settings.json
{ "editor.detectIndentation": false, "vetur.format.defaultFormatter.js": "vscode-typescript", "editor.tabSize": 4, "editor.fontSize": 15, "files.associations": { "*.wpy": "vue", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "
2020-06-12 09:57:35
418
原创 个人VScode插件
推荐插件：Chinese (Simplified) Language Pack for Visual Studio Code设置中文显示open in browser从浏览器中查看html文件，使用系统的当前默认浏览器One Dark Pro设置vscode的颜色，这个颜色比默认的黑色更淡，对眼睛没有那么的刺眼Auto Close Tag自动补全html标签Auto Import自动导入包插件Auto Rename Tag重命名一个HTML / XML标签时，
2020-06-12 09:56:28
266
原创 js技巧
对数组中的所有值求和我一开始想到的是使用一个循环，但是那样会很浪费。var numbers = [3, 5, 7, 2]var sum = numbers.reduce((x, y) => x + y)console.log(sum) // returns 17使用 length 调整数组大小可以调整大小或清空数组。var array = [11, 12, 13, 14, 15]console.log(array.length) // 5array.length = 3conso
2020-06-08 17:34:10
109
原创 console.log()打印引用类型，出现神奇事件
举个栗子????????????????????var obj = { age: 1}console.log(obj)obj.age = 2按正常的是输出为 { age: 1 }但：外层为1，展开却为2。consloe.log()一开始，在没有展开的时候是一个快照，在展开后，因为是引用类型，会再去根据指针找到对应地址，也就是最新的值。...
2020-06-04 16:18:18
680
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人