vue3-js-panel

Documentation

based on the vue-js-panel you can check out the docs.
Demo.

install

npm install --save vue3-js-panel

這是Vue3的版本，因為原本的this.$slots.default[0].elm在vue3上會拿到undefined所以改寫法， 解法可以參考Vue 中怎样获取具名 slot 的 DOM 节点

---

example

個別註冊

<template>
  <img alt="Vue logo" src="./assets/logo.png">

  <div>
    <button @click="triggerPanel">open panel</button>
  </div>

  <JsPanel :visible="obj.show" :options="options" @close="obj.show = false">
    <div>123 My awesome content</div>
  </JsPanel>
</template>

<script setup>
import { reactive } from 'vue'
import { JsPanel } from 'vue3-js-panel'
import 'jspanel4/dist/jspanel.min.css'

const obj = reactive({
  show: false
})
const options = {
  headerTitle: 'Aesome Panel'
}
const triggerPanel = () => {
  obj.show = true
}
</script>

全域註冊

import { createApp } from 'vue'
import App from './App.vue'

import Vue3JsPanel  from 'vue3-js-panel'
import 'jspanel4/dist/jspanel.min.css'

const app = createApp(App)

app.use(Vue3JsPanel)
app.mount('#app')

<template>
  <img alt="Vue logo" src="./assets/logo.png">

  <div>
    <button @click="triggerPanel">open panel</button>
  </div>

  <JsPanel :visible="obj.show" :options="options" @close="obj.show = false">
    <div>123 My awesome content</div>
  </JsPanel>
</template>

<script setup>
import { reactive } from 'vue'

const obj = reactive({
  show: false
})
const options = {
  headerTitle: 'Aesome Panel'
}
const triggerPanel = () => {
  obj.show = true
}
</script>

---

多開範例

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <h1>vue3-js-panel</h1>

  <button
    v-for="item in testPanelArray"
    :key="item.id"
    @click="triggerPanel(item)"
  >
    open {{ item.content }}
  </button>

  <JsPanel
    v-for="item in testPanelArray"
    :key="item.id"
    :visible="item.visible"
    :options="item.options"
    @close="item.visible = false"
  >
    <div>{{item.content}}</div>
  </JsPanel>
</template>

<script setup>
import { reactive } from 'vue'
import { JsPanel } from 'vue3-js-panel'
import 'jspanel4/dist/jspanel.min.css'

const testPanelArray = reactive([
  {
    id: 'a-content',
    content: 'A panel content',
    visible: false,
    options: {
      headerTitle: 'A Panel'
    }
  },
  {
    id: 'b-content',
    content: 'B panel content',
    visible: false,
    options: {
      headerTitle: 'B Panel'
    }
  },
  {
    id: 'c-content',
    content: 'C panel content',
    visible: false,
    options: {
      headerTitle: 'C Panel'
    }
  }
])

const triggerPanel = (item) => {
  item.visible = true
}
</script>

---

headerToolbar slot

<JsPanel :visible="obj.show" :options="options" @close="obj.show = false">
  <div>123 My awesome contentAA</div>

  <template v-slot:headerToolbar>
    <div class="custom-header-toolbar">
      <span>File</span> <span>Edit</span> <span>About</span>
    </div>
  </template>
</JsPanel>

---

這是配合slot的用法

template v-slot的default對應到jsPanel.vue的template的ref跟name也對應到content 如果將default改為testDefault，ref、name、content這三處也要把default改為testDefault

<JsPanel
  v-for="panel in panels"
  :key="panel.component + '-' + panel.id"
  :options="panel.options"
  :visible="panel.show"
  @close="show = false"
>
  <template v-slot:default>
    <component
      :is="panel.component"
    />
  </template>
</JsPanel>

// jsPanel.vue
<template>
  <div v-if="visible" ref="default">
    <slot name="default"/>
    <slot
      v-if="false"
      name="headerToolbar"
    />
  </div>
</template>

{ content: this.$refs.default },