- 博客(194)
- 收藏
- 关注
RSS订阅原创 VUE—发送请请求参数去空字符串 空对象 空数组
1、utils index.js filterParams(obj) { const keys = Object.keys(obj) keys.forEach(key => { const value = obj[key] if (this.isObject(value)) this.filterParams(value) // 如果是对象再调一遍该方法 if (this.isEmpty(value)) delete obj[key]
2021-08-30 14:45:44
1047
1
原创 Vant—van-field textarea 二次封装 高度自适应并设置最大最小高度
1、components新建CommentField.vue<template> <div class="comment-field-wrap"> <div class="comment-field__input"> <van-field :value="value" placeholder="请输入留言内容" rows="1" // 显示为一行的高度 type="texta.
2021-08-30 14:21:36
11441
原创 VUE—搜索列表 关键字标红高亮
<p class="item-detail__title" v-html="replaceKeywordColor(item.name)" />methods: { replaceKeywordColor(val) { if (val.includes(keyword) && keyword !== '') { return val.replace( keyword, '<font color=
2021-08-30 14:16:06
1024
原创 VUE—跨页面锚点（nuxt同样适用）
a页面点击某个位置跳转到b页面的相对应的位置1、a页面<nuxt-link to="/bpage#c"></nuxt-link><router-link to="/bpage#c"></router-link><nuxt-link to="/bpage#d"></nuxt-link><router-link to="/bpage#d"></router-link><nuxt-link to="/bp
2021-08-30 14:13:50
1192
原创 VUE—类似选房软件的多选条件组件
1、点击列表选中项目回显样式 已选条件列表更新2、已选条件为单选 超出两个显示清除全部3、点击清除全部按钮列表已选条件清空，选中项全都回归选中全部4、超出一行显示更多按钮 点击更多显示剩余全部1、MultipleSelect文件夹新建MultipleSelect.vue和MultipleSelectItem.vueMultipleSelect.vue<template> <div class="multiple-select-wrap"> // 用来放Multip.
2021-08-30 14:02:51
542
原创 VUE—van-tab切换不同样式的组件 使用v-if 解决闪动问题以及分页问题（吐血踩坑）
<template> <div class="content-wrap"> <van-tabs v-model="tabId" @change="changeTab"> <van-tab title="tab1" /> <van-tab title="tab2" /> <van-tab title="tab3" /> </van-tabs> <van-li
2021-08-25 13:33:42
2855
原创 VUE—动态循环list，item文字较多四行折行省略号，展示全文/收起按钮
1、<div class="card-item__mid-msg"> <p ref="msg" :class="{'ellipsis-4': !isMsgPack}">{{ item.context }}</p> <p v-if="isOverflow" class="card-item__mid-pack" @click="isMsgPack = !isMsgPack" >
2021-03-17 11:04:20
657
原创 VUE—h5移动端使用vconsole（调试工具）
1、npm install vconsole -D2、App.vueimport Vconsole from 'vconsole’mounted() { new Vconsole()}
2021-03-17 10:57:39
813
原创 VUE—keep-alive缓存并记录滚动位置（列表页进入详情页时缓存并记录滚动位置，返回列表页面不重新请求数据并滚动到离开时的位置）
1、使用van-list分页加载列表<template> <div> <van-list ref="list" v-model="loading" // 是否处于加载状态，加载过程中不触发load事件 :finished="finished" // 是否已加载完成，加载完成后不再触发load事件 一般axios请求数组为空设置finished为true即可 finished-text="没有更多了" ...
2020-12-17 14:44:47
2194
原创 JS—截取数组（slice/splice）
const arr = [1, 2, 3, 4]1、slice： arr不变化const arr1 = arr.slice(0, 1)// arr1 = 1// arr = [1, 2, 3, 4]2、splice： arr变化const arr1 = arr.splice(0, 1)// arr1 = 1// arr = [2, 3, 4]
2020-12-17 10:43:17
1392
原创 JS—从原数组排除某个数组内对象的某个属性
menuList: [ { name: 1, path: /1, children: [{},{},{}] }, { name: 2, path: /2, children: [{},{},{}] },]const list = menuList.map((item) => { // 判断条件，随意判断什么都可以，这里我判断如果path为/1，就不要他所在这个对象的children if (item.path === '/1') { const { ch
2020-12-14 16:48:52
1311
原创 JS—(...)数组深拷贝（reverse）颠倒数组
this.sourceData = [ ...this.list.find((item) => { return item.name === 'xxx' })].reverse()reverse数组会颠倒顺序，但是会直接改变原数组，如果直接 = 进行赋值只是浅拷贝还是会对原数组进行修改，这时候用…进行深拷贝即可...
2020-12-14 16:28:57
417
原创 JS—一维数组转二维数组
arrTrans(num, arr) { const newArr = []; while(arr.length > 0) newArr.push(arr.splice(0, num)); } return newArr;}
2020-12-14 16:26:16
934
原创 JS—正则：手机号3+4+4空格格式化
formatPhone(val) { if (val) { const matches = /^(\d{3})(\d{4})(\d{4})$/.exec(val) if (matches) { return matches[1] + ' ' + matches[2] + ' ' + matches[3] } } return val}
2020-12-14 16:25:19
2518
原创 JS—正则：手机号脱敏
phoneFormat(val) { return val.replace(/(\d{3})\d*(\d{4})/, '$1****$2')}
2020-12-14 16:24:05
2138
原创 VUE—router动画
App.vue<transition name="transitionRouter" mode="out-in"> <router-view /></transition>// 动画 style样式.transitionRouter-enter, .transitionRouter-leave-to{ opacity: 0;}.transitionRouter-enter-to, .transitionRouter-leave{ op
2020-12-14 16:23:07
490
原创 VUE—filters过滤器的使用
1、新建filters文件夹2、写入方法（例如：手机号脱敏）3、main.js引入import * as filters from '@filters'Object.keys(filters).forEach((key) => { Vue.filter(key, filters[key])})4、页面中使用data() { return { number: '1234444321', formatNumber: '' } },直接
2020-12-14 16:20:45
200
原创 VUE—全局引入公共css文件
1、新建style文件夹2、在base.less中写入一些公共样式可以写一些公共样式和公共类3、在app.vue引入
2020-12-14 16:14:41
1383
1
原创 VUE—vue3使用less 颜色变量
1、安装依赖vue add style-resources-loader vue-cli-plugin-style-resources-loader -D2、vue.config.js引入pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, './src/style/theme.less
2020-12-14 16:09:24
1854
原创 VUE—watch 某个值发生变化执行的操作（首次绑定便执行）
watch: { $route: { handler: 'getSelectedId', // 当路由变化时候执行methods里的getSelectedId方法 immediate: true // 但当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性，需要设置immediate为true }},methods: { getSelectedId() { ...... }}...
2020-12-14 15:58:53
1673
原创 VUE—mac安装脚手架失败（path /usr/local/lib/node_modules/@vue/cli/node_modules/_apollo@2.27.0@apollo/node_mo）
找到文件夹usr/local/lib/node_modules/@vue 里面有一个cli删除cli文件夹之后重新输入命令没有报错之后vue -V查看版本
2020-09-14 17:25:37
1582
原创 VUE—vue中判断元素是否有该类名，若没有为该元素添加类名
if (!headerDom.getAttribute('class').includes('not-top')) { headerDom.className = 'header-container not-top'}
2020-07-09 10:43:13
4203
原创 VUE—屏幕向上滚动到一定高度，导航栏向上慢慢消失（动画）
<div ref="header" class="header-container"> // header 设置refmounted() { document.addEventListener('scroll', this.onScroll) }, beforeDestroy() { document.removeEventListener('scroll', this.onScroll) }, methods: { onScroll() {
2020-07-09 10:40:54
2050
原创 uniapp—小程序自定义tabbar（非组件）（图文）
1、在src文件夹下创建custom-tab-bar文件文件夹下创建小程序的四个文件js/wxml/wxss/json里面的内容和小程序官方文档写的一样https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html就是这些内容可以预览效果导入段落直接copy到你的项目里，注意修改js文件里的路径2、在static文件夹下新建image文件夹，放入四张需要的图片，这个我用的也是小程序官网
2020-06-22 16:24:14
2618
2
原创 uni-app—小程序使用vuex（modules/state/actions/mutations）（图文）
1、Src文件夹下面新建store文件夹，新建index.js文件。若使用modules 再创建一个modules文件夹，在modules文件夹中创建想要的js文件，我给首页和关于我们页面分别创建了一个2、index.js文件import Vue from 'vue'import Vuex from 'vuex'import home from './modules/home.js’ // 引入modules文件夹中的js文件import about from './modules/about.
2020-06-17 17:10:52
3230
原创 uni-app—vscode—微信小程序使用vant（图文）
1、创建文件夹src下创建wxcomponents文件夹wxcomponents文件夹下再创建vant文件夹2、下载在https://github.com/youzan/vant-weapp下载最新zip下载完成后解压，将解压后的文件中的dist文件夹放入刚刚创建好的vant文件夹下3、在App.vue中引入样式@import "/wxcomponents/vant/dist/common/index.wxss"4、在pages.json文件中引入组件"usingComponen
2020-06-17 15:19:09
1436
原创 uni-app—使用vscode创建小程序项目（图文）
输入vue create -p dcloudio/uni-preset-vue my-project选择模版我选择的是默认模版，这样里面什么都没有，可以再安装自己需要的即可成功之后文件夹就是这个样子的运行项目，因为我是微信小程序，所以使用的就是mp-weixinnpm run dev:mp-weixin 用微信开发者工具打开vscode创建的项目里的dist文件夹中的dev文件夹中的文件然后就和写vue一样的写代码了，写完之后在微信开发者工具上看运行结果即可..
2020-06-17 15:06:08
5556
1
原创 Vant—vue+vant图片懒加载+图片预览
1、引入图片预览的组件import { ImagePreview } from 'vant'2、页面布局<div v-for="(item2, index) in albumList" :key="index" class="album-item"><img v-lazy="item2" alt="图片未显示" class="lazy-img" @click="getImg(index)"/></div&g
2020-06-03 17:17:23
2649
原创 VUE—封装弹窗组件并且点击空白出消失
封装弹窗的vue页面 起名叫PosterModal<div v-if="visible" class="modal-mask" catchtouchmove='true' @click="closeModal"> <div class="modal-content" @click.stop="openModal”> // .stop阻止冒泡 </di...
2020-04-22 14:42:18
986
原创 微信小程序—websocket
data: { return { socketOpen: false, }},onLoad () { wx.connectSocket({ url: `ws://地址（不包含http）`, success: (res) => { console.log(res, 'connectSocket...
2020-04-22 14:24:47
310
原创 微信小程序—更改单个/所有页面的标题背景色和字体颜色
在想修改的页面的main.json中添加{ "navigationBarBackgroundColor": "#2186F6”, // 标题的背景颜色 "navigationBarTextStyle": "white", // 标题的字体颜色} 若想改变所有页面的标题背景色和字体颜色，在app.json中添加即可...
2020-04-21 19:10:50
3363
原创 微信小程序—路由传参以及获取路由传递过来的参数
a页面： 跳转到b页面wx.navigateTo({ url: '../shop-uploadServe/main?type=edit'})b页面：在onLoad的options中接收onLoad (options) { if (options.type == 'edit') { wx.setNavigationBarTitle({ ...
2020-04-21 18:55:46
4319
原创 微信小程序—点击按钮分享给好友
<button class="button-share" open-type="share">点击分享给微信好友</button>onShareAppMessage (e) { return { title: '自定义标题', path: '/pages/home/main', // 好友点击分享之后跳转到的小程序的页面 desc:...
2020-04-21 18:33:24
6285
原创 微信小程序—子页面显示tabbar（自定义组件），样式和app.json定义的tabBar相同
注意：在app.json里直接增加tabBar只是首页的几个页面进行切换才会显示，但是如果想在子页面也显示就需要自定义tabbar组件，在想使用的子页面按下面的方法引入就可以了1、自定义tabBar组件注意：可以新建一个目录叫做components，专门放封装好的组件，注意在tabbar目录里新建Component（组件），而不是新建Page2、tabbar.wxml<view c...
2020-02-22 00:09:16
9710
8
原创 clipboard.js实现一键复制功能（多行折行不是表单都无所谓）（图文）
一、先去官网下载js文件clipboard.js官网二、我是下载的js文件，直接引入即可<script src="./clipboard.min.js"></script> // 自己放入那个文件夹注意路径即可三、// 按钮 注意data-clipboard-target这个属性是将要被复制的内容的div的id名<button class="btn" d...
2020-01-14 12:04:21
1247
原创 JQ—iframe获取/修改父级body地址
获取：(′xxx′).click(function()console.log(parent.location.href)//假如是aaa)修改：('xxx').click(function () { console.log(parent.location.href) // 假如是aaa})修改：(′xxx′).click(function()console.log(parent.locati...
2020-01-07 14:14:55
576
原创 React—todolist
React—todolist父组件import React from 'react';import ReactDom from 'react-dom';import Header from './component/header'import List from './component/list'let arr = []; // 定义一个空数组用来储存每次输入的内容class To...
2019-09-11 12:08:55
292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人