<template>
  <div>
    <el-button @click="test">测试</el-button>
    <calendar style="max-width: 1200px; margin: 0 auto;"></calendar>
  </div>
</template>

<script>
import Calendar from "@/components/Calendar/Calendar"

export default {
  name: "Test",
  components: {Calendar},
  data() {
    return {}
  },
  beforeCreate() {
    // 初始化“事件”和“声明周期”后调用
    console.log("beforeCreate")
    console.log(this)
  },
  created() {
    console.log("created")
    console.log(this)
  },
  beforeMount() {
    console.log("beforeMount")
    console.log(this)
  },
  mounted() {
    console.log("mounted")
    console.log(this)
    this.$storage.setData("34", {"a": 123})
    this.$storage.removeData("34")
    console.log(this.$storage.getData(34));
  },
  activated() { // keep-alive 显示界面时调用
    console.log("activated")
    console.log(this)
  },
  beforeUpdate() {
    console.log("beforeUpdate")
    console.log(this)
  },
  updated() {
    console.log("updated")
    console.log(this)
  },
  deactivated() { // keep-alive 离开界面时调用
    console.log("deactivated")
    console.log(this)
  },
  beforeDestroy() {
    console.log("beforeDestroy")
    console.log(this)
  },
  destroy() {
    console.log("destroy")
    console.log(this)
  },
  methods: {
    test() {
      this.$router.push({ // 页面跳转
        path: '/redirect/element/table/add',
        params: {"a": 2}
      })
    },
    fun() {
      this.$axios.get("1"); // 请求网络
      this.$cookies.setData(); // 操作cookies
      this.$router.push({ // 页面跳转
        name: 'elementTableEdit',
        params: {}
      })
      this.$cookies.getData(this.$route.name) // 跳转后的参数获取
      this.$message.success("消息"); // 消息框
      this.$options.name; // 获取当前组件属性
      this.$nextTick(() => {
      }) // 下次界面刷新，例如同一方法中先给变量复制，再获取该元素的中绑定的值还是赋值之前的内容。需要待界面刷新后获取
         // 设置input焦点时一般放在界面刷新之后
      this.$refs.password.focus()
    }
  },
  watch: { // 观察某变量，如果改变立即（immediate=true）执行handler方法
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
}
</script>

<style scoped lang="scss">

</style>
