elementui中日期组件，日期图标在右边，有删除图标（完整代码）

效果图：

日期组件完整代码：

<template><div class="date-picker"><el-date-pickerv-model="datePicker"type="daterange":clearable="true"range-separator="至"align="right"start-placeholder="开始时间"end-placeholder="结束时间"value-format="yyyy-MM-dd":picker-options="pickerOptions"@input="dateChange"@mouseover.native="setDateIcon"@mouseleave.native="dateVisableIcon='false'"></el-date-picker><i :class="['el-icon-date',dateVisableIcon=='false'?'data_icon':'data_display']"></i></div>
</template><script>
export default {data() {return {datePicker: [],dateVisableIcon:'false',pickerOptions: {disabledDate: (time) => {return time.getTime() > Date.now()},},}},components: {},computed: {},mounted() {},methods: {setDateIcon(){if (this.datePicker == '' || this.datePicker == null) {return false;}this.dateVisableIcon='true';},dateChange(val) {let data={}data.startDate=val?val[0]:nulldata.endDate=val?val[1]:nullthis.$emit('dateChange',data)},},
}
</script>
<style lang='less' scoped>
::v-deep .el-range__icon {display: none;
}
.date-picker {position: relative;width: fit-content;.data_icon {display: block;position: absolute;top: 50%;right: 15px;z-index: 9;color: #c0c4cc;font-size: 14px;transform: translateY(-50%);}.data_display {display: none;}::v-deep .el-range__close-icon {position: absolute;right: 34px;top: 54%;transform: translateY(-50%);}::v-deep .el-range__close-icon {right: 15px;top: 55%;}
}
</style>

父组件使用：

<date-picker ref="datePicker" @dateChange="dateChange"></date-picker>
import datePicker from '@/components/datePicker.vue'
components: {datePicker},

elementui中日期组件，日期图标在右边，有删除图标（完整代码）相关推荐

vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题
elementui中导航组件库多个一个菜单中包含二级菜单第一次点击二级菜单页面跳转但是二级菜单关闭功能解决方法: :default-active="$route.path": ...
element-ui中tree组件双击事件的实现
文章目录前言代码实现总结前言近期,笔者项目中遇到一个需求:实现左侧设备树(基于elment-ui tree组件)双击事件.查看element-ui官网后发现,element-ui中tree组 ...
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法参考文章: (1)解决element-ui中el-m ...
elementUI中loading组件的完美使用
有时候,网页数据请求太慢,在未得到数据的那一会会,时常会让心急的人怀疑是不是代码哪崩了,所以我需要一个东西来缓冲一下我等待的焦虑,在页面加载时添加一个加载动画首先安装element-ui框架 npm ...
对elementui中分页组件进行二次封装
为什么二次封装一般在后台管理项目当中,页面功能涉及到的数据展示的地方会比较多,而其中却少不了表格,分页以及条件检索.如果代码是 copy 来又 copy 去,岂不是很没有技术含量. 而且每个项目的U ...
html怎样做删除的图标,bootstrap如何添加删除图标样式？
bootstrap如何添加删除图标样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们 ...
【Groovy】编译时元编程 ( ASTTransformation#visit 方法中访问 Groovy 类、方法、字段、属性 | 完整代码示例及进行编译时处理的编译过程 )
文章目录一.ASTTransformation#visit 方法中访问 Groovy 类.方法.字段.属性二.完整代码示例及进行编译时处理的编译过程 1.Groovy 脚本 Groovy.groo ...
html图标右上角添加小图标,图片右上角增加删除图标(css布局示例)
[实例简介] [实例截图] [核心代码] 删除图标示例 .img-wrap { position: relative; display: inline-block; border: 1px red s ...
Python3爬取网页中图片（2021-01-04 14:06:02），附上完整代码
Python爬取网页中图片,附上完整代码文章目录 Python爬取网页中图片,附上完整代码概述完整代码概述批量爬取数据,请遵循robots协议及相关网站协议及说明. 本代码仅供有需要爬取网页 ...

elementui中日期组件，日期图标在右边，有删除图标（完整代码）

elementui中日期组件，日期图标在右边，有删除图标（完整代码）相关推荐

最新文章

热门文章