Jerry的博客

效果图写在前面写后台管理经常从列表点击查看详情，展示数据信息，Element UI虽然有表格组件，但是描述组件并没有，之前团队的成员遇到这种情况都自己去写样式，写起来也麻烦，而且每个人写出来的样式也不统一，破坏了项目的整体风格。像是Ant Design UI就有描述组件，用起来特别舒服，所以索性自己结合Element UI的el-row和el-col自己写了一个。实现哪些功能1、每行的高度根据改行中某一列的最大高度自动撑开2、列宽度自动补全，避免最后一列出现残缺的情况3、支持纯文本与HTML

效果图效果图如下，支持标记日期、点击日期、切换月份，复制即用，本示例为PC端，移动端请自行修改样式哦~一、Calendar组件代码，预处理器使用SCSS<template> <section class='m-calendar' :style="dateStyle"> <!-- 切换月份 --> <header class='changeMonth'> <span class='prepMonth' @click=

写在前面有时候页面上需要一个类似于微信中发送消息的输入框，即可以实现：默认只有一行文字高度，用户输入超过自动换行，用户也可以点击Enter键盘换行，当输入的内容清空后，输入框又恢复成一行的高度，原生的输入框input和文本框textarea无法实现以上功能，所以就自己写了一个，采用HTML5的contenteditable属性，可以完美实现：1、自动换行及手动换行；2、双向绑定；3、类似于...

写在前面因项目中需要用到树形控件，第三方的组件也不满足项目的使用需求，就自己造了一个车轮子，用Vue递归组件的方式实现，代码简单易懂，直接复制即可使用。效果图子组件代码<template> <ul v-if="data.length"> <li v-for="(item, i) in data" :key="i" @click.stop="sel...

写在前面表单中经常会用到选择框的组件，HTML自带的样式太丑了，第三方的组件也不满足自己的使用需求，而且样式也不好看，于是自己就撸了一个，代码很简单，可以实现单选和多选，且选择后不用再选择的数据对数据进行处理。我写的这个组件是按钮的样式，如果需要图标+文字的哪种，自行更改样式即可。效果图选择子组件代码<template> <div class="selectBtn...

写在前面组件还是自己写来的好，网上的一些评分组件都太过复杂，自己写的代码很精简，就能达到想要的功能，可以点击也可以禁止点击，可以展示全星、灰星、半星！效果图组件代码<template> <div class="star"> // 用于父子组件双向绑定 <input type="hidden" v-model="value"> ...

写在前面页面中会有很多时候需要弹窗提示，我们可以写一个弹窗组件，但是如果每个页面都引入这个组件，太麻烦了，所以我们将它变成全局组件，需要用的时候直接通过JS调用即可，不需要在每个页面引入了效果图弹窗组件新建一个弹窗的组件——popup.vue<template> <transition name='fade'> <!-- 蒙版 --> ...

写在前面搜罗全网，终于找到一个好用的Vue滑动组件，包括上拉加载，下拉刷新等一大堆好用的方法，他就是mescroll组件，由于很多个页面都需要用到mescroll组件，所以自己把他封装成了一个组件，方便自己使用mescroll组件<template> <div class="mescroll-wrap"> <mescroll ref="mescrol...

Vue精简代码实现文字首尾无缝跑马灯效果写在前面效果图子组件代码父组件代码写在前面由于HTML自带的marquee标签无法做到上一条文本和下一条文本无缝衔接，所以结合网上的资源自己写了一个，代码不多，仅能横向滚动，可滚动重复滚动一条或多条文本，字数不限制，若想要实现纵向滚动可使用vux组件库的marquee组件。效果图gif图展示出来看起来很卡，实际不卡子组件代码<templa...