流莺书签-基础组件(Button,Overlay,Dialog,Message)

写在前面

项目地址

👉👉项目预览地址,可以直接设置为浏览器主页或者桌面快捷方式进行使用

源码地址

完全开源,大家可以随意研究,二次开发。当然还是十分欢迎大家点个Star⭐⭐⭐
👉👉源码链接(gitee)       👉👉源码链接(github)

简介

本文记录了流莺书签封装的部分基础组件,包括

Button

Overlay

Dialog

Message

由于本项目是为了练手,所以在某些组件中可能也添加了一些实际并没有用到的功能,接下来将逐个介绍这些组件的属性,方法,以及一些设计思路.

除了一些特殊的样式,文章不会大量贴出CSS代码,由于我SASS功底不是很好,CSS代码看起来也是比较臃肿😣😣😣,感兴趣的同学可以自行查看源码

目录结构

基本就是一个组件的.vue文件和一个对应的index.ts,index.ts存放一些基础数据,类型声明等

├── src 
     ├── assets      // 存放静态资源
     ├── baseComponents  // 基础组件
         └──Button    // 按钮组件
         │    └──Button.vue
         └── Message    // 弹窗组件
              ├──Message.vue
              └──index.ts
                 ......
 

Button

展示

先来看效果,可以看到就是鼠标移入移出的时候会有一个动画

11.gif

属性

  • title 按钮的文字
  • backgroundColor 鼠标移入的颜色
  • useAnimation 是否启用动画

设计思路/亮点

🌝按钮的背景颜色使用了vue3新增特性,直接在css中绑定了props的变量backgroundColor,不了解新特性的小伙伴可以前往官网查看哟

🌝通过动态绑定class来启用动画,因为css中是给类名animation写的hover事件,所以如果类名不存在了,动画自然不生效了

代码

<template>
<div class="wh-button-box">
<div class="btn">
<a :class="{animation:useAnimation}" href="#">{{title}}</a>
</div>
</div>
</template>
<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Wh-button',
props: {
title: {
type: String,
default: '按钮',
},
backgroundColor: {
type: String,
default: 'rgba(16, 143, 111, 0.3)',
},
useAnimation: {
type: Boolean,
default: false,
},
},
setup() {
return {};
},
});
</script>
<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
.wh-button-box {
.btn {
&:hover .animation::before {
transform: skewX(45deg) translateX(200%);
}
&:hover .animation {
background: v-bind('state.color');
}
}
}
</style>

组件中使用

正常传入属性使用即可,这里使用双标签纯属个人习惯😁😁

<wh-button @click="onConfirm"  title='确认' :use-animation="true" :background-color="`rgba(160, 21, 114, 0.3)`"></wh-button>
<wh-button @click="onCancle" title='取消' :use-animation="true"></wh-button>

Overlay

展示

先看效果

15.gif

属性

  • show 是否启用遮罩层
  • zIndex 遮罩层的z轴坐标
  • closeOnClickModal 是否可以通过点击遮罩层关闭内容

设计思路/亮点

🌝使用了vue3的新特性teleport,这个组件的作用是把里面的内容插入到指定的节点当中,我这里是插入在body里了

🌝添加了0.3秒的一个过渡效果,这样显得平滑一点,这里需要注意的是vue3中的transition类名发生了一些小变化,我刚开始写的时候没注意到,结果过渡效果就没生效,查了半天才发现v-enter变成了v-enter-form, v-leave变成了v-leave-form,整体的使用方式还是跟以前一样,更多具体的变动请移步vue3官网

🌝遮罩层一般都结合其他组件使用,比如Dialog,所以这里设置了一个属性,来配置是否可以通过点击遮罩层来关闭Dialog,需要配置closeOnClickModaltrue,并执行父组件的一个close方法

代码

<template>
<!-- 传送门  此处Dom节点会被插在body里 -->
<teleport to='body'>
<!-- 过渡动画  添加了0.3s的淡入淡出  显得更加平滑 -->
<transition name="base">
<!-- 遮罩层 -->
<div class="overly" :style="`z-index:${zIndex}`" v-if="show" @click='handleClick'></div>
</transition>
</teleport>
</template>
<script lang='ts'>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Overlay',
props: {
show: {
type: Boolean,
default: false,
},
zIndex: {
type: Number,
default: 2000,
},
closeOnClickModal: {
type: Boolean,
default: false,
},
},
emits: ['close'],
setup(props, { emit }) {
const handleClick = () => {
if (props.closeOnClickModal) {
emit('close');
}
return;
};
return {
handleClick,
};
},
});
</script>
<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
//淡入淡出
.base-enter-active,
.base-leave-active {
transition: all 0.3s ease;
}
.base-enter-to,
.base-leave-from {
opacity: 1;
}
.base-enter-from,
.base-leave-to {
opacity: 0;
}
</style>

组件中使用

配置close-on-click-modaltrue并传入一个close方法,就可以点击遮罩层关闭其他组件了(如Dialog),需要在close方法中手动的设置:show绑定的属性为false.

<overlay :show='dialogVisible' @close='onCancle' :close-on-click-modal='true'></overlay>

Dialog

展示

先看效果,点击的那个黄色圆圈是录屏软件自带的,不是我写的🤦‍♂️🤦‍♂️🤦‍♂️

12.gif

属性

  • dialogVisible 是否展示弹窗
  • title 标题
  • width 宽度
  • top 距离顶部的位置

设计思路/亮点

🌝和遮罩层绑定同一个值,可以在关闭弹窗的同时关闭遮罩层,也可以给遮罩层传递一个close方法,通过点击遮罩层关闭弹窗

🌝使用teleport将弹窗插入到.Dialog(class='Dialog')中,至于为什么要插入到这里,只是为了练习封装一个用来生成节点的hooks

//创建DOM节点的hook函数 在body中插入一个自定义class的div节点 
//setup函数在执行时等同于created 所以没必要写入生命周期
import { onUnmounted } from 'vue';
const useDOMCreate = (nodeId: string): HTMLDivElement => {
// 生成一个div的节点
const node = document.createElement('div');
// 给赋值一个class
node.className = nodeId;
// 在body中插入div节点
document.body.appendChild(node);
// 在组件卸载的时候移除dom节点
onUnmounted(() => {
document.body.removeChild(node);
});
return node;
};
export default useDOMCreate;

🌝使用transition添加了一个淡入淡出的过渡,并且有20px的位移,视觉效果更好

🌝组件本身分为三个部分,header就是一个标题,body部分是一个插糟,可以通过父组件添加一些内容进来,

footer部分是两个button,执行父组件的确认和取消回调.

代码

<template>
<!-- 遮罩层 -->
<overlay :show='dialogVisible' @close='onCancle' :close-on-click-modal='true'></overlay>
<!-- 传送门  此处Dom节点会被插在.Dialog里 -->
<teleport to='.Dialog'>
<div class="dialog-box" v-bind='$attrs'>
<!-- 过渡动画  添加了0.3s的淡入淡出  并且有20px的移动 显得更加平滑 -->
<transition name="dialog">
<div class="dialog-content" v-if='dialogVisible' :style="`width:${width};margin-top:${top}`">
<!-- Dialog组件header部分 -->
<div class="dialog-header">
<h5 class="dialog-title">{{title}}</h5>
</div>
<!-- Dialog组件内容插槽 -->
<slot>
</slot>
<!-- Dialog组件footer部分 -->
<div class="dialog-footer">
<wh-button @click="onConfirm" class="footer-btn" title='确认' :use-animation="true" :background-color="`rgba(160, 21, 114, 0.3)`"></wh-button>
<wh-button @click="onCancle" class="footer-btn" title='取消' :use-animation="true"></wh-button>
</div>
</div>
</transition>
</div>
</teleport>
</template>
<script lang='ts'>
//此处省略文件引用,详情请查看源码
export default defineComponent({
components: {
Overlay,
WhButton,
},
name: 'Dialog',
props: {
dialogVisible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '提示',
},
width: {
type: String,
default: '400px',
},
top: {
type: String,
default: '15vh',
},
},
emits: ['cancle', 'confirm'],
setup(props, { emit }) {
// 创建dom节点 .Dialog
useDOMCreate('Dialog');
// 关闭Dialog
const onCancle = () => {
emit('cancle');
};
const onConfirm = () => {
emit('confirm');
};
return {
onCancle,
onConfirm,
};
},
});
</script>
<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
.dialog-enter-active,
.dialog-leave-active {
transition: all 0.3s ease;
}
.dialog-enter-to,
.dialog-leave-from {
opacity: 1;
}
.dialog-enter-from,
.dialog-leave-to {
transform: translateY(-20px);
opacity: 0;
}
</style>

组件中使用

正常传入属性使用即可,form组件作为内容插入,有关form组件可以点击这里查看我的另一篇文章

👉👉流莺书签-基础组件介绍(Form,Input)

<!-- 添加单个书签的弹窗 -->
<Dialog :dialog-visible='isShowAddMarkDialog' @cancle='onCancle' @confirm='onConfirm' title='添加书签'>
<wh-from ref='form'>
</wh-from>
</Dialog>

Message

展示

先看效果,这里只展示了默认的情况,其实还有其他颜色的

13.gif

属性

  • id 标识
  • type 类型
  • message 内容
  • duration 延迟消失的时间
  • offsetNumber 偏移量

设计思路/亮点
🌝使用transition添加了过渡效果,视觉效果拉满,淡入淡出,并且移动一个身位,通过传入的类型属性来绑定class达成不同颜色的效果

🌝使用的时候可以传入一个配置对象,或者一个字符串,如果是字符串最终还是会转换为对象

🌝使用fixed定位,距离顶部的偏移量通过message的数量来计算,所有的message存放在一个数组中,新增和移除一条message的时候就相应的操作数组,再根据 数组的长度 * 一个固定的高度 ,就可以算出每一条message的偏移量

🌝给实例添加一个销毁的方法,在transitionafter-leave周期中触发这个方法,在这个方法中操作数组删除数据,并修改props中的offsetNumber来造成视图的刷新.具体的查看下方代码以及源码.

代码

//Message.vue
<template>
<!-- 过渡效果 淡入淡出 并且移动一个身位 -->
<transition name='message' @after-leave="$emit('destroy')">
<div :class="classes" v-show='visiable' :style='styles' class="message">
{{message}}
</div>
</transition>
</template>
<script lang='ts'>
//此处省略文件引用,详情请查看源码
export default defineComponent({
name: 'Message',
props: {
id: {
type: String,
default: '',
},
type: {
type: String as PropType<MessageType>,
default: 'default',
},
message: {
type: String,
default: '这是一条提示',
},
duration: {
type: Number,
default: 2000,
},
offsetNumber: {
type: Number,
default: 0,
},
},
setup(props) {
const classes = computed(() => ['message-' + props.type]);
const visiable = ref(false);
let timer: any = null;
const startTimer = () => {
timer = setTimeout(() => {
visiable.value = false;
}, props.duration);
};
const styles = computed(() => {
return { top: `${(props.offsetNumber - 1) * 55 + 20}px` };
});
// 组件渲染完了显示
onMounted(() => {
visiable.value = true;
// 开启定时器
startTimer();
});
onUnmounted(() => {
clearTimeout(timer);
});
return {
classes,
visiable,
styles,
};
},
});
</script>
<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
.message-enter-active,
.message-leave-active {
transition: all 0.3s ease;
}
.message-enter-to,
.message-leave-from {
opacity: 1;
}
.message-enter-from,
.message-leave-to {
transform: translate(-50%,-100%);
opacity: 0;
}
</style>
 
//index.ts
import Message from './Message.vue';
import { createVNode, render, VNode, reactive, computed } from 'vue';
// 类型
export type MessageType = 'success' | 'error' | 'default';
//一条消息的数据
export interface MessageOptions {
id?: string;
type?: MessageType;
message?: string;
duration?: number;
offsetNumber?: number;
}
export type MessageParams = MessageOptions | string;
export type MessageList = MessageOptions[];
// 存放所有的message实例  用来计算偏移量
const instances = reactive<VNode[]>([]);
const offsetNumber = computed(() => instances.length + 1);
const createMessage = (options: MessageParams) => {
// 如果参数是string类型,就把它转换为options对象
if (typeof options === 'string') {
options = {
message: options,
};
}
// 把组件创建为虚拟节点  也就是一个组件实例
const vnode = createVNode(Message, {
...options,
offsetNumber: offsetNumber.value,
});
// 创建一个容器
const container = document.createElement('div');
// 把实例渲染到容器里
render(vnode, container);
// 将渲染后的结果 放到body上
// 因为会多一个div 所以插入第一个孩子
// 为什么不直接放到body里,要创建一个容器再取里面的内容呢   为了销毁组件 如果直接放在body里,就清空所有节点了
document.body.appendChild(container.firstElementChild!);
instances.push(vnode);
// 给实例添加一个销毁方法
vnode.props!.onDestroy = () => {
instances.shift();
instances.forEach((item: any) => {
item.component.props.offsetNumber -= 1;
});
// 移除dom
render(null, container);
};
};
export default createMessage;

组件中使用

函数式调用,传入配置对象,或者传入一个字符串即可

//此处省略文件引用
createMessage({ type: 'success', message: '添加标签成功!' });

写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅认为我部分代码过于老旧,可以提供新的API或最新语法

✅对于文章中部分内容不理解

✅解答我文章中一些疑问

✅认为某些交互,功能需要优化,发现BUG

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

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧

链接整合

🔊项目预览地址(GitHub Pages):👉👉alanhzw.github.io

🔊项目预览备用地址(自己的服务器):👉👉warbler.duwanyu.com

🔊源码地址(gitee):👉👉gitee.com/hzw_0174/Wa…

🔊源码地址(github):👉👉github.com/alanhzw/War…

🔊项目整体介绍:👉👉juejin.cn/post/696394…

🔊流莺书签-从零搭建一个Vite+Vue3+Ts项目:👉👉juejin.cn/post/695130…

🔊流莺书签-基础组件介绍(Form,Input):👉👉juejin.cn/post/696393…

🔊流莺书签-基础组件(Button,Overlay,Dialog,Message):👉👉juejin.cn/post/696394…

🔊流莺书签-业务组件介绍:👉👉暂无

🔊我的博客:👉👉www.duwanyu.com

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14701.html

发表评论

登录后才能评论