iView中的Select与Poptip结合

<template>
  <div class="selectPopTip" style="width: 500px">
    <Card>
      <p slot="title">方法一</p>
      <Select @on-change="getContent" v-model="selectValue" :model.sync="selectValue"
              class="select-tip" style="width:70%">
        <div slot="input">
          <Poptip trigger="hover" style="width: 100%" :disabled="!selectContent">
            <span :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">
              <p>id：{{selectContent.value}}</p>
              <p>content：{{selectContent.content}}</p>
            </div>
          </Poptip>
        </div>
        <Option v-for="item in list" :label="item.label" :value="item.value"
                :key="item.value">
          <Poptip trigger="hover" :transfer="true" style="width: 100%">
            <p>{{ item.label }}</p>
            <div slot="content">
              <p>id：{{item.value}}</p>
              <p>content：{{item.content}}</p>
            </div>
          </Poptip>
        </Option>
      </Select>
    </Card>
    <Card>
      <p slot="title">方法二：只适用于Select的宽固定，宽为百分比请试用方法一</p>
      <Poptip trigger="hover" :disabled="!selectContent" transfer>
        <div slot="content">
          <p>id：{{selectContent.value}}</p>
          <p>content：{{selectContent.content}}</p>
        </div>
        <Select @on-change="getContent" v-model="selectValue" :model.sync="selectValue" style="width:300px"  transfer>
          <Option v-for="item in list" :label="item.label" :value="item.value"
                  :key="item.value" transfer>
            <Poptip trigger="hover" style="width: 100%;text-align: center" transfer>
              {{ item.label }}
              <div slot="content">
                <p>id：{{item.value}}</p>
                <p>content：{{item.content}}</p>
              </div>
            </Poptip>
          </Option>
        </Select>
      </Poptip>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'selectPopTip',
  data () {
    return {
      selectValue: '',
      selectContent: '',
      list: []
    }
  },
  mounted () {
    for (let i = 0; i < 10; i++) {
      this.list.push({
        label: '选择项' + i,
        value: i,
        content: '内容' + i
      })
    }
    // this.selectValue = this.list[0].value
    // this.selectContent = this.list[0]
  },
  methods: {
    getContent () {
      this.selectContent = this.list.find(item => {
        return item.value === this.selectValue
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  .select-tip
    >>> .ivu-poptip-rel
      width 100%
    >>> .ivu-select-item
      padding 0
      .ivu-poptip
        padding 7px 16px
</style>