vue 做一个文本展示 点击文本弹出element ui的时间选择器 但不会出现element ui时间组件的那个输入框

我们先来创建一个vue2项目
引入element ui
然后 找到一个组件 这样写

<template>
  <div>
      <el-date-picker
          v-model="value"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator=""
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="pickerTime"
          ref = "datePicker"
      >
      </el-date-picker>
  </div>
</template>
<script>

export default {
  data() {
    return {
      value: ""
    };
  },
  components: {
    
  },
  methods: {
      
  }
};
</script>

这样 我们就写出了一个基本的element ui时间选择组件
但这显然不是我们要的效果
在这里插入图片描述
这里我们给时间控件了一个class pickerTime
用它来控制样式
我们css部分代码这样写一下

<style scoped>
.pickerTime{
    opacity: 0;
    position: absolute;
    left: 30px;
    top: 30px;
    width: 120px;
    height: 16px;
}
</style>

这样 我们的组件就看不到了 先别急
在这里插入图片描述
然后 我们改写组件代码如下

<template>
  <div>
      <el-date-picker
          v-model="value"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator=""
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="pickerTime"
          ref = "datePicker"
      >
      </el-date-picker>
      <el-button
          type = "text"
          @click = "selectionRange"
      >{{ value?value:'选择时间范围' }}</el-button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
      selectionRange(){
          this.$refs.datePicker.focus();
      },
  }
};
</script>
<style scoped>
.pickerTime{
    opacity: 0;
    position: absolute;
    left: 30px;
    top: 30px;
    width: 120px;
    height: 16px;
}
</style>

然后 我们再次将项目跑起来
点击按钮 下面的时间选择器就会出来
在这里插入图片描述
然后 我们选择一下
在这里插入图片描述
因为我们这里用了三元运算符
这个时间选择器绑定的是data中的value 而我们按钮上写的是
value?value:‘选择时间范围’
意思是 如果value有值 就展示value 如果没有 才展示 选择时间范围

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/17946.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C/C++的命名空间和调用函数的详细讲解

目录 空函数 调用函数 调用 执行流程 命名空间 在创建函数时&#xff0c;必须编写其定义。所有函数定义包括以下组成部分&#xff1a; 名称&#xff1a;每个函数都必须有一个名称。通常&#xff0c;适用于变量名称的规则同样也适用于函数名称。形参列表&#xff1a;调用函…

手机摄影笔记(二)

第5章 镜头语言 镜头语言分类&#xff08;8个&#xff09;&#xff1a; 推&#xff1a;从远到近 拉&#xff1a;从近到远 摇&#xff1a;机位固定&#xff0c;旋转手机拍全景或者跟着拍摄对象进行摇摄&#xff08;跟摇&#xff09;.通常用此方式来介绍环境时&#xff0c;表现的…

开放原子训练营(第三季)inBuilder低代码开发实验室---报销单录入系统

作为一名低代码初学者&#xff0c;我使用inBuilder系统设计了一款报销单录入系统&#xff0c;实现了报销单录入与显示报销单列表的功能&#xff08;如图1与图2所示&#xff09;&#xff0c;并获得了很多开发心得。从inBuilder系统的优点、缺点以及开发过程三方面出发&#xff0…

基于SpringBoot,vue的家政服务平台的设计与实现

背景 以往的家政服务管理平台的管理&#xff0c;一般都是纸质文件来管理家政服务信息&#xff0c;传统的管理方式已经无法满足现代人们的需求&#xff1b;使用家政服务管理平台, 首先可以大幅提高家政服务信息检索&#xff0c;只需输入家政服务相关信息就能在数秒内反馈想要的…

JavaScript学习(一)

一、JavaScript的背景及知识结构 1、三个问题 什么是JavaScript&#xff1f;JavaScript能干什么&#xff1f;JavaScript是由什么构成的&#xff1f;怎样学习JavaScript&#xff1f; 2、什么是JavaScript&#xff1f; ①JavaScript是一种轻量级的编程语言&#xff1b;借鉴了J…

【SSA-LSTM】基于麻雀算法优化LSTM 模型预测研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

C#_Struct与Class的差异

简述 struct属于值类型&#xff0c;class属于引用类型 存储地址 struct储存于栈&#xff0c;class储存于堆&#xff08;class于栈中储存引用&#xff09; 传参性质 struct属于值传递&#xff0c;在函数内对参数进行修改&#xff0c;不会修改struct class处于引用传递&…

行为型模式-状态模式

状态模式 概述 【例】通过按钮来控制一个电梯的状态&#xff0c;一个电梯有开门状态&#xff0c;关门状态&#xff0c;停止状态&#xff0c;运行状态。每一种状态改变&#xff0c;都有可能要根据其他状态来更新处理。例如&#xff0c;如果电梯门现在处于运行时状态&#xff0…

MySQL

关系型数据库 数据结构&#xff1a;二维表格 库 -> 表 -> 列&#xff08;字段&#xff09;&#xff1a;用来描述对象的一个属性 -> 行&#xff08;记录&#xff09;&#xff1a;用来描述一个对象的信息 市面上&#xff1a;MySQL 、Mariadb 、PostgreSQL 、 Oracle&a…

汽车电路图、原理框图、线束图、元器件布置图的识读技巧与要点

摘要&#xff1a; 想要读懂汽车电路图就必须把电的通路理清楚&#xff0c;即某条线是什么信号&#xff0c;该信号是输入信号、输出信号还是控制信号以及信号起什么作用&#xff0c;在什么条件下有信号&#xff0c;从哪里来&#xff0c;到哪里去。 一、汽车电路图的识读技巧 1.…

在 Python 中将 Tqdm 与 Asyncio 结合使用

动动发财的小手&#xff0c;点个赞吧&#xff01; 简介 困扰 在 Python 中使用并发编程来提高效率对于数据科学家来说并不罕见。在后台观察各种子进程或并发线程以保持我的计算或 IO 绑定任务的顺序总是令人满意的。 但是还有一点困扰我的是&#xff0c;当我在后台并发处理成百…

PBDB Data Service:Thumbnail images of lifeforms(生命形式的缩略图)

Thumbnail images of lifeforms&#xff08;生命形式的缩略图&#xff09; 描述用法参数方法响应值格式术语表 描述 此操作返回表示指定分类的图像&#xff0c;或关于图像的信息。如果后缀是 .png&#xff0c;则返回图像内容数据。否则&#xff0c;将以指定的格式返回一个描述…

9:00进去,9:05就出来了,这问的也太···

从外包出来&#xff0c;没想到死在另一家厂子了。 自从加入这家公司&#xff0c;每天都在加班&#xff0c;钱倒是给的不少&#xff0c;所以也就忍了。没想到8月一纸通知&#xff0c;所有人不许加班&#xff0c;薪资直降30%&#xff0c;顿时有吃不起饭的赶脚。 好在有个兄弟内推…

【Halcon】新建程序 读取图片 路径设置

文章目录 1 新建程序2 读取一张图片3 图片路径4 图片格式读取报错5 快速添加 绝对路径1 新建程序 点击新程序图标,即可新建; 程序另存为,会弹出保存路径 2 读取一张图片 read_image(Image,fabrik)

软件测试工程师的核心竞争力究竟是什么?

对于测试员而言&#xff0c;了解自己岗位的核心竞争力是非常重要的。在职业初期&#xff0c;许多人认为掌握代码才是软件测试的核心竞争力&#xff0c;但是随着经验的增加&#xff0c;我们会发现真正的核心竞争力是由多个方面组成的。 首先&#xff0c;测试人员需要具备良好的测…

Windows环境安装Elasticsearch和Kibana

文章目录 1 Elasticsearch1.1 下载1.2 解压并添加环境变量1.3 访问1.4 cmd命令1.5 中文分词器1.5.1 下载1.5.2 安装1.5.2.1 命令安装1.5.2.2 手动安装1.5.2.3 验证分词 1.6 使用curl批量导入 2 安装 kibana2.1 下载kibana2.2 中文界面2.3 操作索引2.3.1 增加索引2.3.1.1 单条新…

Apache Doris学习记录

1. Doris基础学习 中文官网:https://doris.apache.org/zh-CN/docs/dev/summary/basic-summary/ 1.1 doris 简介 Apache Doris 是一个现代化的 MPP(Massively Parallel Processing&#xff0c;即大规模并行处理) 分析型数据库产品 亚秒级响应时间即可获得查询结果 可以支持 10PB…

紧急下架,AI以假乱真学明星唱歌;哈佛法学院专家谈AI和版权法

几周前&#xff0c;一首据称由 Drake 和 The Weeknd 创作的新歌登陆 TikTok 和 Spotify&#xff0c;并迅速在互联网上像野火一样传播开来。“我袖子上的心”在嘻哈乐迷中获得了好评如潮和高度兴奋&#xff0c;这不仅是因为该曲目具有感染力的歌词和旋律&#xff0c;而且还因为对…

jieba分词(1):入门案例

1 场景介绍 大数据量的查询问题 假设我们要从商品的表里面查询一个商品 我们的数据库里面肯定有个t_goods的表&#xff0c;我们现在利用商品的名称做模糊查询 1.1 对于数据库的查询的 select * from t_goods where goodsName like “%手机%” ; 问题&#xff1a; 这个查询…

开关电源基础01:电源变换器基础(2)

说在开头&#xff1a;关于德布罗意的电子波&#xff08;3&#xff09; 1923年&#xff0c;德布罗意在求出他的相波之前&#xff0c;康普顿刚好用光子说解释了康普顿效应&#xff08;记性好的胖友们应该还记得&#xff1a;散射波的波长变长问题&#xff09;&#xff0c;从而带领…
最新文章