Element Popover 팝 업 상자 사용 예시

구성 요소 팝 업 상자
기초 용법

<template>
 <el-popover
  placement="top-start"
  title="  "
  width="200"
  trigger="hover"
  content="      ,      ,      ,      。">
  <el-button slot="reference">hover   </el-button>
 </el-popover>

 <el-popover
  placement="bottom"
  title="  "
  width="200"
  trigger="click"
  content="      ,      ,      ,      。">
  <el-button slot="reference">click   </el-button>
 </el-popover>

 <el-popover
  ref="popover"
  placement="right"
  title="  "
  width="200"
  trigger="focus"
  content="      ,      ,      ,      。">
 </el-popover>
 <el-button v-popover:popover>focus   </el-button>

 <el-popover
  placement="bottom"
  title="  "
  width="200"
  trigger="manual"
  content="      ,      ,      ,      。"
  v-model="visible">
  <el-button slot="reference" @click="visible = !visible">    </el-button>
 </el-popover>
</template>

<script>
 export default {
  data() {
   return {
    visible: false
   };
  }
 };
</script>

포 함 된 정보

<el-popover
 placement="right"
 width="400"
 trigger="click">
 <el-table :data="gridData">
  <el-table-column width="150" property="date" label="  "></el-table-column>
  <el-table-column width="100" property="name" label="  "></el-table-column>
  <el-table-column width="300" property="address" label="  "></el-table-column>
 </el-table>
 <el-button slot="reference">click   </el-button>
</el-popover>

<script>
 export default {
  data() {
   return {
    gridData: [{
     date: '2016-05-02',
     name: '   ',
     address: '           1518  '
    }, {
     date: '2016-05-04',
     name: '   ',
     address: '           1518  '
    }, {
     date: '2016-05-01',
     name: '   ',
     address: '           1518  '
    }, {
     date: '2016-05-03',
     name: '   ',
     address: '           1518  '
    }]
   };
  }
 };
</script>

모자이크 조작

<el-popover
 placement="top"
 width="160"
 v-model="visible">
 <p>                 ？</p>
 <div style="text-align: right; margin: 0">
  <el-button size="mini" type="text" @click="visible = false">  </el-button>
  <el-button type="primary" size="mini" @click="visible = false">  </el-button>
 </div>
 <el-button slot="reference">  </el-button>
</el-popover>

<script>
 export default {
  data() {
   return {
    visible: false,
   };
  }
 }
</script>

Attributes


Slot

Events

Element-UI 표 Popover 팝 업 창 을 클릭 하여 취소 확인

 <el-table-column width="600">
     <template slot-scope="scope">
<el-popover trigger="click" placement="top" width="450" @show="handleStatus(scope)" :ref="`popover-${scope.$index}`">
       <div>
         <el-input type="textarea" :rows="5" maxlength="300" placeholder="     " v-model="scope.row.spaceAllocatePrice"></el-input>
       </div>
       <div style="text-align: left; margin-top: 20px">
        <el-button size="small" plain @click="cancelClick(scope)">  </el-button>
        <el-button type="primary" size="small" @click="sureClick(scope)">  </el-button>
       </div>
       <el-button slot="reference" type="text">  </el-button>
      </el-popover>
     </template>
    </el-table-column>

cancelClick(scope){ 
   this.$message('       '); 
   scope._self.$refs[`popover-${scope.$index}`].doClose() 
  },
  sureClick(scope){
   //                 .......    ......
   this.$message({
    message:"        ",type: 'success'
   });
   scope._self.$refs[`popover-${scope.$index}`].doClose()
  },

Element Popover 팝 업 상자 에 대한 예제 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 Element Popover 팝 업 상자 내용 은 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!