feat: add alter some new api

Xutaotaotao · Xutaotaotao · commit 8bfd7df1e76f · 2021-02-28T16:15:24.000+08:00
diff --git a/doc/components/nDemoBlock/index.vue b/doc/components/nDemoBlock/index.vue
@@ -27,9 +27,7 @@
         class="demo-block-control"
         @click="showMeta"
       >
-        <n-icon
-          :name="iconName"
-        />
+        <i :class="[iconName]" />
         <span v-show="hovering">{{ hoveringText }}</span>
         <!-- Todo -->
         <!-- <span
@@ -61,9 +59,9 @@ export default {
   computed: {
     iconName () {
       if (this.metaShow) {
-        return 'icon-sort-up';
+        return 'iconfont icon-sort-up';
       } else {
-        return 'icon-sort-down';
+        return 'iconfont icon-sort-down';
       }
     },
     hoveringText () {
diff --git a/doc/markdown/nAlert/en-US/index.md b/doc/markdown/nAlert/en-US/index.md
@@ -8,29 +8,32 @@ Alert component for feedback.
 When you need to show alert messages to users.
 
 ## Examples
+### Basic use
 :::demo
 ```html
 <template>
   <div >
     <n-alert
-      :show="show"
+      v-model:show="show1"
       message="Message"
       type="info"
     />
     <n-alert
-      :show="show"
+      v-model:show="show2"
       message="Message"
       type="success"
     />
     <n-alert
-      :show="show"
+      v-model:show="show3"
       message="Message"
       type="warning"
+      closable
     />
     <n-alert
-      :show="show"
+      v-model:show="show4"
       message="Message"
       type="error"
+      :showIcon="true"
     />
   </div>
 </template>
@@ -39,7 +42,38 @@ When you need to show alert messages to users.
 export default {
   data: function () {
     return {
-      show: true
+      show1: true,
+      show2: true,
+      show3: true,
+      show4: true,
+    }
+  }
+}
+</script>
+
+```
+:::
+
+### Custome define close
+:::demo
+```html
+<template>
+  <div >
+    <n-alert
+      closable
+      v-model:show="show"
+      message="Message"
+      type="info"
+      close-text="Close now"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      show: true,
     }
   }
 }
@@ -53,5 +87,8 @@ export default {
 | Property | Description | Type | Default |
 | :--- | :--- | :--- | :--- |
 | show | Whether to show | Boolean | false |
+| closable | Whether to close | Boolean | false |
 | message | Content of Alert | String |  |
 | type    | Type of Alert styles, options:`info`,`success`,`warning`,`error` | String | info |
+| closeText | Custome define close text | String |  |
+| showIcon | Whether show icon | Boolean | flase |
diff --git a/doc/markdown/nAlert/zh-CN/index.md b/doc/markdown/nAlert/zh-CN/index.md
@@ -8,6 +8,7 @@
 当某个页面需要向用户显示警告的信息时。
  
 ## 代码演示
+### 基本用法
 :::demo
 ```html
 <template>
@@ -26,11 +27,13 @@
       v-model:show="show3"
       message="Message"
       type="warning"
+      closable
     />
     <n-alert
       v-model:show="show4"
       message="Message"
       type="error"
+      :showIcon="true"
     />
   </div>
 </template>
@@ -51,10 +54,42 @@ export default {
 ```
 :::
 
+### 自定义关闭
+:::demo
+```html
+<template>
+  <div >
+    <n-alert
+      closable
+      v-model:show="show"
+      message="Message"
+      type="info"
+      close-text="Close now"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      show: true,
+    }
+  }
+}
+</script>
+
+```
+:::
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 |
 | :--- | :--- | :--- | :--- |
 | show | 是否展示 | Boolean | false |
+| closable | 是否可关闭 | Boolean | false |
 | message | 提示内容 | String |  |
 | type    | 提示类型，可选值`info`,`success`,`warning`,`error` | String | info |
+| closeText | 自定义关闭文案 | String |  |
+| showIcon | 是否展示辅助性图标 | Boolean | flase |
+
diff --git a/packages/n-alert/index.scss b/packages/n-alert/index.scss
@@ -21,6 +21,12 @@
       margin-left: 10px;
       margin-right: 10px;
     }
+    .close-text{
+      color: rgba(0,0,0,.45);
+      transition: color .3s;
+      font-size: 12px;
+      cursor: pointer;
+    }
     .icon-info {
       color: #2196f3;
       cursor: pointer;
diff --git a/packages/n-alert/index.tsx b/packages/n-alert/index.tsx
@@ -8,41 +8,55 @@ const AlterProps = {
     type: Boolean as PropType<false>,
     default: false
   },
+  closable: {
+    type: Boolean as PropType<false>,
+    default: false
+  },
   type: {
     type: String as PropType<''>
   },
   message: {
     type: String as PropType<''>
+  },
+  closeText: {
+    type: String as PropType<''>
+  },
+  showIcon: {
+    type: Boolean as PropType<false>
   }
 };
 
 const NAlert = defineComponent({
   name: 'NAlert',
   props: AlterProps,
+  emits: ['update:show'],
   setup (props, { emit }: SetupContext) {
-    // const { show, type, message } = toRefs(props);
-
     const alertClass = () => {
       return classNames(['base-alert', props.type]);
     };
     const iconClass = classNames([`icon-${props.type}`]);
     const closeAlert = () => {
       emit('update:show', false);
     };
+    const renderCloseContent = () => {
+      return (props.closeText
+        ? <span class="close-text" onClick={closeAlert}>{props.closeText}</span>
+        : <NIcon
+        id="alertCloseIcon"
+        name="icon-times"
+        class={iconClass}
+        onClick={closeAlert}
+      />);
+    };
     return () => (
       props.show
         ? <div class={alertClass()}>
-        <div class="alert-content">
-          <NIcon name={`icon-${props.type}`}/>
-          <span class="message-text">{props.message }</span>
-          <NIcon
-            id="alertCloseIcon"
-            name="icon-times"
-            class={iconClass}
-            onClick={closeAlert}
-          />
+          <div class="alert-content">
+            {props.showIcon && <NIcon name={`icon-${props.type}`} /> }
+            <span class="message-text">{props.message}</span>
+            {props.closable && renderCloseContent()}
+          </div>
         </div>
-      </div>
         : null
     );
   }
diff --git a/test/specs/__snapshots__/alter.spec.js.snap b/test/specs/__snapshots__/alter.spec.js.snap
@@ -2,6 +2,9 @@
 
 exports[`NAlter renders correctly 1`] = `
 <div class="base-alert">
-  <div class="alert-content"><i class="iconfont icon-undefined" name="icon-undefined"></i><span class="message-text"><!----></span><i class="iconfont icon-times icon-undefined" id="alertCloseIcon" name="icon-times"></i></div>
+  <div class="alert-content">
+    <!----><span class="message-text"><!----></span>
+    <!---->
+  </div>
 </div>
 `;
diff --git a/test/specs/alter.spec.js b/test/specs/alter.spec.js
@@ -26,4 +26,29 @@ describe('NAlter', () => {
     });
     expect(wrapper.text()).toBe('test');
   });
+  it('render closeicon when the closable', () => {
+    const wrapper = mount({
+      render () {
+        return <NAlter show={true} message={'test'} closable/>;
+      }
+    });
+    expect(wrapper.find('.icon-times').exists()).toBe(true);
+  });
+  it('render closeText when the closeText is close', () => {
+    const wrapper = mount({
+      render () {
+        return <NAlter show={true} message={'test'} closable closeText="close"/>;
+      }
+    });
+    expect(wrapper.find('.close-text').exists()).toBe(true);
+  });
+  it('when click close icon, close this alter', async () => {
+    const wrapper = mount({
+      render () {
+        return <NAlter show={true} message={'test'} closable/>;
+      }
+    });
+    await wrapper.find('.icon-times').trigger('click');
+    expect(wrapper.find('.base-alter').exists()).toBe(false);
+  });
 });
