html引入elementui日历_html 引用element ui 的timeline组件-优快云博客

本文链接：https://blog.youkuaiyun.com/TZ1284063988/article/details/125979534
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <!--引入 element-ui 的样式，-->
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
  <link rel="stylesheet" href="elementui.css">
  <!-- 引入element 的组件库-->
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <script src="elementui.js"></script>
</head>

<body>
  <div id="app">
    <el-form
    :model="queryParams"
    ref="queryForm"
    :inline="true"
    class="form_label_auto tp"
  >
    <el-form-item label="专业" prop="category">
      <el-select size="small" v-model="queryParams.category" placeholder="请选择专业">
        <el-option
          v-for="item in categoryList"
          :key="item.dictCode"
          :label="item.dictLabel"
          :value="item.dictCode">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button
        type="primary"
        size="mini"
        @click="handleQuery"
        >搜索</el-button
      >
      <el-button  size="mini" @click="resetQuery"
        >重置</el-button
      >
    </el-form-item>
  </el-form>   
    <el-calendar>
      <template slot="dateCell" slot-scope="{date, data}">
        <div class="days">
          <span>{{data.day}}</span>
          <div>
            <span v-for="(i,index) in getList(data.day).list" :key="index">
              <span>{{i}}</span>
            </span>
            <div class="title">
              {{getList(data.day).title}}
            </div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      value: new Date(),
      queryParams:{},
      list: [
        {
          "day": '2022-07-25',
          list: [1, 2, 3, 4, 5],
          title:"哈哈啊哈啊哈哈哈哈哈",
          
        },
        {
          "day": '2022-07-26',
          list: [2, 2, 2, 2, 2],
          title:"嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿"
        }
      ],

      categoryList:[
        {dictCode:"0",dictLabel:"数学"},
        {dictCode:"1",dictLabel:"语文"}
      ],//专业下拉




    },
    computed: {
      "getList"() {
        return function (num) {
          var obj = {}
          this.list.forEach(element => {
            if (element.day == num) {
              obj=element
            }
          });
          return obj

        }
      }
    },
    methods: {
      handleQuery(){

      },
      resetQuery(){

      }
    },
    mounted() {
    }

  })
</script>
<style>
  .el-calendar-table:not(.is-range) td.next,
  .el-calendar-table:not(.is-range) td.prev {
    color: #000;
  }
  .el-calendar-day{
    position: relative;
  }
  .title{
    width: 80%;
    height: 200px;
    background-color: #EC808D;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 20%;
    opacity: 0.5;
  }
  .title{
    display: none;
  }
  .el-calendar-day:hover .title{
    display: block;
  }
  .el-calendar__title{
    display: none;
  }
  /* .el-calendar__header{
    justify-content:center;
  }
  .el-calendar-table{
    border: 1px solid #EBEEF5;
  } */
</style>

</html>