气泡确认框 PopConfirm

根据 tip 组件封装的气泡确认框。

在不同位置显示

<c-pop-confirm v-for="pos in types" :key="pos" :position="pos" style="margin-right: 1em">
  <div slot="content">
    真的真的真的要删除我吗？
  </div>

  <c-button primary>{{pos}}</c-button>
</c-pop-confirm>

<script>
export default {
  data () {
    return {
      types: ['top', 'bottom', 'left', 'right']
    }
  }
}
</script>

自定义按钮文字

你还可以自定义确认按钮和取消按钮的文字 ——

<c-pop-confirm ok-text="参与活动" cancel-text="放弃">
  <div slot="content">
    参加活动，成为最炫锦鲤~
  </div>

  <c-button primary>点我</c-button>
</c-pop-confirm>

事件

点击确认按钮和取消按钮将分别触发 confirm 和 cancel 事件。

<c-pop-confirm
  ok-text="参与活动"
  cancel-text="放弃"
  @cancel="handleCancel"
  @confirm="handleConfirm"
>
  <div slot="content">
    参加活动，成为最炫锦鲤~
  </div>

  <c-button primary>点我</c-button>
</c-pop-confirm>

<script>
export default {
  methods: {
    handleCancel () {
      this.$warning('真可惜，与一个亿擦肩而过..')
    },
    handleConfirm () {
      this.$success('下一个锦鲤就是你！')
    }
  }
}
</script>

方法调用

在某些情况下，还可以手动调用 PopConfirm 实例上面的 hide 和 show 方法。

下面的例子展示了如何通过 blur 和 focus 事件实现 PopConfirm 的隐藏和显示。

点我

<c-pop-confirm
  ok-text="参与活动"
  cancel-text="放弃"
  @cancel="handleCancel"
  @confirm="handleConfirm"
  ref="popconfirm"
>
  <div slot="content">
    参加活动，成为最炫锦鲤~
  </div>

  <a href="#" @focus="handleFocus" @blur="handleBlur">点我</a>
</c-pop-confirm>

<script>
export default {
  methods: {
    handleCancel () {
      this.$warning('真可惜，与一个亿擦肩而过..')
    },
    handleConfirm () {
      this.$success('下一个锦鲤就是你！')
    },
    handleFocus () {
      this.$refs.popconfirm.show()
    },
    handleBlur () {
      this.$refs.popconfirm.hide()
    }
  }
}
</script>

API

属性	类型	说明	默认值
position	top \| right \| bottom \| left	位置	bottom
disabled	Boolean	是否禁用	false
okText	String	确认按钮文字	确定
cancelText	String	取消按钮文字	取消

事件

名称	说明
confirm	点击确定按钮
cancel	点击取消按钮