使用vue怎样做一个价格日历效果？-群英

上一篇：怎样用js实现生成验证码并校验的功能? 下一篇：怎样使用jquery实现一个简易仪表盘？

这篇文章给大家分享的是怎样使用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>

以上就是关于vue实现价格日历效果的代码，有需要的朋友可以参考学习，希望对大家学习JS的vue框架有帮助，想要了解更多vue实现的功能，大家可以继续浏览其他的相关文章。

文本转载自脚本之家