Question

我正在使用vue-js-modal，并且遇到问题，每次我将模态设置为：draggable =＆＃34; true＆＃34;我可以拖动它，但它不允许我写输入，因为我认为它也认为它是可拖动的元素，我怎么能阻止它？

这就是我设置它的方式：

 <!-- modal dedicated to the panel history -->
  <modal :adaptive="true" height="70%"  width="60%" :resizable="true" class="modalSize" :draggable='true' name="modalPanel">
    <span class="cross" @click="$modal.hide('modalPanel')">
      ✖
    </span>
    <!-- here lives the panel history -->
    <appPanelHistory>
    </appPanelHistory>
  </modal>

当模态打开我无法改变输入时，任何人都知道这个问题吗？感谢

Answer 1

似乎是此处报告的已知问题：https://github.com/euvl/vue-js-modal/issues/78

解决方案是在你的模态中创建一个元素，它将是一个drabble句柄。所以不要让它与你的输入重叠！然后传递新元素的类作为可拖动的道具。作为字符串，删除冒号

E.g

<modal draggable=".handle"...

Answer 2

x您已将.heroLogo { width: 100%; display: inline-block; } .heroLogo-wrapper { position: absolute; width: 100%; text-align: center; z-index: -1; @include mediaQ('large'){ width:40%; } } .heroTitle { display: inline-block; width: 100%; } .heroTitle-wrapper{ position: absolute; width: 100%; z-index: -1; text-align: center; @include mediaQ('large'){ width:65%; } } //REACT //====== var Logo = () => { return( <div className='heroLogo-wrapper'> <img src={HeroLogoImg} className="heroLogo" /> </div> ); } var Title = () => { return( <div className='heroTitle-wrapper'> <img src={HeroTitleImg} className="heroTitle" /> </div> ); }绑定为true，以便Vue.js在其API中查找名为draggable的选项。相反，取下冒号（true的简写）。

更好的是，你可以在不为自定义属性赋值的情况下放置v-bind:这个词。 draggable的文档说它需要Booleans或Strings，所以只需要vue-js-modal就可以给你一个可拖动的模态。模板调用中缺少<modal draggable>会将其设置为默认值draggable。

问题可能源于错误地使用多个自定义属性。您使用false和adaptive也犯了同样的错误。

以下答案链接到该回购中的某个问题，其中某人正在做同样的事情并遇到问题！

vue-js-modal可拖动问题

2 个答案: