feat: toast组件开发，layout、rate组件demo开发

src/packages/col/index.vue

@@ -21,7 +21,6 @@ export default create({
   },
   setup(props, { emit, slots }) {
     const gutter = inject('gutter');
-    const { offset, span } = toRefs(props);
     const classObject = reactive({
       ['nut-col-' + props.span]: true,
       ['nut-col-offset-' + props.offset]: true

src/packages/layout/demo.vue

@@ -3,6 +3,11 @@
     <h2>基础布局</h2>
     <div class="box-item">
       <nut-row>
+        <nut-col :span="24">
+          <div class="flex-content">span:24</div>
+        </nut-col>
+      </nut-row>
+      <nut-row>
         <nut-col :span="12">
           <div class="flex-content">span:12</div>
         </nut-col>
@@ -10,8 +15,6 @@
           <div class="flex-content flex-content-light">span:12</div>
         </nut-col>
       </nut-row>
-    </div>
-    <div class="box-item">
       <nut-row>
         <nut-col :span="8">
           <div class="flex-content">span:8</div>
@@ -23,8 +26,6 @@
           <div class="flex-content">span:8</div>
         </nut-col>
       </nut-row>
-    </div>
-    <div class="box-item">
       <nut-row>
         <nut-col :span="6">
           <div class="flex-content">span:6</div>
@@ -35,237 +36,74 @@
         <nut-col :span="6">
           <div class="flex-content">span:6</div>
         </nut-col>
-      </nut-row>
-    </div>
-    <div class="box-item">
-      <nut-row>
-        <nut-col :span="4">
-          <div class="flex-content">span:4</div>
-        </nut-col>
-        <nut-col :span="4">
-          <div class="flex-content flex-content-light">span:4</div>
-        </nut-col>
-        <nut-col :span="4">
-          <div class="flex-content">span:4</div>
-        </nut-col>
-        <nut-col :span="4">
-          <div class="flex-content flex-content-light">span:4</div>
-        </nut-col>
-        <nut-col :span="4">
-          <div class="flex-content">span:4</div>
-        </nut-col>
-        <nut-col :span="4">
-          <div class="flex-content flex-content-light">span:4</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <h2>设置元素间距</h2>
-    <div class="box-item">
-      <nut-row :gutter="10">
-        <nut-col :span="6">
-          <div class="flex-content">span:6</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">span:6</div>
-        </nut-col>
         <nut-col :span="6">
           <div class="flex-content">span:6</div>
         </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">span:6</div>
-        </nut-col>
       </nut-row>
     </div>
-    <h2>Flex布局</h2>
-    <h2>wrap（是否换行）</h2>
+    <h2>分栏间隔</h2>
     <div class="box-item">
-      <nut-row type="flex" flexWrap="nowrap" :gutter="10">
-        <nut-col :span="6">
-          <div class="flex-content">1</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">2</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">3</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">4</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">5</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">6</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">7</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <div class="box-item">
-      <nut-row type="flex" flexWrap="wrap" :gutter="10">
-        <nut-col :span="6">
-          <div class="flex-content">1</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">2</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">3</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">4</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">5</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">6</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">7</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <div class="box-item">
-      <nut-row type="flex" flexWrap="reverse" :gutter="10">
-        <nut-col :span="6">
-          <div class="flex-content">1</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">2</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">3</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">4</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">5</div>
+      <nut-row :gutter="10">
+        <nut-col :span="8">
+          <div class="flex-content">span:8</div>
         </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">6</div>
+        <nut-col :span="8">
+          <div class="flex-content flex-content-light">span:8</div>
         </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">7</div>
+        <nut-col :span="8">
+          <div class="flex-content">span:8</div>
         </nut-col>
       </nut-row>
     </div>
-    <h2>justify（主轴方向）</h2>
+    <h2>Flex布局</h2>
     <div class="box-item">
-      <nut-row type="flex">
+      <nut-row type="flex" flexWrap="nowrap">
         <nut-col :span="6">
-          <div class="flex-content">start</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content flex-content-light">start</div>
+          <div class="flex-content flex-content-light">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content">start</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
       </nut-row>
-    </div>
-    <div class="box-item">
       <nut-row type="flex" justify="center">
         <nut-col :span="6">
-          <div class="flex-content">center</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content flex-content-light">center</div>
+          <div class="flex-content flex-content-light">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content">center</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
       </nut-row>
-    </div>
-    <div class="box-item">
       <nut-row type="flex" justify="end">
         <nut-col :span="6">
-          <div class="flex-content">end</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content flex-content-light">end</div>
+          <div class="flex-content flex-content-light">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content">end</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
       </nut-row>
-    </div>
-    <div class="box-item">
       <nut-row type="flex" justify="space-between">
         <nut-col :span="6">
-          <div class="flex-content">between</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content flex-content-light">between</div>
+          <div class="flex-content flex-content-light">span:6</div>
         </nut-col>
         <nut-col :span="6">
-          <div class="flex-content">between</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
       </nut-row>
-    </div>
-    <div class="box-item">
       <nut-row type="flex" justify="space-around">
         <nut-col :span="6">
-          <div class="flex-content">around</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-light">around</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">around</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <h2>align（侧轴方向）</h2>
-    <div class="box-item">
-      <nut-row type="flex" gutter="10" align="flex-start">
-        <nut-col :span="6">
-          <div class="flex-content flex-content-height">1</div>
-        </nut-col>
-        <nut-col :span="12">
-          <div class="flex-content flex-content-light"
-            >顶部对齐 - flex-start</div
-          >
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-height">3</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <div class="box-item">
-      <nut-row type="flex" gutter="10" align="center">
-        <nut-col :span="6">
-          <div class="flex-content flex-content-height">1</div>
-        </nut-col>
-        <nut-col :span="12">
-          <div class="flex-content flex-content-light">居中对齐 - center</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-height">3</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <div class="box-item">
-      <nut-row type="flex" gutter="10" align="flex-end">
-        <nut-col :span="6">
-          <div class="flex-content flex-content-height">1</div>
-        </nut-col>
-        <nut-col :span="12">
-          <div class="flex-content flex-content-light">底部对齐 - flex-end</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content flex-content-height">3</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <h2>分栏偏移</h2>
-    <div class="box-item">
-      <nut-row type="flex">
-        <nut-col :offset="6" span="6">
-          <div class="flex-content">offset:6</div>
+          <div class="flex-content">span:6</div>
         </nut-col>
         <nut-col :span="6">
           <div class="flex-content flex-content-light">span:6</div>
@@ -275,29 +113,6 @@
         </nut-col>
       </nut-row>
     </div>
-    <div class="box-item">
-      <nut-row type="flex">
-        <nut-col span="6">
-          <div class="flex-content">span:6</div>
-        </nut-col>
-        <nut-col :offset="8" :span="6">
-          <div class="flex-content flex-content-light">offset:8</div>
-        </nut-col>
-        <nut-col :span="6">
-          <div class="flex-content">span:6</div>
-        </nut-col>
-      </nut-row>
-    </div>
-    <div class="box-item">
-      <nut-row type="flex">
-        <nut-col span="6" :offset="6">
-          <div class="flex-content">offset:6</div>
-        </nut-col>
-        <nut-col :span="6" :offset="6">
-          <div class="flex-content">offset:6</div>
-        </nut-col>
-      </nut-row>
-    </div>
   </div>
 </template>
 
@@ -308,22 +123,32 @@ export default createDemo({});
 </script>
 
 <style lang="scss" scoped>
+#app .demo.demo {
+  padding: 57px 0 0;
+  h2 {
+    padding: 0 25px;
+  }
+}
 .box-item {
   background: #fff;
   margin-bottom: 20px;
-  padding: 20px 20px 10px;
+  padding: 20px 0;
   border: 1px solid #ddd;
 }
-.demo .nut-col {
-  margin-bottom: 10px;
+.demo .nut-row {
+  overflow: hidden;
+  &:not(:last-child) .nut-col {
+    margin-bottom: 15px;
+  }
 }
 .flex-content {
-  line-height: 30px;
+  line-height: 40px;
   color: #fff;
   text-align: center;
-  background: #78a4f4;
+  border-radius: 6px;
+  background: #ff8881;
   &.flex-content-light {
-    background: #93b6f6;
+    background: #ffc7c4;
   }
   &.flex-content-height {
     height: 50px;

src/packages/rate/demo.vue

@@ -2,43 +2,37 @@
   <div class="demo">
     <h2>基本用法</h2>
     <div>
-      <nut-cell>
-        <nut-rate v-model:value="state.val"></nut-rate>
-      </nut-cell>
-      <nut-cell>当前分数：{{ state.val }}分</nut-cell>
+      <nut-rate v-model:value="state.val"></nut-rate>
     </div>
 
-    <h2>只读</h2>
+    <h2>自定义图标</h2>
     <div>
-      <nut-cell>
-        <nut-rate v-model:value="state.val2" :readOnly="true"></nut-rate>
-      </nut-cell>
-      <nut-cell>结果：{{ state.val2 }}</nut-cell>
+      <nut-rate checkedIcon="heart-fill" uncheckedIcon="heart"></nut-rate>
     </div>
 
-    <h2>自定义尺寸</h2>
+    <h2>自定义数量</h2>
     <div>
-      <nut-cell>
-        <nut-rate :size="30"></nut-rate>
-      </nut-cell>
+      <nut-rate :total="6"></nut-rate>
     </div>
 
-    <h2>事件</h2>
+    <h2>自定义颜色</h2>
     <div>
-      <nut-cell>
-        <nut-rate @click="onClick"></nut-rate>
-      </nut-cell>
-      <nut-cell>结果：{{ state.result }}</nut-cell>
+      <nut-rate activeColor="#FFC800"></nut-rate>
     </div>
 
-    <h2>自定义ICON</h2>
+    <h2>禁用状态</h2>
     <div>
-      <nut-cell>
-        <nut-rate
-          :checkedIcon="state.icon1"
-          :uncheckedIcon="state.icon2"
-        ></nut-rate>
-      </nut-cell>
+      <nut-rate :disabled="true"></nut-rate>
+    </div>
+
+    <h2>只读状态</h2>
+    <div>
+      <nut-rate :value="2" :readOnly="true"></nut-rate>
+    </div>
+
+    <h2>监听 change 事件</h2>
+    <div>
+      <nut-rate @click="onClick"></nut-rate>
     </div>
   </div>
 </template>
@@ -53,9 +47,7 @@ export default createDemo({
       val: 4,
       val2: 2,
       result: '',
-      result2: '',
-      icon1: `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
-      icon2: `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
+      result2: ''
     });
     const onClick = idx => {
       state.result = '您点击了第' + idx + '个!';

src/packages/rate/index.scss

@@ -18,16 +18,14 @@
   .nut-rate-item {
     display: inline-block;
     vertical-align: bottom;
-    width: 30px;
-    height: 30px;
     margin-right: 15px;
-    @include nut-rate-bg($primary-color);
+    // @include nut-rate-bg($primary-color);
     background-size: cover;
     &:last-child {
       margin-right: 0;
     }
-    &.nut-rate-active {
-      @include nut-rate-active-bg($primary-color);
-    }
+    // &.nut-rate-active {
+    //   @include nut-rate-active-bg($primary-color);
+    // }
   }
 }

src/packages/rate/index.vue

@@ -7,12 +7,17 @@
       :key="n"
       @click="onClick($event, n)"
       :style="{
-        height: size + 'px',
-        width: size + 'px',
-        marginRight: spacing + 'px',
-        backgroundImage: n <= state.current ? checkedIcon : uncheckedIcon
+        marginRight: spacing + 'px'
       }"
-    ></view>
+    >
+      <nut-icon
+        :size="size + 'px'"
+        :color="
+          n <= state.current ? (disabled ? '#CCCCCC' : activeColor) : '#CCCCCC'
+        "
+        :name="n <= state.current ? checkedIcon : uncheckedIcon"
+      ></nut-icon>
+    </view>
   </view>
 </template>
 <script lang="ts">
@@ -34,18 +39,26 @@ export default create({
       type: [String, Number],
       default: 25
     },
+    activeColor: {
+      type: String,
+      default: '#FA200C'
+    },
     uncheckedIcon: {
       type: String,
-      default: null
+      default: 'star'
     },
     checkedIcon: {
       type: String,
-      default: null
+      default: 'star-fill'
     },
     readOnly: {
       type: Boolean,
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     spacing: {
       type: [String, Number],
       default: 20
@@ -58,6 +71,7 @@ export default create({
 
     const onClick = (e: Event, idx) => {
       e.stopPropagation();
+      if (props.disabled) return;
       if (props.readOnly) {
         emit('update:value', state.current);
         emit('click', state.current);

src/packages/toast/_toast.ts

@@ -1,80 +0,0 @@
-import { createVNode, render } from 'vue';
-import VueToast from './toast.vue';
-
-const defaultOptions = {
-  msg: '',
-  visible: false,
-  duration: 2000, //显示时间(毫秒)
-  timer: null,
-  center: true,
-  type: '',
-  customClass: '',
-  bottom: 30,
-  size: 'base',
-  icon: null,
-  textAlignCenter: true,
-  loadingRotate: true,
-  bgColor: 'rgba(36, 36, 36, 0.8)',
-  onClose: null,
-  textTimer: null,
-  cover: false, //透明遮罩层
-  coverColor: 'rgba(0, 0, 0, 0)',
-  timeStamp: null,
-  closeOnClickOverlay: false
-};
-
-// let instance;
-// let instanceArr = [];
-// let defaultOptionsMap = {};
-// const currentOptions = {
-//   ...defaultOptions
-// };
-
-const mountToast = opts => {
-  opts = { ...defaultOptions, ...opts };
-  opts.visible = true;
-  opts.id = new Date().getTime();
-  console.log(opts);
-
-  const container = document.createElement('div');
-  // container.className = `nut-toast`;
-  const vm = createVNode(VueToast, opts);
-  render(vm, container);
-  document.body.appendChild(container);
-  console.log(vm);
-  return vm;
-};
-
-const errorMsg = msg => {
-  if (!msg) {
-    console.warn('[NutUI Toast]: msg不能为空');
-    return;
-  }
-};
-
-const Toast = {
-  text(msg, opts = {}) {
-    errorMsg(msg);
-    return mountToast({ ...opts, type: 'text', msg });
-  },
-  success(msg, opts = {}) {
-    errorMsg(msg);
-    return mountToast({ ...opts, msg, type: 'success' });
-  },
-  fail(msg, opts = {}) {
-    errorMsg(msg);
-    return mountToast({ ...opts, msg, type: 'fail' });
-  },
-  warn(msg, opts = {}) {
-    errorMsg(msg);
-    return mountToast({ ...opts, msg, type: 'warn' });
-  }
-};
-
-export default Toast;
-
-// export default {
-//   install(app: App): void {
-//     app.config.globalProperties.$toast = Toast;
-//   }
-// };

src/packages/toast/demo.vue

@@ -3,40 +3,38 @@
     <h2>基本用法</h2>
     <div>
       <nut-cell
-        :showIcon="true"
-        :isLink="true"
-        @click="textToast('我只传了文案一个参数')"
-      >
-        <label>Text 文字提示</label>
-      </nut-cell>
+        title="Text 文字提示"
+        is-link
+        @click="textToast('网络失败，请稍后再试~')"
+      ></nut-cell>
       <nut-cell
-        :showIcon="true"
-        :isLink="true"
-        @click="successToast('我只传了文案一个参数')"
-      >
-        <label>Success 成功提示</label>
-      </nut-cell>
+        title="Success 成功提示"
+        is-link
+        @click="successToast('成功提示')"
+      ></nut-cell>
       <nut-cell
-        :showIcon="true"
-        :isLink="true"
-        @click="errorToast('我只传了文案一个参数')"
-      >
-        <label>Error 失败提示</label>
-      </nut-cell>
+        title="Error 失败提示"
+        is-link
+        @click="errorToast('失败提示')"
+      ></nut-cell>
       <nut-cell
-        :showIcon="true"
-        :isLink="true"
-        @click="warningToast('我只传了文案一个参数')"
-      >
-        <label>Warning 警告提示提示</label>
-      </nut-cell>
+        title="Warning 警告提示"
+        is-link
+        @click="warningToast('警告提示')"
+      ></nut-cell>
     </div>
+    <h2>动态更新</h2>
+    <nut-cell
+      title="Loading 加载提示"
+      is-link
+      @click="loadingToast('加载中')"
+    ></nut-cell>
   </div>
 </template>
 
 <script>
 import { createComponent } from '@/utils/create';
-import Toast from './_toast';
+import { Toast } from './toast';
 const { createDemo } = createComponent('toast');
 
 export default createDemo({
@@ -53,11 +51,16 @@ export default createDemo({
     const warningToast = msg => {
       Toast.warn(msg);
     };
+    const loadingToast = msg => {
+      Toast.loading(msg, { duration: 0 });
+      setTimeout(Toast.hide, 3000);
+    };
     return {
       textToast,
       successToast,
       errorToast,
-      warningToast
+      warningToast,
+      loadingToast
     };
   }
 });

src/packages/toast/index.vue

@@ -1,19 +1,156 @@
 <template>
-  <div class="nut-rate"></div>
+  <transition name="toastfade">
+    <view
+      :id="id"
+      :class="toastBodyClass"
+      v-if="visible"
+      :style="{
+        bottom: center ? 'auto' : bottom + 'px',
+        'background-color': coverColor
+      }"
+      @click="clickCover"
+    >
+      <view
+        class="nut-toast-inner"
+        :style="{
+          'text-align': textAlignCenter ? 'center' : 'left',
+          'background-color': bgColor
+        }"
+      >
+        <view v-if="hasIcon" class="nut-toast-icon-wrapper">
+          <nut-icon size="44px" color="#ffffff" :name="icon"></nut-icon>
+        </view>
+        <view class="nut-toast-text" v-html="msg"></view>
+      </view>
+    </view>
+  </transition>
 </template>
-<script lang="ts">
-import { toRefs, watch, reactive, inject } from 'vue';
+<script>
+import Icon from '../icon';
+import { toRefs, reactive, computed, watch } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('rate');
-
+const { create } = createComponent('toast');
 export default create({
-  props: {},
-  setup(props, { emit, slots }) {
-    return {};
+  props: {
+    id: String,
+    msg: String,
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: Number,
+      default: 2000
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    type: String,
+    customClass: String,
+    bottom: {
+      type: Number,
+      default: 30
+    },
+    size: {
+      type: [String, Number],
+      default: 'base'
+    },
+    icon: String,
+    textAlignCenter: {
+      type: Boolean,
+      default: true
+    },
+    loadingRotate: {
+      type: Boolean,
+      default: true
+    },
+    bgColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 1)'
+    },
+
+    onClose: Function,
+    unmount: Function,
+    cover: {
+      type: Boolean,
+      default: false
+    },
+    coverColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0)'
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    'nut-icon': Icon
+  },
+  setup(props) {
+    console.log('props', props);
+    const state = reactive({
+      timer: null
+    });
+    const clearTimer = () => {
+      if (state.timer) {
+        clearTimeout(state.timer);
+        state.timer = null;
+      }
+    };
+    const hide = () => {
+      clearTimer();
+      props.unmount(props.id);
+      props.onClose && props.onClose();
+    };
+    const show = () => {
+      clearTimer();
+      if (props.duration) {
+        state.timer = setTimeout(() => {
+          hide();
+        }, props.duration);
+      }
+    };
+    const clickCover = () => {
+      console.log('click');
+      if (props.closeOnClickOverlay) {
+        hide();
+      }
+    };
+
+    if (props.duration) {
+      show();
+    }
+
+    const hasIcon = computed(() => {
+      console.log(props.type);
+      if (props.type !== 'text') {
+        return true;
+      } else {
+        return !!props.icon;
+      }
+    });
+    const toastBodyClass = computed(() => {
+      return [
+        'nut-toast',
+        { 'nut-toast-center': props.center },
+        { 'nut-toast-has-icon': hasIcon.value },
+        { 'nut-toast-cover': props.cover },
+        { 'nut-loading': props.type == 'loading' },
+        props.customClass,
+        'nut-toast-' + props.size
+      ];
+    });
+    return {
+      state,
+      clickCover,
+      hasIcon,
+      toastBodyClass
+    };
   }
 });
 </script>
-
 <style lang="scss">
 @import 'index.scss';
 </style>

src/packages/toast/toast.vue

@@ -1,176 +0,0 @@
-<template>
-  <transition name="toastfade">
-    <div
-      :id="id"
-      :class="toastBodyClass"
-      v-if="state.visible"
-      :style="{
-        bottom: center ? 'auto' : state.bottom + 'px',
-        'background-color': state.coverColor
-      }"
-      @click="clickCover"
-    >
-      <div
-        class="nut-toast-inner"
-        :class="state.toastClass"
-        :style="{
-          'text-align': state.textAlignCenter ? 'center' : 'left',
-          'background-color': state.bgColor,
-          ...state.toastStyle
-        }"
-      >
-        <span v-if="hasIcon" class="nut-toast-icon-wrapper">
-          <i
-            :class="[
-              'nut-toast-icon',
-              type,
-              {
-                'nut-toast-icon-rotate':
-                  type === 'loading' && state.loadingRotate
-              }
-            ]"
-            :style="{ 'background-image': cusIcon }"
-          ></i>
-        </span>
-        <span class="nut-toast-text" v-html="msg"></span>
-      </div>
-    </div>
-  </transition>
-</template>
-<script>
-import { toRefs, reactive, computed, watch } from 'vue';
-import { createComponent } from '@/utils/create';
-const { create } = createComponent('toast');
-export default create({
-  props: {
-    id: {
-      type: String
-    },
-    msg: {
-      type: String,
-      default: ''
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    duration: {
-      type: Number,
-      default: 2000
-    },
-    center: {
-      type: Boolean,
-      default: true
-    },
-    type: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(props) {
-    console.log('props', props);
-    const { msg, visible, center, type } = toRefs(props);
-    const state = reactive({
-      id: '',
-      msg: 'sadsadsa',
-      visible: visible.value,
-      duration: 2000, //显示时间(毫秒)
-      timer: null,
-      center: true,
-      type: '',
-      customClass: '',
-      bottom: 30,
-      size: 'base',
-      icon: null,
-      textAlignCenter: true,
-      loadingRotate: true,
-      bgColor: 'rgba(0, 0, 0, 1)',
-      onClose: null,
-      textTimer: null,
-      cover: false,
-      coverColor: 'rgba(0, 0, 0, 0)',
-      toastStyle: {},
-      toastClass: '',
-      timeStamp: null,
-      closeOnClickOverlay: false
-    });
-    const clearTimer = () => {
-      if (state.timer) {
-        clearTimeout(state.timer);
-        state.timer = null;
-      }
-    };
-    const hide = force => {
-      clearTimer();
-      state.visible = false;
-      if (force) {
-        clearTimeout(state.textTimer);
-      } else {
-        state.textTimer = setTimeout(() => {
-          clearTimeout(state.textTimer);
-          state.msg = '';
-        });
-      }
-      state.onClose && state.onClose();
-    };
-    const show = force => {
-      clearTimer();
-      clearTimeout(state.textTimer);
-      if (state.duration) {
-        state.timer = setTimeout(() => {
-          hide(force);
-        }, state.duration);
-      }
-    };
-    const clickCover = () => {
-      if (state.closeOnClickOverlay) {
-        hide();
-      }
-    };
-    // show();
-    watch(
-      () => state.visible,
-      val => {
-        if (val) {
-          console.log(val);
-          show();
-        }
-      }
-    );
-
-    const cusIcon = computed(() => {
-      return state.icon ? `url("${state.icon}")` : '';
-    });
-    const hasIcon = computed(() => {
-      console.log(type.value);
-      if (type.value !== 'text') {
-        return true;
-      } else {
-        return !!cusIcon.value;
-      }
-    });
-    console.log('hasIcon', hasIcon.value);
-    const toastBodyClass = computed(() => {
-      return [
-        'nut-toast',
-        { 'nut-toast-center': center.value },
-        { 'nut-toast-has-icon': hasIcon.value },
-        { 'nut-toast-cover': state.cover },
-        { 'nut-loading': type.value == 'loading' },
-        state.customClass,
-        'nut-toast-' + state.size
-      ];
-    });
-    return {
-      msg,
-      center,
-      state,
-      type,
-      clickCover,
-      cusIcon,
-      hasIcon,
-      toastBodyClass
-    };
-  }
-});
-</script>