Electra-Element-UI

基于 Element-UI 封装的 Electra 后台项目共用组件库

目录

• 一、安装步骤
• 二、文件目录说明
• 三、组件使用说明
  • my-date-picker

一、安装步骤

1. Install package

npm install electra-element-ui

2. Install 一个辅助解析的包（安装在 dev 环境即可）

npm install -save-dev @babel/plugin-transform-modules-commonjs

3. 在 vue.config.js 文件中添加如下配置

module.exports = {
    transpileDependencies: ['element-ui']
}

二、文件目录说明

filetree 
├── node_modules
├── src/
├──├── /assets/
│  ├── /components/         // 组件都放在这里，具体的封装方式参考已有组件
│  │  ├── date-picker
├── .babelrc
├── .eslintignore
├── index.js                // 整个项目的入口文件，封装的组件在这里引入并export
├── package-lock.json
├── package.json
├── README.md
└── vue.config.js

三、组件使用说明

my-date-picker 组件使用说明

1. 组件说明

本组件基于 element-ui 组件库中的 el-date-picker 开发，实现了可以在时间选择面板中选择时区，点击确定时可直接拿到根据已选时区计算好的 timestamp 值，可正常回显时区与时间。

2. 封装解释

在 el-date-picker 基础之上改动部分：

• 增加 timezone 属性，用于初次展示或回显展示，非必传，默认为 Europe/London
• value-format 属性需指定为 "yyyy-MM-dd HH:mm:ss"，所以组件回显时需要按时区计算并进行一次格式转换(timestamp -> 'yyyy-MM-dd HH:mm:ss')，具体见示例代码
• 修改 input 事件的返回值：增加 timezone 返回值，且时间格式为 timestamp，返回值示例如下：

{
    timeZoneId: 'Europe/London',
    time: [1629275540000, 1629275540000]
}

3. 使用示例

<template>
    <my-date-picker
        v-model="timeRange"
        type="datetimerange"
        :clearable="false"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="Start Time"
        end-placeholder="End Time"
        :timezone="timezone"
        @input="handleDateChange"
    />
</template>

<script>
import moment from 'moment-timezone'
import { MyDatePicker } from 'electra-element-ui'
export default {
    components: { MyDatePicker },
    data() {
        return {
            timezone: '',
            timeRange: ['', '']
        }
    },
    methods: {
        handleDateChange(val, obj) {
            const { timeZoneId, time } = obj
            console.log('Current Timezone:', timeZoneId)
            console.log('Start Time:', time[0])
            console.log('End Time:', time[1])
        },

        // 注意回显时需要按时区计算时间并转换为 yyyy-MM-dd HH:mm:ss 格式
        getData() {
            const formData = {
                startTime: 1629275540000,
                endTime: 1629275540000
            }
            const start = this.convertUtcToLocalStr(formData.startTime, this.timezone)
            const end = this.convertUtcToLocalStr(formData.endTime, this.timezone)
            this.timeRange = [start, end]
        },

        convertUtcToLocalStr(val, timeZoneId) {
            return moment(val).tz(timeZoneId).format('YYYY-MM-DD HH:mm:ss')
        }
    }
}