- 博客(55)
- 收藏
- 关注
RSS订阅
原创 VS Code好用的插件收藏（遇到了就更新）
1.any-rule这个插件提供了很多正则表达式使用方式1.按F1（mac下fn+F1）打开正则列表,然后搜索2.右键选择“正则大全”3.在代码任意位置输入“@zz”2.Live Server一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。并且在VS Code保存时，浏览器即可自动刷新。使用方式1.在窗口的最底部有Go
2020-12-31 15:49:38
340
原创 git恢复储藏报错fatal: ambiguous argument ‘stash@‘: unknown revision or path not in the working tree
原因是windows上的{ }得加上反引号。
2023-06-06 13:52:35
1641
原创 html实现边框缺一块的效果
如图，要实现这种效果最简单的方法就是fieldset标签+legend标签<fieldset> <legend>姓名</legend> <div> 内容 </div> </fieldset>fieldset 有几种特别的样式方案。它的 display 值默认为 block，因此建立了一个块级格式化上下文。如果将 fieldset 的 display 值设置为行内级别，则会表现为 inli.
2022-02-28 16:30:24
871
1
原创 mddir 自动生成树状目录结构
交接项目的时候经常要梳理项目结构，可以使用maddir一键生成，非常方便，效果如下使用方式1.npm install mddir -g2.进入根目录执行mddir命令然后根目录会生成一个directoryList.md文件。
2021-09-01 16:46:49
814
原创 github域名加上1s，秒变VS Code阅读源码
添加前：url: https://github.com/single-spa/single-spa添加后：url: https://github1s.com/single-spa/single-spa
2021-08-17 14:40:49
517
1
原创 vue-meta 动态管理HMTL头部标签
使用vue-meta之前，要想改变页面的titledocument.title = 'xxxxxx'使用vue-meta之后，<template> <div class="container"></div></template> <script>export default { name: "Home", data() { return {}; }, metaInfo: { title: "页面标
2021-08-04 14:37:01
398
原创 微信小程序绘制canvas文本过长时显示省略号
使用 wx.createCanvasContext()绘制文本时经常会遇到过长展示不下，这时候可以显示省略号//canvas单行文本自动省略 fittingString(_ctx, str, maxWidth) { let strWidth = _ctx.measureText(str).width; const ellipsis = "…"; const ellipsisWidth = _ctx.measureText(ellipsis).width; if (str
2021-06-25 17:03:23
1096
原创 js简单实现数据上移、下移、置顶、置底
如图，要实现这种效果可以使用js的数组api1.上移 upGo(fieldData, index) { if (index != 0) { fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0]; } else { fieldData.push(fieldData.shift()); } },...
2021-06-16 13:46:54
3999
原创 van-list会多次触发onLoad事件
1.List 初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭。2.根据有无数据来控制是否展示van-list，因为有时候页面初始化没有数据时vant-list也会触发一次...
2021-02-24 15:00:00
3789
2
原创 表格插件vxe-table
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/installhttps://github.com/xuliangzhan/vxe-table-demov1 vue 2.6 依赖: npm install vxe-table@1 xe-utils@2v2 vue 2.6 依赖: npm install vxe-table@2 xe-utils@3v3 vue 2.6 依赖: npm install vxe-table@3 xe-u
2021-02-03 10:03:07
1897
原创 vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参，如果有传参数的需求可以使用闭包函数（也叫匿名函数）实现。例如传过来不同的状态，我们设置成不同的颜色。（三目运算符可以实现但是只能设置两种，状态多了就不行了） :class="statusColor(item.status)"使用computedcomputed: { statusColor() { return function(val) { console.log(val);//根据val进行操作 }
2020-12-21 16:20:31
26506
1
原创 vue.runtime.esm.js:619 [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘contains
使用vant组件库里的复选框时，给子元素绑定click事件跳转对应页面时报错 <van-checkbox v-model="checked" icon-size="18px" label-disabled shape="square" ><span>我已阅读并同意</span> <span @click="viewAgreement">《
2020-11-23 17:08:02
28121
2
原创 element ui实现前端分页
element ui里的分页组件： <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[20, 50, 100]" background
2020-11-03 11:35:34
5603
1
原创 如何给shadow DOM下的元素添加样式
项目中在dom结构里遇到了shadow-DOM(open)，如下但是直接添加样式无法生效，用JS方法直接获取DOM也获取不到。网上查了一下，shadow-root包裹下的对象，不在全局的DOM树中，因此getElementById 等方法，获取不到包裹中的对象。比较官方的解释是：Shadow DOM 这款工具旨在构建基于组件的应用。因此，可为网络开发中的常见问题提供解决方案：隔离 DOM：组件的 DOM 是独立的（例如，document.querySelector() 不会返回组件 shado
2020-10-21 11:30:47
4211
原创 v-html指令渲染出的内容如何添加样式
项目中遇到了后端接口给一段富文本的情况可以用v-html直接渲染到页面中，但是添加样式的时候用子选择器是没有效果的，可以用以下三种方法：1去掉style中的scoped2.watch监测数据变化3.深度选择器 >>>（如果使用scss或者less等css扩展语言，则用/deep/替代：） /deep/ * { width: 540px; color: #272727; margin: 0;
2020-10-10 09:57:02
534
原创 iPhoneX底部背景图适配
在项目中经常遇到放一整张背景图的情况，但是iPhoneX底部会预留出一段空白可以用取色工具取到和底部接近的颜色然后填充 <section class="home-wrap"> <img class="wrap-bg" src="./assets/img/bg.png" /> </section>….home-wrap { position: relative; width: 100%; min-height: 100vh; bac
2020-09-15 15:22:14
703
原创 CSS中给图片类型的按钮添加置灰样式
```css.disabled{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
2020-09-11 15:06:24
1808
转载 word-break:break-all实现强制换行
一般情况下，元素拥有默认的white-space:normal（自动换行，PS：不换行是white-space:nowrap）,当录入的文字超过定义的宽度后会自动换行，但当录入的数据是一堆没有空格的字符或字母或数字（常规数据应该不会有吧，但有些测试人员是会这样子做的），超过容器宽度时就会把容器撑大，不换行。下面这种情况用white-space:normal是无效的加上word-break:break-all之后...
2020-06-29 17:48:56
547
原创 vue中配置路径别名
在vue.config.js中配置1.先在顶部引入path模块const path = require('path');2.在module.exports 里面module.exports = { // 配置路径别名 chainWebpack: (config) => { config.resolve.alias.set('@', resolve('src')).set('@assets', resolve('src/assets')) }}3.
2020-06-28 09:55:03
422
原创 vue中常用的多页和跨域配置
module.exports = { publicPath: '', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。 // 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为) outputDir: 'dist', // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。 productionSourceMap: true, integrity: false
2020-06-24 14:43:44
272
原创 audio标签实现音频自动续播
html： <div :style="[{'height':`${height}px`},{'background':`url(${userImg}) no-repeat center`},{'background-size': 'cover'}]" class="audio-play" @click="audioPlay"> <img v-show="audioStatus === 'pause'" ref="btn" src="../../../public/img
2020-06-24 14:39:33
1785
原创 vue中给body单独设置样式
在vue项目中，有时候会需要给单独的页面中的body设置样式，下面是两种方法1.在beforeCreate()中给body添加属性 beforeCreate() { document.querySelector('body').setAttribute('style', 'background-color:#fffcf5;') },2.给最外层的div添加个类名，然后处理<template> <div class="body-bg
2020-06-10 11:31:13
15603
1
原创 H5分享页面（5）——弹出下载框封装
在分享的页面中，点击某块区域需要弹出下载app的对话框，下面是封装的组件YTModal.vue<template> <div v-show="ytModalStatus" class="yt-modal"> <div class="yt-modal-body" :class="{'yt-modal-body--xl': providerCode == 3010, 'yt-modal
2020-06-09 15:25:08
674
原创 H5分享页面（4）——处理url地址栏的参数
分享的时候需要在url中拼接参数，我们可以进行处理得到一个对象：/** * 获取地址栏的search参数为一个对象结构 * @returns {Object} 参数的对象结构表示 */function getLocationSearch () { var search = location.search.substring(1) if (search.length > 0) { var obj = {} var arr = [] var item v
2020-06-09 13:25:19
1266
原创 H5分享页面（3）——Vue多页配置和jsp页面生成
一般我们分享出来的页面都是独立的页面，而Vue默认是spa单页，所以需要进行多页配置在vue.config.js里进行配置1.先封装一个页面构造器/** * 页面构造器 * @param {String} name 页面名称 * @param {String} title 页面title * @param {String} road 页面build时放置的路径地址 */function PageReset(name, title, road) { // page 的入口 this
2020-06-09 10:34:50
710
原创 H5分享页面（2）——java端配置代码
二次分享需要重新请求接口，并将分享页面的标题，logo，描述注入到meta标签，然后指向到对应的jsp页面：@RequestMapping({"/works"}) public String works(@RequestParam("userId") String userId,@RequestParam("partId") String partId, Model model,HttpServletRequest request) { String basePath = ReadProp
2020-06-09 10:24:44
276
原创 H5分享页面（1）——web端二次分享配置内容
在H5分享页面中，如果用户进行了二次分享，需要进行一些配置才能进行使用，如微信二次分享就必须调用微信的JS-SDK来完成。下面对分享配置代码进行了封装：(function () { var wxapi = '//res.wx.qq.com/open/js/jweixin-1.4.0.js', qqapi = '//open.mobile.qq.com/sdk/qqapi.js?_bid=152', qzapi = '//qzonestyle.gtimg.cn/qzone/phone/m/v4/widg
2020-06-09 10:16:56
1222
原创 获取滚动条距离底部的距离
在项目中经常需要监听页面滚动条滚到底部，下面来总结一下：1.在微信小程序中可以使用bindscrolltolower这个事件 bindscrolltolower: function () { //到底后要做的事情 },2.vue里面先在mounted里面添加监听滚动条事件scrollBottom mounted() { window.addEventListener('scroll', this.scrollBottom) },然后在scrollBot
2020-06-05 16:38:39
3714
2
原创 点击按钮回到顶部的几种方法
大部分项目都会有回到顶部的功能，话不多说，下面是具体实现的思路大致思路就是将滚动条距离顶部的距离设置成0，如果有专门的回到顶部按钮，还要获取滚动条距离顶部的距离，然后判断是否显示。1.获取滚动条距离顶部距离的方法 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop)2.可以直接设置成0，但
2020-06-02 17:02:23
4243
原创 Vue中图片显示问题
在Vue项目中动态绑定图片的src属性，图片会显示不出来<div class="share-header__logo"> <img :src="appInfo.headUrl" alt=""> <span>美谈美语</span> </div> data() { return { headUrl: "../../../public/resources/images/logo/logo-mei.png
2020-05-28 17:33:22
487
原创 vue.config.js相关配置
使用vue/cli3以上版本的脚手架创建vue项目时，是没有vue.config.js这个文件的，需要手动在项目根目录新建这个文件，或者使用 package.json 中的 vue 字段 （JSON 格式）。以下是一些相关ib
2020-05-27 10:55:50
441
原创 VsCode运行Vue项目时，Network显示为unavailable
使用vue cli启动vue项目时，本地地址可以显示，但是Network显示unavailable。1.打开网络设置，如果有多个网络启用，必须要禁用除了网络和共享中心正在连接中的以外的其他网络2.在项目根目录新建vue.config.js（vue cli3没有这个，必须手动新建），在这里配置 devServer: { public: '192.1.2.153', port: '8080', index: 'homework.html', proxy: {
2020-05-26 09:18:54
19982
8
原创 vue中修改element ui组件默认样式的两种方式
vue项目中经常会用到element ui，有时候需要修改默认的样式，比如表格，导航栏等，输入框等等。可以用以下两种方式修改：1.给组件加上id或者class，然后添加一个style，不要加scoped（vue可以有多个style），在组件里直接修改2.外部引入css文件，默认样式会被覆盖3.利用深度::v-deep深度修改组建的样式，可以直接写在到scoped作用域的style里面。（推荐） ::v-deep .video-play { .vjs-button>.vjs-icon-
2020-05-22 17:50:49
1651
原创 判断数组有没有重复
1.判断数组是否有重复，并返回重复项的index let arr = [1, 2, 3, 3, 4]; for (var i = arr.length - 1; i >= 0; i--) { if (arr.indexOf(arr[i]) != arr.lastIndexOf(arr[i])) { console.log(i); //重复元素的下标 } }2.判断数组是否有重复，不需要返回index let arr =
2020-05-21 15:02:29
6747
3
原创 视频播放器组件（vue-video-player）
1.首先，下载安装vue-video-playernpm install vue-video-player --save2.在入口文件main.js引入（多页则放入相应的入口文件）import VideoPlayer from 'vue-video-player'3.在需要使用的页面引入 <video-player ref="videoPlayer" class="video-player vjs-custom-skin" :playsinline="true" :options="p
2020-05-20 09:59:14
6123
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人