JSFiddle - React, Tailwind, and code Playground

by abernov

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<!--
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
-->
<script src="https://rawgit.com/abernov/element/tree-dist/lib/index.js"></script>

<div id="app">
  <el-tree 
    ref="tree"
    :expand-on-click-node="false"
    :props="props1"
    :load="loadNode1"
    draggable
    lazy="" show-checkbox>
  </el-tree>
  <div>
    <el-button @click="showNodeInfo">Show current node</el-button>
    <el-button @click="appendFolder">Appent folder to current</el-button>
    <el-button @click="appendFile">Appent file to current</el-button>
  </div>
  <div>
    <el-button @click="closeNode">Close current</el-button>
    <el-button @click="deleteNode">Delete current</el-button>
  </div>
  
  <div style="width:50%; display:inline-block;">
        <textarea  style="height:300px; width:100%;">
        {{data4}}
        </textarea>
  </div>  
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
    data() {
      return {
        props1: {
          label: 'name',
          isLeaf: 'leaf'
        },
        fileIdx: 2,
        folderIdx: 0,
        data4: ''
      };
    },
    methods: {
    showNodeInfo() {
        const node = this.$refs.tree.store.getCurrentNode()
         if (node) {
//           console.log(node)
           let childNodes = node.childNodes
           let data =  (node.data) ? node.data : null
           let NchildNodes =  []
           if (childNodes) {
            for (let i =0; i < childNodes.length; i++) {
              NchildNodes.push(childNodes[i].data.name)
            }
           }
           let parent = node.parent ? node.parent.label : null
           this.data4 = {
             node: {
              parent: parent,
              IsLeaf: node.isLeaf,
              loaded: node.loaded,
              childNodes: NchildNodes,
              data: data
             }
           }
         } else {
            this.data4 = 'No node selected!'
         }
      },
      appendFolder() {
         const parent = this.$refs.tree.store.getCurrentNode()
         if (parent) {
           ++this.folderIdx
           let name = 'folder' + this.folderIdx
           this.$refs.tree.append({ name: name }, parent )
         }
      },
      appendFile() {
         const parent = this.$refs.tree.store.getCurrentNode()
         if (parent) {
           ++this.fileIdx
           let name = 'file' + this.fileIdx
           this.$refs.tree.append({ name: name, leaf: true }, parent )
         }
      },
      closeNode() {
         console.log('closeNode')
         const node = this.$refs.tree.store.getCurrentNode()
         if (node) {
           node.close()
         }
      },
      deleteNode() {
         const node = this.$refs.tree.store.getCurrentNode()
         if (node) {
           node.remove()
         }
      },
      loadNode1(node, resolve) {
        console.log('loadNode ');
        if (node.level === 0) {
         ...