256 lines
6.8 KiB
Vue
256 lines
6.8 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-alert组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">弹窗组件</view>
|
||
<view class="content">
|
||
一般无需在页面中添加html。<br />
|
||
通过vite.config.js自动在每个页面添加。<br />
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">(await) this.alert</view>
|
||
<view class="tip">
|
||
调用本弹窗组件。<br />
|
||
<button class="btn sm" @tap="tsalert(1)">多行</button>
|
||
<button class="btn sm" @tap="tsalert(2)">HTML</button>
|
||
<button class="btn sm" @tap="tsalert(3)">自定标题</button>
|
||
<button class="btn sm" @tap="tsalert(4)">对齐</button>
|
||
<button class="btn sm" @tap="tsalert(5)">多按钮</button>
|
||
<button class="btn sm" @tap="tsalert(6)">自定高度</button>
|
||
</view>
|
||
<view class="fun">(await) this.askmsg(content, btns)</view>
|
||
<view class="tip">
|
||
询问弹窗。<br />
|
||
btns支持string，array。<br />
|
||
返回: 按钮的btn文本。<br />
|
||
<button class="btn sm" @tap="askalert(1)">默认按钮</button>
|
||
<button class="btn sm" @tap="askalert(2)">按钮文字</button>
|
||
<button class="btn sm" @tap="askalert(3)">自定按钮</button>
|
||
</view>
|
||
<view class="fun">(await) this.inputmsg(opn)</view>
|
||
<view class="tip">
|
||
简易录入弹窗。<br />
|
||
返回: json{text,btn}。<br />
|
||
<button class="btn sm" @tap="inputalert(1)">默认弹窗</button>
|
||
<button class="btn sm" @tap="inputalert(2)">多行弹窗</button>
|
||
<button class="btn sm" @tap="inputalert(3)">无头弹窗</button>
|
||
<button class="btn sm" @tap="inputalert(4)">标题弹窗</button>
|
||
<button class="btn sm" @tap="inputalert(5)">多按钮</button>
|
||
<button class="btn sm" @tap="inputalert(6)">赋值</button>
|
||
</view>
|
||
<view v-html="tobr(formdata, true)" class="formdata"></view>
|
||
<view class="hr"></view>
|
||
<view class="fun">(await) app.alert</view>
|
||
<view class="tip">调用系统showModal，一般在页面可能没准备好，但需要提醒用户时调用。</view>
|
||
<button class="btn sm" @tap="appalert">调用</button>
|
||
<view class="hr"></view>
|
||
<view class="fun">原生alert</view>
|
||
<view class="tip">调用浏览器alert。</view>
|
||
<button class="btn sm" @tap="jsalert">调用</button>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">Open方法</view>
|
||
<view class="content">
|
||
<view class="prp">content</view>
|
||
<view class="tip">
|
||
文本内容，支持 "\n" 换行，支持html。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">title</view>
|
||
<view class="tip">
|
||
标题。<br />
|
||
默认 温馨提示
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">align</view>
|
||
<view class="tip">
|
||
内容对齐方式。<br />
|
||
默认 center
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">btns</view>
|
||
<view class="tip">
|
||
按钮组合。<br />
|
||
支持逗号分隔的string。<br />
|
||
支持自定义array，应包含btn,name,cls。<br />
|
||
btn，回调原样带回<br />
|
||
name，按钮文字<br />
|
||
cls，按钮class (可选)<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">ele</view>
|
||
<view class="tip">
|
||
支持输入框。<br />
|
||
input单行文本框，textarea多行文本框。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">value</view>
|
||
<view class="tip">
|
||
支持输入框。<br />
|
||
框内默认文字。<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">height</view>
|
||
<view class="tip">
|
||
弹框高度。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
alc: '',
|
||
aln: ''
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
async tsalert(type) {
|
||
if (type == 1) {
|
||
var btn = await this.alert('提示内容\n第二行');
|
||
}
|
||
if (type == 2) {
|
||
var btn = await this.alert('<b>加粗</b><div style="text-align:center;">自定义html</div>');
|
||
}
|
||
if (type == 3) {
|
||
var btn = await this.alert({
|
||
title: '自定标题',
|
||
content: '提示内容\n第二行'
|
||
});
|
||
}
|
||
if (type == 4) {
|
||
var btn = await this.alert({
|
||
align: 'left',
|
||
content: '提示内容\n第二行'
|
||
});
|
||
}
|
||
if (type == 5) {
|
||
var btn = await this.alert({
|
||
btns: [{
|
||
name: '删除',
|
||
btn: 'del',
|
||
cls: 'dag'
|
||
}, {
|
||
name: '确定',
|
||
btn: 'ok'
|
||
}, {
|
||
name: '取消',
|
||
btn: 'cancel',
|
||
cls: 'def'
|
||
}],
|
||
content: '提示内容\n第二行'
|
||
});
|
||
}
|
||
if (type == 6) {
|
||
var btn = await this.alert({
|
||
height: '20em',
|
||
content: '自定义高度效果'
|
||
});
|
||
}
|
||
this.formdata = JSON.stringify(btn);
|
||
},
|
||
async askalert(type) {
|
||
if (type == 1) {
|
||
var btn = await this.askmsg('提示内容\n第二行');
|
||
}
|
||
if (type == 2) {
|
||
var btn = await this.askmsg('提示内容\n第二行', '删除');
|
||
}
|
||
if (type == 3) {
|
||
var btn = await this.askmsg('提示内容\n第二行', [{
|
||
name: '通过',
|
||
btn: 'ok'
|
||
}, {
|
||
name: '驳回',
|
||
btn: 'ng',
|
||
cls: 'dag'
|
||
}, {
|
||
name: '取消',
|
||
btn: 'cancel',
|
||
cls: 'def'
|
||
}]);
|
||
}
|
||
this.formdata = JSON.stringify(btn);
|
||
},
|
||
async inputalert(type) {
|
||
if (type == 1) {
|
||
var btn = await this.inputmsg('输入文字');
|
||
}
|
||
if (type == 2) {
|
||
var btn = await this.inputmsg({
|
||
content: '提示内容\n第二行',
|
||
ele: 'textarea'
|
||
});
|
||
}
|
||
if (type == 3) {
|
||
var btn = await this.inputmsg({
|
||
content: '提示内容\n第二行',
|
||
title: ''
|
||
});
|
||
}
|
||
if (type == 4) {
|
||
var btn = await this.inputmsg({
|
||
title: '请输入内容',
|
||
ele: 'textarea'
|
||
}, '提交');
|
||
}
|
||
if (type == 5) {
|
||
var btn = await this.inputmsg({
|
||
title: '请填写驳回理由',
|
||
ele: 'textarea'
|
||
}, [{
|
||
name: '审核通过',
|
||
btn: 'ok'
|
||
}, {
|
||
name: '驳回',
|
||
btn: 'ng',
|
||
cls: 'dag liner'
|
||
}, {
|
||
name: '取消',
|
||
btn: 'cancel',
|
||
cls: 'def'
|
||
}]);
|
||
}
|
||
if (type == 6) {
|
||
var btn = await this.inputmsg({
|
||
title: '请填写修改项',
|
||
ele: 'textarea',
|
||
value: '内容1\n内容2'
|
||
});
|
||
}
|
||
this.formdata = JSON.stringify(btn);
|
||
},
|
||
appalert() {
|
||
var app = getApp();
|
||
app.alert('提示内容\n第二行');
|
||
},
|
||
jsalert() {
|
||
alert('提示内容\n第二行');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style> |