呆子小木心-CSDN博客

微信小程序中自定义一个页面放webview标签用来打开第三方给到的url地址，使用navigateTo方法携带这个url参数进行跳转时，webview标签会打不开这个带过来的url。原因：url地址不能直接作为参数进行路由传参，要进行加密。解决：//跳转路径 let url = '/pages/web-view/index?url=' + encodeURIComponent(res.data);//对地址进行编码 wx.navigateTo({ url: u

2022-05-23 16:46:53 1480

原创 vue报错： “TypeError: Cannot read properties of undefined (reading ‘0‘)“

Vue里面的一个坑：vue.esm.js?c9fd:628 [Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘0’)”；1，起因：在页面使用到的数据是嵌套多层的时候，比如是拿的是数组的第三层的数据进行展示，像data[0][0]，在页面进行初始化的时候，会报错：Cannot read properties of undefined (reading ‘0’)；但是页面是可以正常使用的

2022-05-11 15:12:06 42961 7

原创 CSS flex-wrap 属性

CSS flex-wrap 属性flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。注意：如果元素不是弹性盒对象的元素，则 flex-wrap 属性不起作用。CSS 语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;属性值：值描述nowrap默认值。规定灵活的项目不拆行或不拆列。wrap规定灵活的项目在必要的时候拆行或拆列。wrap-reverse规定灵活的

2022-05-11 14:46:06 1653

原创 element-ui el-table 数据变化时表格出现抖动

element-ui el-table 数据变化时表格出现抖动项目有个需求，有一个表格是通过改造el-table来适应需求，表格的head和body数据都是通过v-for渲染遍历生成的，通过多选框Checkbox来勾选表格头部需要展示的数据，进行切换到时候表格出现抖动不美观。部分原代码：<el-table :data="tableData" border class="spec-table"> <el-table-column v-for="(item,index) in

2022-04-20 11:42:08 9834 4

原创 elementui 下拉框滚动加载数据-vue项目

elementui 下拉框滚动加载数据-vue项目1，新建一个js文件：directives.js，写入如下：// directives.js import Vue from 'vue' Vue.directive('loadmore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-sele

2021-12-17 18:40:29 1657 1

原创上传本地项目到 git的指定分支

上传本地项目到 git的指定分支上传一个独立的分支（比如代码是从工程中直接DOWNLOAD ZIP文件，该文件与原MASTER分支是独立的）-1，安装好git0，进入要上传的项目的根目录，然后鼠标右键，找到选项 “Open in SmartGit”，然后选中项目，右键选择 “Open Git-shell”1、Git init （在本地工程目录下），生成.git 文件夹Git init2、上传修改的文件git add *(*可替换成具体要上传的文件名，*表示提交所有有变化的文件

2021-12-17 18:29:08 3160

原创 Error: EPERM: operation not permitted(权限问题 errro permit)

npm下载依赖报错npm ERR! code EPERMnpm ERR! syscall unlinknpm ERR! path E:\code\20200212\web\cbos2.0-wenlv-wx-cli\node_modules\.staging\caniuse-lite-70323fe6\data\features\document-scrollingelement.jsnpm ERR! errno -4048npm ERR! Error: EPERM: operation not p

2021-11-25 18:19:07 8195

原创 uniApp使用高德地图api

uniApp使用高德地图api1，在自己项目中的/src/common/js中的weixin.js写入，没有就新建文件，（具体目录因自己项目而议）export const weixin = {/* 获取地理位置接口 */ getLocation: function (callback) { let option = { type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: fun

2021-11-16 19:32:54 6674 3

原创 vue使用原生的高德地图api

vue使用原生的高德地图api高德地图api的官方网址：https://lbs.amap.com/demo/javascript-api/example/callapp/markonapp需要去官网申请要使用的对应功能的Key值，具体步骤自己上网查。1，在vue项目的index.html文件中的head标签中引用：<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><scrip

2021-11-16 19:14:18 1510

原创 Vue watch监听路由不生效，没反应

Vue watch监听路由不生效，没反应直接上代码： watch: { $route: { immediate: true, // 一旦监听到路由的变化立即执行 handler(to, from) { console.log("监听路由：" + JSON.stringify(to.name)); }, }, }这样监听路由就能解决问题！...

2021-11-10 14:09:14 3611

原创解决：VUE项目Avoided redundant navigation to current location: “/XXX“.问题

解决：vue项目报错：Avoided redundant navigation to current location: “/suggestPageIndex”在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复解决：router文件夹下面的index.js中加上下面几句代码，搞定 // 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const origi

2021-10-20 14:55:00 925

原创 vue解决跳转时新页面没有置顶

Vue页面跳转后当前位置不在顶部的解决办法(几种办法)1，在main.js中添加如下代码：// 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); })//或者router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0 // firefox documen

2021-10-20 09:42:22 2417

原创关于vue 里:class 的几种使用方式

关于vue 里:class 的几种使用方式关于:class的使用结合自己的实现整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用也是类似的一， class1 自定义class 通过vue computed 计算属性实现我的class 是名称+时间戳，是独一份的，可以作为id角色使用。html:<div :class="_module"></div>js:data(){ return { ar

2021-10-15 13:39:33 7764

原创解决el-menu动态渲染菜单数据后折叠菜单栏时文字不隐藏

解决el-menu动态渲染菜单数据后折叠菜单栏时文字不隐藏1，安装 vue-fragmentcnpm i vue-fragment --save2，在main.js中引入// main.jsimport Fragment from ‘vue-fragment’Vue.use(Fragment.Plugin)3，使用fragment标签<fragment v-for="item in menuData" :key="item.id"> <el-submenu v-i

2021-10-15 10:14:24 672

原创选中el-select组件在按回车时，如何隐藏下拉菜单

按下回车，如何让下拉菜单隐藏（或者失去焦点，因为下拉项要显示的前提是获取焦点）<el-select style="width: 100%;" v-model="form.provinceId" placeholder="省份" ref="selectProvinces" @visible-change="isShowSelectOptions" @ch

2021-09-24 14:26:34 1828 1

原创 vue：添加enter事件，键盘敲下enter事件

vue项目中遇到点击查询按钮可以查出数据，点击回车键也能查出数据，所以就想点击回车键时调用查询方法。示例代码如下：一、第一步：给input按钮绑定@keyup.enter；如果是要对页面的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created或者mounted里，直接绑定在document上。 <div class="btn"> <!--如果是封装过的按钮，不是原生的按钮，需要加上.native才能生效--&

2021-09-24 14:13:20 30390 3

原创 vue项目 pc端自适配方案

vue3.0 pc端自适配方案1.引入插件使用yarn或者npmyarn add px2rem-loader -Syarn add postcss-px2rem -Syarn i lib-flexible -Snpm install px2rem-loader -Snpm install postcss-px2rem -Snpm i lib-flexible -S2.vue3.0由于没有build配置文件，在根目录新建文件vue.config.js（用来解决跨域或者配置文件）const

2021-09-22 17:38:26 12145 7

原创前端Vue项目优化: 使用vue-lazyload插件实现图片懒加载

Vue项目优化: 使用vue-lazyload插件实现图片懒加载vue-lazyloadvue-lazyload插件用于 vue 项目中图片的懒加载npm地址：https://www.npmjs.com/package/vue-lazyloadvue-lazyload安装通过npm安装 npm install vue-lazyload --save-dev通过CDN引入使用<script src="https://unpkg.com/vue-lazyload/vue-lazylo

2021-09-18 10:17:23 289

原创 VUE 报错：Mixed spaces and tabs

出现问题的原因：项目使用了eslint 规范代码，而你的代码违反了规范第一种方案（推荐）：通过编辑器格式化代码，统一缩进方式第二种：关闭eslin 对空格和tab的校验vue 3.0版本以下：1，找到build->webpack.base.config.js。注释或者去掉对eslint-loader的引用。{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', includ

2021-09-17 09:36:32 732

原创 JavaScript数组常见操作方法

JavaScript数组常见操作方法1,join()添加成分割符转化字符串 var arr01=[1,2,3,'asd']; var joi= arr01.join('-'); console.log(joi);//1-2-3-asd console.log(typeof joi); //string2,push()和 pop() 在数组的最后添加数据和删除数据 var arr02=['I','Love','You']; arr02.push('Do','you'

2021-09-15 15:55:46 96

原创 elementUi在vue项目中改变 SCSS 变量来实现自定义主题

elementUi在vue项目中改变 SCSS 变量来实现自定义主题Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-ch

2021-09-03 17:53:54 2054

原创 elementui弹出层中的tabs出现蓝色边框的问题

elementui弹出层中的tabs出现蓝色边框的问题可以在当前页面的样式中添加.navHead /deep/.el-tabs__item:focus.is-active.is-focus:not(:active) { box-shadow: none; border-top-left-radius: 20px; border-top-right-radius: 20px;}...

2021-08-20 14:13:40 226

原创 VUE 自定义下拉框时，点击其它区域触发事件（关闭、修改等）

VUE 自定义下拉框时，点击其它区域触发事件（关闭、修改等）this.$el是在mounted中才会出现的，在created的时候是没有的所以我们引用的时候，它指的是当前组件的的元素。$el读取的是组件实例挂载的dom元素。($el指向当前组件template模板中的根标签)。Vue.js//contains()，js原生方法，用于判断DOM元素的包含关系；//需要注意的是：它以HTMLElement为参数，且返回布尔值。mounted(){ document.addEventListe

2021-08-19 14:53:06 1082

原创微信小程序——自定义导航栏

微信小程序——自定义导航栏官方文档的一些介绍：但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示：现在具体说一下实现步骤及使用方法：步骤：1，在 app.json 里面把 “navigationStyle” 设置为 “custom”，这样子之后就只会保留右上角胶囊按钮了。"window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroun

2021-06-13 15:29:29 2021

原创微信小程序——自定义组件

微信小程序——自定义组件1，在创建的微信小程序项目的根目录上创建一个文件夹——component2，在app.json上建立相关文件可以看到，这个组件目录结构跟小程序普通页面结构是一样的，都是包含四个文件，但是.js和.json文件和普通页面略有不同。下面我们来看下每个文件的构成。3，介绍js文件：// js文件Component({ /** * 组件的属性列表 */ properties: {}, /** * 组件的初始数据 */ data: {}

2021-06-13 15:01:03 226

原创微信小程序-在button添加icon和去除button点击时的默认背景色

在button添加icon<button class="wxBtn"> <image class="wxfxBtn_image" src="../../images/wx.png"></image> <text>微信</text></button>去除button点击时的默认背景色微信小程序里面的button标签默认背景色为.button-hover样式渲染，可通过控制台查看，只需覆盖这个背景色即可。/* 点

2021-06-13 12:17:15 2173

空空如也

空空如也