vue 图片旋转,vue点击图片跳转
这篇文章主要为大家详细介绍了vue3实现旋转图片验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3实现旋转图片验证的具体代码，供大家参考，具体内容如下
一、前言
一个突发奇想的创作。
二、代码
模板
埃尔对话
v-model=dialogVisible
宽度=15%
:before-close=handleClose
El-image:src= imageUrl :style= Xuan Zhan class= w-full flex justify-center rounded-full overflow-hidden
模板#错误
div class=image-slot
I class= El-icon-picture-outline text-3xl /I
/div
/模板
/el图像
模板#页脚
div class= w-full MX-1 my-1h-8 BG-gray-300相对
I @ mousedown= range move :style= left num class= El-icon-d-arrow-right h-8 w-8 BG-白色边框绝对top-0 bottom-0 flex justify-居中项目-居中光标-指针选择-无/I
/div
div class= w-完全伸缩对齐-平均
el-button @click=chongzhi()重置/el-button
El-button type= primary @ click= tijiao()确定/el-button
/div
/模板
/el-dialog
/模板
脚本语言
从“vue”导入{computed，defineComponent，ref }。
导出默认定义组件({
姓名：旋转，
设置（道具、内容){
//左侧距离和移动距离
const disX=ref(0)
const leftnum=computed(()={
return `left: ${disX.value}px `值值
})
//角度和旋转角度
常量焦度=ref(0)
const Xuan Zhan=computed(()={
return ` transform:rotate($ {焦度。值} deg)；`
})
const dialogVisible=ref(false)
const imageUrl=ref( http://1812。img。PP。搜狐。com。cn/images/blog/2009/11/18/18/8/125 b 6560 a6ag 214。jpg’)
函数getimage(){
console.log(向后台获取图片)
}
函数init(){
dialogVisible.value=true
getimage()
}
函数handleClose(){
jiaodu.value=0
disX.value=0
imageUrl.value=
dialogVisible.value=false
}
函数范围移动(e:任何){
设ele=e .目标
设startX=e . clientx-disx。价值；
设eleWidth=ele.offsetWidth
设父宽度=ele。父元素。offsetwidth
设MaxX=父宽度-ele宽度；
document.onmousemove=(e)={
设endX=e.clientX
disx。value=endX-startX；
if(disX.value=0){
disx。值=0；
}else if(disX.value=MaxX){ //减去滑块的宽度，体验效果更好
disX.value=MaxX
}
//计算滑动距离与全长的比例
常量毕丽=disX.value/(MaxX-eleWidth)
//用比例乘以360度，就是旋转角度
jiaodu.value=毕丽* 360
}
document.onmouseup=()={
document.onmousemove=null
document.onmouseup=null
}
}
//逐步减少，看上去好看点
函数渐少(disbuchang:number，jiaobuchang:number){
焦度。价值=焦度。价值——脚步不停
disx。value=disx。价值分化
if(disX.value=0 ){
jiaodu.value=0
disX.value=0
}
}
//点击重置，使用异步方法，逐步回到原点
函数冲之(){
const disbuchang=50
const jiaobubuchang=disbuchang/disx。价值*焦度。价值
常量典满=setInterval(()={
if(disX.value==0){
间隙(典满)
}否则{
煎烧(disbuchang，jiaobubuchang)
}
},10)
}
//点击确定
函数踢脚(){
if(disX.value==0){
返回
}
console.log(后端验证成功)
//成功后，触发父组件方法。
content.emit(get )
}
返回{
手柄关闭，
imageUrl，
对话可见，
初始化，
rangeMove，
leftnum，
玄奘，
崇智，
体教，
}
},
组件：{},
})
/脚本
样式范围
/风格
钢性铸铁用的是顺风。
三.使用方法
玄转ref=玄转@get=成功/玄转
设置（道具、内容){
const my玄战：any=ref(null)
函数史策(){
my Xuan Zhan . value . init()
}
函数成功(){
Console.log(成功回调)
}
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。