- 博客(37)
- 收藏
- 关注
RSS订阅原创 CSS组件化样式新篇章：@scope
CSS 的 @scope 是一个较新的 CSS 特性，用于创建样式作用域，限制选择器的生效范围，避免样式污染和意外的样式冲突。它解决了传统 CSS 中全局样式容易相互干扰的问题，尤其适合组件化开发。
2025-08-01 10:04:16
997
原创 ECMAScript 2025 正式发布：8个必须掌握的新特性
ECMAScript 2025（ES16）于2025年6月正式发布，引入了八项关键新特性，显著提升了JavaScript的开发效率、安全性和表达能力。
2025-07-25 15:07:55
167
原创 CSS文字镂空效果
原理：利用background-clip: text将背景裁剪到文字区域，结合text-fill-color实现镂空。mix-blend-mode: screen 使文字区域的白色背景与下方视频混合，显示视频内容。原理：使用两层文字叠加，底层为描边文字，顶层为小一号的实心文字，通过错位形成镂空边缘。原理 ：将文字颜色设为透明，给文字添加描边，只保留描边部分，形成镂空效果。文字本身设置为透明，最终呈现 “视频透过文字显示” 的镂空效果。3、支持复杂背景（图片、视频背景均可）1、兼容所有浏览器（包括IE9+）
2025-07-22 11:46:18
207
原创 axios配置头，token过期跳登陆页面
axios.interceptors.request.use(config=>{ config.headers["authorization-admin"] = window.sessionStorage.getItem('token'); config.headers["Content-Type"] = "application/json;charset=UTF-8"; // if(config.method=="post") return config;})Vue.proto
2021-09-27 17:26:09
390
原创 npm install 报错 npm ERR!
npm i 报错npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency tree查看npm版本：7.xxx版本查阅资料后说是因为npm7.x的版本比npm6.x更严格，因此降版本成6.xxx版本npm install [email protected] -g
2021-09-24 10:28:18
418
原创 滚动条默认在底部/顶部
this.$nextTick(() =>{ var ele=document.querySelector('.viewColBox') //默认在底部 ele.scrollTop = ele.scrollHeight; //默认在顶部 //ele.scrollTop = 0; })
2021-08-26 12:02:20
1096
原创 地址解码decodeURI和decodeURIComponent
//获取完整的 URLvar url = window.location.href;//从问号 (?) 开始的 URL（查询部分）var url = window.location.search;//当前 URL 的端口号var url = window.location.port;//decodeURI()可对 encodeURI()编码过的 URI 进行解码。//url =decodeURI(decodeURI(location.search)); url =decodeURI(l
2021-08-23 16:41:12
867
原创 修改页面路由重复点击报错
报错Avoided redundant navigation to current location: "/index// 修改页面路由重复点击报错const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}Vue.use(VueRou
2021-07-30 11:04:35
108
原创 https网页加载http资源导致的页面报错
页面的head中加入：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">把接口换成https的
2021-07-28 09:04:19
340
原创 js判断ios或者安卓系统
var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端alert('是否是Android：'+isAndroid);alert('是否是iOS：'+isiOS);2.用正则//或者直接用正则，i...
2021-07-15 09:43:52
647
原创 vue中图片加载失败时显示默认图片
<img :src="p.courseJacket?p.courseJacket : '' " :onerror="logo"> data(){ return{ logo:'this.src="' + require('../assets/img/kecheng.jpg') + '"', } },
2021-06-01 11:01:29
257
原创 返回上一页
window.history.go（-1）this.$router.go（-1）//例goback(){ this.$router.go(-1);//返回上一页 }<router-link to> <el-button @click="$router.back(-1)">返回</el-button></router-link><mt-header title="通知公告"> <router-link
2021-05-31 10:57:49
167
1
原创 单选题样式和保存答案
<div class="choice-answer" :class="'span_'+index+'_'+ind" v-for="p,i of item.queOptions" :key="i" @click="addAnswer(index,ind,i)"> <input type="radio" :name="'an_'+index+'_'+ind" value="i+1" style="display:none"> <span class="rideo
2021-03-10 19:33:03
391
原创 获取/更改富文本中img的src
this.taskData.options[i].queQuestion.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => { console.log(capture) });
2021-03-09 19:08:24
1244
原创 修改input的占位符样式
/* input的占位符样式 */::-webkit-input-placeholder { /* WebKit browsers */color: #bbb;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #bbb;}::-moz-placeholder { /* Mozilla Firefox 19+ */color: #bbb;}:-ms-input-placeholder { /* Internet Explore
2021-02-24 18:39:38
981
原创 路由拦截
进某个页面时需要先登录router/index.jsconst routes = [ { path: '/learn', name: 'Learn', component: Learn, //给该路由增加参数requireAuth,为true才能进入该路由 meta:{ requireAuth:true } },]vuex中 参数islogin，保存登录状态import Vue from 'vue'import Vuex fr
2021-02-24 11:52:39
205
原创 vue中实现 点击自身元素之外其他元素时，关闭自身元素
在点击不想关闭的元素的上加@click.stop事件， 阻止事件冒泡html<div class="user" v-show="popup" @click="close()"> <div class="user-more" @click.stop="closestop()">...</div></div>给外层一个弹出框，宽高百分百，覆盖整个屏幕，点击外层遮罩层的时候，触发close函数，关闭弹窗css/* 外层遮罩层 */.use
2021-02-24 11:27:00
1172
原创 监听事件和删除监听事件
监听事件window.addEventListener('scroll', this.handleScroll, true)移出监听事件 window.removeEventListener('scroll', this.handleScroll, true)
2021-02-24 08:43:33
665
原创 修改video的样式
去掉video中全屏切换的按钮video::-webkit-media-controls-fullscreen-button{ display: none; }
2021-02-23 19:15:39
534
原创 处理时间戳函数---时间戳转换成日期
jsformat(shijianchuo) { var time = new Date(shijianchuo); var y = time.getFullYear(); var m = time.getMonth() + 1; var d = time.getDate(); var h = time.getHours(); var f = time.getMinutes(); var s =
2021-02-23 09:43:41
442
原创 富文本中 符号 的转义函数（解决v-html转换一次不能实现文本显示的问题）
当后台返回文本： <script>"订单"</script><br/> 即使使用v-html，页面显示：<script>订单;</script>我们想要的是页面显示：订单;所以先转义一次，再使用v-htmlmethods:{ html_decode(str){ var s = ""; //console.log(str)
2021-02-23 09:38:01
1114
原创 vue移动端项目打包成app
运行命令 生成dist文件夹 npm run build打开HBuilder 右键 新建 项目复制dist文件夹下的文件替换新建项目里边相同文件打开新建项目manifest.json,设置基础配置 右击项目名-> 发行 -> 原生App云打包若出现错误提示去掉通讯录的勾选重新打包队列中----等待打包完成打包成功—复制链接至手机浏览器下载...
2021-02-22 19:46:49
239
原创 监听设备的纵横方向
//监听事件 window.addEventListener('orientationchange',this.horizontalchange) //设备纵横方向（0,90） alert(window.orientation)
2021-02-22 17:41:58
125
原创 用原生dom增加删除替换class
document.querySelector('.choice-answer .active').classList.replace("active","active-other");
2021-02-21 10:08:22
351
原创 使用this.$nextTick()，Vue 实现响应式不是数据发生变化之后 DOM 立即变化，而是按一定策略进行 DOM 更新。$nextTick 是在下次 DOM 更新循环结束后执行延迟回调，
methods:{ testClick:function(){ let that=this; that.testMsg="修改后的值"; that.$nextTick(function(){ console.log(that.$refs.aa.innerText); //输出：修改后的值 }); } }
2021-02-20 08:53:36
259
原创 DOM原生添加元素
var mselement=document.querySelectorAll(".tea_ms");for(var i=0;i<mselement.length;i++){ var kpersonalDesc=html_decode(result[i].ue_personalDesc) var pelement=document.createElement("p"); pelement.innerHTML=kpersonalDesc; pelement.title=kpersonalDes
2021-02-20 08:52:42
193
原创 文本溢出用省略号
二、限制文本最大行数text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 5; line-height: 20px;max-height: 100px;//一行 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;
2021-02-20 08:50:11
85
原创 文本溢出用省略号显示
1.单行文本溢出用省略号显示：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2.多行文本溢出用省略号显示：display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
2021-02-20 08:49:19
122
原创 V-html中添加的dom元素在js中找不到
使用setTimeout(0), 将任务放在事件队列的最后获取, 而使用this.$nextTick()的话还是获取不到, 原因应该是在下一次DOM更新结束后v-html添加的内容还没挂载到DOM树上
2021-02-20 08:46:40
373
原创 v-html渲染的富文本，无法在样式表中修改样式
vue编译的规范，未在虚拟dom中渲染的元素无法修改样式(1)在updated生命周期函数中，js动态配置样式，代码如下updated() { $('.msgHtmlBox').find('p').css('color', 'blue'); },(2)去掉style标签中的scoped属性scoped属性导致css仅对当前组件生效，而html绑定渲染出的内容可以理解为是 子组件的内容，子组件不会被加上对应的属性，所以不会应用css.(3)写样式的时候添加>>>
2021-02-20 08:45:12
388
原创 nodejs内存溢出
在终端写两个命令npm install -g increase-memory-limitincrease-memory-limit
2021-02-20 08:41:56
243
原创 动画效果
.layui-btn-normal {background-color: rgb(93,180,255);animation-name:test1,test2;animation-duration: 2.5s,2s;animation-iteration-count: infinite,1;animation-timing-function:ease-in-out;}@keyframes test1{45%{background-image: linear-gradient(to botto
2021-02-08 16:03:40
109
原创 子组件修改父组件值
父组件引入子组件import userInfo from '@/components/user/userInfo.vue'注册子组件export default { components: { userInfo, }, data(){ return{ popup:false, } }, methods:{ success(res){ this.popup =res }, },}父组件使用注册完成子组.
2021-02-08 15:56:30
171
原创 好看的渐变色
my-colorbackground-image: linear-gradient(to bottom, rgb(93,180,255) 50%, rgb(177,219,255) 100%);background-image: linear-gradient(to bottom, rgb(9,179,138) 50%, rgb(138,232,201) 100%);.layui-btn-normal {background-color: rgb(93,180,255);animati
2021-02-08 09:02:25
1657
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人