<template>
  <div class="app-content">
    <div class="content-search">
      <el-input ref="inputCun.search" class="search-input" placeholder="请输入内容" @keypress.enter="inputCun.handleSearch"></el-input>
    </div>
    <div></div>
  </div>
</template>

<script lang="ts">
import Super from '@/public/mixin.ts'
import { ref, onMounted } from 'vue'
import { Options, setup } from 'vue-class-component'

const bindDom = () => {
  const search = ref(null)
  onMounted(() => {
    console.log(search.value)
    // watchEffect(()=>{
    //   console.log(stateDom.value)
    // })
  })
  const handleSearch = () => {
    console.log(search)
  }
  return { search, handleSearch }
}

@Options({
  components: {
  }
})
export default class Dashboard extends Super {
  inputCun = setup(() => bindDom())
}
</script>

<style scoped lang="stylus">
.app-content
  .content-search
    height 300px
    display flex
    justify-content center
    align-items center
    .search-input
      width 40vw
      min-width 130px
</style>