朴实无华的vue时间选择组件

最新推荐文章于 2024-07-19 12:32:40 发布
最新推荐文章于 2024-07-19 12:32:40 发布
阅读量1k 收藏
点赞数 1
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44315875/article/details/104410312
版权
本文介绍了如何创建一个朴实无华的Vue时间选择组件。通过使用Date()函数获取每年每月的天数，点击显示组件，取消或点击背景则消失。组件接受theme和poptheme参数以定制颜色，success和close回调分别在确定选择和组件关闭后执行。
摘要由CSDN通过智能技术生成

vue时间选择组件

效果

time组件

思路

  1. 一个vue组件，一个函数调用使其产生。
  2. 时间函数Date()的使用，来获取每年每月的天数。
  3. 点击就出现这个组件，取消或者点击背后的层就会消失

定义传参

  1. theme： string类型，颜色值，控制值主题颜色，上面这个例子为默认颜色值。
  2. poptheme： string类型，颜色值，控制背景颜色，建议使用默认值，因为大部分的这种动态出现的组件背景颜色都是这种半透明黑。
  3. success：Fn类型，在点击确定后执行，接受一个数据，里面存储用户选择的时间。
  4. close：Fn类型，在组件消失后执行的函数，感觉不太用的上。

布局代码放在了码云上面，这里就不细说了🔗

如何使用

将com.js引入你想使用的页面里面

最低0.47元/天 解锁文章
赤兔不是马
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
vue3父子组件相互调用方法详解
共同学习，共同成长
05-11 6741
在vue3项目开发中，我们常常会遇到父子组件相互调用的场景，下面主要以setup语法糖格式详细聊聊父子组件那些事儿
vue时间选择组件.zip
08-20
类似头条投放端的时间段选择，最小粒度为半小时。鼠标滑动选择区域内的时间。分星期，粒度为48*7。鼠标也可点击选择。
vuedatetimepicker一个Vuejs的日期选择器组件
08-10
vue-datetime-picker 一个Vue.js的日期选择器组件
vue3 实现一个年月日时分秒的时间组件
最新发布
qq_46090699的博客
07-19 765
然后这个还有个问题，希望路过的大佬可以指导，这块的距离实在不好看，我deep改了vant-cell的样式为什么死活不生效啊。这边就空的太开，让value怎么去靠右边一点，看起来好看一点。
自制vue小组件——日历式日期选择器
08-16
萌新制作的日历式日期选择器,会标示现实日期，能够选择开始日期和结束日期 vue组件引入方式引入。 通过ref获取和设置选择日期 this.$refs.mydatepicker.getSelect();获取选中日期，没选中为‘’。 this.$refs.mydatepicker.setSelect(‘2019/8/16’,‘2019/8/19’);获取选中日期，没选中为‘’。 萌新程序员，希望多多指教我这个什么都不懂得小萌新 上传完才发现，如今这破站不能够手动修改积分，不然我0积分分享
vue 手写一个时间选择器
weixin_34413103的博客
08-02 1104
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。 原理 DatePicker 的原理是——计算日历面板中当月或选中月份的总天数及前后月份相近的日子，根据点击事件计算日历面板显示内容，以及将所选值赋值给<input/>标签。 实现 CSS 代码于文章末尾处 1. 构思页...
vue.js城市选择框组件_一个实现日期时间选择器的Vue.js组件
cuk5239的博客
07-20 236
vue.js城市选择框组件A Vue.js component implementing the datetime picker control using the Eonasdan's bootstrap datetime picker plugin. 一个Vue.js组件，使用Eonasdan的bootstrap datetime picker插件实现datetime picker控件。 ...
Vue：实时时间显示组件
yyyyyyyyyyy_9的博客
08-07 1875
乐多_本文记录了使用Vue实现时间显示组件，代码即插即用。结果如下图所示，
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
共同学习，共同成长
05-10 5061
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
vue实现横向时间轴组件
热门推荐
Mini_小仙女的博客
04-08 1万+
前言：项目中有需要用到横向时间轴，网上大部分组件不满足 功能需要，于是自己写了一个。先上简单的demo。 功能： 默认获取初始数据显示对应的时间轴和时间点。 当超出屏幕后，滑动滚动条加载更多页，类似分页加载。 某个大的时间轴节点鼠标放入需要显示相关信息。 某两个大节点之间会有子节点出现。 每个子节点会有对应的内容展示 ...
vue实现时间段选择组件，分星期，最小粒度半点
xcc_2269861428的博客
08-20 3014
实现样子：
vue 日程表组件_vue 时间选择器组件
weixin_39664560的博客
01-13 812
vue 时间选择器组件组件效果：单文件组件：<<<年月>>>{{ week }} {{ day }} {{ day }}{{ day }}export default {name: 'datePickers',data () {return {dateBoxFlag: false,year: 0,month: 0,day: 0,previousMonth: []...
vue写时间选择器
Havanao的博客
08-07 468
index.js import Datetime from 'vue-datetime' // You need a specific loader for CSS files import 'vue-datetime/dist/vue-datetime.css' Vue.use(Datetime) 新建一个Datatime.js import { Datetime } from 'vue-datetime'; Vue.extend({ template: '...', components:
vuejs-datepicker|简单易用的Vue.js日期选择组件
delmarks的博客
02-22 1万+
vuejs-datepicker是一个简单易用的Vue.js日期选择组件。它使用了Bootstrap 4的样式，支持多种语言，具有直观的界面，易于配置和扩展。
vue中设置时间选择范围
过客璇璇的博客
10-15 3474
vue源码 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <div id="app"> <row> <i-col s...
vue-quick-calendar—Vue超实用日历组件(带示例图，注释超详细~)
Jerry的博客
01-28 9804
效果图 效果图如下，支持标记日期、点击日期、切换月份，复制即用，本示例为PC端，移动端请自行修改样式哦~ 一、Calendar组件代码，预处理器使用SCSS <template> <section class='m-calendar' :style="dateStyle"> <!-- 切换月份 --> <header class='changeMonth'> <span class='prepMonth' @click=
vue日期选择器 （快捷部分内容修改为自定义时间范围）
qq_41186500的博客
09-25 1831
第一张是element-ui自带效果，第二张是替换后的呈现 看官方文档可知，最近一周的文字及函数是存放在shortcuts里的。shorts里包含了两部分内容。一部分是文本text，另一部分是当前文本的点击事件。所以只要将需要放置的内容遍历存放进去就行了 我是给了一个按钮button，打开一个弹框，弹框开启时，就调用接口将数据填到时间组件里 <template> &l...
Vue+Vant 基于DatetimePicker进行二次开发，实现yyyyMMdd hh:mm:ss时间选择
bueryao527的博客
09-28 2156
目录效果图前提项目结构html部分js部分css部分timeSelection.vueutil.js 效果图 前提 vue引入Vant： vue2.0 npm i vant -S vue3.0 npm i vant@next -S main.js import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 项目结构 html部分 <template> <div class="time-box"&
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值