vue 时间格式转换封装
时间: 2023-07-01 20:25:32 浏览: 47
可以通过封装一个全局过滤器来实现 Vue 时间格式转换的功能。具体步骤如下:
1. 在 Vue 实例中定义一个全局过滤器:
```javascript
Vue.filter('dateFormat', function(dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
return dayjs(dateStr).format(pattern)
})
```
2. 在模板中使用过滤器:
```html
<p>{{ createTime | dateFormat }}</p>
```
其中,`createTime` 是需要格式化的时间数据,`dateFormat` 是在第一步中定义的全局过滤器。
3. 也可以传入一个自定义的格式化字符串:
```html
<p>{{ createTime | dateFormat('YYYY年MM月DD日') }}</p>
```
这样就可以实现 Vue 时间格式转换的功能了。需要注意的是,这里使用了 `dayjs` 库进行时间格式化,需要在项目中安装该库。
相关问题
vue3封装一个转换时间戳的方法
好的,以下是一个Vue 3中封装一个转换时间戳的方法的示例代码:
```vue
<template>
<div>
<p>{{ timestampToTime(1615412456) }}</p>
</div>
</template>
<script>
export default {
name: 'Example',
methods: {
timestampToTime(timestamp) {
const date = new Date(timestamp * 1000);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hour = ('0' + date.getHours()).slice(-2);
const minute = ('0' + date.getMinutes()).slice(-2);
const second = ('0' + date.getSeconds()).slice(-2);
const timeStr = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
return timeStr;
}
}
}
</script>
```
这个方法接收一个时间戳作为参数,返回一个格式为 "YYYY-MM-DD HH:mm:ss" 的时间字符串,表示该时间戳所对应的时间。你可以将该方法添加到你的Vue组件中并根据需要进行调用。
uniapp vue3接口封装
Uniapp 是一个基于 Vue.js 的跨平台应用开发框架,提供了一套完整的开发工具和开发文档。在 Uniapp 中使用 Vue3 的方式与 Vue2 类似。
接口封装是在前端项目中常用的一种技术,目的是为了方便调用接口、重用代码,并且可以进行错误处理、数据转换等操作。下面是一个简单的接口封装示例:
```javascript
import { request } from '@/utils/request.js'
const baseUrl = 'http://example.com/api/'
export const getUserInfo = (params) => {
return request({
url: `${baseUrl}/getUserInfo`,
method: 'get',
params
})
}
export const login = (data) => {
return request({
url: `${baseUrl}/login`,
method: 'post',
data
})
}
```
在上面的示例中,我们使用 `request` 方法来发送请求。这里的 `request` 方法是我们封装的一个通用请求方法,可以进行一些全局配置,例如设置请求头、错误处理等。我们可以在 `utils/request.js` 中定义这个方法:
```javascript
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
timeout: 5000 // 请求超时时间
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做一些处理
return config
},
error => {
// 处理请求错误
console.error(error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 在响应之前做一些处理
return response.data
},
error => {
// 处理响应错误
console.error(error)
return Promise.reject(error)
}
)
export default service
export const request = (config) => {
return service(config)
}
```
在上面的示例中,我们使用了 Axios 库来发送请求,并且定义了一个 `service` 实例作为全局的请求实例。在 `request` 方法中,我们通过调用 `service(config)` 来发送请求,并返回一个 Promise 对象。在请求拦截器和响应拦截器中,我们可以进行一些公共处理,例如设置请求头、错误处理、数据转换等。
最后,在我们的业务代码中,我们可以直接调用 `getUserInfo` 和 `login` 方法来发送请求,例如:
```javascript
import { getUserInfo, login } from '@/api/user.js'
// 获取用户信息
getUserInfo({ id: 1 }).then(res => {
console.log(res)
}).catch(err => {
console.error(err)
})
// 用户登录
login({ username: 'admin', password: '123456' }).then(res => {
console.log(res)
}).catch(err => {
console.error(err)
})
```
在上面的示例中,我们通过引入 `api/user.js` 文件来调用封装好的接口方法,并且可以处理请求成功和请求错误的情况。