@opentiny/vue-docs 2.1.8 → 2.1.9

package/demos/pc/app/tooltip/offset.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-slider v-model="offset" :min="-200" :max="200"></tiny-slider>
+    <tiny-tooltip content="出现位置的偏移量" :offset="offset" manual v-model="show" :key="offset">
+      <button class="tiny-button tiny-button--primary">出现位置的偏移量</button>
+    </tiny-tooltip>
+  </div>
+</template>
+
+<script lang="jsx">
+import { Tooltip, Slider } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTooltip: Tooltip,
+    TinySlider: Slider
+  },
+  data() {
+    return {
+      offset: 10,
+      show: true
+    }
+  }
+}
+</script>

package/demos/pc/app/tooltip/popper-options-composition-api.vue

@@ -1,7 +1,9 @@
 <template>
-  <tiny-tooltip content="popper-options配置" :popper-options="options">
-    <button class="tiny-button tiny-button--primary">popper-options配置</button>
-  </tiny-tooltip>
+  <div>
+    <tiny-tooltip content="提示内容" :popper-options="options">
+      <button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
+    </tiny-tooltip>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -9,7 +11,7 @@ import { ref } from 'vue'
 import { Tooltip as TinyTooltip } from '@opentiny/vue'
 
 const options = ref({
-  gpuAcceleration: true, // 当这一属性被设置为 true 时，popper 的位置将通过 CSS3 的 translate3d 来改变
-  removeOnDestroy: false // 当你想要在调用 `destroy` 方法时不自动移除 popper 时，应当将此项设置为 false
+  bubbling: true, // 监听元素所有上级有滚动元素的scroll事件,防止弹出层与页面分离
+  removeOnDestroy: true // 弹出层消失后，自动从页面上移除相应的DOM元素
 })
 </script>

package/demos/pc/app/tooltip/popper-options.vue

@@ -1,7 +1,9 @@
 <template>
-  <tiny-tooltip content="popper-options配置" :popper-options="options">
-    <button class="tiny-button tiny-button--primary">popper-options配置</button>
-  </tiny-tooltip>
+  <div>
+    <tiny-tooltip content="提示内容" :popper-options="options">
+      <button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
+    </tiny-tooltip>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -14,8 +16,8 @@ export default {
   data() {
     return {
       options: {
-        gpuAcceleration: true, // 当这一属性被设置为 true 时，popper 的位置将通过 CSS3 的 translate3d 来改变
-        removeOnDestroy: false // 当你想要在调用 `destroy` 方法时不自动移除 popper 时，应当将此项设置为 false
+        bubbling: true, // 监听元素所有上级有滚动元素的scroll事件,防止弹出层与页面分离
+        removeOnDestroy: true // 当你想要在调用 `destroy` 方法时不自动移除 popper 时，应当将此项设置为 false
       }
     }
   }

package/demos/pc/app/tooltip/{tooltip-theme-composition-api.vue → theme-composition-api.vue}

@@ -1,35 +1,40 @@
 <template>
   <div class="box">
+    Effects示例：
     <tiny-tooltip content="dark 提示文字" placement="top">
-      <button>Dark</button>
+      <tiny-button>Dark</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip effect="light" content="light 提示文字" placement="top">
-      <button>Light</button>
+      <tiny-button>Light</tiny-button>
     </tiny-tooltip>
+  </div>
+  <div class="box">
+    Types示例：
     <tiny-tooltip type="normal" content="normal 提示文字" placement="top">
-      <button>normal</button>
+      <tiny-button>normal</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="warning" content="warning 提示文字" placement="top">
-      <button>warning</button>
+      <tiny-button>warning</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="error" content="error 提示文字" placement="top">
-      <button>error</button>
+      <tiny-button>error</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="info" content="info 提示文字" placement="top">
-      <button>info</button>
+      <tiny-button>info</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="success" content="success 提示文字" placement="top">
-      <button>success</button>
+      <tiny-button>success</tiny-button>
     </tiny-tooltip>
   </div>
 </template>
 
 <script setup lang="jsx">
-import { Tooltip as TinyTooltip } from '@opentiny/vue'
+import { Tooltip as TinyTooltip, Button as TinyButton } from '@opentiny/vue'
 </script>
 
 <style scoped>
 .tiny-tooltip {
-  margin-right: 16px;
+  margin-right: 8px;
+  margin-bottom: 16px;
 }
 </style>

package/demos/pc/app/tooltip/{tooltip-theme.vue → theme.vue}

@@ -1,41 +1,47 @@
 <template>
   <div class="box">
+    Effects示例：
     <tiny-tooltip content="dark 提示文字" placement="top">
-      <button>Dark</button>
+      <tiny-button>Dark</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip effect="light" content="light 提示文字" placement="top">
-      <button>Light</button>
+      <tiny-button>Light</tiny-button>
     </tiny-tooltip>
+  </div>
+  <div class="box">
+    Types示例：
     <tiny-tooltip type="normal" content="normal 提示文字" placement="top">
-      <button>normal</button>
+      <tiny-button>normal</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="warning" content="warning 提示文字" placement="top">
-      <button>warning</button>
+      <tiny-button>warning</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="error" content="error 提示文字" placement="top">
-      <button>error</button>
+      <tiny-button>error</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="info" content="info 提示文字" placement="top">
-      <button>info</button>
+      <tiny-button>info</tiny-button>
     </tiny-tooltip>
     <tiny-tooltip type="success" content="success 提示文字" placement="top">
-      <button>success</button>
+      <tiny-button>success</tiny-button>
     </tiny-tooltip>
   </div>
 </template>
 
 <script lang="jsx">
-import { Tooltip } from '@opentiny/vue'
+import { Tooltip, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip
+    TinyTooltip: Tooltip,
+    TinyButton: Button
   }
 }
 </script>
 
 <style scoped>
 .tiny-tooltip {
-  margin-right: 16px;
+  margin-right: 8px;
+  margin-bottom: 16px;
 }
 </style>

package/demos/pc/app/tooltip/{custom-transition-composition-api.vue → transition-composition-api.vue}

@@ -1,6 +1,6 @@
 <template>
-  <tiny-tooltip content="定义渐变动画" transition="custom-transition" placement="bottom">
-    <button class="tiny-button tiny-button--primary">定义渐变动画</button>
+  <tiny-tooltip content="渐隐动画" transition="custom-transition" placement="bottom">
+    <button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
   </tiny-tooltip>
 </template>
 
@@ -13,14 +13,12 @@ import { Tooltip as TinyTooltip } from '@opentiny/vue'
 .tiny-tooltip.custom-transition-enter-from,
 .tiny-tooltip.custom-transition-leave-to {
   opacity: 0;
-  transform: translateX(-999px);
   transform-origin: center top;
 }
 
 .custom-transition-enter-active,
 .custom-transition-leave-active {
   opacity: 1;
-  transform: translateX(0);
-  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1);
 }
 </style>

package/demos/pc/app/tooltip/{custom-transition.vue → transition.vue}

@@ -1,6 +1,6 @@
 <template>
-  <tiny-tooltip content="定义渐变动画" transition="custom-transition" placement="bottom">
-    <button class="tiny-button tiny-button--primary">定义渐变动画</button>
+  <tiny-tooltip content="渐隐动画" transition="custom-transition" placement="bottom">
+    <button class="tiny-button tiny-button--primary">鼠标悬浮到这里</button>
   </tiny-tooltip>
 </template>
 
@@ -10,9 +10,6 @@ import { Tooltip } from '@opentiny/vue'
 export default {
   components: {
     TinyTooltip: Tooltip
-  },
-  data() {
-    return {}
   }
 }
 </script>
@@ -22,14 +19,12 @@ export default {
 .tiny-tooltip.custom-transition-enter-from,
 .tiny-tooltip.custom-transition-leave-to {
   opacity: 0;
-  transform: translateX(-999px);
   transform-origin: center top;
 }
 
 .custom-transition-enter-active,
 .custom-transition-leave-active {
   opacity: 1;
-  transform: translateX(0);
-  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1);
 }
 </style>

package/demos/pc/app/tooltip/webdoc/tooltip.cn.md

@@ -4,4 +4,4 @@ title: ToolTip 文字提示
 
 # ToolTip 文字提示
 
-<div>动态显示提示信息，一般通过鼠标事件进行响应。</div>
+<div>动态悬浮在元素上的提示信息，一般通过鼠标事件进行响应。</div>

package/demos/pc/app/tooltip/webdoc/tooltip.en.md

@@ -4,4 +4,4 @@ title: ToolTip text prompt
 
 # ToolTip text prompt
 
-<div>Dynamic display of prompt information, which is generally responded through mouse events.</div>
+<div>A prompt that is dynamically suspended on an element, usually in response to a mouse event</div>