vue-封装获取当前时间方法(支持任意格式)

开发过程中,经常会有获取当前时间的需求,可能是年月,年月日,周几等,可以封装成函数,方便复用,以vue举例。

封装

src下新建utils文件,新建formatDate.js文件

/**
 * 获取当前时间
 */
export const formatDate = (fmt) => {
  const date = new Date()
  const o = {
    'Y+': date.getFullYear(),
    'M+': date.getMonth() + 1, // 月
    'D+': date.getDate(), // 日
    'h+': date.getHours(), // 时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    W: date.getDay() // 周
  }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, () => {
        if (k === 'W') {
          // 星期几
          const week = ['日', '一', '二', '三', '四', '五', '六']
          return week[o[k]]
        } else if (k === 'Y+' || RegExp.$1.length === 1) {
          // 年份 or 小于10不加0
          return o[k]
        } else {
          return ('00' + o[k]).substr(('' + o[k]).length) // 小于10补位0
        }
      })
    }
  }
  return fmt
}
使用
import { formatDate } from '@/src/utils/formatDate.js'
formatDate('YY') // 2021
formatDate('YY-MM')	// 2021-09
formatDate('YY-MM-DD')	// 2021-09-06
formatDate('YY-MM-DD hh:mm:ss')	// 2021-09-06 15:17:30
formatDate('星期W')	// 星期一
### 创建和使用 `el-drawer` 封装组件 #### 组件封装概述 为了提高代码的可维护性和复用性,在实际开发过程中可以对第三方库中的组件进行二次封装。对于 `Element Plus` 库里的 `el-drawer` 组件来说,可以通过组合 API 和 Composition API 来完成更灵活的功能扩展[^2]。 #### 使用 `useAttrs()` 获取属性 通过调用 Vue 3 提供的新钩子 `useAttrs()`, 可以方便地访问传递给当前组件的所有未声明 props 属性。这使得开发者能够轻松处理来自父级作用域传来的动态配置项或者事件监听器等额外参数。 ```javascript import { defineComponent, useAttrs } from &#39;vue&#39;; export default defineComponent({ name: "CustomDrawer", setup(props, context){ const attrs = useAttrs(); return () => ( <el-drawer v-bind={attrs}> {{ title: ()=><div>自定义标题</div>, default: ()=>context.slots.default?.() }} </el-drawer> ) } }); ``` 此段代码实现了基本的 `el-drawer` 封装逻辑,并允许外部使用者自由指定除已知 prop 外其他任意合法 HTML 特性的绑定方式以及插槽内容填充方法。 #### 实现拖拽功能 如果希望进一步增强用户体验,则可以在原有基础上集成更多实用特性比如窗口拖动效果。此时就需要引入类似 `vuedraggable` 这样的辅助工具包来帮助实现交互行为;同时还需要注意调整样式表以适应新的布局需求[^3]。 ```css /* 自定义样式 */ .custom-drawer { position:relative; } .drag-area{ cursor:move; } ``` ```html <template> <!-- 抽屉主体 --> <custom-drawer :visible="drawerVisible"> <template #title> <span class="drag-area">点击此处拖动抽屉位置</span> </template> <p>这里是抽屉的内容区域。</p> </custom-drawer> </template> <script lang="ts"> // 导入必要的依赖模块... import draggable from &#39;@/directives/draggable&#39;; const CustomDrawerWithDrag = defineComponent({ directives:{draggable}, data(){ return { drawerVisible:false, }; }, }); export default CustomDrawerWithDrag ; </script> ``` 上述例子演示了怎样基于前面提到的基础版本添加简单的拖放支持机制。需要注意的是这里假设已经按照官方文档说明完成了相应指令文件编写工作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值