vue 自定义组件image 和 input

本章主要是介绍自定义的组件:WInput:这是一个验证码输入框,自动校验,输入完成回调等;WImage:这是一个图片展示组件,集成了缩放,移动等操作。

目录

一、安装

二、引入组件

 三、使用

1、WInput

2、WImage


一、安装

# yarn 安装
yarn add @travel_wsy/w_component# npm 安装
npm install @travel_wsy/w_component -S

二、引入组件

import Vue from 'vue';import w_component from '@travel_wsy/w_component'Vue.use(w_component)

 三、使用

1、WInput
     <WInputref="smsInputRef"@codeSuccess="getSmsCode":inputStyle="{ 'border-color': 'red' }"bgColor="#ff0":smsLenght="8"></WInput>//获取输入结果getSmsCode(e) {console.log(e);},

参数:

参数名

描述

类型

inputStyle

验证码输入框样式,默认:{width:40px;height:48px;border-color:#dedede;}

Object

bgColor

背景色,默认:#ffffff

string

smsLenght

验证码长度,默认:6

number

Events:

事件名

描述

回调参数

codeSuccess

验证码输入完成后回调

string:验证码

Methods:

方法名

描述

clearInput

清除输入框全部内容

效果图:

2、WImage
<WImage></WImage>

 参数:

参数名

类型

描述  

imgWidth

string

图片宽度,默认值:300px

imgHeight

string

图片高度,默认值:300px

src

string

图片地址

Events:

事件名

描述

回调参数

ImageChange

图片发生改变

scale(number):图片缩放比例,left(number):图片左偏移,top(number):图片上偏移

 Methods:

方法名

描述

参数

handleActiveBtns

改变图片

scaleAdd(boolean):图片放大(boolean);scaleMinus(boolean):图片缩小;rotateLeft(boolean):图片逆时针旋转;rotateRight(boolean):图片顺时针旋转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/490813.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java的图书借阅管理系统详细设计和实现

目录 一、前言介绍&#xff1a; 二、主要技术&#xff1a; 2.1 Java技术介绍&#xff1a; 2.2 MYSQL数据库&#xff1a; 三、系统设计&#xff1a; 3.1 系统架构设计&#xff1a; 3.2 登录时序图设计&#xff1a; 四、功能截图&#xff1a; 4.1 用户登录注册 4.2 系统…

每天五分钟深度学习:解析m个样本向量化前向传播的原理

本文重点 上一节课程中,我们学会了多样本的前向传播的向量化形式,使用这种方式我们可以同时计算m个样本的前向传播,我们将m个样本以矩阵形式表示,实现了m个样本的向量化,本节课程我们再来看一下为什么使用上节课程的方式就可以完成m个样本的向量化。 x(1)、x(2)、x(3)在…

Android显示系统(10)- SurfaceFlinger内部结构

Android显示系统(01)- 架构分析 Android显示系统(02)- OpenGL ES - 概述 Android显示系统(03)- OpenGL ES - GLSurfaceView的使用 Android显示系统(04)- OpenGL ES - Shader绘制三角形 Android显示系统(05)- OpenGL ES - Shader绘制三角形(使用glsl文件) Android显…

软考高级架构 - 11.1- 信息物理系统CPS

信息物理系统CPS 信息物理系统(CPS)是控制系统、嵌入式系统的扩展与延伸。通过集成先进的感知、计算、通信、控制等信息技术和自动控制技&#xff0c;构建了物理空间与信息空间中人、机、物、环境、信息等要素相互映射、适时交互、高效协同的夏杂系统。 CPS的本质是基于…

数据可视化的Python实现

一、GDELT介绍 GDELT ( www.gdeltproject.org ) 每时每刻监控着每个国家的几乎每个角落的 100 多种语言的新闻媒体 -- 印刷的、广播的和web 形式的&#xff0c;识别人员、位置、组织、数量、主题、数据源、情绪、报价、图片和每秒都在推动全球社会的事件&#xff0c;GDELT 为全…

【GIS教程】使用GDAL-Python将tif转为COG并在ArcGIS Js前端加载-附完整代码

目录 一、数据格式 二、COG特点 三、使用GDAL生成COG格式的数据 四、使用ArcGIS Maps SDK for JavaScript加载COG格式数据 一、数据格式 COG&#xff08;Cloud optimized GeoTIFF&#xff09;是一种GeoTiff格式的数据。托管在 HTTP 文件服务器上&#xff0c;可以代替geose…

Git-分布式版本控制工具

目录 1. 概述 1. 1集中式版本控制工具 1.2分布式版本控制工具 2.Git 2.1 git 工作流程 1. 概述 在开发活动中&#xff0c;我们经常会遇到以下几个场景&#xff1a;备份、代码回滚、协同开发、追溯问题代码编写人和编写时间&#xff08;追责&#xff09;等。备份的话是为了…

【收藏】Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路 在项目开发的时候&#xff0c;有一个需求是限制相机倾斜角&#xff0c;也就是鼠标中键调整视图俯角时&#xff0c;不能过大&#xff0c;一般 pitch 角度范围在 0 至 -90之间&#xff0c;-90刚好为正俯视。 在网上查阅了很多资料&#xff0c;发现并没有一个合适的…

YOLOv5-Backbone模块实现

YOLOv5-Backbone模块实现 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊 电脑系统&#xff1a;Windows11 显卡型号&#xff1a;NVIDIA Quadro P620 语言环境&#xff1a;python 3.9.7 编译器&#xff1a…

Envoy 服务发现原理大揭秘与核心要点概述

1 Envoy动态配置介绍 动态资源&#xff0c;是指由envoy通过xDS协议发现所需要的各项配置的机制&#xff0c;相关的配置信息保存 于称之为管理服务器&#xff08;Management Server &#xff09;的主机上&#xff0c;经由xDS API向外暴露&#xff1b;下面是一个 纯动态资源的基…

黑盒白盒测试

任务1 黑盒测试之等价类划分法 【任务需求】 【问题】例&#xff1a;某报表处理系统要求用户输入处理报表的日期&#xff0c;日期限制在2003年1月至2008年12月&#xff0c;即系统只能对该段期间内的报表进行处理&#xff0c;如日期不在此范围内&#xff0c;则显示输入错误信息…

linux普通用户,配置python环境及oracle客户端

需求&#xff1a; 有一个python脚本&#xff0c;需要在linux普通用户下运行&#xff0c;脚本中需要连接oracle数据库查询数据 本地环境&#xff1a;centos7.6 Python版本&#xff1a;Python3.6 Oracle版本&#xff1a;12c 配置Python环境 选择对应Python版本进行下载 注意&am…

单元测试-FATAL ERROR in native method: processing of -javaagent failed

文章目录 前言单元测试-FATAL ERROR in native method: processing of -javaagent failed1. 报错信息2. 解决方案 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运…

如何平衡向量检索速度和精度?深度解读HNSW算法

向量检索&#xff08;向量相似性搜索&#xff09;是AI时代最重要的技术之一。其典型应用场景包括&#xff1a;推荐系统、检索增强生成&#xff08;RAG&#xff09;等高级GenAI应用。 向量检索最突出的优势是准确性和速度。 过去&#xff0c;向量搜索通常是用暴力扫描的方式来找…

Python的3D可视化库【vedo】2-2 (plotter模块) 访问绘制器信息、操作渲染器

文章目录 4 Plotter类的方法4.1 访问Plotter信息4.1.1 实例信息4.1.2 演员对象列表 4.2 渲染器操作4.2.1 选择渲染器4.2.2 更新渲染场景 4.3 控制渲染效果4.3.1 渲染窗格的背景色4.3.2 深度剥离效果4.3.3 隐藏线框的线条4.3.4 改为平行投影模式4.3.5 添加阴影4.3.6 环境光遮蔽4…

强化学习的学习笔记

什么是强化学习&#xff1f; 强化学习&#xff08;Reinforcement Learning, RL&#xff09;&#xff0c;又称再励学习、评价学习或增强学习&#xff0c;是机器学习的范式和方法论之一&#xff0c;用于描述和解决智能体&#xff08;agent&#xff09;在与环境的交互过程中通过学…

Leetcode42-环形链表

题目 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使…

ElasticSearch 简介

一、什么是 ElastcSearch&#xff1f; ElasticSearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎。 1.1 ElasticSearh 的基本术语概念 index 索引 索引类似与 mysql 中的数据库&#xff0c;ES 中的索引是存储数据的地方&#xff0c;包含了一堆有相似结构的文档数据…

【学习笔记】桌面浏览器的视口

概念&#xff1a;设备像素和CSS像素 设备像素&#xff1a;设备物理屏幕的像素分辨率&#xff0c;使用screen.width/height获取 这里有四个像素100%缩放&#xff0c;CSS像素完全覆盖设备像素 缩小后&#xff0c;CSS像素开始缩小&#xff0c;意味着一个设备像素覆盖多个CSS像素…

嵌入式软考学习笔记(1)超详细!!!

目录 第一章计算机系统基础知识 1、逻辑运算 2、数的表示 3、总线系统 5、流水线 6、存储器 7、可靠性、校验码 第一章计算机系统基础知识 1、逻辑运算 与&#xff1a;有0则0&#xff0c;全1才1 或&#xff1a;有1则1&#xff0c;全0才0 异或&#xff1a;相同为0…