1.什么是组件?  组件就是一个特殊的Vue实例,所以大部分Vue实例选项在组件中都可以使用  组件也拥有自己data,methods,computed,watch,  组件不需要el,组件的模板就是template属性2.定义组件的方式?  全局定义,全局定义的组件在任何其他组件中都可以使用,我们把通用公共的组件定义为全局组件  局部定义,定义在局部组件    组件定义需要在创建3.定义组件注意
不用任何第三方库,只基于vue2实现一个日历组件,末尾附上我的代码,单文件,代码没有抽取,有点长。哪位大佬批评指正一下样式是类似于window10日历支持控制周一还是周日在第一列支持鼠标滑动切换支持单选,拖动鼠标多选,范围选择支持年月日选择切换支持传入选中数据支持隐藏非本月日期QCalendar.scss.Q-calendar-change-enter-active,.Q-calendar-cha
原创 2022-10-24 09:43:49
1082阅读
<template> <div class="Calendar"> <Header /> <DateList /> <div style="overflow: hidden;"> nd="touchend" @touchmove="touchmove" ref="w.
原创 2023-02-14 09:09:55
1278阅读
vue自定义小日历组件一、前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个。最终效果如图所示。二、日历样式我的这个日历组件主要分为导航栏区和主要内容区,导航栏按钮样式什么的都是自定义的,很简单,源码有就不罗嗦。主要讲一下日历内容的样式设计。日历内容都是用<ul>和<li>标签实现的,星期栏和日期栏分别为
前言因项目的需要,而且当前组件库并不支持业务,所以,重新对日历组件进行封装。该篇博客就对实现日历的思路进行存档,方便以后的查阅。先上图:UI小哥哥的原型图。接下来的思路都是根据该图进行解说逻辑1.组件的拆分,分出哪些是业务,哪些是基础组件。 整体来说,这就是在日历的基础上添加业务,所以日历组件应该是基础组件,而业务应该是通过插槽插入进去的。那么,右上方的分入分出合计以及每个日历中的分入,分出都是需
Win7之家(www.win7china.com):软媒时间3.08正式版:让Win7用上最美桌面日历一直以来,我们都希望软媒时间能够承担起我们的一份愿景,就是能让您的工作、学习、生活更加得心应手。这次我们要发布的软媒时间3.08正式版,就是我们一次“大胆突破”——为了更加方便、直观、好玩、好用,我们新增了多项功能,其中就包括“大快人心”的桌面日历。“桌面日历”,顾名思义,就是把万年历贴在桌面上。
项目:公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求:展示当前日期(服务器时间)前后90天,一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的,需要置灰并且不可点击。点击日历绑定的节点的外部,关闭弹窗。涉及内容:获取服务器时间
转载 2024-08-01 08:22:04
497阅读
//根组件<template> <div class="hello"> <Time v-model="value"></Time> </div></template><script>import formate from '../utils/formate'import Time ...
原创 2021-09-03 13:42:00
1303阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周7天限定了列数为7列, 行数会随当月天数及1号所在位置而有所不同.移动端亦应根据屏幕宽度自适应布局, flex布局就是一个很好的选择, 我们对数据部分进行下模拟, 先造一个长度为40数据都为0的数组如下:const dataArr = Array(40).fill(0, 0, 40)现在, 我们
(1) 简介该日历组件是一个应用于移动端的日历组件采用了rem(文末附有rem.js)(2) template<template> <div class="calendar"> <div class="calendar-year"> <span @click="chooseYear">{{showDate.year}}</span&
转载 2024-03-07 12:38:38
372阅读
有这样一种需求,选择[开始时间]和[结束时间],接待时间自动设置起始时间和终止时间。 使用的日历控件是WeUI官方的Calendar。<!--出差时间--> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">出差时间</la
转载 8月前
47阅读
 FSCalendar是开源iOS日历控件,支持横向、纵向滑动. 月模式,周模式. 显示农历,标记时间.定制时间范围.选择事件等多种需求.一、安装1. 使用CocoaPods安装 (安装流程不叙述了,直接搜索FSCalendar 最新版安装)2. 手动安装(github地址: https://github.com/WenchaoD/FSCalendar) 下载之后直接把FSCalenda
转载 2023-08-03 15:23:19
1368阅读
1点赞
iOS开发一款小巧简洁的日历控件 一、引言        日 历是iOS开发中有时会用到的一个UI控件,网上开源的代码也很多,我浏览过一些,大致有两种模式,一种是日历的逻辑由开发者自己实现,通过计算闰年与平 年来确定月份天数,另外一种模式是通过NSDate这个时间类,来获取日历的信息。我个人认为后一种
转载 2024-08-13 13:08:17
323阅读
# Vue兼容iOS移动端视频组件开发 在现代网页开发中,视频播放功能已经成为了用户体验的重要组成部分。然而,iOS上的Safari浏览器在处理视频播放方面与其他浏览器存在一些兼容性问题,特别是在全屏播放、自动播放和静音播放等功能上。这篇文章将指导你如何使用Vue.js构建一个兼容iOS移动端的视频组件,并提供代码示例,确保你的应用在多个平台上都能良好地播放视频。 ## 1. 视频组件的基本结
原创 9月前
127阅读
vue日期选择组件(vue persian datepicker)This is a Jalali date picker component for Vue. 这是Vue的Jalali日期选择器组件。 View demo 查看演示 Download Source 下载源 (Universal Module Definition(UMD))In orde
转载 2024-01-08 15:06:19
79阅读
1. DZNEmptyDataSet DZNEmptyDataSet算是一个很标准的iOS内建方式,适合用来处理空的table view和collection view。默认情况下,如果你的table view为空,屏幕就为空,这样一来用户体验并不理想。     使用这个库,你只需遵守一些协议,iOS就会自动将collection view处理完善,并将用户消息以合适
## iOS开发 日历组件实现流程 ```mermaid flowchart TD A(开始) B(创建日历组件的视图) C(设置日历组件的样式) D(在日历组件中显示日期) E(处理日历组件中的点击事件) F(结束) A --> B B --> C C --> D D --> E E --> F ``` ### 1. 创建日历组件的视图 首先,我们需要创建一个用于显示日历组件的视图。可以使
原创 2023-10-30 09:53:52
198阅读
vue-calendar-component基于 vue 2.0 开发的轻量,高性能日历组件占用内存小,性能好,样式好看,可扩展性强原生 js 开发,没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件少部分日历组件的占用内存过于大,对于日历这样简单的功能来说显然不够合理Demo 或者请用浏览器的手机模式查看 效果? 觉得好用给
本来呢,开开心心的写完了这个功能,然后发现elemeng更新了,增加了日历组件这个功能 我的内心机器奔溃,但是,element的日历组件太简单了,我感觉还是手撸一个吧,毕竟也不是很难 实现了显示农历,备注功能,点击某一天为某一天添加备注的功能... 引用的是他人写好的组件: https://gith
原创 2022-01-13 16:26:28
1031阅读
基于vue-cli3构建的npm包,日历组件 包链接:
css
转载 2021-07-22 17:25:00
1424阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5