opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.55k stars 253 forks source link

🐛 [Bug]: Guide component arrow exceeds position #454

Closed yoyo201626 closed 10 months ago

yoyo201626 commented 1 year ago

Version

opentiny/vue@3.10.0

Vue Version

3

Link to minimal reproduction

https://opentiny.design/tiny-vue/playground?cmpId=guide&fileName=content-step.vue&apiMode=Options

<template>
  <div>
    <tiny-button plain class="box" @click="stepStart">新手引导</tiny-button>
    <div class="pll" style="height: 1000px; display: inline-block;">safasf</div>
    <tiny-guide :show-step="showStep" :dom-data="domData"></tiny-guide>
  </div>
</template>

<script>
import { Guide, Button } from '@opentiny/vue'

export default {
  components: {
    TinyGuide: Guide,
    TinyButton: Button
  },
  data() {
    return {
      showStep: false,
      domData: [
        {
          text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
          domElement: '.pll',
          popPosition: "right-start",
          button: [
            {
              text: '下一步',
              action: 'next'
            }
          ],
          classes: 'only-content'
        }
      ]
    }
  },
  methods: {
    stepStart() {
      this.showStep = !this.showStep
    }
  }
}
</script>

Step to reproduce

  1. 点击演练场的新手指引 1

  2. 点击后出现Guide组件的弹框,观察箭头,箭头的位置向下超出了弹框 2

What is expected

点击后出现Guide组件的弹框,箭头的位置不超出弹框

What is actually happening

点击后出现Guide组件的弹框,观察箭头,箭头的位置向下超出了弹框 2

Any additional comments (optional)

示例的popPosition是 "right-start",其他值也得注意 No response

Issues-translate-bot commented 1 year ago

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: