我有 vue.js 组件，我有这两个 function 我想将它们传递到我的 vue 组件中我该怎么做

Question

这是我的第一个 function，我用它来生成 colors

<script>
  shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
},
</script>

和我的第二个 function：

<script>
 function flatten(data,color_var,order) 
{
    data.forEach(function (element)
    {
        order++;
        element.category_order = order;
        if(element.children.length > 0) 
        {

            element.color = shadeColor(color_var,-4);
            flatten(element.children,element.color,0);

        } 
        element.color = shadeColor(color_var,-4);
    });
    return data;
}
</script>

我想将这两个 function 放入我的 vue 组件中，但我不知道该怎么做，这是我的 vue.js 代码：

<v-card flat>
    <draggable
    class="draggable"
    tag="div"
    :="dragOptions"
    @input="emitter"
    :move="checkMove"
    :list="list"
    :value="value"
    @update="saveUpdatedOrder"
    >
      <div class="item-group text-right" :key="el.id" v-for="el in realValue"  :style=" 
    {backgroundColor: el.color}" @click="loop">
  <div class="item">{{ el.title }}</div>
  <nested-test class="item-sub" :list="el.children" />
 </div>
    </draggable>
    </v-card>

我正在使用 vue 可拖动库我想在这个元素和子列表中使用它们任何人都可以帮助我吗？

Answer 1

您可以为您的功能使用方法。

https://v1.vuejs.org/guide/events.html

在你的模板中：

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

在你的脚本中：

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods point to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      alert(event.target.tagName)
    }
  }
})
// you can invoke methods in JavaScript too
vm.greet() // -> 'Hello Vue.js!'

Answer 2

我找到了问题所在的答案（这个）

flatten(elements,color){ 

 console.log(elements);

  elements.forEach(function(element)
  {
    console.log(this.shadeColor("fcfcfc", -5))
    if (element.children.length > 0) 
    {
      console.log(element);
      element.color = this.shadeColor(color, -5)
      this.flatten(element.children, element.color)
    }
    element.color = this.shadeColor(color, -5)


  }.bind(this))
  return elements

}

答案只是我需要绑定（这个）