【uniapp】动态增加自定义组件
作者:互联网
代码
文件名:block.vue(在后面的index.vue中被导入)
<template>
<view> <!-- 注意:每个页面只能有一个根view -->
<view>
<view @touchstart="block.touchstart" @touchmove="block.touchmove" class="movable">{{block.msg}}</view>
</view>
</view>
</template>
<script module="block" lang="wxs"> //第一个元素的wxs模块
var startX = 0
var startY = 0
var lastLeft = 50; var lastTop = 50
function touchstart(event, ins) { // 获取手指点按的元素的初始位置
var touch = event.touches[0] || event.changedTouches[0]
startX = touch.pageX
startY = touch.pageY
}
function touchmove(event, ins) { // 获取元素被拖动后的位置
var touch = event.touches[0] || event.changedTouches[0]
var pageX = touch.pageX
var pageY = touch.pageY
var left = pageX - startX + lastLeft
var top = pageY - startY + lastTop
startX = pageX
startY = pageY
lastLeft = left
lastTop = top
ins.selectComponent('.movable').setStyle({ // 更新符合条件——“class=.movable” 的元素中left和top的值
left: left + 'px',
top: top + 'px'
})
}
module.exports = {
msg: 'Hello',
touchstart: touchstart,
touchmove: touchmove
}
</script>
<style>
.movable{
position: absolute;
width: 100px;
height: 100px;
left: 50px;
top: 50px;
color: white;
text-align: center;
line-height: 100px;
background-color: red;
}
</style>
index.vue文件
<template>
<view>
<button @click="add('my_component')">click</button> <!-- 按钮用于向component_arr数组中添加键值对 -->
<component v-for="item in component_arr" :is="item.component"></component> <!-- v-for循环将component组件中is属性=item.component的组件渲染出来 -->
</view>
</template>
<script>
import Block from './block.vue' //引入自定义的block组件
export default {
data() {
return {
component_arr:[] //创建自定义组件数组
}
},
components:{
'my_component':Block //注册自定义组件
},
methods:{
add(component){ //button绑定的函数,用于向“组件数组”中添加键值对
this.component_arr.push({
'component':component //要添加的键值对
})
}
}
}
</script>
<style>
</style>
效果
原始状态
点击一次按钮(新增加了一个自定义的组件)
点击多次并拖动该组件
标签:uniapp,自定义,top,component,var,touch,组件,event,left 来源: https://www.cnblogs.com/oasismove/p/16260537.html