<script setup lang='ts'>

import { ref } from 'vue'

import { installVarletUI } from './varlet-repl-plugin.js'

​

installVarletUI()

​

const msg = ref('Hello Varlet!')

const active = ref('选项1')

const date = ref('2022-03-10')

</script>

<template>

  <d-button>我是devui</d-button>

  <el-button>我是element-plus</el-button>

  <el-image src="https://w.wallhaven.cc/full/8o/wallhaven-8o6rmo.jpg"></el-image>

  <var-button type="primary">{{ msg }}</var-button>

  <var-date-picker v-model="date" />

  <var-tabs

  elevation

  color="#2979ff"

  active-color="#fff"

  inactive-color="hsla(0, 0%, 100%, .6)"

  v-model:active="active"

>

  <var-tab>选项1</var-tab>

  <var-tab>选项2</var-tab>

  <var-tab>选项3</var-tab>

</var-tabs>

​

<var-tabs-items v-model:active="active">

  <var-tab-item>

    呜啦啦啦火车笛，随着奔腾的马蹄。

    小妹妹吹着口琴，夕阳下美了剪影。

    我用子弹写日记，介绍完了风景。

    接下来换介绍我自己。

    我虽然是个牛仔，在酒吧只点牛奶。

    为什么不喝啤酒，因为啤酒伤身体。

  </var-tab-item>

  <var-tab-item>

    很多人不长眼睛，嚣张都靠武器。

    赤手空拳就缩成蚂蚁。

    不用麻烦了，不用麻烦了。

    不用麻烦，不用麻烦了，不用麻烦了。