📒背景 最近项目中需要制作一个拖拽弹窗的交互（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。 🔍需求功能 1.点击打开，控制弹窗标题名称； 2.拖拽在浏览器范围内移动； 3.点击×可关闭； 👣设计开发 先说一下我的开发环境版本： node:v11.3.0 npm:6.4.1 vue：2.5.11 如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来 首先是弹框，用html+css画出来，vue中控制显示隐藏v-show或v-if: <divv-if="visible"class="my_dialog"id="dialogbig"&g...

📒背景 最近项目中需要制作一个搜索高亮的组件（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。 🔍需求功能 我们需要一个输入框，比如用来搜索网站的所有菜单，这个时候搜索结果高亮显示。 1.搜索关键词筛选； 2.关键词键入筛选； 3.关键词列表高亮； 👣设计开发 先说一下我的开发环境版本： node:v11.3.0 npm:6.4.1 vue：2.5.11 如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来 1.先做html排版，简单的用position相对定位来做哈： <divclass='popcover'> <inpu...

📒背景 最近项目中需要制作一个双击编辑单击选中可删除Tag标签（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。 🔍需求功能 1.element-ui组件只能删除，不能选中和直接编辑； 2.双击可编辑； 3.单击选中，颜色变化； 4.有删除按钮； 👣设计开发 先说一下我的开发环境版本： node:v11.3.0 npm:6.4.1 vue：2.5.11 如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来 1.先写静态样式html: <divclass='zTag'@click="checked"@dblclick.stop="edit...

📒背景 最近项目中需要制作一个下拉滚动分页的功能（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。 🔍需求功能 1.数据量大了就页面渲染缓慢从而卡顿严重，为了解决这个问题，对element-ui进行了改造，el-select改为分页滚动加载。 2.数据量大时下拉可以分页滚动加载，而且可以支持原来的搜索。 👣设计开发 先说一下我的开发环境版本： node:v11.3.0 npm:6.4.1 vue：2.5.11 如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来 1.先写html页面： <divclass="selectBox"v-cl...

📒背景 最近项目中需要制作一个和window系统文件夹很像的组件（如下图展示），今天分享一下这个组件功能。希望能抛砖引玉，给大家带来启发。 🔍需求功能 1.文件夹目录形式展示，类似windows系统的文件夹； 2.文件夹名校验文件夹名称，不允许特殊符合； 3.文件夹名称字数不超过225个字符； 👣设计开发 先说一下我的开发环境版本： node:v11.3.0 npm:6.4.1 vue：2.5.11 如果不是以上版本也没关系，今日分享的思路，相信你可以自己造出来 1.基于vue2和element-ui开的的联合el-input和el-tooltip组件的复合组件： <e...