vue实现价格日历效果
作者:爱喝冰可乐 发布时间:2023-07-02 17:01:14
标签:vue,价格日历
本文实例为大家分享了vue实现价格日历效果的具体代码,供大家参考,具体内容如下
1、效果图
2、下载全局安装:npm install ele-calendar
3、在components下新建文件calendar.vue,内容:
<template>
<div style="width:600px">
<ele-calendar
:render-content="renderContent"
:data="datedef"
:prop="prop"
:disabledDate="disabledDate"
:effectiveTimeLimit="effectiveTimeLimit"
:defaultValue="defaultValue"
>
</ele-calendar>
</div>
</template>
<script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
export default {
props: {
datedef: {
type: Array,
default: () => {
return []
}
},
defaultPrice: {
type: String,
default: () => {
return ''
}
},
effectiveTimeLimit: {
type: String,
default: () => {
return ''
}
},
defaultValue: {
type: Date,
default: () => {
return new Date()
}
}
},
data () {
const self = this
return {
prop: 'date', // 对应日期字段名
disabledDate: date => {
return (
date.valueOf() < new Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
date.valueOf() > new Date(self.effectiveTimeLimit).valueOf()
)
}
}
},
components: {
eleCalendar
},
methods: {
// JSX语法
renderContent (h, parmas) {
const self = this
const loop = data => {
return (
<div class={data.defvalue.value ? 'active' : ''}>
<div>{data.defvalue.text}</div>
<div>
¥
<i-input
value={
data.defvalue.value.content
? data.defvalue.value.content
: self.defaultPrice
}
on-on-blur={event =>
self.handleChange(
event,
data.defvalue.value
? data.defvalue.value.date
: self.handleDate(data.defdate)
)
}
disabled={
data.defvalue.value
? new Date(data.defvalue.value.date).valueOf() <
new Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
new Date(data.defvalue.value.date).valueOf() >
new Date(self.effectiveTimeLimit).valueOf()
: data.defdate.valueOf() <
new Date().valueOf() - 1 * 24 * 60 * 60 * 1000 ||
data.defdate.valueOf() >
new Date(self.effectiveTimeLimit).valueOf()
}
key={
data.defvalue.value
? data.defvalue.value.date
: self.handleDate(data.defdate)
}
/>
</div>
</div>
)
}
return <div style='min-height:60px;'>{loop(parmas)}</div>
},
handleChange (event, date) {
console.log(event, date, 'dddddd')
const self = this
const index = self.datedef.findIndex(item => {
return item.date === date
})
if (isNaN(event.target.value)) {
self.$Message.error('请输入正确的价格')
event.target.value = self.defaultPrice
return
}
if (event.target.value && index === -1) {
if (event.target.value === self.defaultPrice) {
return
}
self.datedef.push({
date,
content: event.target.value,
cid: null
})
console.log('self.datedef', self.datedef)
this.$emit('aaa', self.datedef)
} else if (event.target.value && index !== -1) {
if (event.target.value === self.defaultPrice) {
self.datedef.splice(index, 1)
return
}
const selectItem = self.datedef[index]
selectItem.content = event.target.value
self.datedef.splice(index, 1, selectItem)
} else if (!event.target.value && index !== -1) {
self.datedef.splice(index, 1)
} else {
event.target.value = self.defaultPrice
}
},
handleDate (date) {
const year = date.getFullYear()
let month = date.getMonth() + 1
month = month >= 10 ? month : '0' + month
let idate = date.getDate()
idate = idate >= 10 ? idate : '0' + idate
return `${year}-${month}-${idate}`
}
}
}
</script>
<style lang="scss">
.el-picker-panel-calendar.el-date-picker-calendar.el-popper {
box-shadow: none;
}
.el-date-table-calendar td > div > div {
border: 1px solid #aaa;
color: #fff;
margin: 5px;
& > div:first-child {
background-color: #aaa;
}
& > div:nth-child(2) {
padding: 5px;
color: #000;
.ivu-input-wrapper {
width: 80%;
}
}
&.active {
border: 1px solid #2ab561;
& > div:first-child {
background-color: #2ab561;
}
& > div:nth-child(2) {
padding: 5px;
color: #000;
.ivu-input-wrapper {
width: 80%;
}
}
}
}
// 这段如果放开的话当天之前的所有框置灰
// .el-date-table-calendar td.disabled > div > div {
// border: 1px solid #aaa;
// color: #fff;
// margin: 5px;
// & > div:first-child {
// background-color: #aaa;
// }
// & > div:nth-child(2) {
// padding: 5px;
// color: #000;
// .ivu-input-wrapper {
// width: 80%;
// }
// }
// }
.el-date-table-calendar td.available:hover {
color: #000;
}
.el-date-table-calendar td.available.today {
color: #000;
font-weight: normal;
}
.el-date-table-calendar tr td.current.available:not(.disabled) {
background-color: #fff;
}
</style>
4、页面引入注册
<script>
import calendar from '../../components/calendar'
export default {
components: { calendar}
}
data() {
return {
effectiveTimeLimit: '',
ruleForm: {
price: '',
configPriceList: []
}
},
rules: {
}
}
}
</script>
5、html
我是写在dialog中的
<el-form-item label="价格设置" prop="calendarPrice">
<calendar
:datedef="ruleForm.configPriceList"
:default-price="ruleForm.price"
:effectiveTimeLimit="effectiveTimeLimit"
></calendar>
</el-form-item>
来源:https://blog.csdn.net/u013361179/article/details/108603281


猜你喜欢
- 本文实例讲一下如何用thinkphp实现数据的删除和批量删除吧。预期效果图: 原谅博主对照片的处理是如此的草率吧。。。仍然是 通过
- 一、查询条件精确,针对有参数传入情况 二、SQL逻辑执行顺序 FROM-->JOIN-->WHERE-->GROUP--&
- 问题描述:被搜索名字为:andy这时搜索andy正常,但是搜索a就搜不到。解决办法,在索引配置文件中的index中添加min_infix_l
- 本文实例讲述了Python 操作 PostgreSQL 数据库。分享给大家供大家参考,具体如下:我使用的是 Python 3.7.0Post
- WordPress 页面模板是特定的模板文件,用于特定页面或页面组,这些用于单页数据的模板显示在前端。我们还可以在 WordPre
- 本文实例讲述了Python将阿拉伯数字转换为罗马数字的方法。分享给大家供大家参考。具体实现方法如下:def numToRomanNum(Nu
- 本文不涉及分类器、训练识别器等算法原理,仅包含对其应用(未来我也会写自己对机器学习算法原理的一些观点和了解)首先我们需要知道的是利用现有框架
- 一、Request对象Request对象主要是用来请求数据,爬取一页的数据重新发送一个请求的时候调用,其源码类的位置如下图所示:这里给出其的
- 大家都知道,IE中的现代事件绑定(attachEvent)与W3C标准的(addEventListener)相比存在很多问题,例如:内存泄漏
- 今天用FrontPage2003,无意中发现一个bug,稍加研究,基本发现这个bug的规律了首先是我的系统版本和Frontpage版本:我的
- 本文实例为大家分享了雪花飞舞效果javascript实现,供大家参考,具体内容如下原理:1、js动态创建DIV,指定CLASS类设置不同的背
- 和其他语言一样,JavaScript也有条件语句对流程上进行判断。包括各种操作符合逻辑语句比较操作符常用的比较操作符有  
- 先来说一下我们学校的网站:http://jwxt.sdu.edu.cn:7777/zhxt_bks/zhxt_bks.html查询成绩需要登
- 安装pyserialpip install pyserial查看可用的端口# coding:utf-8import serial.tools
- 环境:python3.6 pyqt5只是简单的一个思路,请忽略脆弱的异常防护:# -*- coding: utf-8 -*-import s
- 使用JDBC连接MySQL数据库进行数据插入的时候,特别是大批量数据连续插入(100000),如何提高效率呢?在JDBC编程接口中State
- 操作系统 : Windows 10_x64 [版本 10.0.19042.685]pjsip版本 : 2.10pjsip官网:https:/
- 1.open使用open打开文件后一定要记得调用文件对象的close()方法。比如可以用try/finally语句来确保最后能关闭文件。fi
- mysqladmin 工具的使用格式:mysqladmin [option] command [command option] comman
- 生成全局ID的方法很多, 这里记录下一种简单的方案: 利用mysql的自增id生成全局唯一ID.1. 创建一张只需要两个字段的表:CREAT