- 博客(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
1371
原创 原来如此?修改浏览器滚动条样式
粘贴复制使用/* 修改浏览器滚动条样式 */::-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
566
原创 小程序,修改数组或对象中的值,通过input动态修改数组对象中的值
data: { sourceList: [{ name: '', link: '', code: '', intactLink: '' }, { name: '', link: '', code: '', intactLink: '' }, { name: '', link: '', code: '', intactLink: '' }]}```javascriptchangeInp(ev
2021-09-30 16:25:03
525
原创 小程序云开发,CMS内容管理系统
痛点: 由于小程序云开发更新数据的问题,1. 通过云开发控制台进行更改数据(不方便,不可视化),2.通过开发一个管理数据的小程序页面逻辑来实现更新(费时费成本,并且不一定做的好用)好在现在腾讯官方提供了cms内容管理系统,可以方便的管理小程序云开发的数据,通过cms内容管理系统极大的提高更新数据的效率,支持文本,富文本,图片,文件,数组,json等。官方文档:https://docs.cloudbase.net/cms/intro使用流程梳理:一、进入云开发 CloudBase二、需要设置成按量
2021-09-29 11:44:18
2224
原创 阻止默认事件,浏览器滚动回弹,
document.body.addEventListener('touchmove', function (e) { e.preventDefault() // 阻止默认的事件}, {passive: false}) // 用来兼容
2021-09-08 12:10:03
222
原创 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
5386
转载 移动端设备判断,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
178
原创 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
967
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
655
原创 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
579
原创 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
234
原创 数据处理,二维数组
现将数据分为一级和二级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
107
原创 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
359
原创 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
410
原创 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
1173
原创 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
5404
原创 webstorm配置,快捷键console.log,中文字体,快捷键配置等
webstorm配置一、配置中文字体二、选中了一个变量名,同名称高亮显示配置三、快捷键相关配置四、样式预编译,自动转成css或wxss五、console.log()快捷键
2021-03-31 11:10:59
438
原创 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
429
原创 移动端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
577
原创 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
833
原创 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
352
原创 数组常用方法
数组常用方法添加下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响push()在尾部添加unshift()在开头添加splice()替换或在中间添加concat()合并// push() 方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度let colors = []; // 创建一个数组let count = colors.push("red", "green"); // 推入两项// unshift() 在数组开头添加任意多个值,然后返回新的数组长
2021-03-12 15:36:33
126
原创 字符串常用方法总结
拼接除了常用 + 以及 ${} 进行字符串拼接之外,还可通过 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
111
原创 不常提及但使用有效的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
96
原创 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
311
原创 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
2415
原创 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
545
原创 判断设置两天后时间,时间戳
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
835
原创 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
98
原创 计时器使用,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
215
原创 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
181
原创 监听页面滚动触发事件,页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码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
1904
原创 代码片段:计算倒计时
时间计算倒计时_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
109
原创 小程序 bindtouchmove 使用拖动按钮 页面跟着滑动并拖动卡顿感 问题
修改bindtouchmove="buttonMove"为catchtouchmove="buttonMove"使用touchmove监听滑动要更新视图层,导致动画卡顿,阻止冒泡可以解决。
2021-01-19 23:25:39
3367
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
1942
原创 微信小程序 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
549
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
2573
原创 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
382
原创 浏览器复制网页链接到微信,显示却只有网页title解决
浏览器复制网页链接到微信,显示却只有网页title解决问题复现复制:粘贴解决一般出现这个问题是因为浏览器设置:目前是eage浏览器,其它浏览器类同;对您有所帮助的话,给个一键三连!欢迎━(`∀´)ノ亻!...
2020-12-02 11:57:10
2152
xampp-linux-x64-7.2.30-0-installer.run
2020-04-29
xampp-windows-x64-7.2.30-0-VC15-installer.exe
2020-04-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人