hitctc-CSDN博客

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

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

2023-08-18 18:30:49 1884

原创 mac查看IP地址

ifconfig | grep "inet " | grep -v 127.0.0.1

2022-02-16 16:14:18 9025

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

粘贴复制使用 /* 修改浏览器滚动条样式 */ ::-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 687

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

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

2021-09-30 16:25:03 627

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

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

2021-09-29 11:44:18 2430

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

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

2021-09-08 12:10:03 366

原创 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 5833

转载移动端设备判断，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 291

原创 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 1292 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 852

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

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

2021-06-16 17:32:16 734

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

Vue父组件调用子组件事件，父子组件交互 vue2 vue父组件向子组件传递数据 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 346

原创数据处理，二维数组

现将数据分为一级和二级 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 187

原创 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 459

原创 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 585

原创 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 1355

原创 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 5661

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

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

2021-03-31 11:10:59 628

原创 vue 响应性

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

2021-03-18 15:45:02 555

原创移动端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 787

原创 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 Api Options AP

2021-03-14 12:55:10 1039

原创 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 459

原创数组常用方法

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

2021-03-12 15:36:33 191

原创字符串常用方法总结

拼接除了常用 + 以及 ${} 进行字符串拼接之外，还可通过 concat let 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 205

原创不常提及但使用有效的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 164

原创 iTerm2、Oh My Zsh、主题等

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

2021-03-06 21:25:50 557

原创 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 支持的模板预设选择： vanilla vue vue-ts react react-ts preact preact-ts lit-element lit-ele

2021-03-05 18:05:57 3248

原创 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 705

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

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

2021-02-09 12:47:16 968

原创 vue 使用 better-scroll

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

2021-02-08 14:54:45 158

原创计时器使用，setTimeout，setInterval

setTimeout let flag = 0 let timeOut = null function 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 293

原创 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 317

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

监听页面滚动触发事件，页面停止滚动触发事件核心代码 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 2146

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

时间计算倒计时 _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 176

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

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

2021-01-19 23:25:39 3770 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 2017

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

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

空空如也