@soei/notice

提示框

<template>
  <s-notice ...></s-notice>
</template>
<style scoped>
  /* vite vue3 scoped */
  :deep(.notice) {
    /* 边宽线宽 */
    --border: 3px;
    /* 最大宽度 */
    --notice-width: 200px;
    /* 最大高度 */
    --notice-height: 200px;
    /* 边框颜色 */
    --notice-line-color: #c1c1c1;
    /* 背景颜色 */
    --notice-bg-color: #251e1e;
    /* 文字颜色 */
    --notice-color: #f3f3f3;
    /* 圆角 */
    --notice-border-radius: 30px;
    /* 三角位置, 仅限三角在上下时, 如果配置了,相对位置固定*/
    --notice-position-left: 20px;
  }
</style>

更新日志

0.1.1

• fly, 卸载时的回收问题

0.1.0

• 新增 [fly]属性 脱离当前容器在 body 之后

• 整体优化

0.0.10

• 问题修复 target 为空是报错

0.0.9

• 优化 bind 有值显示

0.0.8

• 优化鼠标移出的时间设置 -1 为不消失

0.0.7

• start 延迟显示

<s-notice :start="300"></s-notice>

Vue3 引入方式

<script>
  import { Notice } from "@soei/notice";
</script>
<!-- 非 <style scoped>  scoped-->
<style>
  @import "@soei/notice/style.css";
</style>

或

// main.js
import "@soei/notice/style.css";
import notice from "@soei/notice";
Vue.use(notice);
// use.vue
<s-notice ...></s-notice>

安装

npm i @soei/notice

引用

import { Notice } from "@soei/notice";

使用

<Notice> ... </Notice>

<Notice [attrs]></Notice>

bind 目标对象

visible 是否显示

lazy 延迟隐藏

<div @scroll="scroll">
  <!-- :bind="ref | DOMElement"; -->
  <span ref="notice"></span>
</div>
<!-- VUE3 -->
<Notice v-model:bind="notice" v-model:visible="visible" :lazy="3000">
  提示内容~
</Notice>
...
<script setup>
  let notice = ref(null);
  let visible = ref(false);
  let refNotice = ref(null);

  /* 所在容器重新绘制位置 */
  let scroll = () => {
    refNotice.value?.draw();
  };
</script>

<!-- VUE2 -->
<Notice :bind.sync="notice" :visible.sync="visible" :lazy="3000">
  提示内容~
</Notice>
...
<script>
  //...
    data() {
        return {
            bind: this.$refs.notice,
            visible: false,
        }
    }
  // ...
</script>