优质广告供应商

广告是为了更好地支持作者创作

VUE3+TS轮子组件实现

switch

用CSS控制开关变化,为了让外部知道switch状态,添加了value和input属性,value控制每一次的状态,在每次触发之后会更新,添加了input事件,可以通过$event拿到最新的值
让switch发出Input事件 用context.emit('input‘)

button

在 export default 的props里声明button的所有样式,样式包括样式类型和默认样式。
因为样式过多,如果都写到button的:class里容易混乱,所以使用计算属性
computed

<template>
  <button class="neko-button" :class="classes" :disabled="disabled">
</template>

<script lang="ts">
 setup(props) {
     const { theme, size, level, other } = props;
     const classes = computed(() => {
        return {
          [`neko-theme-${theme}`]: theme,
          [`neko-size-${size}`]: size,
          [`neko-level-${level}`]: level,
          [`neko-other-${other}`]: other,
        };
      });

loading按钮里面有个旋转的动画 用span 所以在Button里写
<span v-if="loading" class="neko-loadingIndicator"></span>
在Loading里才会显示那个span (显示中指示器)

Dialog

Dialog应该有两部分,一个是阴影遮罩层,一个是组件本体
给Dialog添加属性visible,boolean类型,表示我们是否能看见这个弹窗。因为这个弹窗包括阴影遮罩层占据了整个页面,所以在<template>外面再加一层<template>。

<template>
  <template> 
   </template>
</template>

添加close事件让弹窗关闭,在遮罩层添加函数onclickoverlay,控制点击遮罩层是否关闭

 const close = () => {
        context.emit("update:visible", false);
      };

弹框的标题和内容用插槽来写,避免混乱,用具名插槽
外面用v-slot:xxx里面写上slot name=“xxx”

一句话打开dialog 用h函数。用render去构造节点,返回3个参数 第一个是Dialog,第二个是监听visible,让他支持关闭事件,因为titile和content是插槽插进来的,是函数,所以写在第三个参数里

 const app = createApp({
        render() {
            return h(
                Dialog,
                {
                    visible: true,
                    'onUpdate:visible': (newVisible) => {
                        if (newVisible === false) {
                            close();
                        }
                    },
                }, {
                title, content
            })
        }
    })
    app.mount(div)

Tabs

先确认用户写的是Tab标签,通过context.slot.default()数组检查类型,然后用CSS切换,默认状态不显示,选中状态下显示

优质广告供应商

广告是为了更好地支持作者创作

推荐阅读更多精彩内容