3

我正在尝试为gridstack制作可重用的组件。

我找不到一种简单的方法来做类似于vue 1this.$compile中的方法的事情。我见过这个例子。

这是我的Vue脚本：

export default {
  components: {
    'horizontal-fab': HorizontalFab,
    'd-widget': DWidget
  },
  data () {
    return {
  }
},
mounted () {
  var options = {
    cellHeight: 80,
    verticalMargin: 10,
    width: 3
  }
  $('#grid-stack').gridstack(options)
},

addWid () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)
},

addGraph () {
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(`
    <div class="grid-stack-item" data-gs-width="4">
      <div class="grid-stack-item-content">
        <p>HTML (added)</p>
      </div>
    </div>
  `, 0, 0, 1, 1, true)
}

这是相关的html：

<span @click="addGraph" >Line graph</span></li>
<span @click="addWid">Sparklines</span></li>
...
<div id="grid-stack" class="grid-stack grid-stack-3">
  <d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
</div>

问题是：

该方法addGraph完美地工作，当addWid- 没有。即使直接作为组件插入到 html 中，它也可以工作。

我猜这是因为组件中的 html 没有被预编译。它compile在 vue1 中解决了。

我已经尝试过的：

  1. Mount，正如这里所建议的那样，但它不起作用，因为它看不到已定义的组件，我猜
  2. push正如这里所建议的那样，我已经看到有可能使它与它一起工作。但是我的vue知识还没有那么强，我找不到让它以这种方式工作的方法，因为会有几种类型的块，并且它们都应该被gridstack视为相同的元素。此外，同一个组件可以在一块板上多次使用，但参数不同。
  3. 我已经看到有一种方法来编译 a standalone component，就像这里，但看起来它是非常不推荐的，所以我正在寻找其他方法。
  4. 我也看过这些 render functions，但又一次 - 不幸的是，我的技能应用它并不好。

所以，总结一下——我真的很感激关于这些方法的一些建议，或者可能是关于其他实现方式的建议。问题是我还应该依靠gridstack脚本，而不是简单地插入元素。

谢谢！

UPD：d-widget的定义：

这基本上是单个组件，在名为 Widget.vue 的单独文件中定义

<template>
<div class="grid-stack-item" data-gs-width="4">
    <div class="grid-stack-item-content">
        <p>Wiiidget! (added)</p>
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>
4

2 回答 2

1

使用mount，你应该能够得到你需要传递给的东西grid.addWidget。

首先，我们想把组件变成我们可以构造的东西。

const MyWidget = Vue.extend(DWidget);

然后，我们可以挂载该构造函数。

const mounted = new MyWidget().$mount();

我没有传递任何东西$mount()，它不会将组件添加到 DOM。我们可以访问它使用生成的元素mounted.$el。我希望您应该能够将其传递给addWidget.

grid.addWidget(mounted.$el, 0,0,1,1,true);
于 2017-03-27T17:04:24.523 回答
0

所以，正如@Bert 建议的那样，我必须使用 mount。他的方法非常有效。这是一个结果 addWid () 方法，它实际上是可重用的组件：

addWid () {
  const MyWidget = Vue.extend(DWidget)
  const mounted = new MyWidget().$mount()
  var grid = $('#grid-stack').data('gridstack')
  grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}

希望它对某人有帮助！

于 2017-03-27T18:11:46.050 回答