没有合适的资源?快使用搜索试试~ 我知道了~
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
19 下载量 39 浏览量
2020-10-15
22:25:49
上传
评论
收藏 40KB PDF 举报
温馨提示
试读
2页
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
资源详情
资源评论
资源推荐
Vue-drag-resize 拖拽缩放插件的使用拖拽缩放插件的使用(简单示例简单示例)
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂,非常不错,具有一定的
参考借鉴价值,需要的朋友可以参考下
字幕
<div id="lBox" style="background-color: #D7E9F5;"
:style="{'height': parentHeight + 'px', 'width': parentWidth + 'px'}">
<drag-resize v-for="(rect,index) in texts"
style="overflow: hidden;"
:w="rect.BoxWidth"
:h="rect.BoxHeight"
:x="rect.BoxLeft"
:y="rect.BoxTop"
@resizing="textResize($event, index)"
@dragging="textResize($event, index)">
<div style="width: 100%; height: 100%;"
:style={backgroundColor:rect.BoxColor,opacity:rect.BoxOpacity}>
</div><!-- 控制背景色及背景透明度 使背景透明度不影响字幕 -->
<div style="width: 100%; height: 100%;">
<p :class="rect.Direction === 'Left to Right' ? 'roll-right' : 'roll-left'"
style="width: 100%; position:absolute; bottom:-0.25em;left:0px"
:style="{color: rect.TextColor,fontFamily: rect.FontFile,
fontSize: rect.FontSize+'px',
opacity:rect.FontOpacity,
animationDuration: rect.Speed + 's'}">
{{rect.Text}}
</p>
</div>
</drag-resize>
logo
<drag-resize v-for="(rect,index) in logos"
:parentLimitation="true"
:w="rect.Width"
:h="rect.Height"
:x="rect.Left"
:y="rect.Top"
@resizing="logoResize($event, index)"
@dragging="logoResize($event, index)">
<div style="width: 100%;height: 100%;">
<img :src="'/logos/' + rect.FileName"
style="width: 100%;height: 100%;">
</div>
</drag-resize>
</div>
JS
textResize(newRect, index) {
const BoxWidth = newRect.width+''
this.texts[index].BoxWidth = BoxWidth.substring(0, BoxWidth.indexOf("."))
const BoxHeight = newRect.height+''
this.texts[index].BoxHeight = BoxHeight.substring(0, BoxHeight.indexOf("."))
const BoxTop = newRect.top+''
this.texts[index].BoxTop = BoxTop.substring(0, BoxTop.indexOf("."))
const BoxLeft = newRect.left+''
this.texts[index].BoxLeft = BoxLeft.substring(0, BoxLeft.indexOf("."))
}
logoResize(newRect, index) {
const Width = newRect.width''
this.logos[index].Width = Width.substring(0, Size.indexOf("."))
const Height = newRect.height+''
this.logos[index].Height = Height .substring(0, Size.indexOf("."))
weixin_38688745
- 粉丝: 4
- 资源: 908
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- JavaScript《基于自动分析数据并给出营业建议的餐厅管理系统(接入AI) 》+源代码+项目说明及资料
- 355670834783295707ad04e-427f-4cde-9589-e578224a8459.zip
- 动态sql解析引擎,类似mybatis动态sql的功能
- EDA365-Skill-V2.5安装包,支持Allegro17.x版本
- C# 常用单词汇总,常用单词汇总
- 【ERP标准流程-标准流程-库内业务管理】(DOC 14页).doc
- Python《数据库期末作业-餐厅点单系统 》+源代码+设计资料
- 学生成绩管理系统(C++课程设计
- 双指针法判断链表有环-go语言实现
- MyBatis动态SQL是一种强大的特性,它允许我们在SQL语句中根据条件动态地添加或删除某些部分,从而实现更加灵活和高效的数据
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0