76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import styles from "./Home.module.less";
|
||
|
||
import { Component, Ref, Setup, Vue } from 'vue-facing-decorator'
|
||
import Header from '@/components/Header'
|
||
import { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from "vue-router";
|
||
import { ElButton, Icons } from "shared/element-plus";
|
||
|
||
|
||
interface ListItemType {
|
||
id: number
|
||
title: string
|
||
}
|
||
|
||
@Component()
|
||
export default class Home extends Vue {
|
||
|
||
counter: number = 1;
|
||
|
||
@Ref
|
||
readonly refH1!: HTMLDivElement
|
||
|
||
@Setup((props, ctx) => useRouter())
|
||
router!: Router
|
||
|
||
@Setup((props, ctx) => useRoute())
|
||
route!: RouteLocationNormalizedLoaded
|
||
|
||
newList: ListItemType[] = [
|
||
{ id: 1, title: '新闻1' },
|
||
{ id: 2, title: '新闻2' },
|
||
{ id: 3, title: '新闻3' },
|
||
]
|
||
|
||
async created() {
|
||
|
||
}
|
||
|
||
async addCount() {
|
||
// console.log(await nacos-cluster.find('app-product'))
|
||
// console.log("ref dom: ", this.refH1)
|
||
// this.router.push({ name: 'about' })
|
||
// this.route.query
|
||
this.counter++
|
||
}
|
||
|
||
testHtml() {
|
||
return <p>测试html jsx 函数</p>
|
||
}
|
||
|
||
|
||
render() {
|
||
return (
|
||
<div class={ styles.Home }>
|
||
<h1 ref="refH1" class={ styles.title }>首页</h1>
|
||
<ElButton type="primary" icon={ Icons.Search }>element-plus按钮</ElButton>
|
||
<p onClick={ this.addCount }>counter 响应式变量（点我）：{ this.counter }</p>
|
||
<Header
|
||
list={ this.newList }
|
||
text={ "测试" }
|
||
// v-slots= { {
|
||
// default: () => <div class="default">父到子 default 插槽</div>,
|
||
// haveName: () => <div class="haveName">父到子 具名 插槽</div>,
|
||
// item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
|
||
// } }
|
||
>
|
||
{ {
|
||
default: () => <div class="default">父到子 default 插槽</div>,
|
||
haveName: () => <div class="haveName">父到子 具名 插槽</div>,
|
||
item: (val: ListItemType) => <li key={ val.id }>{ val.title }</li>
|
||
} }
|
||
</Header>
|
||
{ this.testHtml() }
|
||
</div>
|
||
)
|
||
}
|
||
} |