制作网站基本步骤,鲜花网站建设源代码,前端开发和网页设计,推广发帖网站本章主要是介绍自定义的组件#xff1a;WInput#xff1a;这是一个验证码输入框#xff0c;自动校验#xff0c;输入完成回调等#xff1b;WImage#xff1a;这是一个图片展示组件#xff0c;集成了缩放#xff0c;移动等操作。
目录
一、安装
二、引入组件 三、使用…本章主要是介绍自定义的组件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_componentVue.use(w_component) 三、使用
1、WInput WInputrefsmsInputRefcodeSuccessgetSmsCode:inputStyle{ border-color: red }bgColor#ff0:smsLenght8/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)图片顺时针旋转
