口袋的天空的博客

官网地址：https://www.npmjs.com/package/vuedraggableDraggable为基于Sortable.js的vue组件，用以实现拖拽功能。一.安装npm i -S vuedraggable或者引入：二.使用1.场景：单个列表内部简单的拖拽（不克隆）<template> <div class="twoPage"> <draggable :list="list" :disabled="!enabled

像下面这样，表单前面必填校验，再在label前面添加Icon 提示悬浮文字。如何实现呢？如下：el-form-item标签上的label标签写在span的slot上 <el-col :span="12" v-if="addMenuForm.type == '0' || addMenuForm.type == '1'"> <el-form-item prop="url"> //标签

1.弹出软键盘默认有个readonly。但这个组件在blur的时候又把readonly加回去了，因此在blur的时候你还得把readonly去了，怎么去呢？又没那么简单了，经过我查select组件的源码，发现blur的时候有50毫秒的延迟用户体验优化，因此你的去除操作也得是个异步操作，才能消除readonly，源码如下：readonly属性是给基础单选el-select用的，所以不能全局去掉这个属性。最终解决方案如下，只要在公共文件夹里写上这段代码即可Array.from(document.get

elementUI轮播(Carousel)自适应需求：图片要求宽度100%，高度不能限制死，要求高度自适应。但这边的问题就是Carousel的高度默认是300px，图片能随着宽度的改变而改变，但Carousel无法改变。<template> <div class="three"> <el-carousel arrow="always" :height="bannerHeight+'px'"> <el-carousel-item v

elementui的upload必传检验el-upload在rules里面绑定的不是fileList，而是ref的值<template> <div class="box"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini"> <el-form-item label="数

elementui固定表格头部el-table的高度超出页面，头部固定，下面滚动，设置height=“calc(‘100% - 48px’)”<template> <div class="box"> <div class="searchBox"> </div> <div class="gap"></div> <div class="tableBox"> <el-ta

elementui的tree默认高亮显示无效的问题必须要的属性：1, 设置node-key 属性2, 使用nextTick3, 设置 highlight-current 属性4, this.$refs.xxx.setCurrentKey(‘id名称’)示例：<template> <div class="onlineText"> <el-tree :data="data" :props="defaultProps" @node-click="handle

elemenui中使用伪元素这里做的是点击图片，图片出现边框选中的样式，左上角的三角形和勾号是用为元素做的。需要注意的是：1.不要在img标签上加伪元素，我当时就是加了伪元素不显示，然后就在外面加了个div包裹，然后把伪元素加在外面一层的div上；2.如果用elementui上的icon图标的话，font-family:element-icons!important;这是重点。代码：<template> <div class="onlineText"> &l

vue中改变滚动条的样式element-ui的滚动条组件 el-scrollbar1.比如说下面的这个样式html部分：<div style="margin:30px;"> <ul style="width:500px;height:50px;overflow:auto;white-space:nowrap"> <li v-for="(item,index) in list" :key="index" style="width:20px;height:

登录界面记住密码的功能这里是用localStorage来实现功能的，第一次登陆的时候记住用户名和密码还有当前的时间戳，然后下一次登录的时候就把此时的时间戳和上一次的相减。把这个差值和时间段的毫秒进行比较。代码如下：html：<div style="width:500px;height:500px"> <el-form label-width="80px" :model="ruleForm"> <el-form-item label="账号"&

如何用递归写element-ui的导航菜单1.准备数据：在main.vue组件准备好数据data(){ return{ isCollapse: false, menuList:{ "code": 200, "message": "操作成功", "data": [ { "createdBy": null, "createdDate": null, "update

如何修改Svg的颜色有两种方法：1.如果svg已经下载好了，那怎样弄才能修改颜色呢？去掉这两部分2.如果这样嫌麻烦，而且svg还没下载，那怎样避免修改呢？1）选中一个图标，加入购物车2）添加至项目3）“批量操作” ->“批量去色”就可以啦...

用vue的elementui侧边栏写二级和三级路由有一种情况路由下的路径和名称是后端返回，前端可配置的像这样： menuList:[ { "createdBy": null, "createdDate": null, "updatedBy": null, "updatedDate": null, "id": "1", "name": "首页",