zhengvipin的博客

一个VueUI组件库的编写、打包与发布的简单示例。

背景我们都知道，element ui官网提供了一个上下折叠展开动画，在实现可伸缩的查询面板等业务中非常实用。美中不足的是，不支持配置左右过渡动画。而实际开发中，左右过渡动画的场景还比较多，比如左树右表（左树可收缩）等。在此，笔者参考el-collapse-transition实现，做了个简单的左右过渡动画组件。演示效果核心代码beforeEnter(el) { addClass(el, 'drawer-transition') if (!el.dat...

由于家里变故和公司变动，近一年多没更新过博客了。近期稍有空暇，在此与有需要的朋友分享一个，基于Vue+ElementUI的地区三级联动组件。先上效果图上核心代码MbDistrictPicker.vue<template> <div class="mb-district-picker"> <el-select v-model="currentProvince" placeholder="省" v...

elementUI中的Tooltip组件是用于展示鼠标 hover 时的提示信息，类似于原生html的title属性。我们实际开发中一般还会在此基础上提几个需求：（1）.自定义显示文本行数 （2）.文本超出行数，以省略号代替，并在鼠标 hover 出现提示信息 (3).文本过长时省略后，提供相应的快捷复制功能。基于这些原因，在此对elementUI之Tooltip组件进行了简单定制化。........................

    点击缩略图放大，查看原比例高清大图，是我们做完图片上传功能后经常需要遇到面对的问题，比如图片预览。虽然这个问题zoom.js这个现成插件可以帮我们解决，美中不足的是，zoom.js放大后的图片会受原img本身外层高宽限制，恰恰我们做缩略图往往会限制外层宽高以便多图呈现，并希望放大后的图片不受原img影响，基于这个问题，下面借助layer.js简单封装了一个Vue图片缩放组件。目录1...

目录 1.demo页面2.组件核心：JS/CSS3.demo演示1.demo页面kt-select-tree-demo.html&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta content="wi

1.效果图2.kt-contextmenu.jsfunction createMenu(wrapperId, menuList) { if (!wrapperId || !menuList) { confirm("请确保入参wrapperId,menuList都存在！"); } if (!Array.isArray(menuList)) { ...

最近项目遇到一个问题，需要在个别出现较高垂直滚动条的页面，加入一个返回顶部的小功能。虽然利用许多Jquery插件可以实现，但是elementUI的官网本身就有一个goTop组件（奈何该组件没有开放），效果还不错，为了页面风格的一致性，准备对该组件进行了简单模拟，恰好优快云已有一位前辈对此进行了封装（vue+element-ui 回到顶部组件），而且封装的相对完善，在此对其根据个人需求进...