Browse Source

docs: actionsheet

richard1015 4 years ago
parent
commit
239d09c33a
2 changed files with 43 additions and 42 deletions
  1. 7 6
      src/packages/actionsheet/demo.vue
  2. 36 36
      src/packages/actionsheet/doc.md

+ 7 - 6
src/packages/actionsheet/demo.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="demo-list demo">
-    <h2>基本用法(选择类)</h2>
+    <h2>基本用法</h2>
     <nut-cell
-      :showIcon="true"
+      :show-icon="true"
       :isLink="true"
       @click="switchActionSheet('isVisible1')"
     >
       <span><label>基础用法</label></span>
-      <div class="selected-option">{{ state.val1 }}</div>
+      <div class="selected-option" v-html="state.val1"></div>
     </nut-cell>
     <nut-cell
       :showIcon="true"
@@ -15,11 +15,11 @@
       @click="switchActionSheet('isVisible2')"
     >
       <span><label>展示取消按钮</label></span>
-      <div class="selected-option">{{ state.val2 }}</div>
+      <div class="selected-option" v-html="state.val2"></div>
     </nut-cell>
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
       <span><label>展示描述信息</label></span>
-      <div class="selected-option">{{ state.val3 }}</div>
+      <div class="selected-option" v-html="state.val3"></div>
     </nut-cell>
     <h2>选项状态</h2>
 
@@ -39,7 +39,8 @@
       cancel-txt="取消"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
-    ></nut-actionsheet>
+    >
+    </nut-actionsheet>
     <!-- 展示描述信息 -->
     <nut-actionsheet
       :is-visible="state.isVisible3"

+ 36 - 36
src/packages/actionsheet/doc.md

@@ -2,39 +2,39 @@
 
 从底部弹出的动作菜单面板。
 
-## 基本用法(选择类)
+## 基本用法
 
 默认
-```html
+``` html
 <div @click="switchActionSheet">
    <span><label>基础用法</label></span>
-   <div class="selected-option">state.val }}</div>
+   <div class="selected-option" v-html="state.val"></div>
 </div>
 <nut-actionsheet
-        :is-visible="state.isVisible"
-        :menu-items="menuItems"
-        @choose="chooseItem"
-      ></nut-actionsheet>
+  :is-visible="state.isVisible"
+  :menu-items="menuItems"
+  @choose="chooseItem"
+></nut-actionsheet>
 ```
 
 ## 展示取消按钮
 ```html
 <div @click="switchActionSheet">
-   <span><label>展示取消按钮</label></span>
-    <div class="selected-option">state.val }}</div>
+  <span><label>展示取消按钮</label></span>
+  <div class="selected-option" v-html="state.val"></div>
 </div>
- <nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    cancel-txt="取消"
+<nut-actionsheet :is-visible="isVisible" 
+  @close="switchActionSheet"
+  :menu-items="menuItems"
+  @choose="chooseItem"
+  cancel-txt="取消"
 ></nut-actionsheet>
 ```
 ## 展示描述信息
 ```html
 <div @click.native="switchActionSheet">
    <span><label>展示取消按钮</label></span>
-    <div class="selected-option">state.val }}</div>
+    <div class="selected-option" v-html="state.val"></div>
 </div>
  <nut-actionsheet :is-visible="isVisible" 
     @close="switchActionSheet"
@@ -49,14 +49,14 @@
 ```html
 <div @click.native="switchActionSheet">
     <span class="title"><label>性别</label></span>
-    <span class="selected-option">{{sex}}</span>
+    <span class="selected-option" v-html="sex"></span>
 </div>
 <nut-actionsheet
 @close="switchActionSheet"
-        :is-visible="state.isVisible4"
-        cancel-txt="取消"
-        :menu-items="menuItemsThree"
-      ></nut-actionsheet>
+  :is-visible="state.isVisible4"
+  cancel-txt="取消"
+  :menu-items="menuItemsThree"
+></nut-actionsheet>
 ```
 
 ```javascript
@@ -91,23 +91,23 @@ setup() {
 
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| cancel-txt | 取消文案 | String | '取消'
-| menu-items | 列表项 | Array | [ ]
-| option-tag | 设置列表项展示使用参数 | String | 'name'
-| is-visible | 遮罩层可见 | Boolean | false
-| option-sub-tag | 设置列表项描述展示使用参数 | String | 'subname'
-| choose-tag-value | 设置选中项的值,和'option-tag'的值对应 | String | ''
-| title | 设置列表项标题 | String | ''
-| description | 设置列表项副标题/描述 | String | ''
-| color | 高亮颜色 | String | '#ee0a24'
-| close-abled | 遮罩层是否可关闭 | Boolean | true
+| 字段             | 说明                                   | 类型    | 默认值    |
+|------------------|----------------------------------------|---------|-----------|
+| cancel-txt       | 取消文案                               | String  | '取消'    |
+| menu-items       | 列表项                                 | Array   | [ ]       |
+| option-tag       | 设置列表项展示使用参数                 | String  | 'name'    |
+| is-visible       | 遮罩层可见                             | Boolean | false     |
+| option-sub-tag   | 设置列表项描述展示使用参数             | String  | 'subname' |
+| choose-tag-value | 设置选中项的值,和'option-tag'的值对应 | String  | ''        |
+| title            | 设置列表项标题                         | String  | ''        |
+| description      | 设置列表项副标题/描述                  | String  | ''        |
+| color            | 高亮颜色                               | String  | '#ee0a24' |
+| close-abled      | 遮罩层是否可关闭                       | Boolean | true      |
 
 
 ## Event
 
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| choose | 选择之后触发 | 选中列表项item, 选中的索引值index 
-| cancel | 点击取消文案时触发 | 无
+| 字段   | 说明               | 回调参数                          |
+|--------|--------------------|-----------------------------------|
+| choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
+| cancel | 点击取消文案时触发 | 无                                |