SWElementV3

省外技术部功能组件库Vue3版本。

集成

pnpm add sw-element-v3

请在宿主工程添加外部依赖："element-plus": "^2.7.2"。

全量注册

import {createApp} from 'vue';
import SWElementV3 from 'sw-element-v3';

const app = createApp(App);
app.use(SWElementV3);

按需加载

<template>
    <div class="home">
        <sw-input v-model.cn="val"></sw-input>
    </div>
</template>

<script lang="ts" setup>
    import {ref} from 'vue';
    import {SwInput} from "sw-element-v3";

    const val = ref('123.456');
</script>

导入样式

import 'sw-element-v3/lib/style.css';

组件清单

SWInput

通过配置自定义修饰符限制用户输入，其他属性和方法配置与el-input一致。

• cn 中文，限制输入中文；
• en 英文，限制输入大小写字母；
• num 数字，限制输入数字；
• char 字符，限制输入specialCharset中包含的字符，默认值：中划线、下划线、左右小括号，井号；
• float 浮点数，限制输入浮点数；
• mix 混合模式，如果配置了mix，会以最后一位的mix或float修饰符为准，如果最后一位为mix，则取配置的cn，en，num，char修饰符作为可输入的内容范围；

可在全量注册时全局替换默认的specialCharset，注意：需要转义的字符请自行添加转义符。

import {createApp} from 'vue';
import SWElementV3 from 'sw-element-v3';

app.use(SWElementV3, {
    input: {
        specialCharset: ' \\-+,#' // 将使用正则表达式/[^ \-+,#]/g，替换不在空格、中划线、加号、英文逗号、井号中的符号，不加转义符将识别成空格和加号之间的字符
    }
});

限制输入中文

<sw-input v-model.cn="val"></sw-input>

限制输入大小写字母

<!--  只能输入大小写字母  -->
<sw-input v-model.en="val"></sw-input>

限制输入数字

<!--  只能输入数字  -->
<sw-input v-model.num="val"></sw-input>

限制输入字符

默认值：中划线、下划线、左右小括号，井号，可通过specialCharset属性自定义字符集。

<!--  只能输入字符  -->
<sw-input v-model.char="val" special-charset=".,#"></sw-input>

限制输入浮点数

<!--  输入浮点数  -->
<sw-input v-model.float2="val" placeholder="请输入两位浮点数"></sw-input>

输入浮点数，设置maxlength后，只能输入maxlength - 小数位 - 小数点位的整数。

<!--  如maxlength为11，小数位为2，则只允许输入8位整数，2位小数，还有1个字符长度被小数点占用  -->
<sw-input maxlength="11" v-model.float2="val"></sw-input>

<!--  如maxlength为11，小数位为0，则允许输入11位整数，因为没有小数位，也没有小数点位  -->
<sw-input maxlength="11" v-model.float0="val"></sw-input>

混合模式

mix 混合模式

如果配置了mix，会以最后一位的mix或float修饰符为准，如果最后一位为mix，则取配置的cn，en，num，char修饰符作为可输入的内容范围。

<!--  可以输入中文、大小写字母、数字  -->
<sw-input v-model.mix.cn.en.num="val"></sw-input>

<!--  如下示例出现了mix和float修饰符，则判断这两个修饰符谁出现在最后就以谁为准，则当前配置取float2，可输入两位小数浮点数  -->
<sw-input v-model.mix.cn.float2.en.num="val"></sw-input>

SWPlayer

vue3版本AliPlayer、Jessibuca播放器整合包，针对物联网产品组视频播放需求定制的视频播放器插件。

AliPlayer用来播放.m3u8格式视频流，Jessibuca用来播放.flv格式视频流，由于部分浏览器限制只能播放6路视频流，所以采用Jessibuca进行flv格式视频流播放，又由于某些需求场景下无法接入国标平台的视频流播放，需要保留m3u8的播放方式，因此开发了此视频播放器插件。

使用示例

<sw-player v-if="playUrl" player-type="ALI" :url="playUrl" auto-play />
<sw-player v-if="playUrl" player-type="JES" :url="playUrl" auto-play />

属性

参数	说明	类型	是否必须	默认值	描述
playerType	播放器类型	JES ALI	是	-	ALI-Ali播放器 JES-Jessibuca播放器
url	流地址	string	是	-	-
autoPlay	是否自动播放	boolean	否	false	是否自动播放，如果需要自动播放，请务必在url获取真实地址时才渲染播放器。
options	播放器配置	Object	否	-	请根据播放器类型自行配置相关属性 Jessibuca options 配置文档：http://jessibuca.monibuca.com/api.html#jessibuca-options Aliplayer options 配置文档：https://help.aliyun.com/zh/vod/developer-reference/api-operations?spm=a2c4g.11186623.0.0.60cd1846irWN6Z

方法

方法名称	说明	返回值
play	开始播放	-
pause	暂停播放	-
stop	停止播放	-
getPlayer	获取播放器实例	ALI、JES播放器实例，可自行使用实例设置监听或调用插件原始方法。

常见问题

• Q: 视频画面未显示？
  • A: 请检查是否正确导入样式文件，配置了自动播放属性，是否在url获取真实地址时才渲染播放器？
• Q: 配置项文档。
  • A: Jessibuca options 配置文档：http://jessibuca.monibuca.com/api.html#jessibuca-options
    Aliplayer options 配置文档：https://help.aliyun.com/zh/vod/developer-reference/api-operations?spm=a2c4g.11186623.0.0.60cd1846irWN6Z