vue3-js-panel
v0.1.14
Published
A Vue component for jsPanel, base on vue-js-panel https://www.npmjs.com/package/vue-js-panel
Downloads
27
Readme
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 },