element plus 日期组件中英文切换

news2024/11/18 1:31:47

现在的项目需要做中英文切换功能,我发现element plus 只有日期组件不能转换,然后上网查了一下并结合自己的方法写了出来。
代码:

<template>
  <!-- 日期框组件 -->
  <div class="time-box">
  //:locale="locale"绑定locale属性
    <el-config-provider :locale="locale">
    <el-date-picker 
      type="daterange"
      range-separator="~"
      :start-placeholder="$t('leftMenubar.leftMenubarStartdate')"
      :end-placeholder="$t('leftMenubar.leftMenubarEnddate')"
      style="width: 260px"
      v-model="timevalue"
      @change="Datachange"
      popper-class="popperClass"
      value-format="YYYY-MM-DD"
    >
    </el-date-picker>
  </el-config-provider>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
//引入中文和英文
import zhLocale from 'element-plus/es/locale/lang/zh-cn'
import enLocale from 'element-plus/es/locale/lang/en'
// 日期
const timevalue = ref(null);
//这是关键代码,我是将中英文切换字段存储在本地
const locale=ref(localStorage.getItem('lang')=='zh'?zhLocale:enLocale) ;

</script>


在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式UI开发-lvgl+wsl2+vscode系列:5、事件(Events)

一、前言 这节进行事件的总结&#xff0c;通过事件回调方式将用户和ui的交互行为绑定组合起来。 二、事件示例 1、示例1&#xff08;点击事件&#xff09; #include "../lv_examples.h" #if LV_BUILD_EXAMPLES && LV_USE_SWITCHstatic void event_cb(lv_…

解锁机器学习算法面试挑战课程

在这个课程中&#xff0c;我们将从基础知识出发&#xff0c;系统学习机器学习与算法的核心概念和实践技巧。通过大量案例分析和LeetCode算法题解&#xff0c;帮助您深入理解各种面试问题&#xff0c;并掌握解题技巧和面试技巧。无论是百面挑战还是LeetCode算法题&#xff0c;都…

华为智能驾驶方案剖析

华为ADS智驾方案始终坚持激光雷达毫米波雷达摄像头的多传感器融合路线&#xff0c;行业降本压力下硬件配置从超配逐步转向贴合实际需求&#xff0c;带动整体硬件成本下降。 1)单车传感器数量呈现下降趋势&#xff0c;包括激光雷达从3个减配至1个、毫米波雷达从6R减配至3R、摄像…

firewalld防火墙概念(形态、分类、区域)相关综合示例

目录 防火墙 概念 形态 内核态&#xff1a;netfilter 用户态&#xff1a;iptables、firewalld 防火墙分类 firewalld网络区域 区域划分 使用图形化界面配置防火墙 端口配置 协议配置 源端口配置 永久配置恢复默认防火墙规则 配置防火墙相关命令 示例 实验环境 …

谷粒商城篇章10 -- P262-P291/P295-P310 -- 订单服务(支付)【分布式高级篇七】

目录 1 页面环境搭建 1.1 静态资源上传到nginx 1.2 SwitchHosts增加配置 1.3 网关配置 1.4 订单模块基础配置 1.4.1 引入 thymeleaf 依赖 1.4.2 application.yml配置 1.4.3 bootstrap.properties配置 1.4.4 开启nacos注册发现和远程调用 1.5 修改各个页面的静态资源路…

Hadoop权威指南-读书笔记-01-初识Hadoop

Hadoop权威指南-读书笔记 记录一下读这本书的时候觉得有意思或者重要的点~ 第一章—初识Hadoop Tips&#xff1a; 这个引例很有哲理嘻嘻&#x1f604;&#xff0c;道出了分布式的灵魂。 1.1 数据&#xff01;数据&#xff01; 这一小节主要介绍了进入大数据时代&#xff0c;面…

使用简鹿音频格式转换器轻松将MP3转换为WAV音频

在音频处理领域&#xff0c;不同的格式有其特定的应用场景。有时&#xff0c;我们可能需要将MP3格式的音频转换为WAV格式&#xff0c;以满足特定的播放或编辑需求。简鹿音频格式转换器就是一款能够帮助我们轻松实现这一转换目标的工具。 为什么选择 WAV 格式&#xff1f; WAV …

CentOS中使用SSH远程登录

CentOS中使用SSH远程登录 准备工作SSH概述SSH服务的安装与启动建立SSH连接SSH配置文件修改SSH默认端口SSH文件传输 准备工作 两台安装CentOS系统的虚拟机 客户机&#xff08;192.168.239.128&#xff09; 服务器&#xff08;192.168.239.129&#xff09; SSH概述 Secure S…

【RabbitMQ实战】Springboot 整合RabbitMQ组件,多种编码示例,带你实践 看完这一篇就够了

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、对RabbitMQ管理界面深入了解1、在这个界面里面我们可以做些什么&#xff1f; 二、编码练习&#xff08;1&#xff09;使用direct exchange(直连型交换机)&a…

【深圳大学算法设计与分析】 实验六 最大流应用问题 FF -> EK -> Dinic

目录 一、实验目的&#xff1a; 二、内容&#xff1a;棒球赛问题 三、实验要求 四、提交要求 ———————— 问题分析解释&#xff1a; ———————— 算法简解&#xff1a; Ford–Fulkerson 增广 Edmonds–Karp 算法 Dinic算法 Dinic和EK的区别&#xff1a; …

DDPM(Denoising Diffusion Probabilistic Models)

DDPM&#xff08;Denoising Diffusion Probabilistic Models&#xff09; 笔记来源&#xff1a; 1.Denoising Diffusion Probabilistic Models 2.大白话AI | 图像生成模型DDPM | 扩散模型 | 生成模型 | 概率扩散去噪生成模型 3.pytorch-stable-diffusion 扩散模型正向过程&am…

Kafka-服务端-网络层-源码流程

整体架构如下所示&#xff1a; responseQueue不在RequestChannel中&#xff0c;在Processor中&#xff0c;每个Processor内部有一个responseQueue 客户端发送的请求被Acceptor转发给Processor处理处理器将请求放到RequestChannel的requestQueue中KafkaRequestHandler取出reque…

易校网校园综合跑腿小程序源码修复运营版

简介&#xff1a; 易校网校园综合跑腿小程序源码修复运营版&#xff0c;带服务端客户端前端文档说明。 源码安装方法&#xff1a; 需要准备小程序服务号 服务器 备案域名 校园网跑腿小程序源码需要准备 1.小程序 2.服务器&#xff08;推荐配置2h4g3m&#xff09; 3.域名…

安卓实现微信聊天气泡

一搜没一个能用的&#xff0c;我来&#xff1a; 布局文件&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xml…

第十二章 路由器静态路由配置

实验目标 掌握静态路由的配置方法和技巧&#xff1b; 掌握通过静态路由方式实现网络的连通性&#xff1b; 熟悉广域网线缆的链接方式&#xff1b; 实验背景 学校有新旧两个校区&#xff0c; 每个校区是一个独立的局域网&#xff0c; 为了使新旧校区能够正常相互…

CTFHUB-SSRF-上传文件

通过file协议访问flag.php文件内容 ?urlfile:///var/www/html/flag.php 右键查看页面源代码&#xff0c;发现需要从内部上传一个文件这样才能正常获取到flag ?urlhttp://127.0.0.1/flag.php 发现无提交按钮&#xff0c;构造一个 <input type"submit" name&qu…

HarmonyOS开发探索:使用Snapshot Insight分析ArkTS内存问题

识别内存问题 当怀疑应用存在内存问题的时候&#xff0c;首先使用DevEco Profiler的Allocation Insight来度量内存在问题场景下的大小变化以及整体趋势&#xff0c;初步定界问题出现的位置&#xff08;Native Heap/ArkTS Heap/dev等&#xff09;。 在初步识别内存问题出现的位置…

阿里云物联网应用层开发:第二部分,云产品流转

文章目录 哔哩哔哩视频教程1、云产品流转概述2、我们需要创建多少个云产品流转&#xff1f;3、阿里云物联网平台产品云流转实现3-1 创建数据源3-2 创建数据目的3-2 创建解析器,并关联数据、编写脚本 哔哩哔哩视频教程 【阿里云物联网综合开发&#xff0c;STM32ESP8266微信小程…

2024年道路运输安全员(企业管理人员)备考题库资料。

46.危险货物道路运输随车携带的单据&#xff0c;下列选项不属于的是&#xff08;&#xff09;。 A.道路运输危险货物安全卡 B.运单或者电子运单 C.道路危险货物运输从业资格证 D.车辆检测报告 答案&#xff1a;D 47.危险货物运输驾驶人员在24小时内实际驾驶车辆时间累计不…

opengl箱子的显示

VS环境配置&#xff1a; /JMC /ifcOutput "Debug\" /GS /analyze- /W3 /Zc:wchar_t /I"D:\Template\glfwtemplate\glfwtemplate\assimp" /I"D:\Template\glfwtemplate\glfwtemplate\glm" /I"D:\Template\glfwtemplate\glfwtemplate\LearnOp…