1.vue Layout布局
通过Row组件的type="flex"启动flex布局,再通过Row组件的justify属性调整排版方式,属性值分别有
1.start 居前(默认)
2.center 居中
3.end 居后
4.space-between 分布自适应(两边–中间,两边没有空隙)
5.around (中间–两边,两边会有空隙)
<el-row type="flex" justify="end">
</el-row>
2.弹窗
怎么通过一个按钮实现可以弹出一个弹窗
首先定义一个按钮
页面
<template>
<!--调度弹窗-->
<el-dialog
:title="$t('orderProcessing.dispatch')"
:visible.sync="dispatchDialogFormVisible"
width="70%"
:append-to-body="true"
>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addDataList()">{{
$t("提交")
}}</el-button>
<el-button @click="dispatchRest()">{{ $t("取消") }}</el-button>
</div>
</el-dialog>
<div style="margin-left: 4px">
<el-button type="primary" @click="dispatch()">调度</el-button>
</div>
</template>
方法和变量
<script>
export default {
data() {
return {
dispatchDialogFormVisible: false,
};
},
methods: {
//调度跳转
dispatch() {
if (this.currentRow == null) {
this.$alert("请选择一行进行操作", "Tip", {
confirmButtonText: "确定"
});
} else {
this.dispatchDialogFormVisible = true;
this.$nextTick(() => {
this.dispatchTableData = this.currentRow;
});
}
},
//调度弹窗关闭
dispatchRest() {
this.$refs.dispatchRuleform.clearValidate();
this.dispatchForm = {};
this.dispatchDialogFormVisible = false;
},
}
}
</script>
3.锚点和折叠面板
在想要跳转的地方定义锚点 一般用id
vue页面:
<template>
<!-- 折叠面板 -->
<el-collapse v-model="activeCollapseNames" @change="collapseOnChange" style="width:70%;margin:0 auto" >
<div class="orderTitle" :id="`top`">工单详情</div>
<!-- 折叠面板1 -->
<el-collapse-item name="1" :id="`order`">
</el-collapse-item>
<!-- 折叠面板2 -->
<el-collapse-item name="2" :id="`cust`">
</el-collapse-item>
<!-- 折叠面板3 -->
<el-collapse-item name="3" :id="`file`">
</el-collapse-item>
<!-- 折叠面板4 -->
<el-collapse-item name="4" :id="`completion`">
</el-collapse-item>
<!-- 折叠面板5 -->
<el-collapse-item name="5" :id="`process`">
</el-collapse-item>
</el-collapse>
<!-- 锚点列表 -->
<div class="vip_position" >
<el-row>
<el-button @click="scollTo('order')">工单信息</el-button>
</el-row>
<el-row>
<el-button @click="scollTo('cust')">客户信息</el-button>
</el-row>
<el-row>
<el-button @click="scollTo('file')">附件信息</el-button>
</el-row>
<el-row>
<el-button @click="scollTo('completion')">竣工信息</el-button>
</el-row>
<el-row>
<el-button @click="scollTo('process')">处理过程</el-button>
</el-row>
<el-row>
<el-button @click="scollTo('top')">返回顶部</el-button>
</el-row>
</div>
</div>
</template>
方法:
<script>
export default {
name: 'OrderDetail',
data: function() {
return {
activeCollapseNames: ['1', '2', '3', '4', '5'],
}
},
methods: {
//跳转的方法
scollTo(name) {
document.querySelector(`#${name}`).scrollIntoView(true);
},
//折叠面板触发事件
collapseOnChange(event) {},
}
}
</script>
css样式
<style lang="scss" >
.vip_position{
font: 20px "微软雅黑";
color: black;
/*右侧中间定位*/
position: fixed;
top: 45vh;
right: 1px;
/*垂直水平居中*/
text-align: center;
/* 鼠标移动到div变小手*/
cursor:pointer;
}
</style>