English
fs-confirm
About 520 wordsAbout 2 min
2025-04-28
Used to display confirmation, prompt, and input dialogs.
Parameters
| Property | Type | Default | Optional Values | Description |
|---|---|---|---|---|
| mask | Boolean | true | -- | Whether to add a mask layer |
| show | Boolean | false | -- | Controls show/hide state |
| title | String | -- | -- | Popup title |
| text | String | -- | -- | Popup content |
| type | String | confirm | prompt/confirm/primary | Popup type |
| placeholder | String | Please enter content | -- | Placeholder text |
| value | String | -- | -- | Default value |
| cancelBtn | Object | null | -- | Cancel button content |
| confirmBtn | Object | null | -- | Confirm button content |
| maxHeight | Number | 254 | -- | Maximum height of the content area |
| maxLength | Number | 140 | -- | Maximum text length in the content area |
| inputMaxHeight | Number | 132 | -- | Maximum height of the input content |
Callback
| Property | Type | Description |
|---|---|---|
| onClick | Function | Returned after the button click event |
Example Code
<view>
<fs-page title="confirm" bindonMounted="onMounted">
<view class="page">
<fs-scroll height="{{dScrollHeight}}" class="scroll">
<fs-divider tip="Basic Form"></fs-divider>
<fs-button
class="button"
text="Click Demo"
plain="{{true}}"
type="primary"
bindtap="onTap2"
></fs-button>
<fs-divider tip="Multi-line Form"></fs-divider>
<fs-button
class="button"
text="Click Demo"
plain="{{true}}"
type="primary"
bindtap="onTap"
data-type="1"
>
</fs-button>
<fs-divider tip="prompt"></fs-divider>
<fs-button
class="button"
text="Click Demo"
plain="{{true}}"
type="primary"
bindtap="onTap"
data-type="2"
>
</fs-button>
<fs-divider tip="Custom Buttons"></fs-divider>
<fs-button
class="button"
text="Define Cancel Button"
plain="{{true}}"
type="primary"
bindtap="onTap"
data-type="3"
>
</fs-button>
<fs-button
class="button"
text="Define Confirm Button"
plain="{{true}}"
type="primary"
bindtap="onTap"
data-type="4"
>
</fs-button>
<fs-divider tip="Custom Content Area"></fs-divider>
<fs-button
class="button"
text="Click Demo"
plain="{{true}}"
type="primary"
bindtap="onTap1"
></fs-button>
</fs-scroll>
</view>
<fs-confirm
title="{{title}}"
show="{{show}}"
text="{{text}}"
cancelBtn="{{cancelBtn}}"
confirmBtn="{{confirmBtn}}"
type="{{type}}"
bindonClose="onCancel"
></fs-confirm>
<fs-confirm title="{{title}}" show="{{show1}}" text="{{text}}">
<fs-button
class="button"
text="I am custom content"
plain="{{true}}"
type="primary"
slot="body"
bindonClose="onCancel"
></fs-button>
</fs-confirm>
</fs-page>
</view>// pages/testComfirm/testConfirm.js
const paramConfig = {
1: {
title: "Popup Title, Popup Title, Popup Title, Popup Title, Popup Title",
text: "This is a demo! This is a demo! This is a demo! This is a demo!",
},
2: {
title: "Popup Title",
type: "prompt",
},
3: {
cancelBtn: {
text: "Cancel!",
onClick(type) {
console.log(2);
},
},
},
4: {
confirmBtn: {
text: "Confirm!",
onClick(type) {
console.log(1);
},
},
},
};
Page({
/**
* Initial page data
*/
data: {
show: false,
title: "",
text: "",
type: "",
dScrollHeight: 2000,
cancelBtn: void 0,
confirmBtn: void 0,
show1: false,
},
onTap(event) {
let param = {
title: "Popup Title",
text: "This is a demo!",
type: "confirm",
cancelBtn: {
text: "Cancel",
onClick: function () {
this.onCancel();
}.bind(this),
},
confirmBtn: {
text: "Confirm",
onClick: function () {
this.onConfirm();
}.bind(this),
},
};
const type = event.target.dataset.type;
param = Object.assign(param, paramConfig[type] || {});
this.setData({
title: param.title,
text: param.text,
type: param.type,
cancelBtn: param.cancelBtn || {},
confirmBtn: param.confirmBtn || {},
show: true,
});
},
onTap1() {
this.setData({
show1: true,
title: "Popup Title",
text: "This is a demo!",
});
},
onTap2() {
let param = {
title: "Popup Title",
text: "This is a demo!",
type: "confirm",
cancelBtn: null,
confirmBtn: {
text: "Confirm",
onClick: function () {
this.onConfirm();
}.bind(this),
},
};
this.setData({
title: param.title,
text: param.text,
type: param.type,
cancelBtn: param.cancelBtn,
confirmBtn: param.confirmBtn,
show: true,
});
},
onConfirm() {
this.setData({
show: false,
show1: false,
});
},
onCancel() {
this.setData({
show: false,
show1: false,
});
},
onMounted(e) {
this.setData({
dScrollHeight: e.detail.mainHeight,
});
},
});