提示框

<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>

更新日志

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 目标对象

visiable 是否显示

lazy 延迟隐藏

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

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

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