Skip to content
This repository has been archived by the owner on Nov 9, 2021. It is now read-only.

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

Open
w934423231 opened this issue Sep 23, 2021 · 1 comment

Comments

@w934423231
Copy link

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
Copy link

Envov commented Oct 12, 2021

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;
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants