console 命令行工具 X clear

console

new Vue({
    el: '#app',
    data() {
        return {
            startIndex: 0,
            list: []
        };
    },
    created() {
        for (let i = 0; i < 10000; i++) {
            this.list.push({
                id: 1,
                name: 'name' + i,
                createTime: '2018-09-09'
            })
        }
    },
    computed: {
        limitCount() {
            return 300 / 40 + 2;
        },
        splitData() {
            return this.list.slice(this.startIndex, this.startIndex + this.limitCount)
        }
    },
    methods: {
        scroll() {
            // 根据滚动的距离，估算出这个滚动位置对应的数组序列，例如滚动100px，每条40px，对应第3条
            let scrollTop = this.$refs.scrollDom.scrollTop;
            this.startIndex = Math.floor(scrollTop / 40);
        }
    },

})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Floating Footer Demo</title>
  <!-- 引入Vue2 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入Element UI图标 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <floating-footer 
      :visible.sync="footerVisible"
      :default-collapsed="false"
      @collapse-change="handleCollapseChange"
    >
      <template #icon>
        <img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" alt="custom icon" class="icon-img">
      </template>
      
      <div>这里是主要内容区域</div>
      <template #footer>
        <button @click="footerVisible = false">关闭</button>
      </template>
    </floating-footer>
    
    <button @click="toggleCollapses">切换底部栏222</button>
  </div>

  <script>
    // 组件定义
    Vue.component('floating-footer', {
      template: `
        <transition name="footer-fade">
          <div class="floating-footer" v-show="visible">
            <div class="footer-left">
              <div class="footer-toggle" @click="toggleCollapse">
                <i :class="iconClass"></i>
              </div>
              <div class="footer-icon" v-show="!collapsed">
                <slot name="icon">
                  <img src="https://cdn-icons-png.flaticon.com/512/25/25694.png" alt="icon" class="icon-img">
                </slot>
              </div>
            </div>
            <div class="footer-content">
              <slot></slot>
              <slot name="footer"></slot>
            </div>
          </div>
        </transition>
      `,
      props: {
        visible: {
          type: Boolean,
          default: true
        },
        defaultCollapsed: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
          collapsed: this.defaultCollapsed
        }
      },
      computed: {
        iconClass() {
          return this.collapsed ? 'el-icon-caret-right' : 'el-icon-caret-left'
        }
      },
      methods: {
        toggleCollapse() {
          this.collapsed = !this.collapsed
          this.$emit('collapse-change', this.collapsed)
        }
      }
    })

    // 应用实例
    new Vue({
      el: '#app',
      data: {
        footerVisible: true
      },
      methods: {
        handleCollapseChange(val) {
          console.log('当前折叠状态:', val)
        },
        toggleCollapses{
            alert(1)
            this.footerVisible = !this.footerVisible
        },
      }
    })
  </script>

  <style>
    /* 全局样式 */
    body {
      margin: 0;
      padding: 20px;
      height: 150vh; /* 为了演示滚动 */
    }

    /* 组件样式 */
    .floating-footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      min-height: 60px;
      background: #fff;
      box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      padding: 0 40px 0 0;
      transition: all 0.3s;
      z-index: 1000;
    }

    .footer-left {
      display: flex;
      align-items: center;
      height: 100%;
      margin-right: auto;
    }

    .footer-toggle {
      width: 28px;
      height: 28px;
      background: #f7f7f7;
      border-radius: 0 0 8px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 4px;
      box-shadow: 0 1px 5px rgba(0,0,0,0.03);
    }

    .footer-icon {
      margin-right: 10px;
    }

    .icon-img {
      width: 32px;
      height: 32px;
    }

    .footer-content {
      flex: 1;
      overflow-x: auto;
      min-width: 0;
      padding: 0 16px;
    }

    /* 过渡动画 */
    .footer-fade-enter-active, .footer-fade-leave-active {
      transition: opacity 0.35s, transform 0.3s;
    }
    .footer-fade-enter, .footer-fade-leave-to {
      opacity: 0;
      transform: translateY(20px);
    }

    /* 按钮样式 */
    button {
      padding: 8px 16px;
      background: #409eff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</body>
</html>

        .content-inner {
            display: flex;
        }
        .content-center {
            /* display: flex */
        }
        .dw-mian {
            display: flex
        }