sk5212121 2023-02-14 10:11 采纳率: 10%
浏览 68

关于#javascript#的问题：蓝色节点位于屏幕水平居中位置，下面子节点怎么根据蓝色节点，像图中节点一样（下面子节点的个数是不确定的）

请教大家个问题，蓝色节点位于屏幕水平居中位置，下面子节点怎么根据蓝色节点，计算他的位置啊，像图中节点一样（下面子节点的个数是不确定的）

img

  • 写回答

1条回答 默认 最新

  • 球球和皮皮 2023-02-14 11:40
    关注

    img


    给你提供个思路，具体就不写了
    （1）、创建一个组件，由父组件传入位置信息和数组信息，位置信息读取节点距离屏幕的位置就行。
    （2）、使用el-col组件，宽度支持传入参数自适应变化，把数组的长度传进去，就实现了自适应变化。
    （3）、el-col里写个div，样式自己随便写。
    代码如下：

    <html>
   <head>
      <title>VueJs 在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
       <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
   </head>
    <style>
        .bg-purple {
            border: 1px solid black;
        }
    </style>
   <body>
      <div id = "intro">
          <el-row :gutter="2">
            <el-col :span="24/allArr.length" v-for="item in allArr" :key="item.id">
              <div class="bg-purple" align="center">
                  {{item.title}}
              </div>
            </el-col>
          </el-row>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: '我的第一个VueJS任务',
               allArr: [
                   {
                       id: 1,
                    title: "是"
                   },
                   {
                       id: 2,
                    title: "否"
                   }
               ]
            }
         });
      </script>
   </body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 2月14日

悬赏问题

  • ¥20 Wpf Datarid单元格闪烁效果的实现
  • ¥15 图像分割、图像边缘提取
  • ¥15 sqlserver执行存储过程报错
  • ¥100 nuxt、uniapp、ruoyi-vue 相关发布问题
  • ¥15 浮窗和全屏应用同时存在，全屏应用输入法无法弹出
  • ¥100 matlab2009 32位一直初始化
  • ¥15 Expected type 'str | PathLike[str]…… bytes' instead
  • ¥15 三极管电路求解，已知电阻电压和三级关放大倍数
  • ¥15 ADS时域 连续相位观察方法
  • ¥15 Opencv配置出错