自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小糖穿越火线

小糖穿越火线的博客

  • 博客(244)
  • 资源 (2)
  • 收藏
  • 关注

原创 vue2中使用unocss,在ie11 不能正常显示unocss的颜色设置

为了在 IE11 中使用 UnoCSS,你需要执行额外的步骤来转换这些现代 CSS 特性为 IE11 可以理解的样式。IE11 目前是无法支持 CSS 变量(自定义属性)和 rgba 中使用的 var() 函数。然后UnoCSS 生成的颜色应该能够在 IE11 中正常显示。解决方案办法,可以使用 PostCSS 插件,如果使用 Vue CLI 并在。,也可以在那里添加这些插件。,来处理这些不兼容性。

2023-08-18 18:30:49 1108

原创 mac查看IP地址

ifconfig | grep "inet " | grep -v 127.0.0.1

2022-02-16 16:14:18 8815

原创 原来如此?修改浏览器滚动条样式

粘贴复制使用/* 修改浏览器滚动条样式 */::-webkit-scrollbar { width: .4rem; height: .4rem; background: hsla(0, 0%, 100%, 0.6);}::-webkit-scrollbar-track { border-radius: 0;}::-webkit-scrollbar-thumb { border-radius: 0; background-color: rgba(95, 95, 95,

2022-02-15 11:16:43 539

原创 小程序,修改数组或对象中的值,通过input动态修改数组对象中的值

data: { sourceList: [{ name: '', link: '', code: '', intactLink: '' }, { name: '', link: '', code: '', intactLink: '' }, { name: '', link: '', code: '', intactLink: '' }]}```javascriptchangeInp(ev

2021-09-30 16:25:03 492

原创 小程序云开发,CMS内容管理系统

痛点: 由于小程序云开发更新数据的问题,1. 通过云开发控制台进行更改数据(不方便,不可视化),2.通过开发一个管理数据的小程序页面逻辑来实现更新(费时费成本,并且不一定做的好用)好在现在腾讯官方提供了cms内容管理系统,可以方便的管理小程序云开发的数据,通过cms内容管理系统极大的提高更新数据的效率,支持文本,富文本,图片,文件,数组,json等。官方文档:https://docs.cloudbase.net/cms/intro使用流程梳理:一、进入云开发 CloudBase二、需要设置成按量

2021-09-29 11:44:18 2119

原创 阻止默认事件,浏览器滚动回弹,

document.body.addEventListener('touchmove', function (e) { e.preventDefault() // 阻止默认的事件}, {passive: false}) // 用来兼容

2021-09-08 12:10:03 188

原创 vite配置 vite.config.js

/** * https://vitejs.dev/config/ * @type {import('vite').UserConfig} */export default { //项目根目录 root: process.cwd(), //项目部署的基础路径 base: "/", //环境配置 mode: 'development', //全局变量替换 Record<string, string> define: { .

2021-09-08 11:37:27 5233

转载 移动端设备判断,ios,android,判断设备,安卓

v: function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, // IE内核 presto: u.indexOf('Presto') > -1, // opera内核 webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核 gecko:

2021-08-17 11:53:45 160

原创 mac下SSH登录不上解决

提示警告报错A session ended very soon after starting. Check that the command in profile “xx.xxx.xx.xxx” is correct.A session ended very soon after starting. Check that the command in profile "xx.xxx.xx.xxx" is correct.解决:删除/Users/username/.ssh,文件夹下的known_hos

2021-08-05 15:43:08 839 1

原创 js上传视频,预览视频

js上传视频,预览视频 <video style="width:300px; height:auto;object-fit: fill;" playsinline controls webkit-playsinline="true" :src="localVideoUrl" x5-video-player-fullscreen="true" x5-video-player-type="h5"></video>注意: 要

2021-06-17 15:32:11 621

原创 js 获取视频,者音频时长

js 获取视频,者音频时长let fileUrl = URL.createObjectURL(file)let audioElement = new Audio(fileUrl)let timeaudioElement.addEventListener('loadedmetadata', function(_event) { time = audioElement.duration console.log('???? ✪ 行号:88', time, 'duration') //单位:秒

2021-06-16 17:32:16 542

原创 vue父组件、子组件,父子组件交互

Vue父组件调用子组件事件,父子组件交互vue2vue父组件向子组件传递数据 or 调用事件父组件传递数据到子组件 props传递:<child-c :args="args"></child-c>export default { data: { return() { args: { id: 1, name: 'achuan', } } }}接收:props: { // 可选,并提供默认值 title: {

2021-06-14 01:26:33 220

原创 数据处理,二维数组

现将数据分为一级和二级let arrTemp = []let arrTempC = [] // 二级数据// 提取出一级二级数据for (let i = 0; i < data.data.length; i++) { let item1 = data.data[i].navigator if (item1.length > 0) { for (let j = 0; j < item1.length; j++) { let item2 = item

2021-06-13 23:45:55 100

原创 Vue 切换路由后页面回到页面顶部

Vue 切换路由后页面回到页面顶部backTop() { window.scrollTo(0, 0) document.body.scrollTop = 0 document.documentElement.scrollTop = 0}router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } setTimeout(() => {

2021-05-11 14:41:30 350

原创 vue组件样式穿透种类 /deep/ ::v-deep >>>。the >>> and /deep/ combinators have been deprecated. Use :deep() in

vue组件样式穿透种类 /deep/ ::v-deep >>>1、/deep//deep/ .main {}2、>>>>>> .main {}3、::v-deep::v-deep .main {}

2021-05-10 15:07:21 395

原创 webstorm 使用别名(@)import @import 时异常的问题

webstorm 使用别名(@)import @import 时异常的问题解决:在根目录下新建 jsconfig.json{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": ".", "paths": { "/@/*": ["./src/*"] } }, "exc

2021-04-09 16:14:30 1119

原创 vue3 Cannot find module ‘path‘. 找不到模块‘path‘

vue3 Cannot find module ‘path’. 找不到模块’path’按照 @types/node 即可npm i @types/node -D

2021-04-01 17:26:56 5197

原创 webstorm配置,快捷键console.log,中文字体,快捷键配置等

webstorm配置一、配置中文字体二、选中了一个变量名,同名称高亮显示配置三、快捷键相关配置四、样式预编译,自动转成css或wxss五、console.log()快捷键

2021-03-31 11:10:59 413

原创 vue 响应性

深入响应性原理在 Vue Mastery 上免费观看关于深入响应性原理的视频。什么是响应性响应性是一种允许我们以声明式的方式去适应变化的一种编程范例。人们通常展示的典型例子,是一份 excel 电子表格 (一个非常好的例子)。JavaScript 通常不是这样工作的——如果我们想用 JavaScript 编写类似的内容:var val1 = 2var val2 = 3var sum = val1 + val2// sum// 5val1 = 3// sum// 5如果我们更

2021-03-18 15:45:02 394

原创 移动端H5常用技巧

移动端H5常用技巧html 篇常用的meta属性设置meta对于移动端的一些特殊属性,可根据需要自行设置// Android 禁止屏幕旋转<meta name="screen-orientation" content="portrait"> // 全屏显示<meta name="full-screen" content="yes">// UC应用模式,使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。&l

2021-03-17 16:47:55 436

原创 Vue3.0 Composition API与Vue2.x 使用的 Options API

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?开始之前Composition Api 可以说是Vue3最大的特点,那么为什么要推出Composition Api,解决了什么问题?通常使用Vue2开发的项目,普遍会存在以下问题:代码的可读性随着组件变大而变差每一种代码复用的方式,都存在缺点TypeScript支持有限以上通过使用Composition Api都能迎刃而解一、Options ApiOptions AP

2021-03-14 12:55:10 770

原创 Vite2.0搭建Vue3移动端项目

Vite2.0搭建Vue3移动端项目一、搭建包含内容vite版本、vue3、ts、集成路由、集成vuex、集成axios、配置Vant3、移动端适配、请求代理二、步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录,新建index.ts文件import { createRouter, createWe

2021-03-12 21:15:57 335

原创 数组常用方法

数组常用方法添加下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响push()在尾部添加unshift()在开头添加splice()替换或在中间添加concat()合并// push() 方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度let colors = []; // 创建一个数组let count = colors.push("red", "green"); // 推入两项// unshift() 在数组开头添加任意多个值,然后返回新的数组长

2021-03-12 15:36:33 113

原创 字符串常用方法总结

拼接除了常用 + 以及 ${} 进行字符串拼接之外,还可通过 concatlet stringValue = "hello ";let result = stringValue.concat("world");console.log(result); // "hello world"console.log(stringValue); // "hello"截取slice()substr()substring()let stringValue = "hello world";consol

2021-03-12 00:21:58 98

原创 不常提及但使用有效的HTML技巧

图片懒加载可以通过为图片文件添加loading="lazy"的属性来实现:<img src="image.png" loading="lazy" alt="lazy" width="200" height="200" />输入提示HTML也是能够让我们来实现预定义输入建议功能的,通过标签来实现。需要注意的是,使用时这个标签的id属性需要和input元素的list属性一致。<label for="country">请选择国家:</label><input

2021-03-11 17:41:38 85

原创 iTerm2、Oh My Zsh、主题等

iTerm2 Oh My Zsh一、输入下面指令安装oh-my-zshcurl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | shorsh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"安装 OhMyZsh 后OhMyZsh 主题修改为 Agnoster终端

2021-03-06 21:25:50 282

原创 vite新建vue3项目采坑,官网流程之路,vite+vue3+elementpuls

Vite 构建可以使用 Vite 快速构建 Vue 项目。vue3文档操作步骤,按照文档操作,出现繁琐问题;vite构建后的vite版本是老版本: “vite”: “^1.0.0-rc.13” ,查看package.json 文件发现vue也是老版本。正确方式:npm init @vitejs/app vue3-project支持的模板预设选择:vanillavuevue-tsreactreact-tspreactpreact-tslit-elementlit-ele

2021-03-05 18:05:57 2380

原创 video js 全屏时,遇到18:9的长屏幕时,画面被切割

video js 全屏时,遇到18:9的长屏幕时,画面被切割设置.vjs-fluid padding-top 为0.videoPlayExecute-dimensions.vjs-fluid { padding-top: 56.25%;}

2021-02-19 18:07:21 493

原创 判断设置两天后时间,时间戳

const isExpired = (playTime) => { let playTimestamp = parseInt(playTime) + (48 * 60 * 60 * 1000) // 两天后 let currentTimestamp = new Date().getTime() return currentTimestamp > playTimestamp ? true : false // 为true就是过期}const _self = thislet au

2021-02-09 12:47:16 809

原创 vue 使用 better-scroll

import BScroll from 'better-scroll'要注意等数据加载完成之后再初始化better-scrollexport default { data() { return { data: [] } }, created() { this.loadData() }, methods: { loadData() { requestData().then((res) => {

2021-02-08 14:54:45 85

原创 计时器使用,setTimeout,setInterval

setTimeoutlet flag = 0let timeOut = nullfunction fun() { flag++ if (flag == 10) { timeOut && clearTimeout(timeOut) } timeOut = setTimeout(() => { fun() }, 1000) console.log('???? ~ file: test.html ~ line 34 ~ flag', flag)}

2021-02-06 23:02:37 200

原创 css3钟摆效果

css3钟摆效果.pendulum-styl { -webkit-animation: run 1s ease-in-out alternate infinite; -moz-animation: run 1s ease-in-out alternate infinite; animation: run 1s ease-in-out alternate infinite; @keyframes run { 0% { -webkit-transform: rotate(

2021-02-05 16:06:47 163

原创 监听页面滚动触发事件,页面停止滚动触发事件

监听页面滚动触发事件,页面停止滚动触发事件核心代码data() { return { timer: null, isTipVisible: true }}methods: { handleScrollStart() { this.timer && clearTimeout(this.timer) this.timer = setTimeout(() => { this.handleScrollEnd() }, 500)

2021-02-05 11:34:22 1823

原创 代码片段:计算倒计时

时间计算倒计时_downNowDate(preTime, startTime, endTime) { const _self = this // setTimeArr var countDown var status // + 5 * 60 * 1000 var preTimestamp = new Date(preTime.replace(/-/g, '/').valueOf()) var startTimestamp = new Date(startTime.replace

2021-02-02 17:43:44 102

原创 小程序 bindtouchmove 使用拖动按钮 页面跟着滑动并拖动卡顿感 问题

修改bindtouchmove="buttonMove"为catchtouchmove="buttonMove"使用touchmove监听滑动要更新视图层,导致动画卡顿,阻止冒泡可以解决。

2021-01-19 23:25:39 3187 1

原创 modification of global variable “Promise.prototype.finally“ is not allowed when using plugins at app

使用插件后微信小程序报错信息:[non-writable] modification of global variable “Promise.prototype.finally” is not allowed when using plugins at app.json.解决,在封装请求的时候判断一下finally// 无论promise对象最后状态如何都会执行// Promise.prototype.finally = function(callback) {// let P = this.

2021-01-17 22:16:33 1925

原创 微信小程序 Unexpected end of JSON input

微信小程序 Unexpected end of JSON input核心解决:encodeURIComponent和decodeURIComponent跳转jumpTopic(e) { const _self = this const boardsData = _self.properties.boardsData wx.navigateTo({ url: '/pages/second-home-page/second-home-page?boardsData=' + encode

2021-01-17 01:04:43 521 1

原创 vue 动态绑定 video src,不能正常播放问题

vue 动态绑定 video src,不能正常播放问题通过 vm.$refsvm.$refs一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例。核心代码let el = _self.$refs.HomeVideoel.src = 'xxx.mp4'自动播放下一个视频onNext() { const _self = this let el = _self.$refs.HomeVideo el.src = _self.videoArr[1] let

2020-12-23 16:17:20 2514

原创 css3 position: fixed 居中问题,移动端,旁边留白的情况fixed不能居中的问题;

css3 position: fixed 居中问题移动端,旁边留白的情况fixed不能居中的问题; z-index: 1000; position: fixed; margin:0 auto; top: 0; bottom: 0; left: 0; right: 0; width: 375px; height: 100vh;

2020-12-10 17:05:46 353

原创 浏览器复制网页链接到微信,显示却只有网页title解决

浏览器复制网页链接到微信,显示却只有网页title解决问题复现复制:粘贴解决一般出现这个问题是因为浏览器设置:目前是eage浏览器,其它浏览器类同;对您有所帮助的话,给个一键三连!欢迎━(`∀´)ノ亻!...

2020-12-02 11:57:10 2042

xampp-linux-x64-7.2.30-0-installer.run

linux版本得xampp,xampp-linux-x64-7.2.30-0-installer.run

2020-04-29

xampp-windows-x64-7.2.30-0-VC15-installer.exe

windows版本得xampp,xampp-windows-x64-7.2.30-0-VC15-installer.exe

2020-04-29

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除