Vue3组件库-消息提示组件

Vue3组件库-消息提示组件

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

简易消息提示

• 效果预览

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

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

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

• 注意点:

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

   <simplebutton type="primary" block @click="show = !show">显示时长</simplebutton>
    <simplesnackbar v-model:show="show">这是一个消息条！！</simplesnackbar>
  <script setup>
  import simplebutton from "./components/Button.vue";
  import simplesnackbar from "./components/Snackbar.vue";
  import {ref} from 'vue'
  const show = ref(false)
  </script>
  

• 基础组件实现

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

  <div>
      <div
        class="simple-snackbar">
       <slot></slot>
      </div>
    </div>
  <style>
    .simple-snackbar {
    width: 200px;
    padding: 10px;
    background-color: #333;
    color: rgba(255, 255, 255, 0.87);
    border-radius: 3px;
    position: absolute;
    top: 0;
    right: 0;
  }
  </style>
  

• 基础组件逻辑实现

  • 通过传入的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')
  }
  

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