action-confirm

Element a confirmation component that's based on element-ui.

Install

npm install vue-action-confirm -S

Quick Start

import Vue from 'vue'
import ActionConfirm from 'vue-action-confirm'
# Vue.component('vue-action-confirm', ActionConfirm) # 可以指定组件名称
Vue.use(ActionConfirm) # 组件名称 `vue-action-confirm`

For more information, please refer to Progress in our documentation.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run demo:dev

# build for demo with minification
npm run demo:build

# build for gh-pages with minification
npm run demo:prepublish

# build for production with minification
npm run build

# generate gh-pages
npm run deploy

LICENSE

MIT

截图

基本用法

<template>
  <el-table
    :data="tableData"
    style="width: 701px">
    <el-table-column prop='id' label='次数' data-align='right' fixed width='68'></el-table-column>
    <el-table-column
      prop="date"
      label="更新日期"
      width="165">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="110"
    >
    </el-table-column>
    <el-table-column
      prop="address"
      width='250'
      label="地址">
    </el-table-column>
    <el-table-column
      label="操作"
      fixed="right"
      width="108">
      <template slot-scope="scope">
        <vue-action-confirm
          title="确定删除吗？"
          @confirm="onConfirm(scope.row)"
        >
          <el-button type="text" class="delete-btn" slot="reference">删除</el-button>
        </vue-action-confirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import VueActionConfirm from 'vue-action-confirm';

export default {
  componenets: {
    VueActionConfirm
  },

  data() {
    return {
      tableData: [{
        id: 123,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        tags: ["标签1", "标签很长很长很长很长很长很长", "标签很长很长很长很长很长很长", "标签"],
      }, {
        id: 223,
        date: '2016-05-04',
        name: '小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        tags: ["标签1", "标签很长很长很长很长很长很长", "标签很长很长很长很长很长很长", "标签"],
      }, {
        id: 32,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        tags: ["标签1", "标签很长很长很长很长很长很长", "标签很长很长很长很长很长很长", "标签"],
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        tags: ["标签1", "标签很长很长很长很长很长很长", "标签很长很长很长很长很长很长", "标签"],
      }]
    }
  },

  methods: {
    onConfirm(item) {
      console.log('confirm', item);
    }
  }
}
</script>

ActionConfirm props

参数	说明	类型	可选值	默认值
title	标题	String	-	-
popper-ref	Popover引用名称	String	popover
popper-props	Popover参数	Object	参考popover组件	{ placement: 'top' }
disabled	Popover 是否可用	Boolean	-	false
show-confirm	是否显示确认按钮	Boolean	-	true
show-cancel	是否显示取消按钮	Boolean	-	true
btn-ok-class	为确认按钮添加类名	String	-	action-confirm-ok
btn-cancel-class	为取消按钮添加类名	String	-	action-cancel-ok
btn-ok-label	确认按钮文案	String	-	确认
btn-cancel-label	取消按钮文案	String	-	取消
btn-ok-disabled	是否置灰确认按钮	String	-	false
btn-cancel-disabled	是否置灰取消按钮	String	-	false
btn-reference-class	为默认触发按钮添加类名	String	-	reference-btn
btn-reference-label	默认触发按钮文案	String	-	删除
loading	加载状态	Boolean	-	false

ActionConfirm events

事件名称	说明	回调参数
show	显示时触发	-
hide	隐藏时触发	-
visible-change	出现/隐藏时触发	出现则为true,隐藏则为false
confirm	确认时触发	-
cancel	取消时触发	-

ActionConfirm slot

名称	说明
-	弹出框的内容
footer	弹出框的尾部内容，默认显示确认和取消按钮
reference	触发弹出框显示的 HTML 元素