import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

NoticeBar \u901A\u544A\u680F

\u4ECB\u7ECD

\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002

\u5B89\u88C5


import { createApp } from 'vue';
// vue
import { NoticeBar } from '@nutui/nutui';
// taro
import { NoticeBar } from '@nutui/nutui-taro';

const app = createApp();
app.use(NoticeBar);

\u57FA\u672C\u7528\u6CD5

    <nut-noticebar
      text="\u534E\u4E3A\u7545\u4EAB9\u65B0\u54C1\u5373\u5C06\u4E0A\u5E02\uFF0C\u6D3B\u52A8\u671F\u95F40\u5143\u9884\u7EA6\u53EF\u53C2\u4E0E\u62BD\u5956\uFF0C\u8D62HUAWEI WATCH\u7B49\u597D\u793C\uFF0C\u66F4\u591A\u4EA7\u54C1\u4FE1\u606F\u8BF7\u6301\u7EED\u5173\u6CE8\uFF01"
    ></nut-noticebar>

\u7981\u7528\u6EDA\u52A8

\u6587\u5B57\u5185\u5BB9\u591A\u4E8E\u4E00\u884C\u65F6\uFF0C\u53EF\u901A\u8FC7scrollable\u53C2\u6570\u63A7\u5236\u662F\u5426\u5F00\u542F\u6EDA\u52A8

    <nut-noticebar
      text="\u534E\u4E3A\u7545\u4EAB9\u65B0\u54C1\u5373\u5C06\u4E0A\u5E02\uFF0C\u6D3B\u52A8\u671F\u95F40\u5143\u9884\u7EA6\u53EF\u53C2\u4E0E\u62BD\u5956\uFF0C\u8D62HUAWEI WATCH\u7B49\u597D\u793C\uFF0C\u66F4\u591A\u4EA7\u54C1\u4FE1\u606F\u8BF7\u6301\u7EED\u5173\u6CE8\uFF01"
      :scrollable="false"
    ></nut-noticebar>

\u901A\u544A\u680F\u6A21\u5F0F\u2013\u5173\u95ED\u6A21\u5F0F

    <nut-noticebar
      :closeMode="true"
      @click="hello"
    >\u534E\u4E3A\u7545\u4EAB9\u65B0\u54C1\u5373\u5C06\u4E0A\u5E02\uFF0C\u6D3B\u52A8\u671F\u95F40\u5143\u9884\u7EA6\u53EF\u53C2\u4E0E\u62BD\u5956\uFF0C\u8D62HUAWEI WATCH\u7B49\u597D\u793C\uFF0C\u66F4\u591A\u4EA7\u54C1\u4FE1\u606F\u8BF7\u6301\u7EED\u5173\u6CE8\uFF01
    </nut-noticebar>

\u901A\u544A\u680F\u6A21\u5F0F\u2013\u94FE\u63A5\u6A21\u5F0F

    <nut-noticebar
      left-icon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
      :scrollable="false"
    >
      <a href="https://www.jd.com">\u4EAC\u4E1C\u5546\u57CE</a>
    </nut-noticebar>

\u7EB5\u5411\u6EDA\u52A8

<nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000'  @click='go' :closeMode="true"></nut-noticebar>

data() {
    return {
        horseLamp1: ['\u60CA\u559C\u7EA2\u5305\u514D\u8D39\u9886', '\u7206\u6B3E\u51C6\u70B9\u79D2', '\u4E70\u8D85\u503C\u4F18\u60E0', '\u8D62\u767E\u4E07\u4EAC\u8C46'],
    };
},

methods:{
    go(item){
        console.log(item)
    }
}

\u590D\u6742\u6EDA\u52A8\u52A8\u753B

<nut-noticebar direction='vertical' :list="horseLamp2" :speed='10' :standTime='2000' :complexAm='true'></nut-noticebar>

data() {
    return {
        horseLamp2: ['\u60CA\u559C\u7EA2\u5305\u514D\u8D39\u9886', '\u7206\u6B3E\u51C6\u70B9\u79D2', '\u4E70\u8D85\u503C\u4F18\u60E0', '\u8D62\u767E\u4E07\u4EAC\u8C46'],
    };
}

\u81EA\u5B9A\u4E49\u6EDA\u52A8\u5185\u5BB9

<nut-noticebar direction='vertical' :height='50' :speed='10' :standTime='1000' :list="[]"  @close='go'>
  <div class="custom-item" :data-index='index' v-for="(item,index) in horseLamp3" :key="index">{{item}}</div>
</nut-noticebar>

data() {
    return {
        horseLamp3: ['\u60CA\u559C\u7EA2\u5305\u514D\u8D39\u9886', '\u7206\u6B3E\u51C6\u70B9\u79D2', '\u4E70\u8D85\u503C\u4F18\u60E0', '\u8D62\u767E\u4E07\u4EAC\u8C46'],
    };
}

\u7EB5\u5411\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807

<nut-noticebar direction='vertical' :list="horseLamp1" :speed='10' :standTime='1000' >
  <template v-slot:rightIcon>
    <nut-icon 
      type="trolley" 
      color="#f0250f"
    >
    </nut-icon>

  </template>
</nut-noticebar>

data() {
    return {
        horseLamp1: ['\u60CA\u559C\u7EA2\u5305\u514D\u8D39\u9886', '\u7206\u6B3E\u51C6\u70B9\u79D2', '\u4E70\u8D85\u503C\u4F18\u60E0', '\u8D62\u767E\u4E07\u4EAC\u8C46'],
    };
}

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
direction	\u6EDA\u52A8\u7684\u65B9\u5411\uFF0C\u53EF\u9009 across\u3001vertical	String	across
text	\u63D0\u793A\u7684\u4FE1\u606F	String	\u7A7A
closeMode	\u662F\u5426\u542F\u7528\u5173\u95ED\u6A21\u5F0F	Boolean	false
leftIcon	close\u4E3A\u6CA1\u6709\u5DE6\u8FB9icon,\u5176\u4ED6\u4E3A\u81EA\u5B9A\u4E49\u7684\u56FE\u7247\u94FE\u63A5\uFF0C\u6CA1\u6709\u4E3A\u9ED8\u8BA4\u56FE\u7247	String	\u7A7A
color	\u5BFC\u822A\u680F\u7684\u6587\u5B57\u989C\u8272	String	\u7A7A
background	\u5BFC\u822A\u680F\u7684\u80CC\u666F\u989C\u8272	String	\u7A7A
delay	\u5EF6\u65F6\u591A\u5C11\u79D2	String/Number	1
scrollable	\u662F\u5426\u53EF\u4EE5\u6EDA\u52A8	Boolean	true
speed	\u6EDA\u52A8\u901F\u7387 (px/s)	Number	50

Prop\uFF08direction=vertical\uFF09

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
list	\u7EB5\u5411\u6EDA\u52A8\u6570\u636E\u5217\u8868	Array	[]
speed	\u6EDA\u52A8\u7684\u901F\u5EA6	Number	50
standTime	\u505C\u7559\u65F6\u95F4(\u6BEB\u79D2)	Number	1000
complexAm	\u7A0D\u590D\u6742\u7684\u52A8\u753B\uFF0C\u8017\u80FD\u4F1A\u9AD8	Boolean	false
height	\u6BCF\u4E00\u4E2A\u6EDA\u52A8\u5217\u7684\u9AD8\u5EA6(px)\uFF0C\u6CE8\u610F\uFF1A\u5728\u4F7F\u7528 slot \u63D2\u69FD\u5B9A\u4E49\u6EDA\u52A8\u5355\u5143\u65F6\uFF0C\u6309\u7167\u5B9E\u9645\u9AD8\u5EA6\u4FEE\u6539\u6B64\u503C	Number	40
closeMode	\u662F\u5426\u542F\u7528\u53F3\u4FA7\u5173\u95ED\u56FE\u6807\uFF0C\u53EF\u4EE5\u901A\u8FC7slot[name=rightIcon]\u81EA\u5B9A\u4E49\u56FE\u6807	Boolean	false

Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u5916\u5C42\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03	event: Event
close	\u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1	event: Event

`,33),c=[p],j={setup(r,{expose:s}){return s({frontmatter:{}}),(h,d)=>(t(),a("div",l,c))}};export{j as default};