xiecong的博客

1文本省略问题在项目中会遇到一些不需要全部显示的文本信息，比如说控制在两行，超出的文本信息省略，常用于一些标题夹带的介绍信息，比如：直接看代码：.info-content{ width: 140px; height: 38px; position: absolute; top: 30px; left: 8px; font-size: 14px; // white-space:nowrap; //强制在一行 display: -webkit-box; //将对象作为弹

背景交代我们拿到的后台的推送时间的数据是这样的：但是我们需要在页面中显示比如1分钟前，1小时前类似这种效果，第一反应是自己写函数，获取当前时间戳，再把推送时间转换为时间戳，然后相减，取模相除然后去规定区间，然而这样的方法比较麻烦。请教了导师之后，给dayjs或者moment.js两款插件，其实两款差不多，我选择用dayjs，需要的功能已经帮你封装好了，资源和教程在npm中搜就能得到：dayjs资源按照教程安装好之后，我们需要导入dayjs// dayjs插件import dayjs from '

背景交代后台数据：DOM结构：这里我们利用filter来把标签替换掉，首先介绍一下filter的用法，在插值表达式中可以利用 {{item.newsTitle |filterHtmlTag}}filterHtmlTag就是我们要写在filters中的替换标签函数filters与data同级：filters: { filterHtmlTag(t) { if (!t) return ''; return t.toString().replace(/<.*

一、需要的效果UI提供的背景图二、思路首先我们的DOM结构是这样的：因为接受后台给的数据，所以用v-for动态的去生成DOM节点。通过判断columnId的值来选择对应的图标样式思路就是给div绑定一个动态样式class，分别计算好每个图标的偏移量，写好对应图标的样式，所有图标共用一个公共样式。样式如下：/小图标样式//公共样式.icon-type{ display: inline-block; width: 20px; height: 20px; // margin

一、swiper初始化目前最新版本是swiper7，每个版本的使用方法都略有不同，具体可看官网使用教程swiper使用办法，一般通过npm安装 npm install -S swiper同时需要注意的是vue3和vue2的引入方法以及初始化swiper实例的区别，官网现在给出的是vue3的示例，代码如下：<template> <swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper

支持自动转换的移动端尺寸适配方案

首先是项目创建Eslint的选择项目创建时会让你选择Eslint的模式有三种，我选择的是A

学习目标：掌握whistle调试运行在手机端的H5页面学习内容：1、 实现查看页面的console信息2、 实现查看页面的真实dom节点3、 实现让接口异常，如：返回500，伪造接口信息学习时间：1、 2021.12.21学习产出：1.CSDN 技术博客 1篇正文内容：一.首先需要知道如何在pc端获取手机端的H5页面博主的手机为华为mate20pro，为安卓系统，所以只展示安卓如何获取H5页面。ios系统也是类似的操作。具体步骤如下：1.打开手机的开发者模式：如果是第一次打开开

whistle