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

Question

这是我用来生成颜色的第一个函数

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

还有我的第二个功能：

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

我想把这两个函数放在我的 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

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

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

}

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

Answer 2

你可以为你的函数使用方法。

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!'