156 lines
4.4 KiB
Vue
156 lines
4.4 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-anipop组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">画布动画</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
从四个方向弹出画布<br />
|
||
支持标题、留白。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<ciy-anipop ref="anipop" v-model="popsh" :anispeed="props.anispeed" :direction="props.direction" :edge="props.edge" :title="props.title" :maskbg="props.maskbg" :noclose="props.noclose" :zindex="50020" @change="chglog('change', $event)">
|
||
<view style="border-radius: 0.5em 0.5em 0 0;">
|
||
<view v-for="n in ns" :key="n" class="zw"> 占位 {{n}}</view>
|
||
</view>
|
||
</ciy-anipop>
|
||
<button class="btn" @tap="openpop(5)">5打开</button>
|
||
<button class="btn" @tap="openpop(50)">50打开</button>
|
||
<button class="btn" @tap="props.title='头部标题'">带标题</button>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">v-model</view>
|
||
<view class="tip">bool，打开关闭画布。</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">noclose</view>
|
||
<view class="tip">
|
||
是否点击不关闭。<br />
|
||
默认 false
|
||
</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-switch v-model="props.noclose"></ciy-switch>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">anispeed</view>
|
||
<view class="tip">
|
||
动画效果持续毫秒，0为不使用动画。<br />
|
||
默认 300
|
||
</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-input bb v-model="props.anispeed" style="width:4em;"></ciy-input>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">title</view>
|
||
<view class="tip">
|
||
显示标题。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.title"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">maskbg</view>
|
||
<view class="tip">
|
||
蒙版色，#rgba。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.maskbg" style="width:6em;"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">bg</view>
|
||
<view class="tip">
|
||
左/右方向剩余空间背景色，#rgba。<br />
|
||
</view>
|
||
<ciy-input bb v-model="props.bg" style="width:6em;"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">direction</view>
|
||
<view class="tip">
|
||
从某个方向出现。<br/>
|
||
bottom从下方，top，left、right。<br />
|
||
</view>
|
||
<ciy-radio left v-model="props.direction" :range="[{id:'bottom',name:'bottom'},{id:'top',name:'top'},{id:'left',name:'left'},{id:'right',name:'right'}]"></ciy-radio>
|
||
<view class="hr"></view>
|
||
<view class="prp">edge</view>
|
||
<view class="tip">
|
||
留白尺寸，单位px。默认不留白
|
||
</view>
|
||
<ciy-input bb v-model="props.edge" style="width:4em;"></ciy-input>
|
||
<view class="hr"></view>
|
||
<view class="prp">zindex</view>
|
||
<view class="tip">
|
||
z-index。<br />
|
||
默认 992
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">open</view>
|
||
<view class="tip">
|
||
打开<br />
|
||
</view>
|
||
<button class="btn sm" @tap="funopen">调用</button>
|
||
<view class="hr"></view>
|
||
<view class="fun">close</view>
|
||
<view class="tip">
|
||
关闭<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change</view>
|
||
<view class="tip">
|
||
打开关闭变更事件<br />
|
||
from: open,mask,user,closebtn
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@update:modelValue</view>
|
||
<view class="tip">
|
||
仅关闭传递false<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
<ciy-tabbar ref="tabbar"></ciy-tabbar>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
ns:5,
|
||
popsh: false,
|
||
props:{
|
||
maskbg:'#00000044',
|
||
bg:'#ffffff',
|
||
direction: 'bottom',
|
||
edge:100,
|
||
anispeed:300,
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
async openpop(ns) {
|
||
this.ns = ns;
|
||
this.popsh = true;
|
||
},
|
||
funopen(){
|
||
this.getrefsSync('anipop').Open();
|
||
}
|
||
}
|
||
}
|
||
</script> |