2.0.2 • Published 4 years ago

@gn5r/vue-common-confirm v2.0.2

Weekly downloads
27
License
MIT
Repository
github
Last release
4 years ago

npm npm version License: MIT

vue-common-confirm

デモページ

vue-common-confirm Demo

インストール

  • インストールコマンド

    npm i @gn5r/vue-common-confirm @fortawesome/fontawesome-free
    vue add vuetify
    本コンポーネントはVuetifyおよびfontawesome-freeを使用しているので併せてインストールしてください

  • 依存関係(公開時バージョン)

    • vue:^2.6.11
    • vuetify:^2.2.11
    • @fortawesome/fontawesome-free:^5.13.0

使い方

<template>
  <div>
    <button @click="addData">追加</button>
    <confirm
      :dialog.sync="confirmObj.dialog"
      :title="confirmObj.title"
      :titleIcon="confirmObj.titleIcon"
      :titleColor="confirmObj.titleColor"
      :message="confirmObj.message"
      :buttons="confirmObj.buttons"
    />
  </div>
</template>

<script>
import Confirm from "@gn5r/vue-common-confirm";
import mixin from "@gn5r/vue-common-confirm/lib/mixin";

export default {
  name: "sample",
  mixins: [mixin],
  data: () => ({}),
  methods: {
    addData() {
      // なんか処理
      this.confirm("データを追加しますか?", () => {
        // ダイアログで"はい"を押した後にコールバック関数が実行されるので
        // コールバック関数を記述する。または引数で関数を渡しておく
      });
    },
  },
  components: {
    Confirm,
  },
};
</script>

Confirm component props

props説明default
dialogダイアログ表示フラグ。sync 修飾子を付与することで呼び出し側でフラグを反転する必要がないBooleanfalse
titleダイアログツールバーに表示するタイトル。各関数にて設定String""
titleIconダイアログツールバーの左に表示するアイコン。confirm、warning、error の 3 つで使用String""
titleColorダイアログツールバーの背景色。各関数にて設定String""
messageダイアログ内に表示するメッセージ。各関数に渡すことで表示されるString""
buttonsダイアログ内に表示するボタン類。各関数にて設定Array[]
closableダイアログツールバーに閉じるボタンを表示する。デフォルトは非表示Booleanfalse
widthダイアログの幅Number or Stringundefined
max-widthダイアログの最大幅。スマホサイズでは自動的に 80%になるようにしているNumber or String500

関数一覧

  • confirm(message, callback = null)

    標準的な確認用ダイアログ
    message:ダイアログ内に表示するメッセージ
    callback:ダイアログの"はい"を押下後に実行されるコールバック関数
  • warning(message, callback = null)

    警告の意味を強めた確認用ダイアログ
    message:ダイアログ内に表示するメッセージ
    callback:ダイアログの"はい"を押下後に実行されるコールバック関数
  • error(message)

    エラー発生時用ダイアログ
    message:ダイアログ内に表示するメッセージ
  • complete(message)

    処理などが完了した時用ダイアログ
    message:ダイアログ内に表示するメッセージ
  • modal(message)

    javascriptのalert関数のオリジナル版。ヘッダーも無いのでalertと似た感覚で使用できる筈
    message:ダイアログ内に表示するメッセージ
3.0.0-beta.0

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.1.0-beta.0

4 years ago

1.3.1

5 years ago

1.3.0

5 years ago

2.0.0

5 years ago

2.0.0-beta

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.2.0-beta.5

5 years ago

1.2.0-beta.4

5 years ago

1.2.0-beta.3

5 years ago

1.2.0-beta.2

5 years ago

1.2.0-beta.1

5 years ago

1.2.0-beta.0

5 years ago

1.1.0-beta.5

5 years ago

1.1.0-beta.4

5 years ago

1.1.0-beta.3

5 years ago

1.1.0-beta.2

5 years ago

1.1.0-beta.1

5 years ago

1.1.0-beta.0

5 years ago

1.0.1

5 years ago

1.0.0-beta.1.4

5 years ago

1.0.0-beta.1.3

5 years ago

1.0.0-beta.1.2

5 years ago

1.0.0-beta.1.1

5 years ago

1.0.0-beta.0

5 years ago

1.0.0-beta-1

5 years ago

1.0.0-beta.2

5 years ago

1.0.0-beta.3

5 years ago

1.0.0-beta.1

5 years ago

1.0.0

5 years ago

0.2.0

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago