<template>
<div class="wxc-demo">
<scroller class="scroller">
<title title="lc-dialog"></title>
<category title="基本用法"></category>
<div class="button-list">
<lc-button class="mt20" text="带标题Alert" @LcButtonClicked="open1"></lc-button>
<lc-button class="mt20" text="不带标题Alert" @LcButtonClicked="open2"></lc-button>
<lc-button class="mt20" text="带图片Alert" @LcButtonClicked="open3"></lc-button>
<lc-button class="mt20" text="Confirm" @LcButtonClicked="open4"></lc-button>
</div>
<lc-dialog :type="type1"
:title="title1"
:content="content"
:img="showImg1"
:src="src"
confirm-text="确认"
cancel-text="取消"
:show="show1"
@LcDialogCancelBtnClicked="dialogCancelBtnClick"
@LcDialogConfirmBtnClicked="dialogConfirmBtnClick"></lc-dialog>
<category title="Dialog配置"></category>
<lc-cell :has-top-border="false" :has-bottom-border="false" label="标题文案">
<input class="input"
slot="value"
placeholder="请输入标题"
v-model="title2"
@input="title2=$event.value"/>
</lc-cell>
<lc-cell :has-top-border="false" :has-bottom-border="false" label="说明文案">
<input class="input"
slot="value"
placeholder="请输入说明内容"
v-model="content"
@input="content=$event.value"/>
</lc-cell>
<lc-cell :has-top-border="false" :has-bottom-border="false" label="主按钮">
<input class="input"
slot="value"
placeholder="确定按钮文案"
v-model="confirmText"
@input="confirmText=$event.value"/>
</lc-cell>
<lc-cell :has-top-border="false" :has-bottom-border="false" label="副按钮">
<input class="input"
slot="value"
placeholder="取消按钮文案"
v-model="cancelText"
@input="cancelText=$event.value"/>
</lc-cell>
<lc-cell :has-top-border="false"
:has-bottom-border="false"
:auto-accessible="false"
label="取消按钮">
<switch :checked="type2==='confirm'"
slot="value"
@change="type2= type2==='confirm' ?'alert' : 'confirm'"></switch>
</lc-cell>
<lc-cell :has-top-border="false"
:auto-accessible="false"
:has-bottom-border="false"
label="显示图片">
<switch :checked="showImg2"
slot="value"
@change="showImg2= !showImg2"></switch>
</lc-cell>
<div class="btn" @click="openDialog()">
<text class="btn-txt">打开Dialog试一试</text>
</div>
</scroller>
<lc-dialog :type="type2"
:title="title2"
:content="content"
:img="showImg2"
:src="src"
:confirm-text="confirmText"
:cancel-text="cancelText"
:show="show2"
:is-checked="isChecked"
:no-prompt-text="noPromptText"
:show-no-prompt="showNoPrompt"
@LcDialogCancelBtnClicked="dialogCancelBtnClick"
@LcDialogConfirmBtnClicked="dialogConfirmBtnClick"
@LcDialogNoPromptClicked="dialogNoPromptClick"></lc-dialog>
</div>
</template>
<style scoped>
.mt20{ margin-top:20px;}
.button-list{padding-left: 30px;}
.wxc-demo {
/* position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0; */
background-color: #fff;
}
.scroller {
flex: 1;
}
.input {
width: 460px;
height: 80px;
line-height: 80px;
text-align: right;
margin-right:30px;
}
.btn {
width: 600px;
height: 80px;
margin-top: 40px;
margin-bottom: 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 Light from 'light';
import Title from 'lighting-ui/packages/_mods/title.vue';
import Category from 'lighting-ui/packages/_mods/category.vue';
import LcButton from 'lighting-ui/packages/lc-button';
import LcCell from 'lighting-ui/packages/lc-cell';
import LcDialog from 'lighting-ui/packages/lc-dialog';
export default {
components: { Title, Category, LcDialog, LcCell,LcButton },
data: function () {
return {
type1:'alert',
title1:'',
show1:false,
showImg1:false,
type2: 'confirm',
title2: '标题',
content: '用户需要阅读的内容，这是用户需要阅读的内容。',
confirmText: '确定',
cancelText: '取消',
noPromptText: '不再提示',
show2: false,
single: false,
showImg2:false,
src:"https://img.alicdn.com/tfs/TB1jkA5g9_I8KJjy0FoXXaFnVXa-320-320.png",
showNoPrompt: false,
isChecked: false
};
},
methods: {
openDialog () {
const self = this;
self.show2 = true;
},
open1 () {
this.type1= 'alert';
this.show1 = true;
this.title1 = "这是标题";
},
open2 () {
this.type1= 'alert';
this.show1 = true;
this.title1 = "";
},
open3 () {
this.type1= 'alert';
this.show1 = true;
this.title1 = "";
this.showImg1= true;
},
open4 () {
this.type1= 'confirm';
this.show1 = true;
this.title1 = "这是确认框";
},
dialogCancelBtnClick () {
const modal = Light.requireModule('modal');
this.show2 = false;
this.show1 = false;
this.showImg1= false;
modal.toast({ 'message': '取消回调', 'duration': 1 });
},
dialogConfirmBtnClick () {
const modal = Light.requireModule('modal');
this.show2 = false;
this.show1 = false;
this.showImg1= false;
modal.toast({ 'message': '确认回调', 'duration': 1 });
},
dialogNoPromptClick (e) {
const modal = Light.requireModule('modal');
this.isChecked = e.isChecked;
modal.toast({ 'message': `noPrompt isChecked: ${e.isChecked}`, 'duration': 1 });
}
}
};
</script>
|
