fix: actionsheet cancel btn & test.spec

src/packages/actionsheet/__test__/actionsheet.spec.js

@@ -1,57 +1,60 @@
-import { shallowMount, mount } from '@vue/test-utils'
-import ActionSheet from '../actionsheet.vue'
+import { shallowMount, mount } from '@vue/test-utils';
+import ActionSheet from '../actionsheet.vue';
 import Vue from 'vue';
 
-
 describe('ActionSheet.vue', () => {
-    const wrapper = shallowMount(ActionSheet, {
-        propsData:{
-            menuItems: [
-                {
-                    'name': '男',
-                    'value': 0
-                },
-                {
-                    'name': '女',
-                    'value': 1
-                }
-            ]
-        }
-    });
+  const wrapper = shallowMount(ActionSheet, {
+    propsData: {
+      optionList: [
+        {
+          name: '男',
+          value: 0,
+        },
+        {
+          name: '女',
+          value: 1,
+        },
+      ],
+    },
+  });
 
-    it('测试条数', () => {
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-actionsheet-item').length).toBe(2);
-        })
+  it('测试条数', () => {
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-actionsheet-item').length).toBe(2);
     });
+  });
 
-    it('是否可见', () => {
-        wrapper.setProps({isVisible: true });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-actionsheet-mask').isVisible()).toBe(true);
-            expect(wrapper.find('.nut-actionsheet-panel').isVisible()).toBe(true);
-        })
+  it('是否可见', () => {
+    wrapper.setProps({ isVisible: true });
+    return Vue.nextTick().then(function () {
+      setTimeout(() => {
+        expect(wrapper.find('.popup-bg.nut-mask').isVisible()).toBe(true);
+        expect(wrapper.find('.nut-actionsheet-panel').isVisible()).toBe(true);
+      }, 1000);
     });
+  });
 
-    it('显示取消', () => {
-        wrapper.setProps({isVisible: true, cancelTxt: '取消' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.find('.nut-actionsheet-cancel').isVisible()).toBe(true);
-            expect(wrapper.find('.nut-actionsheet-cancel').text()).toBe('取消');
-        })
+  it('显示取消', () => {
+    wrapper.setProps({ isVisible: true, isCancelBtn: true });
+    return Vue.nextTick().then(function () {
+      setTimeout(() => {
+        expect(wrapper.find('.nut-actionsheet-panel').isVisible()).toBe(true);
+        expect(wrapper.find('.nut-actionsheet-cancel').text()).toBe('取消');
+      }, 1000);
     });
+  });
 
-    it('高亮显示', () => {
-        wrapper.setProps({chooseTagValue: '男' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-actionsheet-item').at(0).contains('.nut-actionsheet-item-active')).toBe(true);
-        })
+  it('高亮显示', () => {
+    wrapper.setProps({ chooseTagValue: '男' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-actionsheet-item').at(0).contains('.nut-actionsheet-item-active')).toBe(true);
     });
+  });
 
-    it('设置列表项展示使用参数', () => {
-        wrapper.setProps({optionTag: 'value' });
-        return Vue.nextTick().then(function () {
-            expect(wrapper.findAll('.nut-actionsheet-item').at(1).text()).toBe('1');
-        })
+  it('设置列表项展示使用参数', () => {
+    wrapper.setProps({ optionTag: 'value' });
+    return Vue.nextTick().then(function () {
+      expect(wrapper.findAll('.nut-actionsheet-item').at(1).text()).toBe('1');
     });
-});
+  });
+});

src/packages/actionsheet/actionsheet.vue

@@ -20,7 +20,7 @@
             >{{ item[optionTag] }}</li
           >
         </ul>
-        <div class="nut-actionsheet-cancel" v-if="isCancleBtn" @click="cancelActionSheet">取消</div>
+        <div class="nut-actionsheet-cancel" v-if="isCancelBtn" @click="cancelActionSheet">取消</div>
         <div class="nut-actionsheet-confirm" v-if="isConfirmBtn" @click="cancelActionSheet">
           <div class="confirm-btn">确定</div>
         </div>
@@ -46,7 +46,7 @@ export default {
       type: Boolean,
       default: true,
     },
-    isCancleBtn: {
+    isCancelBtn: {
       type: Boolean,
       default: false,
     },

src/packages/actionsheet/demo.vue

@@ -9,17 +9,17 @@
       <nut-actionsheet
         :is-visible="isVisible1"
         @close="closeSwitch('isVisible1')"
-        :is-cancle-btn="true"
+        :is-cancel-btn="true"
         :option-list="optionList"
         @choose="choose1"
       ></nut-actionsheet>
 
       <nut-cell :show-icon="true" title="展示标题" :desc="option2" @click.native="openSwitch('isVisible2')"> </nut-cell>
-      <nut-actionsheet :is-visible="isVisible2" @close="closeSwitch('isVisible2')" :is-cancle-btn="true" :option-list="optionList" @choose="choose2">
+      <nut-actionsheet :is-visible="isVisible2" @close="closeSwitch('isVisible2')" :is-cancel-btn="true" :option-list="optionList" @choose="choose2">
         <div slot="title">面板标题</div>
       </nut-actionsheet>
 
-      <nut-actionsheet :is-visible="isVisible3" @close="closeSwitch('isVisible3')" :is-cancle-btn="true" :option-list="optionList" @choose="choose3">
+      <nut-actionsheet :is-visible="isVisible3" @close="closeSwitch('isVisible3')" :is-cancel-btn="true" :option-list="optionList" @choose="choose3">
         <div slot="desc">这里是一段描述，一段描述，一段描述，一段描述</div>
       </nut-actionsheet>
       <nut-cell :show-icon="true" title="展示描述信息" :desc="option3" @click.native="openSwitch('isVisible3')"> </nut-cell>

src/packages/actionsheet/doc.md

@@ -402,8 +402,8 @@ export default {
 | is-visible | 是否可见 | Boolean | false
 | is-click-choose-close | 是否点击列表项后立即关闭 | Boolean | true
 | is-click-close-mask | 是否点击mask蒙层关闭 | Boolean | true
-| isCancelBtn | 是否有确认按钮 | Boolean | false
-| isConfirmBtn | 是否有确认按钮 | Boolean | false
+| is-cancel-btn | 是否有取消按钮 | Boolean | false
+| is-confirm-btn | 是否有确认按钮 | Boolean | false
 | choose-tag-value | 已选值，如果填写，高亮显示 | String | -
 | option-list | 列表项 | Array | [ ]
 | option-tag | 设置列表项展示使用参数 | String | 'name'