element 日历组件,基于vue的日历组件
这篇文章主要介绍了某视频剪辑软件中如何使用元素的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
先看下效果图：
完整代码附上
模板
div class= newSeeds id= famer calendar
div class=title-bottom
埃尔-日期选择器
:clearable=false
前缀图标=时间过滤器
v-model=value2
type=month
占位符=选择月
值格式=yyyy-MM
@change=changeDate
/El-日期选择器
/div
div class=calendarBody
埃尔日历v-model=值
模板slot=日期单元格 slot-scope= {日期，数据}
差异
@click=chooseDay(data)
class=cellInfo
:class=data.isSelected==true？shadowBox :
ul class=cellInfoUl
li v-for=(item，index) in activeList :key=index
p v-if=数据。日==项。time class= cellInfoUlP
{{ item.name }}
/p
/李
/ul
差异
v-for=(val，keys，i) in reverseMessage
:key=i
:class=data.day==keys？提示信息 :
span v-if=数据。day==keys class= tipm sged“{ val } }/span
/div
div class=cellInfoBox
p{{ data.day.split(-)[2] }}/p
/div
/div
/模板
/El-日历
/div
！-抽屉-
埃尔抽屉
:title=时间选择
:visible.sync=drawer
：方向=方向
v-if=listNormal[0]
列表正常中的div class= modeEachs v-for=(item，index):key= index
I class= setI El-icon-delete @ click= del tips(item)/I
我
setI setIs El-图标-编辑-轮廓
@click=addTips(1，item)
/i
p
跨度开始时间：/span span{{ item.time }}/span
/p
p
跨度农事活动名称：/span span{{ item.name }}/span
/p
p
跨度负责人：/span span { { item。用户名} }/span
/p
p
跨度参与人数：/span span{{ item.people }}/span
/p
p
跨度目标规格：/span span{{ item.content }}/span
/p
/div
/div
div class= mode each mode
div class=emptyState
img src=./././assets/左屏/math 17。png alt= /
/div
p当前日期暂无农事活动安排，/p
p点击右下角"添加农事活动"按钮添加吧！/p
/div
div class=footBox
El-button type= primary @ click=添加提示(0)添加农事活动/el-button
/div
/El-抽屉
！-新增修改-
埃尔对话
title=
:visible.sync=updateForm
宽度=31vw
class=addAlameBox
div slot= title class= header-title style= position:relative
span class=title-name/span
span class= title-age“{ box prompt } }/span
跨度
style=
位置：绝对；
top:50%；
transform:平移y(-50%)；
右：0px
字体大小：2.22瓦时
/span
/div
div class=addAlaForm
埃尔格式
ref=upTableData
:rules=rules
:model=upTableData
标签宽度=10vw
！- el-form-item label=开始时间时间到了
div class=block
埃尔-日期选择器
v-model=upTableData.time
type=datetime
值-格式=yyyy-MM-dd HH:mm:ss
占位符=选择日期时间
/El-日期选择器
/div
/El-表单-项目-
El-表单-项目标签=农事活动名称prop=name
El-input v-model= uptabledata。名称/El-输入
/El-表单-项目
El-表单-项目标签=负责人prop=用户名
El-input v-model= uptabledata。用户名/El-输入
/El-表单-项目
El-表单-项目标签=参与人数道具=人
El-input v-model= uptabledata。人/El-输入
/El-表单-项目
El-表单-项目标签=目标规格prop=content
El-input v-model= uptabledata。内容/El-输入
/El-表单-项目
el-form-item size=大号
埃尔按钮
class=saveBtn
type=primary
@click=saveForm(upTableData )
保存/el-button
/El-表单-项目
/el格式
/div
/el-dialog
/div
/模板
脚本
导入日期格式自./././组件/交易时间。js’；
导出默认值{
data() {
返回{
时间选择："7-26",
六：[],
数字：0,
活动日期：0,
时间： ,
listParams: {
第一页，
大小： ,
哪里： ,
时间： ,
},
身份证，
listNormal: []，
活动列表：[
{
数据1:"2021/08/17 15:30",
数据2:"1 #地块浇水灌溉，
数据3:孙国栋，
数据4:"16",
数据5:土壤水分达到40%,
},
{
数据1:"2021/08/17 15:30",
数据2:"1 #地块浇水灌溉，
数据3:孙国栋，
数据4:"16",
数据5:土壤水分达到40%,
},
],
updateForm: false，
boxPrompt:新建，
upTableData: {
id: 0，
名称： ,//操作名称
时间： ,//计划时间
用户名： ,//负责人
人： ,//人数
内容： ,//内容
},
规则：{
数据1: [
{必需：真，消息： 时间，触发器：[模糊,改变] },
],
数据2: [
{
必填：真，
消息： 产品名称不可为空，
触发器：[模糊,改变],
},
],
数据3: {
必填：真，
消息： 产品类型不可为空，
触发器：[模糊,改变],
},
数据4: {
必填：真，
消息： 规格不可为空，
触发器：[模糊,改变],
},
数据5: {
必填：真，
消息： 运送数量不可为空，
触发器：[模糊,改变],
},
},
//抽屉
出票人：假的，
方向：《rtl》、
//日期
值2: ,
值：新日期(),
加载：假，
物流表单：{
名称： ,
区域：-1,
},
};
},
已安装(){
这个。requrst lists()；
这个。getnowdate()；
//这个。getactivitycalendar
},
观察：{
活动列表（新值){
这个。活动列表=新值；
},
},
计算值：{
reverseMessage() {
var arrs=[]；
var计数arrs=[]；
这个。活动列表。foreach((val)={
arrs。推(val。时间)；
});
返回arrs。减少(函数(上一个，下一个){
prev[next]=prev[next]1 1；
阿雷斯伯爵。push({ prev })；
返回上一个
}, {});
//};
},
},
方法：{
//获取当前时间
getNowDate(){
var Date=new Date()；
这个。值2=日期格式( YYYY-mm ，日期)
},
//获取列表接口
异步请求列表(){
常数{
数据：{数据}，
}=等这个post( product/getProductPlayList ，{
第一页，
大小： ,
哪里： ,
时间： ,
});
datas.forEach((val)={
如果(val。时间。的索引(:){
console.log(发现空格);
瓦尔。时间=val。时间。split()[0]；
}
});
this.activeList=datas
//this.sortArr()
},
异步请求列表(){
常数{
数据：{数据}，
}=等这个. post( product/getProductPlayList)，这个。列表参数)；
this.listNormal=datas
},
//新增
addTips(val，item) {
this.updateForm=true
if (val===0) {
this.boxPrompt=新建；
this.upTableData={
id: 0，
名称： ,//操作名称
时间： ,//计划时间
用户名： ,//负责人
人： ,//人数
内容： ,//内容
};
} else if (val===1) {
this.boxPrompt=编辑；
这个。ids=项目。id；
这个. nextTick(()={
这个。uptabledata=JSON。解析(JSON。stringify(item))；
});
}
},
//保存
saveForm() {
让URL=/product/edit product play ；
if (this.boxPrompt==新建) {
这个。uptabledata。id=0；
} else if (this.boxPrompt==编辑) {
这个。uptabledata。id=这个。ids
}
这个。uptabledata。时间=这个。时间选择"00:00:00";
这个refs[upTableData].验证((有效)={
如果（有效){
这个get(url，this.upTableData).然后((res)={
this.updateForm=false
if (res.data.state==success) {
这个。requrst list()；
这个。requrst lists()；
这个message.success(操作成功);
}否则{
这个message.error(操作失败！请稍后重试!);
}
});
}否则{
console.log(错误提交！);
返回错误的
}
});
},
选择日期（数据){
这个. nextTick(()={
if (data.type===当前月){
this .抽屉=真
这个。列出参数。时间=数据。天；
这个。时间选择=数据。天；
这个。requrst list()；
} else if(数据。type===前一个月){
这个。上一页BTN。单击()；
} else if (data.type===下个月){
这个。nextbtn。单击()；
}
});
},
//抽屉
手柄关闭（完成){
这个. $确认(确认关闭？)。然后((res)={
done()；
这个。requrst lists()；
})。catch((err)={ })；
},
//删除
delTips(val) {
控制台。日志(val)；
这个. $确认(此操作将永久删除该文件，是否继续？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型：警告，
})。然后(()={
这个post(/product/deteleProductPlay ，{ id: val.id }).然后（
(res)={
if (res.data.state==success) {
这个message.success(删除成功);
这个。requrst list()；
这个。requrst lists()；
}否则{
这个. message(RES . data。味精)；
}
}
);
})。catch(()={
这个消息({
类型："信息",
消息： 已取消删除，
});
});
},
//时间选择
变更日期(瓦尔){
这个值=val
},
//刷新
刷新(){
this.loading=true
//这个。requrst list()；
},
//搜索
search() {
让name=this。物流形式。姓名；
让level=这个。物流形式。地区；
if(level==-1)level=" "；
this.loading=true
//this.requrstList(名称，级别);
},
//重置
removeForm() {
这个。物流形式。name=
这个。物流形式。region=-1；
//这个。requrst list()；
},
},
};
/脚本
样式范围语言=少
@导入./././style/back表。少’；
/风格
样式范围语言=少
#famerCalendar /deep/.电子日历表{
宽度：100%;
身高：100%;
：不是(。is-range) {
//使不是本月的日期不可点击，不会跳转到其他月份
td.next {
指针事件：无；
}
td.prev {
指针事件：无；
}
}
}。calendarBody {
宽度：100%;
身高：81vh
}
#famerCalendar .新种子{
身高：90vh
}
#famerCalendar /deep/.电子日历_ _标题{
justify-content:space-between；
填充：12px 20px
边框：无；
文本对齐：居中；
背景：# 00284d
显示：块；
}
#famerCalendar /deep/.埃尔按钮组{
显示：无；
}
#famerCalendar /deep/.电子日历_ _标题{
颜色：# fff
自我对齐：居中；
行高：3vh
}
#famerCalendar /deep/.El-calendar-table thead th:n-of-type(2n){
背景：# 5c768d
颜色：# fff
填充：1vh 0；
}
#famerCalendar /deep/.El-calendar-table thead th:n-of-type(2n-1){
背景：# 335371;
颜色：# fff
填充：1vh 0；
}
#famerCalendar /deep/.电子日历_ _正文{
填充：0;
}
#famerCalendar .标题-底部/深度/。埃尔-输入-前缀100 . El输入_ _内部{
左填充：3vw
宽度：75%;
/*身高：4vh
行高：4vh*/
}
#famerCalendar /deep/.埃尔-日期-编辑器。埃尔-输入，日期编辑。El输入_ _内部{
宽度：10vw
}
#famerCalendar .时间过滤器{
位置：相对；
}
#famerCalendar /deep/.埃尔日历表td {
文本对齐：右对齐；
}
#famerCalendar /deep/.电子日历表100 . El-日历日{
框大小：边框-框；
//填充：1vh
填充：0;
身高：11.5vh
}
#famerCalendar /deep/.电子日历表100 . El-日历日p {
框大小：边框-框；
填充：1vh
}
#famerCalendar /deep/.时间过滤器：在{
最小宽度：2vw
空白：nowrap
内容： 日期；
border-right:1px solid # c 0 C4 cc；
填充：0 0.2 ww
框大小：边框-框；
/*行高：4vh*/
}
#famerCalendar /deep/.埃尔抽屉_ _打开el-drawer.rtl:焦点可见{
边框：无；
}
#famerCalendar /deep/.El-drawer _ _标题：焦点可见{
边框：无；
}。cellInfoUl {
宽度：80%;
身高：100%;
溢出：隐藏；
溢出-y:滚动；
}。cellInfoUl:-webkit-scrollbar {
显示：无；
}。cellInfo {
位置：相对；
宽度：100%;
身高：100%;
显示器：flex
justify-content:space-between；
填充：1vh
框大小：边框-框；
}。tipMsg {
位置：绝对；
显示器：flex
右：0vh
底部：0vh
宽度：2vw
身高：2vw
颜色：# fff
}。tipMsged {
位置：绝对；
top:50%；
左：50%;
z指数：100;
transform: translate(-10%，-20%)；
}。tipMsg:before {
内容："";
位置：绝对；
top:0；
左：0;
高度：0px
宽度：0px
边框顶部：纯色2ww透明；
边框-左侧：实心2vw # 3999e6
变换：rotateZ(-90度);
}。李
宽度：100%;
行高：2.5vh
颜色：# fff
背景：# 61adeb
边距-底部：1vh
填充：0 0.5vw
框大小：边框-框；
边框半径：16px
文本对齐：居中；
}。cellInfoBox {
文本对齐：居中；
/*颜色：#;*/
}。modeEach {
宽度：100%;
填充：2vh 1vw
框大小：边框-框；
身高：78vh
溢出：隐藏；
溢出-y:滚动；
}。modeEach:-webkit-scrollbar {
显示：无；
}。脚箱{
宽度：100%;
填充：2vh 1vw
框大小：边框-框；
}。modeEachs {
宽度：100%;
最小身高：18vh
背景：# 3999e6
边框-半径：6px
填充：2vh 1vw
框大小：边框-框；
位置：相对；
边距-底部：1vh
}。setI {
位置：绝对；
top:1vh；
右：0.5vw
背景：# fff
宽度：2.5vh
身高：2.5vh
边界半径：50%;
文本对齐：居中；
行高：2.5vh
颜色：红色；
}。集合{
top:1vh；
右：2vw
颜色：# 3999e6
}。modeEachs span {
字号：1.3vh
字体系列：来源汉Sans CN
字体粗细：400;
颜色：# ffffff
行高：2.78vh
}。每个型号跨度：第n个型号(1) {
最小宽度：3vw
显示：内嵌-块；
}。脚箱{
文本对齐：右对齐；
}。空白状态{
宽度：100%;
身高：60%;
文本对齐：居中；
}。emptyState img {
宽度：80%;
最小高度：100%;
}。modeEached {
文本对齐：居中；
}。现代教育p {
字号：1.67vh
字体系列：来源汉Sans CN
字体粗细：400;
颜色：# 666666；
行高：2.78vh
}。阴影盒{
box-shadow: 0px 0px 15px 3px rgba(0，0，0，0.15)；
填充：1vh
框大小：边框-框；
}
/风格
这就是这篇关于在vue中使用element的日历组件的示例代码的文章。有关vue元素的日历组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。