blob: 0675f65fd3164342c62eafa7d4c7d2dfc79cdb7c [file] [log] [blame]
<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 16/10/26. -->
<template>
<div class="wxc-demo">
<scroller class="scroller">
<title title="wxc-dialog"></title>
<category title="Dialog配置"></category>
<wxc-cell :has-top-border="false" title="标题文案">
<input class="input"
slot="value"
placeholder="请输入标题"
:value="title"
@input="title=$event.value"/>
</wxc-cell>
<wxc-cell :has-top-border="false" title="说明文案">
<input class="input"
slot="value"
placeholder="请输入说明内容"
:value="content"
@input="content=$event.value"/>
</wxc-cell>
<wxc-cell :has-top-border="false" title="主按钮">
<input class="input"
slot="value"
placeholder="确定按钮文案"
:value="confirmText"
@input="confirmText=$event.value"/>
</wxc-cell>
<wxc-cell :has-top-border="false" title="副按钮">
<input class="input"
slot="value"
placeholder="取消按钮文案"
:value="cancelText"
@input="cancelText=$event.value"/>
</wxc-cell>
<wxc-cell :has-top-border="false"
:auto-accessible="false"
title="取消按钮">
<switch :checked="!single"
slot="value"
@change="single= !single"></switch>
</wxc-cell>
<wxc-cell :has-top-border="false"
:auto-accessible="false"
title="显示不再提示">
<switch :checked="showNoPrompt"
slot="value"
@change="showNoPrompt= !showNoPrompt"></switch>
</wxc-cell>
<wxc-cell :has-top-border="false"
:auto-accessible="false"
title="不再提示是否勾选">
<switch :checked="isChecked"
slot="value"
@change="isChecked= !isChecked"></switch>
</wxc-cell>
<wxc-cell :has-top-border="false"
:auto-accessible="false"
title="不再提示文案">
<input class="input"
slot="value"
placeholder="取消按钮文案"
:value="noPromptText"
@input="noPromptText=$event.value"/>
</wxc-cell>
<div class="btn" @click="openDialog">
<text class="btn-txt">打开Dialog试一试</text>
</div>
</scroller>
<wxc-dialog :title="title"
:content="content"
:confirm-text="confirmText"
:cancel-text="cancelText"
:show="show"
:single="single"
:is-checked="isChecked"
:no-prompt-text="noPromptText"
:show-no-prompt="showNoPrompt"
@wxcDialogCancelBtnClicked="dialogCancelBtnClick"
@wxcDialogConfirmBtnClicked="dialogConfirmBtnClick"
@wxcDialogNoPromptClicked="dialogNoPromptClick"></wxc-dialog>
</div>
</template>
<style scoped>
.wxc-demo {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #ffffff;
}
.scroller {
flex: 1;
}
.input {
width: 500px;
height: 80px;
line-height: 80px;
text-align: right;
}
.btn {
width: 600px;
height: 80px;
margin-top: 40px;
margin-left: 75px;
flex-direction: row;
align-items: center;
justify-content: center;
border-radius: 6px;
background-color: #ffc300;
border-color: #ffc300;
}
.btn-txt {
font-size: 32px;
color: #ffffff;
}
</style>
<script>
import Title from '../_mods/title.vue';
import Category from '../_mods/category.vue';
import { WxcDialog, WxcCell } from '../../index';
const modal = weex.requireModule('modal');
import { setTitle } from '../_mods/set-nav';
export default {
components: { Title, Category, WxcDialog, WxcCell },
data: function () {
return {
title: '标题',
content: '用户需要阅读的内容,这是用户需要阅读的内容。',
confirmText: '确定',
cancelText: '取消',
noPromptText: '不再提示',
show: false,
single: false,
showNoPrompt: false,
isChecked: false
};
},
created () {
setTitle('Dialog');
},
methods: {
openDialog () {
const self = this;
self.show = true;
},
dialogCancelBtnClick () {
this.show = false;
modal.toast({ 'message': '取消回调', 'duration': 1 });
},
dialogConfirmBtnClick () {
this.show = false;
modal.toast({ 'message': '确认回调', 'duration': 1 });
},
dialogNoPromptClick (e) {
this.isChecked = e.isChecked;
modal.toast({ 'message': `noPrompt isChecked: ${e.isChecked}`, 'duration': 1 });
}
}
};
</script>