sw-element-v3-test

SWElementV3

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

集成

pnpm add sw-element-v3-test

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

全量注册

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

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-test";

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

组件清单

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-test';

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>