probil / vue-moveable

↔️ ↕️ 🔄 Vue.js wrapper for Moveable
https://vue-moveable.netlify.com/
MIT License
965 stars 69 forks source link

I customized ables in vue2.0 and never displayed them. I don't know why #317

Open w934423231 opened 3 years ago

w934423231 commented 3 years ago

ables: { name: "mouseTest", props: {}, events: {}, render(moveable, React) { const CustomElement = moveable.useCSS( "div", { position: absolute; } ); // Add key (required) // Add class prefix moveable-(required) return moveable.createElement("div", {}, "lietu"); }, mouseEnter() { console.log("ENTER"); }, mouseLeave() { console.log("LEAVE"); } }, 这是我在 vue data中定义的组件数据

Envov commented 3 years ago

solved this by queryElement

looks like this

image

js

this.$nextTick(() => {
  // query bottom button
  const sButton = document.querySelector('div[data-direction="s"]');
  // insert Html
  sButton.innerHTML = `<div class="double">双击修改文字<div>`;
  const effect=this.doSomething;
  // query inserted and addEventListener
  document.querySelector(".double").addEventListener( "touchend", effect );
});

css

.double {
  width: 200px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  border-radius: 10px;
  position: absolute;
  bottom: -70px;
  background: rgba(#000, 0.8);
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
}