消息通知 Notify | iui Design 一款基于Vue3的Uniapp组件库

展示通知提醒，将信息及时有效的传达给用户。

基本使用

消息通知的基本用法

html

<iui-notify ref="notify"> </iui-notify> 

<script setup>
  import { ref, onMounted } from "vue";

  const notify = ref(null);
  onMounted(() => {
    notify.value.push({ content: "通知内容" }); 
  });
</script>

<iui-notify ref="notify"> </iui-notify> 

<script setup>
  import { ref, onMounted } from "vue";

  const notify = ref(null);
  onMounted(() => {
    notify.value.push({ content: "通知内容" }); 
  });
</script>

消息类型

消息通知有四种类型，分别为 primary、success、warning、error，默认为 primary。

html

<iui-notify ref="notify"> </iui-notify> 

<script setup>
  import { ref, onMounted } from "vue";

  const notify = ref(null);
  onMounted(() => {
    // 通过函数调用
    notify.value.push({ content: "主要通知" }); 
    notify.value.success({ content: "成功通知" }); 
    notify.value.warning({ content: "警告通知" }); 
    notify.value.error({ content: "错误通知" }); 

    // 通过属性调用
    notify.value.push({ content: "成功通知", type: "success" }); 
  });
</script>

<iui-notify ref="notify"> </iui-notify> 

<script setup>
  import { ref, onMounted } from "vue";

  const notify = ref(null);
  onMounted(() => {
    // 通过函数调用
    notify.value.push({ content: "主要通知" }); 
    notify.value.success({ content: "成功通知" }); 
    notify.value.warning({ content: "警告通知" }); 
    notify.value.error({ content: "错误通知" }); 

    // 通过属性调用
    notify.value.push({ content: "成功通知", type: "success" }); 
  });
</script>

自定义

notify 支持通过属性传入自定义内容。

html

<iui-notify ref="notify">
    <!-- 自定义内容 -->
    <template #content="{ msg }">
      <view class="customContent">
        {{ msg }}
      </view>
    </template>
</iui-notify>

<script setup>
  import { ref, onMounted } from "vue";

  const notify = ref(null);
  onMounted(() => {
    notify.value.push({
      content: "通知内容",
      // 自定义文字颜色、背景色
      color: {
        background: "rgb(232, 243, 255)",
        color: "#165DFF",
      },
    });
  });
</script>

<style scoped>
.customContent {
  border: 1px solid #165dff;
  border-radius: 50px;
  padding: 5px 20px;
  margin-top: 5px;
  color: #165dff;
}
</style>

<iui-notify ref="notify">
    <!-- 自定义内容 -->
    <template #content="{ msg }">
      <view class="customContent">
        {{ msg }}
      </view>
    </template>
</iui-notify>

<script setup>
  import { ref, onMounted } from "vue";

  const notify = ref(null);
  onMounted(() => {
    notify.value.push({
      content: "通知内容",
      // 自定义文字颜色、背景色
      color: {
        background: "rgb(232, 243, 255)",
        color: "#165DFF",
      },
    });
  });
</script>

<style scoped>
.customContent {
  border: 1px solid #165dff;
  border-radius: 50px;
  padding: 5px 20px;
  margin-top: 5px;
  color: #165dff;
}
</style>

API

<Notify>props

参数	描述	类型	默认值
content	消息内容	String	-
visible	是否显示	Boolean	false
timeout	显示时长	Number	2000
type	消息类型	primary \| success \| warning \| error	primary
color	自定义颜色	Object:{background: String, color: String}	-
height	高度	Number	40
fixed	是否固定在顶部	Boolean	false

<Notify>slots

插槽名	描述	参数
content	自定义内容	消息内容 msg: String

基本使用 ​

消息类型 ​

自定义 ​

API ​

基本使用

消息类型

自定义

API