vue3 ts项目 | 使用TDesign的日期选择组件
1.使用 npm 安装
npm i tdesign-vue-next2.通过插件按需引用使用
除此之外，也可以使用 unplugin-vue-components 和 unplugin-auto-import 来实现自动导入：
您仍需在项目引入组件库的少量全局样式变量
import { createApp } from 'vue';
// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';
const app = createApp(App);
并安装两个unplugin相关的第三方包
npm install -D unplugin-vue-components unplugin-auto-import
然后在 Vite 对应的配置文件添加上述插件。
Vite
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
// ...
AutoImport({
resolvers: [TDesignResolver({
library: 'vue-next'
})],
}),
Components({
resolvers: [TDesignResolver({
library: 'vue-next'
})],
}),
],
};3.以下是代码逻辑、结构和样式
<script lang="ts" setup>
import type { DateRangePickerProps } from 'tdesign-vue-next'
const selectForm = ref({
startTime:'',
endTime:''
})
// 默认触发时间和解除时间
const rangeDateTime = ref([selectForm.value.startTime, selectForm.value.endTime])
// 选中触发时间和解除时间
const onChange: DateRangePickerProps['onChange'] = (value) => {
selectForm.value.startTime = `${value[0]}`
selectForm.value.endTime = `${value[1]}`
}
</script>
<template>
<div>
<t-date-range-picker v-model="rangeDateTime" enable-time-picker clearable class="h- full w-120rpx" @change="onChange" />
</div>
</template>
<style scoped>
/* 修改TDesign组件默认样式 */
/* 右边的小图标 */
:deep(.t-range-input.t-range-input--suffix .t-range-input__suffix){
display: none;
}
:deep(.t-range-input__inner-separator){
display: none;
}
:global(.t-date-picker__panel-content){
flex-direction: column;
}
/* 时间选择器的高度 */
:global(.t-date-picker__panel-time){
height: 140px;
display: flex;
align-items: center;
}
/* 时间选择器滑动可视区域 */
:global(.t-time-picker__panel-body){
height: 80px;
}
/* 时间选定的背景颜色 */
:global(.t-date-picker__cell--active .t-date-picker__cell-inner ){
background-color: #2E6FFF;
}
/* 确认按钮的背景颜色 */
:global(.t-button--variant-base.t-button--theme-primary){
background-color: #2E6FFF;
border-color: #2E6FFF;
}
/* 当天日期文字颜色 */
:global(.t-date-picker__cell--now .t-date-picker__cell-inner){
color:#2E6FFF;
}
/* 当天时间文字颜色 */
:global(.t-time-picker__panel-body-scroll-item.t-is-current){
color: #2E6FFF;
}
/* 默认选中当天时的日期文字、背景颜色 */
:global(.t-date-picker__cell--active .t-date-picker__cell-inner){
color: #ffffff;
background-color: #2E6FFF;
}
/* input输入框 */
:deep(.t-range-input ){
border-width: 0;
height: 100%;
border-radius:1vw;
padding: 0;
}
:deep(.t-range-input-popup--visible .t-range-input){
border-color:#EFEFEF;
box-shadow: none;
}
/* 鼠标悬浮input边框颜色 */
:deep(.t-range-input:hover){
border-color:#EFEFEF;
}
:deep(.t-range-input__inner .t-input__wrap){
font-size: 3.467vw;
border:1px solid #E7E7E7;
border-radius:1vw;
}
:deep(.t-input__inner){
font-size: 3.467vw;
color: #727272;
}
:deep(.t-input.t-is-readonly){
background-color: rgba(0,0,0,0);
box-shadow: none;
}
:deep(.t-range-input-popup--visible .t-range-input .t-input.t-is-focused ){
background-color: rgba(0,0,0,0);
}
</style>
以上是这个组件的全部代码，可以参考一下，写得不好的地方帮忙指正。
（效果图如下：）
原文地址：https://blog.csdn.net/m0_65292523/article/details/144030841
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！