1.4.6 • Published 2 years ago
zzvue v1.4.6
Vue2版本组件封装
用问题的可以加群
群名称：zzvue改进群
群 号：914066883（500人）
要在public中引入几个js才能使用本插件
链接 http://182.92.117.176:8081/shixun/static/liveplayer-lib.min.js
<script src="<%= BASE_URL %>liveplayer-lib.min.js"></script>支持多种格式的播放器（基于LivePlayer封装）
介绍：支持大屏适配，支持移动端，自动播放（要是不能自动播放就是浏览器不支持）支持截图
解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可
（ 支持MP4、 m3u8/HLS、 HTTP-FLV/WS-FLV 、 RTMP 、 ）
注意：这里要在public的html中引入一个js，
链接 http://182.92.117.176:8081/shixun/static/liveplayer-lib.min.js 最好把这个js下载下来
<template>
<div class="waiVideo">
<VideoCom videoUrl=""></VideoCom>
</div>
</template>
<script>
import {VideoCom} from "zzvue"
export default {
components:{VideoCom}
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
}
</style>支持参数：
<VideoCom
:stretch="false"//是否拉伸true拉伸false不拉伸
:seek="false"//是否启用自动更新下一秒默认不启动
:seekTime="30"//启动seek之后可以设置更新时间默认30s
alt="无信号"//传空的时候显示的字
></VideoCom>图片请求base64地址组件
介绍：用来请求加密地址用的，支持切换。
解释：传入请求地址和图片的静态路径，切换做了处理直接改变imgUrl即可
图片宽度是100% 高度是适应
使用：
<template>
<div class="waiVideo">
<ImgCom imgUrl="xxxx"></ImgCom><!--这里有两个选择可以不填http就会自动显示图片 -->
<ImgCom httpImg="http://xxxx" imgUrl="xxxx"></ImgCom>
</div>
</template>
<script>
import {ImgCom} from "zzvue"
export default {
components:{ImgCom}//httpImg是必穿参数
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
}
</style><ImgCom
httpImg="http://xxxx"
imgUrl="xxxx"
imgType=”png“ //如果不写会识别imgurl中最后面的文件后缀，如果没有后缀就默认是jpg
:sync="false" //是否同步请求默认是false true就是同步请求
></ImgCom>区域选择组件封装
介绍：用来在视频上描绘区域
解释：可以设置模式点击模式和鼠标移动模式，支持移动端手指触摸移动。支持适配百分比会获取父元素的宽高来渲染画布的大小，如果父元素没有默认宽高是100px
使用：
<template>
<div class="waiVideo">
<AreaSelect :serviceData.sync="serviceData"></AreaSelect>
</div>
</template>
<script>
import {AreaSelect} from "zzvue"
export default {
components:{AreaSelect},//serviceData点的位置
data() {
return {
serviceData:[[323, 76], [336, 195], [617, 151], [452, 45]]
};
},
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
}
</style>支持传的参数：
//如果一下参数不添加就是默认参数
<AreaSelect
@mousedown="mousedown" //监听mousedown事件
mode="" //两种模式1.默认空为鼠标移动；2.click是点击模式
modeType="polygon" //出来选框的形状默认多变行可以自动移动，react矩形 line水平线 curve不闭合曲线
:lineRange="8" //选择中线的范围专门对矩形进行横向和纵向拉动用
:isMove="false" //判断是否能移动矩形和多边形默认是false
:lineLong="40" //这个是选择line的时候可以设置线的长度
:showTitle="false" //是否展示文字
circleRadius="10" //点击圆的半径
circleBorderWidth="4" //圆边框的宽度
circleBorderColor="#28B1D9" //圆边框的颜色
circleInColor="#28B1D9" //圆区域的颜色
circleSelectColor="#FFF" //圆选中的颜色
lineColor="#28B1D9" //线的颜色
lineWidth="2" //线的宽度
areaColor="rgba(40, 177, 217, 0.2)" //选中区域的颜色支持rgba
:disabled="true" //默认是false如果是true就是不可滑动
title= "" //文字的内容填写就有 \n是换行
titleColor="#000" //文字的颜色 默认黑色
titleFont="14px bold 黑体" //文字的字体
titleLineHeight="" //文字的行高 默认和文字行字体大小一样
position={[10,10]} //文字的位置0是x y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
titleBackgroundColor= ""//字的背景颜色支持rgba
titlePadding= "10px" //文字的padding
titleTextAlign= "center" //文字居中或者左对齐，只支持在disabled为false的时候
titleWidth= 100 //字底下背景的宽度
titleFillColor= "" //字底下背景的颜色
:inputStyle="{width:"20px"}"//这里是添加input的自定义样式(根据js填写就行)
:judgment="true" //设置到边界的不能移动默认是true
></AreaSelect>区域多功能封装
介绍：支持多边形和矩形模式和直线模式（可以添加通过ref调用方法）
解释：多边形当绘制完成时点击鼠标右键即可完成就不在绘制，可以进行随意拽动,也可以自行扩展成动态添加多个矩形或者多边形,切记里面的操作一定要在listData中加入修饰符这样才能同步改变
使用：
<template>
<div>
<div class="waiVideo">
<FunAreaSelect ref="funArea" :listData.sync="listData" @onerr="onerr" @change="change"></FunAreaSelect>
</div>
<button @click="funChange('polygon')">添加多边形</button>
<button @click="funChange('react')">添加矩形</button>
<button @click="funChange('line')">添加线</button>
<button @click="funChange('spot')">添加点</button>
<button @click="funChange('curve')">添加曲线</button>
<button @click="funChange('zhuanhuan')">转换</button>
<button @click="funChange('delete')">删除</button>
</div>
</template>
<script>
import {FunAreaSelect} from "zzvue"
export default {
components:{FunAreaSelect},//serviceData点的位置
data() {
return {
listData: [
{
id: "144564",
modeType: "polygon", //判断是矩形还是线还是多边形react line
serviceData: [
[323, 76],
[336, 195],
[617, 151],
[452, 45],
],
},
{
id: "14456444",
modeType: "line",
serviceData: [
[81, 200],
[200, 200],
],
},
{
id: "144566u657",
modeType: "react",
serviceData: [
[300, 362],
[297, 432],
[373, 438],
[372, 356],
],
},
],
};
},
methods: {
funChange(type) {
if (type == "polygon") {//注意不足三个点会在错误回调中提示你将不能右键保存
this.$refs.funArea.addPolygon();
} else if (type == "react") {
this.$refs.funArea.addReact();
} else if (type == "line") {
this.$refs.funArea.addLine();
}else if(type == "zhuanhuan"){
//转换的时候一定要加上lineLong这个参数不然会无效
this.lineLong = -this.lineLong
} else if (type == "spot") {
this.$refs.funArea.addSpot({titleWidth:25,titlePadding:"0",position:[2,3],titleBackgroundColor:"rgba(0,0,0,0)",title:"dsfa"});//这里加入配置项设置点位信息
} else if (type == "curve") {
this.$refs.funArea.addCurve();//添加曲线
} else if(type == "delete"){
if (this.$refs.funArea.polygonFinish) {//这里判断多边形是否绘制完成，绘制完成才能进行删除，
this.listData = this.listData.filter(
(item) => item.id != this.$refs.funArea.selectId
);
}
}
},
change(data){//这个是改变的回调，当点发生改变或者添加的时候触发
console.log(data)
},
onerr(msg){//这里是错误的回调比如：上个添加完没有开始绘制，上个绘制没有保存（这里特指定多边形）
console.log(msg)
}
},
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
position: relative;
}
</style>支持传的参数：
//如果一下参数不添加就是默认参数
//注意这里属性如果添加在标签上就是所有的都生效要是添加到listData中就是某个生效，会以listData中为主，如果没有在判断全局的 modeType spot点就只会标注一个点
<FunAreaSelect
mode="" //两种模式1.默认空为鼠标移动；2.click是点击模式
modeType="polygon" //出来选框的形状默认多变行可以自动移动，react矩形 line水平线 curve不闭合曲线
:judgment="true" //设置到边界的不能移动默认是true
:lineRange="8" //选择中线的范围专门对矩形进行横向和纵向拉动用
:disabled="true" //默认是false如果是true就是不可滑动
selectLineColor="#67C23A" //选中时候线的颜色
:autoKey="true" //开启键盘模式支持撤销和删除
@keydown="keydown"//开启键盘事件后用这个就可以获得撤销当前的数据
:maxAuto="40" //开启键盘后支持最大的撤销步数
:isMove="true" //判断是否能移动矩形和多边形默认是true
:lineLong="40" //这个是选择line的时候可以设置线的长度
:showTitle="false" //是否展示文字
circleRadius="10" //点击圆的半径
circleBorderWidth="4" //圆边框的宽度
circleBorderColor="#28B1D9" //圆边框的颜色
circleInColor="#28B1D9" //圆区域的颜色
circleSelectColor="#FFF" //圆选中的颜色
lineColor="#28B1D9" //线的颜色
lineWidth="2" //线的宽度
areaColor="rgba(40, 177, 217, 0.2)" //选中区域的颜色支持rgba 这里注意一下你要是不想要这个选中和不选中北京颜色的变化你就把selectAreaColor和areaColor设置成一样的
selectAreaColor="rgba(40, 177, 217, 0.2)"//选中后 区域的颜色支持rgba
:disabled="true" //默认是false如果是true就是不可滑动
title= "" //文字的内容填写就有 \n是换行
titleColor="#000" //文字的颜色 默认黑色
titleFont="14px bold 黑体" //文字的字体
titleLineHeight="" //文字的行高 默认和文字行字体大小一样
:position="[10,10]" //文字的位置0是x y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
titleBackgroundColor= ""//字的背景颜色支持rgba
titlePadding= "10px" //文字的padding
titleTextAlign= "center" //文字居中或者左对齐，只支持在disabled为false的时候
titleWidth= 100 //字底下背景的宽度
titleFillColor= "" //字底下背景的颜色
:inputStyle="{width:"20px"}"//这里是添加input的自定义样式(根据js填写就行)
></FunAreaSelect>动画(轮播进入动画)横向
介绍：能设置三个参数，动画每次滚动的时间，展示的数量，和每个元素左面的间隔，这里用的时候外部要加一个div，里面要想我是的加个外层div这样的话才可以用（支持多个同时使用）（1.1.0）做了改进每次要清空上次的数组每次只能存展示数量多一个的数组
<template>
<div class="waiVideo">
<TransitionCom :count="count">
<div v-for="(item,index) in imgList" :key="index">
<img :src="item.imgSrc" alt="">
<div>{{item.contant}}</div>
</div>
</TransitionCom>
</div>
</template>
<script>
import {TransitionCom} from "zzvue"
export default {
components:{TransitionCom},//引入这个
data() {
return {
imgList: [],
count: 4,
};
},
mounted() {
var ws = new WebSocket("ws://localhost:3003/ws");
ws.onopen = function () {};
ws.onmessage = (e) => {
var data = JSON.parse(e.data);
if (this.imgList.length >= this.count + 1) {
this.imgList.shift();
}
this.imgList.push(data);
};
},
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
}
</style><TransitionCom
count={3} //展示的数量，注意里面的宽度也是按照百分比计算的
leftSpance={1} //和左面的间距按百分比算
timeSlide={1} //每次滑动的时间是按秒算的
>
</TransitionCom> 动画轮播（升级用法）
如果一下子推送好多数据需要在外面缓存一个数据然后进行逐个插入
<template>
<div class="waiVideo">
<TransitionCom :count="count">
<div v-for="(item,index) in imgList" :key="index">
<img :src="item.imgSrc" alt="">
<div>{{item.contant}}</div>
</div>
</TransitionCom>
</div>
</template>
<script>
import {TransitionCom} from "zzvue"
export default {
components:{TransitionCom},//引入这个
data() {
return {
imgList: [],
count: 4,
arrData: [],//这个就是用来存的全局数组
timer:null
};
},
mounted() {
var ws = new WebSocket("ws://localhost:3003/ws");
ws.onopen = function () {};
ws.onmessage = (e) => {
var data = JSON.parse(e.data);
this.arrData.push(data);
if (!this.timer) {
this.timer = setInterval(() => {
if (this.imgList.length >= this.count + 1) {
this.imgList.shift();
}
if(this.arrData.length>0){
this.imgList.push(this.arrData.shift());
}
}, 2000);//这里时间注意设置要是timeSlide的2倍不然还没有滑动完就被删除了出现不必要的bug
}
};
},
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
}
</style>登录滑块验证（canvas支持ie10，11）
介绍：登录滑块成功登录成功
<template>
<div class="waiVideo">
<SliderBlock :imgsrc="require('./333.jpg')" @success="chenggong"></SliderBlock>
</div>
</template>
<script>
import {SliderBlock} from "zzvue"
export default {
components:{SliderBlock},//引入这个
data() {
return {
imgsrc: require('./333.jpg'),
};
},
mounted() {
chenggong(val){
console.log(val)
},
},
}
</script>
<style scoped>
.waiVideo{
width: 500px;
height: 500px;
}
</style>api介绍：
<SliderBlock
:imgsrc="require('./333.jpg')"//图片支持数组，如果是数组他会默认随机选择
@success="chenggong"//验证成功返回的函数
></SliderBlock>mqtt封装使用（基于promise）
介绍：根据mqtt.js封装
<template>
<div class="waiVideo">
</div>
</template>
<script>
import {Mqtt} from "zzvue"
export default {
mounted(){
var mqtt = new Mqtt("xx.xx.xx.xx:4545");
mqtt.link().then((client) => {//封装成promsie方便使用
//client这里保留了原生的client函数和用法(也就是mqtt.js原生的使用)
var ClientID = mqtt.random();//这里我内置了随机数，可以直接使用
var topicOne = "xxx/xxx"
var sendMess = { //这就是要传给后端的参数
MessageId: topicOne,
TopicId: topicOne,
Time: new Date().getTime(),
CompanyId: "xxxx",
ClientID: ClientID,//这个mqtt是生成随机生成的随机数
//当然要想申请新的随机数可以mqtt.random()
};
// mqtt.subscribe(topic);//订阅主题
mqtt.subscribe(topicOne + "/" + ClientID);//订阅主题
mqtt.publish(topicOne, sendMess, { qos: 0 })//向某个主题发送消息
mqtt.message((data, topic) => {//接收消息，跟据返回的主题可以确定是哪个主题给的消息
if (topic === topicOne + "/" + ClientID) {
console.log(data)//这里就是该主题传来的结果
mqtt.unsubscribe(topicOne + "/" + ClientID)
}
});
});
}
}
</script>api介绍：
//topicOne这个变量就是一个主题名，相当与接口的那种地址xxx/xxx
var mqtt = new Mqtt("xx.xx.xx.xx:4545");//这里填入端口和ip即可
mqtt.link().then(client=>{})//这是mqtt 这是一个promise对象 client这个是mqtt.js原生对象
mqtt.subscribe(topicOne);//订阅主题
mqtt.publish(topicOne, {}, { qos: 0 })//向某个主题发送消息（主题名，参数（json），qos等的设置）
mqtt.message((data, topic) => {//接收消息，跟据返回的主题可以确定是哪个主题给的消息
if (topic === topicOne ) {//判断一下是哪个主题反给你的消息
console.log(data)//这里就是该主题传来的结果，后端给的结果
}
})
mqtt.unsubscribe(topicOne)//这是注销主题的方法获取地址栏中http://localhost:8080/?id=454参数信息
<template>
<div class="waiVideo">
</div>
</template>
<script>
import {getQuery} from "zzvue"
export default {
mounted(){
console.log(getQuery(id))
}
}
</script>延时获取cookie基于promise
介绍：有时候大屏跳转的时候不能马上就出现cookie会有延时
<template>
<div class="waiVideo">
</div>
</template>
<script>
import {getCookie} from "zzvue"
export default {
mounted(){
getCookie("a").then(res=>{//获取成功
console.log(res)
}).catch(err=>{//获取失败
console.log(err)
})
}
}
</script>api介绍
getCookie("a",10,200).then(res=>{//获取成功 getCookie(cookie的名字,最大链接次数,每次链接时间)
console.log(res)//成功 会返回cookie
}).catch(err=>{//获取失败
console.log(err)//失败 返回获取失败
})1.4.6
2 years ago
1.4.5
3 years ago
1.4.4
3 years ago
1.4.3
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.9
3 years ago
1.3.7
3 years ago
1.2.8
3 years ago
1.3.6
3 years ago
1.2.7
3 years ago
1.3.5
3 years ago
1.2.6
3 years ago
1.3.4
3 years ago
1.2.5
3 years ago
1.3.3
3 years ago
1.2.4
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.3.8
3 years ago
1.2.9
3 years ago
1.2.3
3 years ago
1.2.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.2.1
3 years ago
1.1.2
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago