C4-Model Container

本文章描述基于 C4-Model + PlantUML + VSCode 开发设计软件架构,相关环境搭建参看:C4-Model 开发环境搭建

1. Container

在这里插入图片描述

函数名Container($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
参数
alias(必须)定义Person的一个别名,用于后续设计的调用
label(必须)用于定义在图形上显示的标签, 可以使用字符串,也可以直接输入
techn为容器增加技术栈,如 [C/C++] [JS/TS]
descr增加对Container的详细描述
sprite为容器增加图标,C4 容器默认无图标
tags增加一个自定义的 tag, 默认tag为 Container
link增加一个链接,实现点击跳转的功能

2. ContainerDb

在这里插入图片描述

函数名ContainerDb($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
参数参见:Container

3. ContainerQueue

在这里插入图片描述

函数名ContainerQueue($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
参数参见:Container

4. Container_Ext

在这里插入图片描述

函数名Container_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
参数参见:Container

5. ContainerDb_Ext

在这里插入图片描述

函数名ContainerDb_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
参数参见:Container

6. ContainerQueue_Ext

在这里插入图片描述

函数名ContainerQueue_Ext($alias, $label, $techn="", $descr="", $sprite="", $tags="", $link="")
参数参见:Container

7. Container_Boundary

在这里插入图片描述

函数名Container_Boundary($alias, $label, $tags="", $link="")
参数参见:Container

8. AddContainerTag

在这里插入图片描述

函数名AddContainerTag ( $tagStereo, $bgColor=$CONTAINER_BG_COLOR, $fontColor=$ELEMENT_FONT_COLOR, $borderColor=$CONTAINER_BORDER_COLOR, $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="")
参数
tagStereo(必须)设置一个标签的名称,用于后续的调用与显示,设置值为显示值
bgColor设置容器的背景颜色
fontColor设置容器的字体颜色
borderColor设置边框的颜色
shadowing是否显示阴影,true 或者 false
shape 为容器设置一个图标,
默认为直角
roundedBox 圆角
eightSided 斜角
sprite 设置一个图标
techn为容器增加一个技术栈,如果在容器定义中重新声明则显示容器中的定义
legendText设置在图例中显示的标题
legendSprite设置一个在图例中显示的图标,默认为上面参数sprite设置的图标

9. AddExternalContainerTag

在这里插入图片描述

函数名AddExternalContainerTag( $tagStereo, $bgColor=$CONTAINER_BG_COLOR, $fontColor=$ELEMENT_FONT_COLOR, $borderColor=$CONTAINER_BORDER_COLOR, $shadowing="", $shape="", $sprite="", $techn="", $legendText="", $legendSprite="")
参数参见:AddContainerTag

10. 代码示例

@startuml
' 定义宏 RELATIVE_INCLUDE 指定 C4-PlantUML 仓库
!define RELATIVE_INCLUDE /Users/xxx/C4-PlantUML
!include RELATIVE_INCLUDE/C4_Container.puml
' 引用 office 标准裤,扩展图标
' https://github.com/plantuml/plantuml-stdlib/tree/master/office
!include <office/Clouds/cloud>
!include <office/Servers/application_server> 
!include <office/Servers/3rd_party_mail_server>
!include <office/Sites/my_site>
' 隐藏标签
HIDE_STEREOTYPE()
AddContainerTag("云端", $shadowing=true, $sprite="cloud", $shape="roundedBox", $techn="mysql", $legendText="云",$legendSprite="")
AddContainerTag("APP服务器", $shadowing=true, $sprite="application_server", $shape="roundedBox", $techn="Java", $legendText="APP服务器",$legendSprite="")
AddContainerTag("第三方服务器", $shadowing=true, $bgColor=$EXTERNAL_CONTAINER_BG_COLOR, $sprite="3rd_party_mail_server", $shape="roundedBox", $techn="Java", $legendText="第三方服务器",$legendSprite="")
AddContainerTag("客户端应用", $shadowing=true, $sprite="my_site", $shape="", $techn="C/C++", $legendText="客户端",$legendSprite="")

ContainerDb(cloud, "云端", $descr="数据备份与存储", $tags="云端")
Container_Boundary(server, "本地服务器"){
    Container(server_app, "APP服务器",, $descr="APP1的服务器", $tags="APP服务器")
    ContainerQueue(app_Queue, "APP数据队列服务器",, $descr="APP1的服务器", $tags="APP服务器")
}
Container_Ext(3rd_app_server, "第三方服务器",, $descr="第三方服务器,提供第三方功能支持", $tags="第三方服务器")
Container(pc_app, "电脑应用程序",, $descr="客户交互界面", $tags="客户端应用")
Rel_Neighbor(cloud, 3rd_app_server, "备份数据", "http/RestAPI")
BiRel_U(server_app, cloud, "获取云端数据", "http/RestAPI")
BiRel_U(pc_app, server_app, "获取服务器数据", "http/RestAPI")
Rel_U(pc_app, 3rd_app_server, "获取数据", "http/RestAPI")
Rel_R(server_app, app_Queue,"数据队列","FIFO")
SHOW_LEGEND()
@enduml

在这里插入图片描述

好的,下面是一个仿 Element UI 中 el-select 组件的实现方案。 首先,我们可以创建一个 Select 组件,包含以下几个部分: 1. 输入框:用于显示当前选中的选项或输入搜索关键词。 2. 下拉菜单:用于展示所有可选项。 3. 多选/单选按钮:用于切换多选和单选模式。 4. 清除按钮:用于清除已选中的选项。 下面是 Select 组件的基本代码: ```html <template> <div class="select" :class="{ 'is-multiple': isMultiple, 'is-focus': isFocus }"> <div class="input-container" @click="toggleMenu"> <div class="input" :class="{ 'is-placeholder': !selectedOptions.length }"> <span class="selected-label" v-if="selectedOptions.length"> <span v-for="(option, index) in selectedOptions" :key="index" class="el-tag el-tag--info">{{ option.label }}</span> </span> <input type="text" class="input-field" v-model="searchKeyword" :placeholder="placeholder" :readonly="!filterable" @focus="isFocus = true" @blur="isFocus = false"> </div> <i class="el-select__caret el-input__icon el-icon-arrow-up" :class="{ 'el-icon-arrow-down': !isMenuOpen }"></i> </div> <transition name="el-zoom-in-top"> <ul class="options" v-show="isMenuOpen"> <li v-for="(option, index) in filteredOptions" :key="index" @click="selectOption(option)"> <span class="option-label">{{ option.label }}</span> <i class="el-icon-check" v-if="isSelected(option)"></i> </li> <li v-if="!filteredOptions.length" class="no-data">{{ noDataText }}</li> </ul> </transition> <div class="el-select__tags" v-if="isMultiple"> <span v-for="(option, index) in selectedOptions" :key="index" class="el-tag el-tag--info"> {{ option.label }} <i class="el-tag__close el-icon-close" @click.stop="removeOption(option)"></i> </span> </div> <div class="el-select__actions" v-if="isMultiple && allowClear"> <span class="el-select__clear" @click="clearSelection"> <i class="el-select__clear-icon el-icon-circle-close"></i> </span> </div> </div> </template> <script> export default { name: 'Select', props: { options: { type: Array, required: true }, value: { type: [Object, Array], default: null }, placeholder: { type: String, default: '请选择' }, multiple: { type: Boolean, default: false }, filterable: { type: Boolean, default: false }, allowClear: { type: Boolean, default: false }, noDataText: { type: String, default: '无匹配数据' } }, data () { return { selectedOptions: [], searchKeyword: '', isMenuOpen: false, isFocus: false } }, computed: { isMultiple () { return this.multiple || Array.isArray(this.value) }, filteredOptions () { return this.options.filter(option => option.label.includes(this.searchKeyword)) }, selectedValues () { return this.selectedOptions.map(option => option.value) } }, watch: { value (newValue) { if (!this.isMultiple) { const selectedOption = this.options.find(option => option.value === newValue) this.selectedOptions = selectedOption ? [selectedOption] : [] } else { this.selectedOptions = this.options.filter(option => newValue.indexOf(option.value) !== -1) } }, selectedOptions (newSelectedOptions) { if (!this.isMultiple) { const newValue = newSelectedOptions.length ? newSelectedOptions[0].value : null this.$emit('input', newValue) this.$emit('change', newValue) } else { const newValue = newSelectedOptions.map(option => option.value) this.$emit('input', newValue) this.$emit('change', newValue) } } }, methods: { toggleMenu () { if (!this.disabled) { this.isMenuOpen = !this.isMenuOpen } }, selectOption (option) { if (!this.isMultiple) { this.selectedOptions = [option] this.isMenuOpen = false } else { const index = this.selectedOptions.indexOf(option) if (index !== -1) { this.selectedOptions.splice(index, 1) } else { this.selectedOptions.push(option) } } }, removeOption (option) { const index = this.selectedOptions.indexOf(option) if (index !== -1) { this.selectedOptions.splice(index, 1) } }, clearSelection () { this.selectedOptions = [] }, isSelected (option) { return this.selectedValues.indexOf(option.value) !== -1 } } } </script> <style scoped> .select { position: relative; display: inline-block; width: 200px; font-size: 14px; color: #606266; background-color: #fff; border: 1px solid #dcdfe6; border-radius: 4px; cursor: pointer; } .select.is-multiple .input { display: flex; flex-wrap: wrap; align-items: center; padding: 0 10px; } .select.is-multiple .el-select__tags { display: flex; flex-wrap: wrap; padding: 5px 0; } .select.is-multiple .el-tag { margin-right: 10px; margin-bottom: 5px; font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select.is-multiple .el-tag__close { margin-left: 5px; cursor: pointer; } .select.is-multiple .el-select__actions { display: flex; align-items: center; height: 34px; padding-right: 10px; } .select.is-multiple .el-select__clear { margin-right: 5px; font-size: 12px; color: #c0c4cc; cursor: pointer; } .select.is-multiple .el-select__clear:hover { color: #909399; } .select.is-focus { border-color: #409EFF; box-shadow: 0 2px 6px rgba(0,0,0,.2); } .select.is-focus .el-select__caret { color: #409EFF; } .select .input-container { display: flex; align-items: center; height: 34px; padding: 0 10px; } .select .input { display: flex; align-items: center; height: 100%; flex: 1; overflow: hidden; } .select .input.is-placeholder .input-field { color: #c0c4cc; } .select .input .selected-label { display: flex; flex-wrap: wrap; align-items: center; margin-right: 5px; } .select .input .selected-label .el-tag { margin-right: 5px; margin-bottom: 5px; font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select .input .input-field { flex: 1; border: none; outline: none; margin-right: 5px; font-size: 14px; line-height: 1; background-color: transparent; } .select .el-select__caret { color: #dcdfe6; font-size: 12px; transition: all .3s; } .select .el-select__caret.el-icon-arrow-up { transform: rotate(-180deg); } .select .options { position: absolute; top: 100%; left: 0; z-index: 99; width: 100%; max-height: 250px; margin: 0; padding: 6px 0; background-color: #fff; border: 1px solid #dcdfe6; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 2px 6px rgba(0,0,0,.2); overflow-y: auto; } .select .options::-webkit-scrollbar { width: 6px; } .select .options::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.2); border-radius: 3px; } .select .options li { padding: 6px 12px; font-size: 14px; color: #606266; white-space: nowrap; cursor: pointer; } .select .options li:hover { background-color: #f5f5f5; } .select .options li .option-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .select .options li .el-icon-check { margin-left: 5px; color: #409EFF; } .select .options li .el-icon-check.disabled { color: #c0c4cc; } .select .options li.no-data { text-align: center; color: #c0c4cc; } </style> ``` 上面的代码中,props 中的 options 数组包含了所有可选项,每个选项由 label 和 value 两个属性组成。搜索关键词通过 v-model 绑定到 input 输入框中,并且通过 @focus 和 @blur 事件实现了输入框的聚焦和失焦效果。下拉菜单的显示和隐藏通过 v-show 和 isMenuOpen 控制。选中的选项通过 selectedOptions 数组保存,selectOption 方法用于切换选项的选中状态。 如果您需要支持多选功能,可以将 multiple 属性设置为 true。此时,Select 组件会显示一个 el-select__tags 区域,用于展示已选中的选项。同时,也会显示一个 el-select__actions 区域,用于实现清除已选中的选项功能。如果您需要支持清除已选中的选项功能,可以将 allowClear 属性设置为 true。 希望这个仿 Element UI 中 el-select 组件的实现方案可以帮助到您。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值