写在

之前

项目地址

??项目预览地址，可直接设置为浏览器主页或桌面快捷方式使用

源码地址

完全开源，您可以随意研发。当然也欢迎大家上Star⭐⭐⭐
??源代码链接（gitee）??源码链接（github）

简介

本文介绍了 流莺 书签包的一些基本组件，包括

⭐ 输入

⭐ 形式

由于本项目是为了实践，所以可能会在一些组件中添加一些实际没有用到的功能。接下来一一介绍这些组件的性质、方法以及一些设计思想。

除部分特殊款式外，文章不会发布大量CSS码。因为我的SASS功力不太好，CSS代码显得臃肿？？？，有兴趣的同学可以查看一下源码

目录结构

基本上是组件的.vue文件和相应的index.ts，index.ts包含一些基本数据，类型声明等。

├── src 
     ├── assets      // 存放静态资源
     ├── baseComponents  // 基础组件
         └──Form    // 表单组件
         │    ├──Form.vue
              └──index.ts
         └── Input    // 输入框组件
              ├──Input.vue
              └──index.ts
         ......
 

输入

显示

先看看效果

属性

• 规则 验证规则
• 宽度宽度
• 填充
• modelValue 输入框的绑定值

设计理念/亮点

?padding 和 width 属性主要用于样式。事实上，它们也可以在引用组件时通过类名来修改。

？vue3 使用modelValue 来绑定组件值。具体使用请参见代码或前往vue3官网

？比较复杂的是内容验证。我使用策略模式进行封装，易于扩展。检查时，只需调用函数handlerValidateInput并传递值和验证规则，返回值boolen，如果规则较多，则循环调用handlerValidateInput，将every组合起来方法，如果验证失败，返回false，那么组件就可以对这个返回值做一些事情

？这里我结合了 message 分量。如果验证失败，则会显示错误消息。还可以给组件添加标签，并与v-show组合，在输入框下方显示错误信息，就像一些大型组件一样。喜欢图书馆，但是我尝试了一下，看起来不太好，所以我没有使用这个方法

$on？由于删除了vue3、$off等中的指令，为了组合Form组件进行通用验证，我使用了这个插件，它的功能与、$off相同，但它没有嵌入到vue3中。请输入具体使用方法请至官网查看。当触发方法为Form组件添加验证函数时，Form组件有相应的方法来收集所有验证函数，用于统一验证

？你可以看到我在这里设置了一个图层div，这样就不会继承我在该图层❙上使用组件（如placeholder）时绑定的属性，请使用❿和❿作为input 继承属性

所有代码

//Input.vue
<template>
  <div class="wh-input-box" :style='{width:width,padding:padding}'>
    <input class="wh-input" v-model="value" @change='validateInput' v-bind='$attrs'>
  </div>
</template>

<script lang='ts'>
//此处省略文件引用,详情请查看源码
export default defineComponent({
  name: 'Wh-input',
  inheritAttrs: false, // 根元素不继承$attrs
  props: {
    rules: {
      type: Array as PropType<RulesProp>,
      default: () => [],
    },
    modelValue: String,
    width: {
      type: String,
      default: '100%',
    },
    padding: {
      type: String,
      default: '30px',
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 定义一个数据类型 包括值 是否错误 错误信息
    const inputRef = reactive({
      // 使用计算属性的get,set方法来实现修改input值
      value: computed({
        get: () => props.modelValue || '',
        set: (val) => {
          emit('update:modelValue', val);
        },
      }),
      error: false,
      message: '',
    });
    // 验证函数
    const validateInput = () => {
      // 循环rules数组 返回结果  every若有一个没通过返回false  全通过返回true
      const isAllPass = props.rules?.every((rule) => {
        // 赋值错误信息
        inputRef.message = rule.message;
        // 执行验证函数
        return handlerValidateInput(inputRef.value, rule);
      });
      // 如果有没通过的验证,则激活error错误开关
      inputRef.error = !isAllPass;
      if (!isAllPass) {
        createMessage(inputRef.message);
      }
      return isAllPass;
    };
    // 初始化的时候执行form-item-created,向form组件添加验证函数
    onMounted(() => {
      emitter.emit('form-item-created', validateInput);
    });
    return {
      ...toRefs(inputRef),
      validateInput,
    };
  },
});
</script>
//此处省略部分CSS代码,详情请查看源码
 

//index.ts
// 单个验证规则
export type RuleType = 'required' | 'maxlength' | 'custom';
export interface RuleProp {
  type: RuleType;
  message: string;
  maxlength?: number;
  validator?: (value: string) => boolean;
}

// 验证规则组合
export type RulesProp = RuleProp[];

// 单个input的验证器
export const validateInput = {
  // 是否必填
  required: (value: string, rule?: RuleProp) => {
    return value.trim() !== '';
  },
  // 最大长度
  maxlength: (value: string, rule: RuleProp) => {
    if (rule.maxlength) {
      return value.length <= rule.maxlength;
    }
    return true;
  },
  // 自定义验证器
  custom: (value: string, rule: RuleProp) => {
    if (rule.validator) {
      return rule.validator(value);
    }
    return true;
  },
};

// 验证器处理程序
export const handlerValidateInput = (value: string, rule: RuleProp) => {
  return validateInput[rule.type](value, rule);
};
 

中使用的组件

正常传入参数并传递后即可使用

 <wh-input :rules='rules' type="text" v-model="labelTitle" placeholder="请输入标签名称" padding='50px 30px' maxlength='10'></wh-input>
 

形式

boolen设计理念/亮点

？使用数组通过mitt插件接受所有Input组件的验证函数，提交表单时可以进行一般验证，因为每个验证函数返回一个boolen值，所以结合函数如果某个项目没有通过的话很容易给出错误信息

？因为流莺书签暂时使用的形状组件几乎都是Input，样式也比较容易管理，所以没有未来随着功能扩展考虑的设计form-item

代码

//Form.vue
<template>
  <form class='valid-form-container'>
    <slot name='default'></slot>
  </form>
</template>

<script lang='ts'>
import { defineComponent, onUnmounted } from 'vue';
import { emitter, ValidateFunc } from 'base/Form/index';

export default defineComponent({
  name: 'ValidateForm',
  setup() {
    // 声明一个空数组  用来存放所有的验证函数
    let funcArr: ValidateFunc[] = [];
    // 验证函数
    const submitForm = () => {
      // 获取所有item的验证结果,有一个没有通过返回false 否则返回true
      const result = funcArr.every((func) => func());
      return result;
    };
    // 把item的验证函数添加到数组中
    const addValidater = (func: ValidateFunc | undefined) => {
      funcArr.push(func as ValidateFunc);
    };
    // 监听form-item-created事件,当有item触发的时候把验证函数添加到数组中
    emitter.on('form-item-created', addValidater);
    // 组件卸载的时候移除监听事件,数组重置为空
    onUnmounted(() => {
      emitter.off('form-item-created', addValidater);
      funcArr = [];
    });
    return {
      submitForm,
    };
  },
});
</script>
 

//index.ts
import mitt, { Emitter } from 'mitt';
export const emitter: Emitter = mitt();
export type ValidateFunc = () => boolean;
 

中使用的组件

必须在组件中绑定ref属性，然后调用form.value.submitForm()进行验证。这个ref属性必须在

归还，否则不生效。这里也有暴风雨

<wh-from ref='form'>
  <wh-input :rules='rules' type="text" v-model="labelTitle" placeholder="请输入标签名称" ></wh-input>
</wh-from>

<script lang='ts'>
//此处省略文件引用,详情请查看源码
export default defineComponent({
  components: {
    WhInput,
    WhFrom,
  },
  setup(props, { emit }) {
    const form = ref<any>(null);
    const submitAll = () => {
      const result = form.value.submitForm();
      if (result) {
        createMessage({ type: 'success', message: '验证通过!' });
      }
    };
    return {
      form,
      submitAll
    };
  },
});
</script>
 

最后是

请给我您的建议，请在下面评论或私信我，非常感谢？？？.

✅我觉得我的部分设计太麻烦了，有更简单或者更高品质的包装方法

✅我觉得我的部分代码太旧了，可以提供新的API或者最新的语法

✅文章中有些内容我不太明白

✅回答我文章中的一些问题

✅认为一些交互和功能需要优化，发现BUG

✅想要添加新功能，对整体设计和外观有更好的建议

最后感谢大家的耐心等待。既然我们都在这里，请订购一个？

链接集成

？项目预览地址（GitHub页面）：??alanhzw.github.io

？项目预览替代地址（自有服务器）：??warbler.duwanyu.com

？源地址（gitee）：??gitee.com/hzw_0174/Wa…

？源地址（github）：??github.com/alanhzw/War...

？流莺书签-从零开始搭建一个Vite+Vue3+Ts项目：??juejin.cn/post/695130…

？流莺书签-基础组件介绍（表单、输入）：??juejin.cn/post/696393…

？流莺书签-基本组件（按钮、叠加层、对话框、消息）：??juejin.cn/post/696394…

？流莺书签-业务组件介绍：??没有

？我的博客：??www.duwanyu.com