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

Popover \u6C14\u6CE1\u5F39\u51FA\u6846

\u4ECB\u7ECD

\u70B9\u51FB\u6216\u5728\u5143\u7D20\u4E0A\u60AC\u505C\u9F20\u6807\uFF0C\u5F39\u51FA\u6C14\u6CE1\u5361\u7247\u6D6E\u5C42\u3002

\u5B89\u88C5


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

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

\u4EE3\u7801\u5B9E\u4F8B

\u57FA\u672C\u7528\u6CD5

Popover \u652F\u6301\u660E\u6717\u548C\u6697\u9ED1\u4E24\u79CD\u98CE\u683C\uFF0C\u9ED8\u8BA4\u4E3A\u660E\u6717\u98CE\u683C\uFF0C\u5C06 theme \u5C5E\u6027\u8BBE\u7F6E\u4E3A dark \u53EF\u5207\u6362\u4E3A\u6697\u9ED1\u98CE\u683C\u3002

  <nut-popover
      :visible="visible"
      :list="List"
      @open="open"
      @close="close"
    >
      <template #reference>
        <nut-button type="primary" shape="square">\u660E\u6717\u98CE\u683C</nut-button>
      </template>
    </nut-popover>

  <nut-popover
      :visible="visible"
      theme="dark"
      :list="List"
      @open="open"
      @close="close"
    >
      <template #reference>
        <nut-button type="primary" shape="square">\u6697\u9ED1\u98CE\u683C</nut-button>
      </template>
    </nut-popover>


  setup(){
  const visible = ref(false);
  const List =  [
    {name: '\u9009\u9879\u4E00'},
    {name: '\u9009\u9879\u4E8C'},
    {name: '\u9009\u9879\u4E09'}];
  }

  const open = () =>{
      visible.value = true;
  }
  const close = () =>{
      visible.value = false;
  }

\u9009\u9879\u914D\u7F6E

  <nut-popover
      :visible="visible"
      theme="dark"
      :list="List"
      @open="open"
      @close="close"
    >
      <template #reference>
        <nut-button type="primary" shape="square">\u5C55\u793A\u56FE\u6807</nut-button>
      </template>
    </nut-popover>


  setup(){
    const visible = ref(false);
    const List = [
      {name: '\u9009\u9879\u4E00',icon: 'my2'},
      {name: '\u9009\u9879\u4E8C',icon: 'cart2'},
      {name: '\u9009\u9879\u4E09',icon: 'location2'}
    ],

    const open = () =>{
      visible.value =   true;
    }
    const close = () =>{
      visible.value =  false;
    }
  }

\u5728 list \u6570\u7EC4\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7 disabled \u5B57\u6BB5\u6765\u7981\u7528\u67D0\u4E2A\u9009\u9879\u3002

  <nut-popover
      :visible="visible"
      :list="List"
      @open="open"
      @close="close"
    >
      <template #reference>
        <nut-button type="primary" shape="square">\u7981\u7528\u9009\u9879</nut-button>
      </template>
    </nut-popover>



  setup(){
    const visible = ref(false);
    const List = [{
              name: '\u9009\u9879\u4E00',
              disabled: true
            },
            {
              name: '\u9009\u9879\u4E8C',
              disabled: true
            },
            {
              name: '\u9009\u9879\u4E09'
            }],

    const open = () =>{
      visible.value =   true;
    }
    const close = () =>{
      visible.value =  false;
    }
  }

\u81EA\u5B9A\u4E49\u5185\u5BB9

\u5728\u540D\u4E3A content \u63D2\u69FD\u4E2D\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002

  <nut-popover 
      :visible="visible"
      @open="open"
      @close="close">
      <template #reference>
        <nut-button type="primary" shape="square">\u81EA\u5B9A\u4E49\u5185\u5BB9</nut-button>
      </template>

      <template #content>
        <div class="self-content">
          <div
                      class="self-content-item"
                      v-for="(item, index) in selfContent"
                      :key="index"
                    >
            <nut-icon :name="item.name" size="15"></nut-icon>
            <div class="self-content-desc">{{ item.desc }}</div>
          </div>
        </div>
      </template>
    </nut-popover>

\u4F4D\u7F6E\u81EA\u5B9A\u4E49

\u652F\u6301 bottom, top, left, right \u56DB\u79CD\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u503C\u4E3A bottom\u3002

  <nut-popover
      :visible="visible"
      location="top"
      theme="dark"
      :list="List"
      @open="open"
      @close="close"
    >
      <template #reference>
        <nut-button type="primary" shape="square">\u5411\u4E0A\u5F39\u51FA</nut-button>
      </template>
  </nut-popover>

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
list	\u9009\u9879\u5217\u8868	List[]	[]
visible	\u662F\u5426\u5C55\u793A\u6C14\u6CE1\u5F39\u51FA\u5C42	boolean	false
theme	\u4E3B\u9898\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A dark	string	`light`
location	\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A top,left,right	string	`bottom`

List \u6570\u636E\u7ED3\u6784

List \u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A

\u952E\u540D	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
name	\u9009\u9879\u6587\u5B57	string	-
icon	nut-icon \u56FE\u6807\u540D\u79F0	string	-
disabled	\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001	boolean	false

Slots

\u540D\u79F0	\u8BF4\u660E
content	\u81EA\u5B9A\u4E49\u6C14\u6CE1\u7EC4\u4EF6\u83DC\u5355\u5185\u5BB9
reference	\u89E6\u53D1 Popover \u663E\u793A\u7684\u5143\u7D20\u5185\u5BB9

Events

\u540D\u79F0	\u8BF4\u660E
choose	\u70B9\u51FB\u9009\u9879\u65F6\u89E6\u53D1
open	\u6253\u5F00\u83DC\u5355\u65F6\u89E6\u53D1
close	\u5173\u95ED\u83DC\u5355\u65F6\u89E6\u53D1

`,31),e=[p],i={setup(c,{expose:s}){return s({frontmatter:{}}),(o,r)=>(n(),a("div",l,e))}};export{i as default};