Others-popover弹出框

╰半夏微凉° 2022-03-29 09:29 362阅读 0赞

<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>

<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>

<el-popover
        placement="top"
        width="160"
        v-model="visible2">
        <p>这是一段内容这是一段内容确定删除吗？</p>
        <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
            <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
        </div>
        <el-button slot="reference">删除</el-button>
    </el-popover>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>trigger</td> 
   <td>触发方式</td> 
   <td>String</td> 
   <td>click/focus/hover/manual</td> 
   <td>click</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>标题</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>显示的内容，也可以通过&nbsp;<code>slot</code>&nbsp;传入 DOM</td> 
   <td>String</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>宽度</td> 
   <td>String, Number</td> 
   <td>—</td> 
   <td>最小宽度 150px</td> 
  </tr> 
  <tr> 
   <td>placement</td> 
   <td>出现位置</td> 
   <td>String</td> 
   <td>top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end</td> 
   <td>bottom</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Popover 是否可用</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>value(v-model)</td> 
   <td>状态是否可见</td> 
   <td>Boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>transition</td> 
   <td>定义渐变动画</td> 
   <td>String</td> 
   <td>—</td> 
   <td>fade-in-linear</td> 
  </tr> 
 </tbody> 
</table>

### [¶][Link 1]Slot ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>—</td> 
   <td>Popover 内嵌 HTML 文本</td> 
  </tr> 
  <tr> 
   <td>reference</td> 
   <td>触发 Popover 显示的 HTML 元素</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/popover%23slot