testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: add tooltip demo

This commit is contained in:
Sagi 2022-10-11 14:49:07 +08:00
parent a5d7abb00e
commit bbf8fb13b8
2 changed files with 49 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
packages/ui-vue/src/app.vue
View File

@ -1,19 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs // This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { ref } from "vue"; import { ref } from 'vue';
import HelloWorld from "./components/hello-world.vue"; import HelloWorld from './components/hello-world.vue';
import Avatar from "./components/avatar.vue"; import Avatar from './components/avatar.vue';
import Tabs from "./components/tabs.vue"; import Tabs from './components/tabs.vue';
import ButtonEdit from "./components/button-edit.vue"; import ButtonEdit from './components/button-edit.vue';
import FButton from "./components/button.vue"; import FButton from './components/button.vue';
import Switch from "./components/switch.vue"; import Switch from './components/switch.vue';
import RadioGroup from "./components/radio-group.vue"; import RadioGroup from './components/radio-group.vue';
import Section from "./components/section.vue"; import Section from './components/section.vue';
import Notify from "./components/notify.vue"; import Notify from './components/notify.vue';
import Accordion from "./components/accordion.vue"; import Accordion from './components/accordion.vue';
import ComboList from "./components/combo-list.vue"; import ComboList from './components/combo-list.vue';
import CheckboxGroup from "./components/checkbox.vue"; import CheckboxGroup from './components/checkbox.vue';
import Tooltip from './components/tooltip.vue';
const canEdit = ref(true); const canEdit = ref(true);
const disable = ref(false); const disable = ref(false);
@ -21,45 +22,46 @@ const canAutoComplete = ref(false);
</script> </script>
<template> <template>
<div> <div>
<a href="https://vitejs.dev" target="_blank"> <a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" /> <img src="/vite.svg" class="logo" alt="Vite logo" />
</a> </a>
<a href="https://vuejs.org/" target="_blank"> <a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /> <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a> </a>
</div> </div>
<HelloWorld msg="Vite + Vue" /> <HelloWorld msg="Vite + Vue" />
<!-- <input type="checkbox" id="checkbox" v-model="canEdit" /> <!-- <input type="checkbox" id="checkbox" v-model="canEdit" />
<label for="checkbox">editable:{{ canEdit }}</label> <label for="checkbox">editable:{{ canEdit }}</label>
<input type="checkbox" id="checkbox" v-model="canAutoComplete" /> <input type="checkbox" id="checkbox" v-model="canAutoComplete" />
<label for="checkbox">auto complete:{{ canAutoComplete }}</label> --> <label for="checkbox">auto complete:{{ canAutoComplete }}</label> -->
<!-- <ButtonEdit :editable="canEdit" :auto-complete="canAutoComplete" :enable-clear="true"></ButtonEdit> --> <!-- <ButtonEdit :editable="canEdit" :auto-complete="canAutoComplete" :enable-clear="true"></ButtonEdit> -->
<ButtonEdit></ButtonEdit> <ButtonEdit></ButtonEdit>
<Avatar></Avatar> <Avatar></Avatar>
<FButton></FButton> <FButton></FButton>
<Switch></Switch> <Switch></Switch>
<Section></Section> <Section></Section>
<Notify></Notify> <Notify></Notify>
<Accordion></Accordion> <Accordion></Accordion>
<Tabs /> <Tabs />
<ComboList /> <ComboList />
<RadioGroup></RadioGroup> <RadioGroup></RadioGroup>
<CheckboxGroup /> <CheckboxGroup />
<Tooltip></Tooltip>
</template> </template>
<style scoped> <style scoped>
.logo { .logo {
height: 6em; height: 6em;
padding: 1.5em; padding: 1.5em;
will-change: filter; will-change: filter;
} }
.logo:hover { .logo:hover {
filter: drop-shadow(0 0 2em #646cffaa); filter: drop-shadow(0 0 2em #646cffaa);
} }
.logo.vue:hover { .logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa); filter: drop-shadow(0 0 2em #42b883aa);
} }
</style> </style>

7
packages/ui-vue/src/components/tooltip.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup lang="ts">
import Tooltip from '../../components/tooltip/src/tooltip.component';
</script>
<template>
<Tooltip> </Tooltip>
</template>