浏览代码

docs: popover 文档修改 (#703)

* fix: tag/badge/popover组件提交

* fix: tag/popover/badge组件优化

* fix: popover/badge组件review修改

* fix: popover组件review修改

* fix: badge/popover组件代码优化

* fix: badge组件代码修改

* fix: 修改popover组件slots文档参数名称

* fix: popover 组件文档修改
liqiong-lab 4 年之前
父节点
当前提交
e8768e2e76
共有 1 个文件被更改,包括 62 次插入34 次删除
  1. 62 34
      src/packages/__VUE/popover/doc.md

+ 62 - 34
src/packages/__VUE/popover/doc.md

@@ -27,8 +27,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```html
   <nut-popover
-      v-model:visible="visible"
+      :visible="visible"
       :list="List"
+      @open="open"
+      @close="close"
     >
       <template #reference>
         <nut-button type="primary" shape="square">明朗风格</nut-button>
@@ -36,9 +38,11 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
     </nut-popover>
 
   <nut-popover
-      v-model:visible="visible"
+      :visible="visible"
       theme="dark"
       :list="List"
+      @open="open"
+      @close="close"
     >
       <template #reference>
         <nut-button type="primary" shape="square">暗黑风格</nut-button>
@@ -48,14 +52,20 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```javascript
 
-      export default {
-        data() {
-          return {
-            showPopover: false,
-            List: [{name: '选项一'},{name: '选项二'},{name: '选项三'}],
-          };
-        },
-      };
+  setup(){
+  const visible = ref(false);
+  const List =  [
+    {name: '选项一'},
+    {name: '选项二'},
+    {name: '选项三'}];
+  }
+
+  const open = () =>{
+      visible.value = true;
+  }
+  const close = () =>{
+      visible.value = false;
+  }
 
 ```
 
@@ -63,9 +73,11 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```html
   <nut-popover
-      v-model:visible="visible"
+      :visible="visible"
       theme="dark"
       :list="List"
+      @open="open"
+      @close="close"
     >
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
@@ -77,17 +89,22 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```javascript
 
-      export default {
-        data() {
-          return {
-            List: [
-              {name: '选项一',icon: 'my2'},
-              {name: '选项二',icon: 'cart2'},
-              {name: '选项三',icon: 'location2'}
-            ],
-          };
-        },
-      };
+  setup(){
+    const visible = ref(false);
+    const List = [
+      {name: '选项一',icon: 'my2'},
+      {name: '选项二',icon: 'cart2'},
+      {name: '选项三',icon: 'location2'}
+    ],
+
+    const open = () =>{
+      visible.value =   true;
+    }
+    const close = () =>{
+      visible.value =  false;
+    }
+  }
+
 
 ```
 
@@ -96,8 +113,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```html
   <nut-popover
-      v-model:visible="visible"
+      :visible="visible"
       :list="List"
+      @open="open"
+      @close="close"
     >
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
@@ -108,11 +127,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```javascript
 
-      export default {
-        data() {
-          return {
-            showPopover: false,
-            List:[{
+
+  setup(){
+    const visible = ref(false);
+    const List = [{
               name: '选项一',
               disabled: true
             },
@@ -123,9 +141,14 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
             {
               name: '选项三'
             }],
-          };
-        },
-      };
+
+    const open = () =>{
+      visible.value =   true;
+    }
+    const close = () =>{
+      visible.value =  false;
+    }
+  }
 
 ```
 
@@ -134,7 +157,10 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 在名为 content 插槽中自定义内容。
 
 ```html
-  <nut-popover v-model:visible="visible">
+  <nut-popover 
+      :visible="visible"
+      @open="open"
+      @close="close">
       <template #reference>
         <nut-button type="primary" shape="square">自定义内容</nut-button>
       </template>
@@ -160,10 +186,12 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 
 ```html
   <nut-popover
-      v-model:visible="visible"
+      :visible="visible"
       location="top"
       theme="dark"
       :list="List"
+      @open="open"
+      @close="close"
     >
       <template #reference>
         <nut-button type="primary" shape="square">向上弹出</nut-button>
@@ -179,7 +207,7 @@ Popover 支持明朗和暗黑两种风格,默认为明朗风格,将 theme 
 | 字段            | 说明                            | 类型     | 默认值      |
 |----------------|---------------------------------|---------|------------|
 | list          | 选项列表                          | List[]   | []        |
-| v-model        | 是否展示气泡弹出层                 | boolean  | false     |
+| visible      | 是否展示气泡弹出层                 | boolean  | false     |
 | theme          | 主题风格,可选值为 dark            | string   | `light`   |
 | location       | 弹出位置,可选值为 top,left,right  | string   | `bottom`  |