vue-action-confirm v0.0.1

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

ActionConfirm events

ActionConfirm slot