使用vue怎么实现一个价格日历效果

今天就跟大家聊聊有关使用Vue怎么实现一个价格日历效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

<template>  <div >    <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>

页面引入注册

<script> import calendar from '../../components/calendar' export default {    components: { calendar}  }  data() {    return {      effectiveTimeLimit: '',      ruleForm: {        price: '',        configPriceList: []      }      },      rules: {      } }    }</script>

html

我是写在dialog中的

<el-form-item label="价格设置" prop="calendarPrice"> <calendar :datedef="ruleForm.configPriceList" :default-price="ruleForm.price" :effectiveTimeLimit="effectiveTimeLimit" ></calendar></el-form-item>

看完上述内容，你们对使用vue怎么实现一个价格日历效果有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。