Vue3组件库-消息提示组件

---

theme: healer-readable

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

Vue3组件库-消息提示组件

• 简易消息提示
• 自定义消息提示
• 函数调用消息提示

简易消息提示

• 效果预览

• 先在App.vue 文件里 引入写好的Button组件

• 新建一个Snackbar.vue作为组件的文件

• 给button添加click事件，通过show属性控制消息提示框的显示与隐藏

• 注意点:

  • show前面增加了v-model 这是为了在组件里修改props接收到show的值
  • props里的属性是单向数据 不能直接更改

  ``` 显示时长   这是一个消息条！！

  ```

• 基础组件实现

  • 外部传入字符串，内部放一个默认插槽用于接收显示
  • 给一个基础样式 消息提示框通常在页面右上角 可以用position定位实现

  ```

  ```

• 基础组件逻辑实现

  • 通过传入的show参数进行判断

  • 引入vue中watch函数 观察props值的变化，show为true即可执行定时器 将组件显示3秒再隐藏

  • 组件隐藏应该把show置为false，直接修改不生效

  • 引入vue中defineEmits方法，定义一个"update:show"方法，在定时器执行时调用方法并传入值

  • change()方法为定时器 定义一个query变量设置为none和block以此控制显示隐藏

    import { defineProps, ref, watch, defineEmits, useSlots } from "vue"; const props = defineProps({ show: Boolean }); watch(props, (newProps) => { newProps.show ? changes() : (query.value = "none"); });

自定义消息提示

• 效果预览

• 自定义消息提示增加了一个action具名插槽可供添加内容

• 引入Button组件 并添加show= !show事件可达到关闭效果

• App.vue内容

  <simplebutton type="primary" block @click="show = !show">垂直排列</simplebutton>  <simplesnackbar v-model:show="show">这是一个消息条！！    <template #action>    <simplebutton type="primary"  @click="show = !show">关闭</simplebutton>  </template>  </simplesnackbar>

• 把action插槽外包裹一个div 加上样式 实现靠右显示

  • 注意点:

    • 如果使用position: absolute;定位实现，需要给父元素加上高度 不然会有高度塌陷问题
    • 加上高度 元素不能实现自适应

函数调用组件

• 实现通过createSnackbar('这是一条消息')来直接在页面显示组件 只适用于简单组件

• 先创建一个createSnackbar.js文件并导出

• 创建一个createSnackbar函数 并接收一个外部传入的data值

• 引入createApp 和组件文件 createApp是vue创建实例的函数

  import {createApp} from 'vue' import simplesnackbar from './Snackbar.vue' function createSnackbar (data) {    let message,duration    //判断传进来的参数是对象还是字符串    typeof data == "object" ? {message,duration} = data : message = data    let show = true    //创建组件实例 并把props属性传入组件    let snackbar = createApp(simplesnackbar, {        message,        duration,        show,   })    //创建一个元素 插入到body中    let divElement = document.createElement('div')    document.body.appendChild(divElement) //元素挂载      snackbar.mount(divElement) } export default createSnackbar;

• 在App.js中调用即可

  createSnackbar('这是一条消息')

函数调用函数

• 实现createSnackbar.info('这是一条消息')

  • 效果预览

• 通过不同的方法显示不同颜色的消息提示框

• 直接在createSnackbar函数外增加属性 传入一个type值 用来控制css样式显示

  createSnackbar.success = function(data){    createSnackbar(data,'success') } createSnackbar.info = function(data){    createSnackbar(data,'info') }

• 即可实现不同的消息框样式