tiny-engine/packages/common/component/BlockDescription.vue

50 lines
1.1 KiB
Vue

<template>
<meta-description class="description" type="warning">
<template #content>
<div @click="openBlockSetting" class="setting-block"><span class="add-icon">+</span>设置区块暴露属性</div>
</template>
</meta-description>
</template>
<script>
import { useLayout, useBlock } from '@opentiny/tiny-engine-controller'
import MetaDescription from './MetaDescription.vue'
export default {
components: {
MetaDescription
},
setup() {
const { getCurrentBlock } = useBlock()
const { PLUGIN_NAME, activePlugin } = useLayout()
const openBlockSetting = () => {
activePlugin(PLUGIN_NAME.BlockManage).then((api) => {
api.openSettingPanel({ item: getCurrentBlock() })
})
}
return {
openBlockSetting
}
}
}
</script>
<style lang="less" scoped>
.description {
border-color: var(--ti-lowcode-description-color);
.setting-block {
cursor: pointer;
}
.add-icon {
padding: 0 3px;
margin: 0 5px;
color: var(--ti-lowcode-toolbar-icon-color);
border-radius: 50%;
background-color: var(--ti-lowcode-description-color);
}
}
</style>