Docker自定义网络和运行时指定IP

Docker 默认网络

Docker安装后,默认会创建下面三种网络类型:

1
2
3
4
5
$ docker network ls
NETWORK ID     NAME        DRIVER       SCOPE
9781b1f585ae    bridge       bridge       local
1252da701e55    host        host        local
237ea3d5cfbf    none        null        local

启动 Docker的时候,用 --network 参数,可以指定网络类型,如:

1
~ docker run -itd --name test1 --network bridge --ip 172.17.0.10 centos:latest /bin/bash

bridge:桥接网络

默认情况下启动的Docker容器,都是使用 bridge,Docker安装时创建的桥接网络,每次Docker容器重启时,会按照顺序获取对应的IP地址,这个就导致重启下,Docker的IP地址就变了

none:无指定网络

使用 --network=none ,docker 容器就不会分配局域网的IP

host: 主机网络

使用 --network=host,此时,Docker 容器的网络会附属在主机上,两者是互通的。

例如,在容器中运行一个Web服务,监听8080端口,则主机的8080端口就会自动映射到容器中。

创建自定义网络:(设置固定IP)

启动Docker容器的时候,使用默认的网络是不支持指派固定IP的,如下:

1
2
3
~ docker run -itd --net bridge --ip 172.17.0.10 centos:latest /bin/bash
6eb1f228cf308d1c60db30093c126acbfd0cb21d76cb448c678bab0f1a7c0df6
docker: Error response from daemon: User specified IP address is supported on user defined networks only.

因此,需要创建自定义网络,下面是具体的步骤:

步骤1: 创建自定义网络

创建自定义网络,并且指定网段:172.18.0.0/16

1
2
3
4
5
6
7
➜ ~ docker network create --subnet=172.18.0.0 /16 mynetwork
➜ ~ docker network ls
NETWORK ID     NAME        DRIVER       SCOPE
9781b1f585ae    bridge       bridge       local
1252da701e55    host        host        local
4f11ae9c85de    mynetwork      bridge       local
237ea3d5cfbf    none        null        local

步骤2: 创建Docker容器

 ~ docker run -itd --name networkTest1 --net mynetwork --ip 172.18.0.2 centos:latest /bin/bash

这个时候,创建的Docker容器就会持有 172.18.0.2 这个IP.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[root@ec8e31938fe7 /] # ifconfig
eth0   Link encap:Ethernet HWaddr 02:42:AC:12:00:02
      inet addr:172.18.0.2 Bcast:0.0.0.0 Mask:255.255.0.0
      inet6 addr: fe80::42:acff:fe12:2 /64 Scope:Link
      UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
      RX packets:88 errors:0 dropped:0 overruns:0 frame:0
      TX packets:14 errors:0 dropped:0 overruns:0 carrier:0
      collisions:0 txqueuelen:0
      RX bytes:4056 (3.9 KiB) TX bytes:1068 (1.0 KiB)
 
lo    Link encap:Local Loopback
      inet addr:127.0.0.1 Mask:255.0.0.0
      inet6 addr: ::1 /128 Scope:Host
      UP LOOPBACK RUNNING MTU:65536 Metric:1
      RX packets:0 errors:0 dropped:0 overruns:0 frame:0
      TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
      collisions:0 txqueuelen:1
      RX bytes:0 (0.0 b) TX bytes:0 (0.0 b)

链接

Docker Container Networking

为Docker容器指定自定义网段的固定IP/静态IP地址


在vue2中el-popover失效,刷新页面后正常显示,el-popover在子组件中,子组件中部分代码:<p v-if="!userName"> <el-popover placement="bottom-start" trigger="hover"> <div class="nav-game"> <ul> <li><el-button class="nav-avatar" type="primary" @click="gotoLogin()">登录</el-button></li> <li><el-link class="nav-avatar" type="primary" @click="gotoRegister()">用户注册</el-link></li> </ul> </div> <el-avatar slot="reference" size="medium" icon='el-icon-user-solid' src="https://i0.hdslb.com/bfs/face/9e684120bdf30f9c7130de8b3f3b004e589f46ef.jpg@96w_96h_1c.webp" ></el-avatar> </el-popover> </p> <p v-else> <el-popover placement="bottom-start" trigger="hover"> <div class="nav-game"> <ul> <li class="nav-a-text"> 用户名:{{ userInfo.name }} </li> <li class="nav-a-text"> id:{{ userInfo.u_id }} </li> <li> <el-menu :default-active="activeIndex" class="el-menu-demo nav-a-item" mode="horizontal" @select="handleSelect"> <el-menu-item index="1" style="border-bottom:none;"> <h3 class="nav-a-num">{{ userInfo.like_num }}</h3> <p class="nav-a-word">点赞</p> </el-menu-item> <el-menu-item index="2"> <h3 class="nav-a-num">{{ userInfo.fans_num }}</h3> <p class="nav-a-word">粉丝</p> </el-menu-item> <el-menu-item index="3"> <h3 class="nav-a-num">{{ userInfo.issue_num }}</h3> <p class="nav-a-word">作品</p> </el-menu-item> </el-menu> </li> <li> <el-menu class="el-menu-vertical-demo" :router="true" style="margin-top: 20px; border-right: none;"> <el-menu-item index="/center"> <i class="el-icon-user" style="color: blue"></i> <span slot="title" class="nav-a-affair">个人中心</span> </el-menu-item> <el-menu-item index="/center"> <i class="el-icon-tickets" style="color: blue"></i> <span slot="title" class="nav-a-affair">稿件中心</span> </el-menu-item> <div style="width: 100%;height: 2px;background-color: gray;"></div> <el-menu-item index="" @click="logout()"> <i class="el-icon-close" style="color: blue"></i> <span slot="title" class="nav-a-affair">退出登入</span> </el-menu-item> </el-menu> </li> </ul> </div> <div slot="reference"> <Avatar :asize="40"></Avatar> </div> </el-popover>
03-30
<think>嗯,用户在使用Vue2的候遇到了el-popover在子组件中失效,但刷新页面后又正常显示的问题。首先,我需要仔细看一下用户提供的代码片段,看看有没有明显的错误或者可能导致问题的原因。 首先,用户的条件渲染部分用了v-ifv-else,这里可能存在切换el-popover没有正确销毁或重新初始化的情况。Vue的v-if指令在条件变化会销毁重新创建组件,可能导致内部状态丢失。比如,当userName从false变为true,原来的el-popover会被销毁,新的会被创建,但可能在这个过程中某些事件监听没有正确绑定,导致hover触发不了。 然后,检查用户代码中的el-popover结构。注意到在v-else块里的el-popover,其slot="reference"对应的元素是自定义的Avatar组件。这候需要确认Avatar组件是否正确渲染,并且能够触发hover事件。有候,如果子组件内部的元素没有正确传递事件,可能会导致trigger="hover"失效。例如,如果Avatar组件内部没有正确处理鼠标事件,那么hover可能无法触发el-popover的显示。 另外,用户提到刷新页面后正常,这说明问题可能出现在动态切换的候。可能是在组件初次渲染,el-popover能正确绑定事件,但在条件切换后,新的el-popover没有正确初始化。这候可能需要强制重新渲染组件,或者使用v-key来管理条件渲染的元素的重新创建。 还有一种可能是Element UI的版本问题。某些旧版本的el-popover可能存在bug,在动态渲染表现不稳定。建议用户检查Element UI的版本,并尝试升级到最新版本,看是否能解决问题。 此外,代码中的el-menu组件嵌套在el-popover内部,可能存在层级或样式冲突,导致el-popover的位置计算错误。可以尝试调整样式,确保弹出层不受父容器溢出隐藏或其他布局影响。 最后,用户可能需要使用Vue的nextTick方法,在userName状态变化后等待DOM更新完成,再重新初始化el-popover的相关事件。或者,使用this.$forceUpdate()强制组件重新渲染,以修复状态不一致的问题。 总结下来,可能的解决方案包括:检查条件渲染导致的销毁重新初始化问题,确保Avatar组件正确传递事件,升级Element UI版本,使用v-key强制重新渲染,调整样式避免布局问题,以及使用nextTick或forceUpdate来确保DOM更新后的正确行为。</think>在 Vue2 中遇到 `el-popover` 失效但刷新后正常的问题,通常由以下原因解决方案构成: --- ### 一、问题核心原因分析 从代码片段看,`v-if` 条件渲染可能导致 **组件销毁/重建未正确触发 Popover 的挂载机制**,具体表现为: 1. **`v-if` 切换导致 DOM 重新渲染**,但 Popover 的 `reference` 元素事件监听未正确绑定 2. **异步数据加载延迟** 导致 Popover 初始化机异常 3. **ElementUI 版本兼容性问题** --- ### 二、分步解决方案 #### 方案 1:强制重新渲染组件(推荐) ```html <!-- 在 v-if/v-else 外层添加 key 强制销毁重建 --> <p v-if="!userName" key="unlogin"> <el-popover>...</el-popover> </p> <p v-else key="logined"> <el-popover>...</el-popover> </p> ``` #### 方案 2:手动控制 Popover 显示 ```javascript // 在数据更新后手动触发 this.$nextTick(() => { // 通过 ref 调用 Popover 方法 this.$refs.popover.doShow() }) ``` #### 方案 3:检查 Avatar 组件事件传递 ```html <!-- 确保自定义组件能传递鼠标事件 --> <div slot="reference" @mouseenter="handleMouseEnter"> <Avatar :asize="40"></Avatar> </div> ``` --- ### 三、关键代码优化建议 1. **升级 ElementUI 版本** ```bash npm install element-ui@latest --save ``` 2. **调整 Popover 挂载位置** ```html <el-popover placement="bottom-start" trigger="hover" popper-append-to-body <!-- 避免被父容器裁剪 --> > ``` 3. **添加状态监听** ```javascript watch: { userName(newVal) { this.$nextTick(() => { // 手动更新 Popover 实例 }) } } ``` --- ### 四、典型错误排查点 1. **`slot="reference"` 层级问题**:确保触发元素直接作为 `el-popover` 的子元素 2. **样式覆盖导致定位异常**:检查是否父元素有 `overflow:hidden` 3. **Vue 生命周期序问题**:在 `mounted` 而非 `created` 阶段操作 DOM --- ### 五、完整修正示例 ```html <template> <div> <p v-if="!userName" key="guest"> <el-popover placement="bottom-start" trigger="hover" popper-append-to-body > <!-- 弹窗内容 --> <el-avatar slot="reference"></el-avatar> </el-popover> </p> <p v-else key="user"> <el-popover ref="userPopover" placement="bottom-start" trigger="hover" popper-append-to-body > <!-- 弹窗内容 --> <div slot="reference" @mouseenter="handleHover"> <Avatar :asize="40"/> </div> </el-popover> </p> </div> </template> <script> export default { methods: { handleHover() { this.$nextTick(() => { this.$refs.userPopover.doShow() }) } } } </script> ``` --- ### 六、延伸建议 - 使用 **Vue Devtools** 检查组件渲染状态 - 在 CSS 中添加调试样式:`border: 1px solid red` 观察元素布局 - 对于复杂场景建议改用 **`<el-tooltip>`** 或 **`<el-dropdown>`** 通过上述步骤可系统性解决 Popover 显示异常问题,建议优先尝试方案1+方案3的组合策略。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值