<template>
<div class="selectPopTip" style="width: 500px">
<Card>
<p slot="title">方法一:Poptip中的disabled是3.4.0及其以上版本才有的</p>
<Select ref="selectTip" @on-change="getContent" v-model="selectValue" :model.sync="selectValue"
class="select-tip" style="width:70%">
<div @click="handleClick(2)" slot="input">
<Poptip popperClass="select-tip-content" trigger="hover" style="width: 100%" :disabled="!selectContent">
<span @click="handleClick(1)" :class="selectContent?'ivu-select-selected-value':'ivu-select-placeholder'">{
{selectContent?selectContent.label:'请选择'}}</span>
<Icon type="ios-arrow-down" class="ivu-select-arrow"></Icon>
<div slot="content" @click.prevent="$event.cancelBubble=true">
<p>id:{
{selectContent.value}}</p>
<p>content:{
{selectContent.content}}</p>
<div class="ivu-poptip-arrow"></div>
</div>
</Poptip>
</div>
<Option v-for="item in list" :label="item.label" :value="item.value"
:key="item.value">
<Poptip :popperClass="isShow" trigger="hover" :transfer="true" style="width: 100%">
<p @click="handleClick(1)">{
{ item.label }}</p>
<div @mouseleave="handleClick(0)" slot="content">
<p
iView中的Select与Poptip结合
最新推荐文章于 2024-01-18 18:27:03 发布
本文介绍了如何在iView UI框架中将Select选择器与Poptip弹出提示组件结合使用,详细阐述了它们的配置方法及应用场景,帮助开发者实现更丰富的交互体验。
摘要由CSDN通过智能技术生成