alan-yi-tools-vue3 常用前端插件工具集

安装

使用 npm 或 yarn 安装 

$ npm install --save alan-yi-tools-vue3

$ yarn add alan-yi-tools-vue3

引用

import alanyitools from 'alan-yi-tools-vue3';

app.use(alanyitools);

示例1(带波纹的语音录制功能)

<audiorecording ref="datas" color="#B38957" :maxsecond="60" :sampleBits="16" :sampleRate="16000" :numChannels="1"></audiorecording>

setup() {
	//定义一个实列常量
	const audio= ref(null);
	
	//判断是否已经录音
	if (!audio.value.audioplayshow) {
		console.log("未找到录音文件,请先完成录音!");
		return;
	}
	
	//获取PCM文件数据
	console.log(audio.value.recorder.getPCMBlob());
	
	//获取WAV文件数据
	console.log(audio.value.recorder.getWAVBlob());
	
	//转换为file文件
	let filename = new File([file], "audios.wav", { type: file.type });
	
	return {
		audio
	}
}

字段说明

ref：获取组件实列；

color：设置主题颜色，默认是#B38957；

maxsecond：设置最大录制时长(秒)，默认是60；

sampleBits：采样位数，支持 8 或 16，默认是16；

sampleRate：采样率，支持 11025、16000、22050、24000、44100、48000，默认是16000；

numChannels：声道，支持 1 或 2， 默认是1；

ref属性

audioplayshow：判断是否有录制文件；

recorder：js-audio-recorder 实列；

js-audio-recorder参考链接

示例2(获取手机验证码功能)

<getverificationCode style="border-bottom: 1px solid #bfa37c;width: 300px;" :formdata="formStatevcode" verificationCode="verificationCode"
		:verificationCodeshow="verificationCodeshow" :maxlength="6" :bordered="false" :axios="axios" color="#bfa37c"></getverificationCode>

setup() {
	//表单数据
	const formStatevcode = reactive({
		mobile: "",
		verificationCode: "",
	});
	
	//是否禁用获取验证码
	const verificationCodeshow = ref(false);
	
	//获取验证码接口方法
	const axios=()=>{
		if(formStatevcode.mobile){
			return true		//继续执行
		}else{
			return false	//终止执行
		}
	}
	
	return {
		verificationCodeshow,
		formStatevcode,
		axios
	}
}

字段说明

formdata：表单对象，必填；

verificationCode：表单里的验证码字段，必填；

axios：获取验证码的axios接口请求， 必填；

verificationCodeshow：是否禁用获取验证码，默认是false；

maxlength：验证码最大长度，默认是6；

bordered：是否显示边框，默认是false；

color：验证码按钮颜色，默认是#bfa37c；

示例3(动态滑块选项功能)

<tabsSlider :tabListArr="tabListArr" :tabPosition="tabPosition" :tabActiveFun="tabActiveFun" :tabWidth="150" activeColor="#3BBCD7"></tabsSlider>

setup() {
	
  //滑块列表
  const tabListArr=[{
      title:'账户修改',
      urls:'a'
  },{
      title:'权限管理',
      urls:'b'
  },{
      title:'机构信息',
      urls:'c'
  }]
  
	//滑块下标
	const tabPosition = ref(0);
	
	//滑块点击方法
	const tabActiveFun=(index,event)=>{
	    console.log(event)
	    tabPosition.value=index
	}
	
	return {
    tabListArr,
		tabPosition,
		tabActiveFun
	}
}

字段说明

tabListArr：滑块列表，必填；
title：滑块名称，必填；
urls：自定义参数，选填

tabPosition：滑块下标(必须为数字类型并且从0开始)，默认是0；

tabActiveFun：滑块点击方法， 必填；

tabWidth：滑块的宽度，默认是150；

activeColor：滑块的颜色，默认是#3BBCD7；

使用手册

参考链接