- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue 中使用$refs，报this.$refs.xxx.xxx() is not a function
el-input只能输入数字且整数或者整数和小数
2022-09-20 11:44:42
1437
原创 el-scrollbar滚动条初始化在div底部
setTimeout(()=>{ _this.$refs['t_right_out'].wrap.scrollTop = 100000 console.log(_this.$refs['t_right_out'].wrap.scrollTop ,'999999999999999999')},50)
2022-05-27 16:54:04
1061
原创 div拖动
有个缺点；鼠标移动过快，会导致拖动失灵 var callCenterDiv = document.querySelector('#callCenterDiv') callCenterDiv.onmousedown = function (e) { // 记录鼠标到盒子边缘的距离，这个距离在整个拖拽过程中是固定不变的 var disX = e.offsetX, disY = e.offsetY // 只要鼠标在box上按下了，在整个文档里移动都会触发拖
2022-04-24 17:47:21
501
原创 el-select遍历，选中的选项后要保存的是个对象，并且每一组互不干扰
首先画页面用vue + element-ui可以实现<td width=8% v-for="(Item, Index) in item.weekList" :key="Index"> <div v-else class="staff_item_input"> <el-select clearable v-model="Item.times" value-key="keyValue"> <el-option v-for="(vItem, vI
2022-03-04 16:17:20
1544
原创 不同分辨率下样式不一样解决办法
方法一：针对不同分辨率用户设置不同的css（不推荐）即针对不同的分辨率，开发不同的css样式，在界面加载时，先判断用户屏幕分辨率，在应用相应的css。相比较，这种方法最复杂，而且如果系统面向大众，需要作很多不同的css方法二：根据分辨率的宽度，计算当前屏幕的分辨率宽与设计图宽一个比例值例如设计图宽 1366实际屏幕 1920 （获取屏幕宽度 ：document.body.clientWidth）比例值 1920/1366设计图按钮左margin：20px则：实际按钮左margin： 20
2022-01-25 14:52:28
2192
原创 把对象按照ASCII码排序
function sortASCII(obj){ var arr = new Array(); var num = 0; for (var i in obj) { arr[num] = i; num++; } var sortArr = arr.sort(); var sortObj = {};
2022-01-20 16:13:52
400
原创 给table表格表头添加斜线
HTML代码<td id="lineTd"> <span style="float:left;margin-bottom:-3px;">姓名</span> <span style="float:right;margin-top:-7px;">人数</span></td>CSS代码#lineTd { background: #F6F7FA url(data:image/svg+xml;base64,PHN2ZyB4bWxu
2022-01-13 14:39:17
961
原创 css样式取名
CSS命名规范(规则)常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news
2021-12-28 15:30:34
828
原创 前端时间问题
getdata(){ let sjc = new Date().getTime() let week = new Date().getDay() this.getWeekDate(sjc,week) }, //整周的时间戳 然后转化成yyyy-MM-dd getWeekDate(sjc...
2021-12-27 15:58:38
329
原创 vue 全屏简单方法 方便以后复制黏贴
data：data() { return { fullscreen: false };},js：//全屏fullScreen(){ let element = document.documentElement; if (this.fullscreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) {
2021-11-10 19:56:35
127
原创 Echarts滚动条
Echarts图表数据过长增加滚动条效果，并且可以用鼠标滚轮滚动dataZoom:[//x轴滑动条 { type: 'slider', show: true, xAxisIndex: [0], start: 0, //初始化时，滑动条宽度开始标度 bottom: '7%', end: 45, height: 10, fillerColor:'#3E86FF', borderColor: "transparent", backgroundColor: 'w
2021-11-04 10:59:33
4071
原创 高德地图鼠标经过点标记显示信息窗体
marker.on(“mouseover”, function (e) {console.log(e);infoWindow.open(map, marker.getPosition())});marker.on(“mouseout”, function (e) {console.log(e);infoWindow.close(map, marker.getPosition())});
2021-10-08 09:56:50
931
原创 文本两端对齐
话不多说上代码css样式<style> .main{ width:100%; height: 100%; } .example{ width: 80%; height: 200px; margin: auto; } //方法一：直接用 text-align-last:justify;
2021-08-12 15:45:42
115
原创 vue设置scrollTop不起作用
今天遇到一个小问题vue设置滚动条高度一直为0。解决方法放在下边。在这里一定要加上this.$nextTick()方法，否则document.querySelector(“.article”).scrollTop的值永远为0，不会赋值成功的methods: { gundong() { this.time = '60' //时间 this.article = document.querySelector('.article')//获取dom this.aHeight = this.artic
2021-07-30 15:30:05
1983
1
原创 高德地图加载、标记点、标记点覆盖范围、信息窗体
1、引入js文件<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 2、创建地图html://创建地图容器<div id="container"></div>js://创建地图let map = new AMap.Map("container", { resizeEnable:..
2021-07-29 16:04:52
1119
原创 单、多行文本超出省略号 滚动条隐藏
单行和多行文本超出省略号css样式： /*容器*/ .container { width: 300px; height: 200px; margin: 100px; padding: 20px; border: 1px solid #eee; font-size: 13px; color: #555; } /*单行*/ .single { width: 300px
2021-07-29 14:18:20
296
原创 判断当前浏览器类型的代码
function isBrowser() { var userAgent = navigator.userAgent; //微信内置浏览器 if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') { return "MicroMessenger"; } //QQ内置浏览器 else if(userAgent.match(/QQ/i) == 'QQ') { retur.
2021-07-22 14:57:20
174
原创 css3：animation属性
1 基本使用制作动画分为两步：定义动画 @keyframes 使用(调用)2 @keyframes(关键帧) 定义动画@keyframes animation{ 0%{ ... } 100%{ ... }}0%是动画的开始，100%是动画的完成。这样的规则就是动画序列 在 @keyframes 中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。 请用百分比来规定变化
2021-07-21 14:27:01
382
原创 localStorage
localStorage 的优势1、localStorage 拓展了 cookie 的 4K 限制。 2、localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。localStorage 的局限1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。 2、目前所有的浏览器中都会把localStorag...
2021-07-13 13:59:11
368
原创 vue-router路由传参
一、配置路径export default new Router({ routes: [ { path: '/main', name: 'Main', // 一定要写name,params必须用name来识别路径 component:() => import ('@/views/Main.vue'), children: [ { path: '/home', name: 'home',
2021-06-21 15:53:01
372
原创 阿里云web播放器
一、概念说明playAuth：视频播放的唯一凭证，每个播放凭证都绑定了用户的身份标识，不同用户的播放凭证不能互换，否则无法正常播放视频。另外，播放凭证是有时效性的（默认100秒）。具体参数获取方法查看文档 获取播放凭证。防盗链：通过判断request请求头的refer是否来源于本站的方式来决定视频是否能被播放。（在点播或CDN控制台设置referer）具体设置方法查看防盗链设置。二、使用流程2.1 PlayAuth的播放流程流程：用户App获取上传凭证 -> 服务端下发上传凭证 ->
2021-06-08 17:20:06
3347
1
原创 滚动条样式
以下面div为例<div class="gundong"> 内容</div>首先先给元素设置横向的超出隐藏和纵向方向的滚动.gundong{ overflow-y: scroll; overflow-x: hidden;}css样式主要有三部分组成：::-webkit-scrollbar定义了滚动条整体的样式；::-webkit-scrollbar-thumb滑块部分；::-webkit-scrollbar-tarck轨道部分；.gundong::
2021-06-03 11:53:02
442
原创 如何判断图片是否进入可视区域
用一张图来概括，从图上看我们可以知道当图片距离顶部的距离：top - height = 可视区域的高度+ 滚动区域高度s时说明图片马上就要进入可视区了，就是说当top-height<=s+h时，图片在可视区。网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.o...
2021-05-24 09:04:42
1549
原创 判断一个字符串出现次数最多的字符，统计这个次数并输出？
// 统计每个字母穿线的次数var str = 'addafgeeaaadaavabbbaaaaa';// 创建一个空对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数var obj = {};for (var i = 0; i < str.length; i++) { // 遍历字符串 var chars = str.charAt(i); // chars代表字符串的每一个字符 if (!obj[chars]) { //如.
2021-05-13 08:40:06
309
转载 Vue项目中封装axios 统一管理http请求
1、需求说明在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。2、Vue项目结构在本地创建Vue项目，目录结构如下：- public 静态资源文件- src |- assets 静态资源目录 |- components 公共组件目录 |- http axios封装目录 |- router 路由管理目录...
2021-05-11 21:04:14
315
转载 Vue中使用proxy配置代理解决跨域问题
1、需求说明在前后端分离开发中，前端发送ajax请求因为受到了浏览器同源策略的限制，会出现跨域的问题，在Vue项目中使用代理请求解决跨域问题。如果使用vue/cli 4.x以上版本创建的Vue项目，在项目的根目录中创建 vue.config.js 配置文件。2、代码实现在Vue项目根目录创建 vue.config.js 配置文件，配置代码如下：module.exports = { devServer: { proxy: { '/api': { ...
2021-05-11 20:51:22
1859
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人