如何将Vue订单时间线模态组件改为页面常驻显示？

一、移除模态框相关冗余代码 #

因为不再需要弹窗形式，直接清理掉所有和模态框绑定的内容：

1. 删除模态框容器：把模板里的modal、modal-dialog、modal-content外层容器全部移除，只保留原modal-body内的核心时间线内容
2. 删除无用方法：删掉组件中的show()和close()方法，这两个是控制弹窗显隐的，现在完全用不上
3. 自动加载数据：添加created()钩子，页面加载完成后自动调用getHistory()拉取时间线数据，无需点击触发

二、调整模板结构为固定可见区块 #

将原来的弹窗内容改成页面常规区块，给外层容器加自定义类（比如order-timeline-section），方便后续控制布局样式。

三、移除触发点击事件 #

删掉原来的触发链接：

<a class="dropdown-item" href="javascript:;" @click="orderHistory" ><?php echo t("Timeline")?></a>  

直接把组件渲染在页面需要展示的位置即可。

修改后的完整组件代码 #

const ComponentsOrderHistory = {
props: ['ajax_url','label','order_uuid'],
data(){
    return {               
       is_loading : false,  
       data : [],
       order_status : [],
       error : []
    };
},
// 页面加载自动获取时间线数据
created(){
    this.getHistory();
},
methods :{
    getHistory(){
        this.is_loading = true;
        axios({
           method: 'put',
           url: this.ajax_url+"/getOrderHistory",
           data : {
             'YII_CSRF_TOKEN':$('meta[name=YII_CSRF_TOKEN]').attr('content'),
             'order_uuid' : this.order_uuid,
           },
           timeout: $timeout,
         }).then( response => {  
             if(response.data.code==1){             
                this.data = response.data.details.data;
                this.order_status = response.data.details.order_status;
                this.error = [];
             } else {
                this.error = response.data.msg;
                this.data = [];
                this.order_status = [];
             }
         }).catch(error => {    
            // 可在此添加错误日志，比如console.log(error)
         }).then(data => {               
             this.is_loading = false;
         });
    },
},
template: ` 
<div class="order-timeline-section">
  <h5 class="timeline-title">{{label.title}}</h5>
  
  <div v-if="is_loading" class="loading cover-loader d-flex align-items-center justify-content-center">
    <div>
      <div class="m-auto circle-loader medium" data-loader="circle-side"></div> 
    </div>
  </div>
  
  <ul class="timeline m-0 p-0 pl-5">
    <li  v-for="item in data" >
      <div class="time">{{item.created_at}}</div>
       <p v-if="order_status[item.status]" class="m-0">{{order_status[item.status]}}</p>
       <p v-else class="m-0">{{item.status}}</p>
       <p class="m-0 text-muted">{{item.remarks}}</p>
       <p v-if="item.change_by" class="m-0 text-muted">{{item.change_by}}</p>
    </li>        
  </ul>
  
  <div id="error_message" v-if="error.length>0" class="alert alert-warning mb-2" role="alert">
    <p v-cloak v-for="err in error" class="m-0">{{err}}</p>     
  </div>  
</div>
`
}

四、可选：固定位置样式调整 #

如果需要让时间线固定在页面某个区域（比如右侧），给自定义类加CSS即可：

.order-timeline-section {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 350px;
  max-height: 600px;
  overflow-y: auto;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

内容的提问来源于stack exchange，提问作者user3899237