编辑展开关闭操作

abcdef_520

已于 2022-05-27 10:54:17 修改

阅读量106

点赞数

文章标签：前端 javascript html

于 2022-05-23 09:04:03 首次发布

本文链接：https://blog.csdn.net/abcdef_520/article/details/124915040

版权

//控制面板里面写基本信息 
//第一层服务器信息点击是自己默认设置一个  第二层是后端返回的isOpen
 <div class="examples-tab-panel">
            <sf-tab-panel :active-item="0">
                <sf-tab-item title="基本信息">
                    <div class="tab-content">
                    //changeEdit是否触发edit编辑
                        <span class="edit" @click="changeEdit"> <i class="sf-comp-iconfont icon-comp-edit"></i>
                            编辑
                        </span>
                        <sf-form :label-width="200" ref="basicForm">
                        //服务器展开收缩的写法
                        <div class="content">
                            <div :class="serverColse ? 'colseItem': '' ">
                                <h1 class="cont-title"
                                    @click="serverColse = !serverColse" 
                                    v-if='DetailInfo.serverDetailList.length>0'>
                                    //展开的时候样式呈现+ 收缩的时候呈现- 
                                    <strong class="checkStrong">{{serverColse?'-':'+'}}</strong>
                                    服务器信息
                                </h1>
                                <div class="contentItem" v-for="(item,i) in DetailInfo.serverDetailList" :key='item.id'>
                                <span class="contentItemTitle" @click="item.isOpen = !item.isOpen">
                                //isOpen是后端返回一个Boolean值
                                    <strong v-show='item.isOpen'>+</strong>
                                    <strong  v-show='!item.isOpen'>-</strong>
                                    服务器{{i+1}}
                                </span>   
                                <div class="infos" :class="item.isOpen?'':'closeInfo'">
                                    <p class="info">
                                        <label class="info-title">服务器名称：</label> 
                                        <label class="info-content" v-show='isEdit'>{{item.name}}</label>
                                       <sf-textfield
                                            v-show='!isEdit' 
                                            v-model="item.memoryResources"
                                            :default-width="150" />
                                    </p>
   
<script lang="ts">
//接口定义 
interface Data {
    serverDetailList: Array<any>;
  }
export default class AcceptAssetInfo extends Vue {
	//默认初始可编辑
	isEdit = true 
	//服务器展开收缩状态
	serverColse = true
	
	DetailInfo: Data = {
	//设置服务器的对象存储
	    serverDetailList:[],
	 },
	 //点击编辑可切换
	 changeEdit () {
	      this.isEdit =  !this.isEdit;
	  }
}
<style>
	.content{
         margin-right: 20px;
         overflow: hidden;
         .cont-title{
             background: #eee;
             font-size: 16px;
             line-height: 60px;
             height: 60px;
             font-weight: 900;
             margin-top: 10px;
             text-indent: 20px;
             text-align: left;
             //设置框框，边框
             .checkStrong{
                 font-weight: 900;
                 border:1px solid #000;
                 display: inline-block;
                 text-indent: 0;
                 font-size: 16px;
                 width: 20px;
                 height: 20px;
                 line-height: 16px;
                 text-align: center;
             }
         }
     .contentItem{
        height: auto;
        overflow: hidden;
	     .contentItemTitle{
	          margin-right: 10px;
	          border: 1px solid #eee;
	          line-height: 40px;
	          height: 40px;
	          width: 100%;
	          display: block;
	          padding-left: 10px;
	          margin-bottom: 10px;
	          font-size: 14px;
	          font-weight: 900;
	          strong{
	              border: 1px solid #666;
	              font-weight: 900;
	              display: inline-block;
	              width: 18px;
	              height: 18px;
	              font-size: 14px;
	              line-height: 16px;
	              text-align: center;
	              margin-right: 10px;
	          }
	      }
	.colseItem .contentItem{
             height: 0;
         }
     .closeInfo{
          height: 0px;
          overflow: hidden;
      }
</style>