携手天下

多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。 组件可以通过npm安装使用，需要的同学可以尝试一下： 组件地址：https://github.com/Lushenggang/vue-overflow-ellipsis 在线体验：https://wintc.top/laboratory/#/ellipsis...

ElementUI表格el-table表头固定自适应高度终极解决方案：https://wintc.top/article/54

本文发布于我的个人网站：http://wintc.top/article/29，转载请注明。使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方...

http://wintc.top/article/18

介绍websocket可以在用户的浏览器和服务器之间打开交互式通信会话,使用websocket可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。本文通过构建一个简易的websocket聊天室，简单介绍如何使用websocket在服务端和浏览器端进行通信。首先介绍一下前端websocket一些基本接口。Websocket API实例化let socket...

一、问题描述这个问题几个月前就曾困扰我，但是因为这个问题的出现看似“很偶然”,所以当时不了了之了。项目开发的时候，测试同事反馈页面会出现“喔唷 崩溃了”，打开控制台进行相同操作后发现控制台会频繁出现一个警告：Forced reflow while executing JavaScript took <N>ms二、问题排查以前也看到过类似警告，不过没有重视。警告内容很明显...

一、前言前两天项目遇到一个需要给页面添加大纲导航的功能，要求把页面中的特定标签加入到大纲导航中。类似这样：需求本身并不难，不过想把这个东西做得通用一些，也就是以后再有别的页面需要加导航，不用再重新写很复杂的逻辑了。下面说一下具体实现思路，并且文末会给出简便易用的导航生成工具。二、实现思路1、需求分析做之前想到之前接触过的markdown编辑器mavon-editor有一个导航，不过那个...

       因为项目中使用比较多树形组件的原因，尝试使用过iview以及element-ui的树组件，两个组件库都非常优秀，但是在用它们的树组件来实现需求时都不甚满意。主要体现在样式的难于控制、以及操作的便捷性上。在阅读element-ui的代码后，结合自己的需求自己写了一个树组件，代码在github上开源，并且发布到了npm上(目前已发布了1.0稳定版本，将会持续维护)。你可以通过npm或者y...

　　在实现一个项目需求的时候，需要监听到某个div元素的宽高变化，第一时间想到的是resize事件，但是很不幸运的是，resize事件只能加在window对象上，并不能监听具体某个DOM元素。　　多方查阅之后，了解到MutationObserver，这是一个可以用来监听整个DOM中任何变化的东西，可以把它理解为一个类，实例化之后调用类实例的几个简单接口即可完成监听，以下具体介绍。一、Mut...

  使用Vue开发项目时通常是前后端分离的，这样就前后端各有一个地址，用户访问的是前端的地址，即前端路由，前端再向后端地址请求页面数据然后渲染页面。   本文简单介绍通过Apache2部署前端项目到服务器，以及如何将本地项目自动推送到远程服务。   我的服务器系统版本 ubuntu16.04，如果你的也是ubuntu应该差别就不大。这里我用的服务器是国外的Vultr云服务器 ，平时就随便玩玩(...

树形结构是一种常用的数据结构，使用Vue怎么来渲染呢？要把树结构的每一个节点都渲染成dom，需要对树结构进行递归遍历。Vue组件可以通过name选项的设置来递归的调用自己，因此渲染起来很方便。 本文简单实现了一下树结构的基本增删改等操作，后续还会继续对树结构渲染(比如拖拽操作、大数据量渲染效率等)进行探索。代码比较简单，MyTree组件：<te...

Vue支持我们自己开发一些使用方法类似内置指令（如v-show、v-for等）的自定义指令，通常用在一些对底层DOM操作的地方。本文简单介绍一下自定义指令的基本用法，并实现一个指令v-drag实现悬浮框拖动功能。一、基本用法1）注册    类似组件，指令的注册也可分为全局注册与局部注册。顾名思义，全局注册即在项目下所有Vue组件中都可使用，局部注册则只能在当前Vue组件中使用。自定义组...

        想在页面上实现拖动两个元素分界位置可以改变元素的大小，基本思路是：在两个元素之间增加一个分界元素，监听该元素的mousedown事件，事件触发时立刻设置监听页面mousemove事件以及mouseup事件，mousemove事件处理元素大小修改，mouseup事件触发时应该移除页面mousemove事件。其中主要是mousemove事件，其实就是计算鼠标在拖动过程中，鼠标相对屏幕的...

在做项目时开发了两个插件，一个是透明提示框、另一个是长时间不操作自动返回首页的插件，在这里分享一下。        一、网页透明提示框插件1.效果（支持同时弹出多个提示）2.代码以及使用方法代码：Alert.vue + notify.js使用方法：    将两个代码文件放到文件夹notify之下，    在mian.js中加入以下代码：import notify from './notify/no...

目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了倍受推荐的pdf.js插件来实现（文末附Demo）。 pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（...

第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了&lt;keep-alive&gt;：&lt;template&gt; &lt;div id="app"&gt; &lt;keep-alive&gt; &lt;router-view&gt;&lt;/..

今天在使用vue init webpack xxx　创建前端项目时，出现如下报错：vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:41379为什么我们下载官方模板竟然试图...

vue+webpack 前端开发中，有时运行npm run dev不能自动热更新，查了一下，终于解决了，主要原因还是对webpack不了解。问题描述：1.npm run dev后，修改项目文件后, 没有自动更新编译，需要手动再执行npm run dev。2.自动打开的浏览器内容不会自动更新。问题解决：1.config/index.js  修改dev中poll选项值为true（或时间）。2.buil...