155 lines
4.0 KiB
Vue
155 lines
4.0 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-movable组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">可拖动的容器</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
支持单张底图缩放平移，室内地图/示意图。<br />
|
||
在底图上放置可拖动的组件或固定组件。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="btn" @tap="setmap()">setmap</button>
|
||
<button class="btn" @tap="setbox()">setbox</button>
|
||
<button class="btn" @tap="getbox()">getbox</button>
|
||
|
||
<ciy-movable ref="movable" :width="props.width" :height="props.height" :boxmove="props.boxmove" @boxclick="chglog('boxclick', $event)" @change="chglog('change', $event)">
|
||
<template v-slot="{box}">
|
||
<view :style="'background:#ffffff;border:1px solid #cccccc;border-radius: 2em 0;width:'+box.w+'px;height:'+box.h+'px;'">
|
||
{{box}}
|
||
</view>
|
||
</template>
|
||
</ciy-movable>
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">width</view>
|
||
<view class="tip">画布容器宽度。</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-input bb v-model="props.width" style="width:6em;"></ciy-input>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">height</view>
|
||
<view class="tip">画布容器高度。</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-input bb v-model="props.height" style="width:6em;"></ciy-input>
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">boxmove</view>
|
||
<view class="tip">
|
||
组件是否可移动。<br />
|
||
默认 false
|
||
</view>
|
||
<view style="margin:0 1em;">
|
||
<ciy-switch v-model="props.boxmove"></ciy-switch>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">setmap</view>
|
||
<view class="tip">
|
||
打开示意图<br />
|
||
src: 图片地址<br />
|
||
x,y: 左上角x,y坐标，默认0<br />
|
||
sacle: 缩放倍率，默认1<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="fun">setbox</view>
|
||
<view class="tip">
|
||
设置组件[{},{}]。<br />
|
||
w,h: 宽高<br />
|
||
x,y: 坐标<br />
|
||
z: 如果设置，则拖动在前<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="fun">getbox</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 />
|
||
{<br />
|
||
x,y,sacle，地图新坐标和缩放倍率<br />
|
||
index，如果移动地图-1，移动组件index<br />
|
||
boxs，组件数据<br />
|
||
}<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@boxclick</view>
|
||
<view class="tip">
|
||
组件点击<br />
|
||
{<br />
|
||
index，组件index<br />
|
||
boxs，{}组件数据<br />
|
||
}<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>
|
||
<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 {
|
||
props: {
|
||
width: '100%',
|
||
height: '80vw',
|
||
boxmove: true,
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
async setbox() {
|
||
this.getrefsSync('movable').Setbox([{
|
||
w: 100,
|
||
h: 200,
|
||
x: 20,
|
||
y: 90,
|
||
z: 0
|
||
}, {
|
||
w: 100,
|
||
h: 200,
|
||
x: 300,
|
||
y: 250,
|
||
z: 0
|
||
}]);
|
||
},
|
||
getbox() {
|
||
var box = this.getrefsSync('movable').Getbox();
|
||
console.log(box);
|
||
},
|
||
setmap() {
|
||
var opn = {};
|
||
opn.src = '/img/lmap.jpg';
|
||
opn.x = 300;
|
||
opn.y = 300;
|
||
opn.scale = 0.5;
|
||
this.getrefsSync('movable').Setmap(opn);
|
||
}
|
||
}
|
||
}
|
||
</script> |