sl-vue-tree フォルダの開閉

Question

こちらのツリー表示のライブラリを使用しております。
https://github.com/holiber/sl-vue-tree

ここのdemoでもそうなのですが、フォルダの開閉のボタンを押した時、同時にそのフォルダが選択されてしまいます。
これを、フォルダの開閉をクリックした時は、開閉だけして、選択をしたくないです。
私が試したことは、

@mousedown="onNodeMousedownHandler($event, node)"
@click="emitNodeClick(node, $event)"

試しにこれら二つを、テキスト(Item1とかFolder1とか)に引っ越してみました

もともとの、

@mousedown="onNodeMousedownHandler($event, node)"
@click="emitNodeClick(node, $event)"

は削除しました

//sl-vue-tree.vue

<!-- <slot name="title" :node="node">{{ node.title }}</slot> -->
     <span class="title-area"　@mousedown="onNodeMousedownHandler($event, node)　@click="emitNodeClick(node, $event)">
        <span class="title" v-bind:class="{ firstNode : node.firstNode }">
          {{ node.title }}
        </span>
      </span>

slotはなんとなくコメントアウトしました。
firstNodeとかは自分で加えたやつです。
今回は関係ないと思います。

しかし動作の結果は変わりませんでした。
したがって、おそらく問題は

onToggleHandler(event, node) {
  this.updateNode(node.path, { isExpanded: !node.isExpanded });
  this.emitToggle(node, event);
  event.stopPropagation();
}

この関数の中にある思うのですが、少し解釈が難しいです。
力をお貸しください。

Answer 1

onToggleHandler メソッド内で event.stopPropagation() が使われていますが、これだけでは click イベント以外の mouseup や mousedown といったイベントの伝搬は防げないため、.sl-vue-tree-toggle をクリックすると .sl-vue-tree-node-item に設定されている mousedown・mouseup イベントが発火し、onNodeMousedownHandler および onNodeMouseupHandler メソッドが実行されます。

.sl-vue-tree-toggle に @mouseup.stop="()=>null" @mousedown.stop="()=>null" を設定するとか、onNodeMouseupHandler メソッド内で event.target を見て選択しないようにするとか、なんらかの工夫をしなければならないと思います。もしかしたらドラッグ＆ドロップの関係でもう少し複雑なことをしなければならないかもしれませんが…。

Comments

[退会済みユーザー]

本当にいつもありがとうございます。
後で試してみます、ありがとうございました。

[退会済みユーザー]

@mouseup.stop="()=>null" @mousedown.stop="()=>null"

を使って、理想の動きができました。
すごい助かりました、ありがとうございました。