开发插件,如何获取dom元素

Creator 2.x
#1

看了vue官方的文档,使用ref可以获取dom元素
html中我是这么写的

<h5 ref="test">test</h5>

然后js中去取

this.$refs.test.style.color = 'red';;

结果报错

 Uncaught TypeError: Cannot read property 'style' of undefined

有点懵逼,关于插件开发这块的文档少之又少,
也试过文档例子里面的id获取元素,但是因为vue的原因,id这种方式无效,求正确的获取dom元素的方式

#2

以下是官方的试例：

// panel/index.js
Editor.Panel.extend({
  style: `
    :host { margin: 5px; }
    h2 { color: #f90; }
  `,

  template: `
    <h2>标准面板</h2>
    <ui-button id="btn">点击</ui-button>
    <hr />
    <div>状态: <span id="label">--</span></div>
  `,

  $: {
    btn: '#btn',
    label: '#label',
  },

  ready () {
    this.$btn.addEventListener('confirm', () => {
      this.$label.innerText = '你好';
      setTimeout(() => {
        this.$label.innerText = '--';
      }, 500);
    });
  },
});

ref 还没测试过，

ID 的使用方法，dockable 页面是需要这样转化一下。

注意下面红框三个地方的写法。

特别是第二部分，注意 “ # ”

234.png454×641 8.89 KB

#3

这种方式我知道,的确可以,但是如果使用了vue,那么此时的this指向的是vue,而不是dom,问题就出在这里

#4

没看仔细，不好意思，

如果你是要动态改变样式，官方似乎没有给出具体方案，

我的做法是：

// 先在 style 里面定义好样式

  style: `
    .xin {       color: black;
      padding: 2px 5px;
      border-radius: 3px;
      background: #09f; }
    .xin2 {       color: black;
      padding: 2px 5px;
      border-radius: 3px;
      background: red; }
  `,

// template 里定义好 ID
  template: `
    
    <ui-button class= "{{ptype}}" id="btn">创建动画链</ui-button>

  `,

  $: {
    btn: '#btn',

  },

// 定义一个 vue，如果是进程消息里面修改,需要在外围定义全局变量

  ready () {
    var s = new window.Vue({
        el: this.shadowRoot,
        data: {
            message: 'Welcome!',
            ptype:"xin"
        },
    });
    
    this.$btn.addEventListener('confirm', () => {
    
        s.ptype="xin2"
    
    });

  },
#5

@jjyinkailejj 使用了vue怎么获取到dom元素,vue的ref好像不能用了

#6

20年了。。。

#7

Vue.js 1.x版本中，目前Creator2.4（包括）以下版本使用这种方式

通过v-el="xxx"绑定，然后通过this.$els.xxx来获取

Vue.js 2.x版本中

我们通过给元素绑定ref=“xxx”，然后通过this.$refs.xxx或者this.refs[‘XXX’]来获取

1赞
#8

该主题在最后一个回复创建后7天后自动关闭。不再允许新的回复。