https://github.com/gn5r/vue-confirm
Confirm Component for Vue.js
https://github.com/gn5r/vue-confirm
component confirm typescript vue
Last synced: 6 months ago
JSON representation
Confirm Component for Vue.js
- Host: GitHub
- URL: https://github.com/gn5r/vue-confirm
- Owner: gn5r
- License: mit
- Created: 2020-05-03T23:29:19.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-07T16:13:08.000Z (7 months ago)
- Last Synced: 2025-03-25T05:41:29.449Z (6 months ago)
- Topics: component, confirm, typescript, vue
- Language: TypeScript
- Homepage: https://gn5r.github.io/vue-confirm/
- Size: 15.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README-ja.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Vue Confirm Component
[](https://opensource.org/licenses/MIT)
## 依存関係のバージョン
## プレイグラウンド
[プレイグラウンド | Vue Confirm](https://gn5r.github.io/vue-confirm/ja/guide/playground.html)
## バージョンマトリクス
| Vue.js version | Package version | Type definition | Branch |
| :------------: | :-------------: | :-------------: | :-------------------------------------------------: |
| 2.x | 1.x | No | [1.x](https://github.com/gn5r/vue-confirm/tree/1.x) |
| 2.x | 2.x | Yes | [2.x](https://github.com/gn5r/vue-confirm/tree/2.x) |
| 3.x | 3.x | Yes | [3.x](https://github.com/gn5r/vue-confirm/tree/3.x) |
| 3.x | 4.x | Yes | `main` |
## インストールの仕方
### npm タグマトリクス
| Package version | tag | Volar support | EOL |
| :-------------: | :----: | :-----------: | :-: |
| 1.x | - | - | ○ |
| 2.x | legacy | - | ○ |
| 3.x | stable | Yes | × |
| 4.x | latest | Yes | × |
| \*-beta | beta | - | - |
| \*-next | next | - | - |
### コマンド
#### npm
```
npm i @gn5r/vue-confirm
```
#### yarn
```
yarn add @gn5r/vue-confirm
```
## 使い方
## _Vue.use_ を使う場合
```ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
// Plugin Function と cssをインポート
import { createVConfirm } from "@gn5r/vue-confirm";
import "@gn5r/vue-confirm/styles";
const app = createApp(App);
const vconfirm = createVConfirm();
app.use(vconfirm).mount("#app");
```
```vue
show
import { defineComponent, ref } from "vue";
import { VConfirmBtn } from "@gn5r/vue-confirm";
export default defineComponent({
name: "sample-component",
setup() {
const config = ref({
dialog: false,
title: "title",
message: "message!",
btns: [] as VConfirmBtn[],
});
function show() {
config.value.btns = [
{
text: "OK",
onClick: () => (config.value.dialog = false),
},
];
config.value.dialog = true;
}
return {
config,
show,
};
},
});
```
## _Vue.use_ を使わない場合
```vue
show
import { defineComponent, ref } from "vue";
import VConfirm, { VConfirmBtn } from "@gn5r/vue-confirm";
export default defineComponent({
name: "sample-component",
setup() {
const config = ref({
dialog: false,
title: "title",
message: "message!",
btns: [] as VConfirmBtn[],
});
function show() {
config.value.btns = [
{
text: "OK",
onClick: () => (config.value.dialog = false),
},
];
config.value.dialog = true;
}
return {
config,
show,
};
},
components: {
VConfirm,
},
});
```
## コンポーネントプロパティ(props)
| props | description | type | default |
| :----------------: | :--------------------------------------------------------------------------------------------------------------: | :---------------: | :-------: |
| btn-align | css の justify-content プロパティ
**start**,**cenetr**,**end**,**space-between**,**space-around**が有効値です | Alignment(string) | end |
| btns | アクションボタン | VConfirmBtn[] | [] |
| closable | タイトルバーに閉じるボタンを表示/非表示するフラグ | boolean | false |
| dark | ダークテーマを有効にするフラグ | boolean | false |
| hide-header | デフォルトで描画されるヘッダーを非表示にします | boolean | false |
| message | メッセージテキスト | string | undefined |
| modelValue | ダイアログの表示/非表示をするフラグ | boolean | false |
| no-actions-divider | メッセージとアクションボタン間の境界線を表示/非表示するフラグ | boolean | false |
| persistent | ダイアログの外側をクリックしても閉じないようにするフラグ | boolean | false |
| title | タイトルバーに表示するテキスト | string | undefined |
| title-color | タイトルバーの背景色 | string | inherit |
| title-text-color | タイトルバーの文字色 | string | inherit |
| width | ダイアログの横幅 | number \| string | 800px |
### VConfirmBtn
| name | description | type | default |
| :-------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :----------------------: | :-------: |
| class | ボタンに対する css クラスを指定できます | string \| string[] | undefined |
| color | ボタンの背景色
css color スタイル (`#fff`、`transparent` 、`inherit`) または class スタイル (`btn-primary`) を指定できます | string | undefined |
| onClick | ボタンをクリックした時に実行される関数 | Function \| VoidFunction | undefined |
| text | ボタンテキスト | string | undefined |
| textColor | ボタンのテキストカラー
css color スタイル (`#fff`、`transparent` 、`inherit`) または class スタイル (`btn-primary`) を指定できます | string | undefined |
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2024 shangyuan.tuolang