浏览代码

chore: 子组件引用挂载处理

richard1015 4 年之前
父节点
当前提交
ed734520f9

+ 4 - 2
src/packages/address/index.vue

@@ -120,8 +120,11 @@ import { reactive, ref, toRefs, watch, nextTick } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('address');
 import { TweenMax } from 'gsap';
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     show: {
       type: Boolean,
@@ -188,7 +191,6 @@ export default create({
       default: 'left'
     }
   },
-  components: {},
   emits: [
     'update:show',
     'on-change',

+ 4 - 0
src/packages/avatar/index.vue

@@ -10,7 +10,11 @@
 import { toRefs, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('avatar');
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     size: {
       type: String,

+ 4 - 1
src/packages/backtop/index.vue

@@ -18,8 +18,11 @@
 import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('backtop');
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     //距离页面底部
     bottom: {

+ 4 - 1
src/packages/button/index.vue

@@ -22,8 +22,11 @@ export type ButtonType =
   | 'danger';
 export type ButtonSize = 'large' | 'normal' | 'small';
 export type ButtonShape = 'square' | 'round';
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     color: String,
     shape: {

+ 6 - 3
src/packages/calendar/index.vue

@@ -41,13 +41,16 @@
 <script lang="ts">
 import { PropType, reactive, ref, watch, toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('calendar');
+const { create } = createComponent('calendar');
 import Popup from '@/packages/popup/index.vue';
-import CalendarItem from '@/packages/calendar-item/index.vue';
+import CalendarItem from '@/packages/calendaritem/index.vue';
 import Utils from '@/utils/date';
 type InputDate = string | string[];
-
 export default create({
+  components: {
+    [CalendarItem.name]: CalendarItem,
+    [Popup.name]: Popup
+  },
   props: {
     type: {
       type: String,

+ 4 - 1
src/packages/cell/index.vue

@@ -36,8 +36,11 @@ import { computed } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useRouter } from 'vue-router';
 const { componentName, create } = createComponent('cell');
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     title: { type: String, default: '' },
     subTitle: { type: String, default: '' },

+ 4 - 1
src/packages/collapse/index.vue

@@ -7,8 +7,11 @@
 import { toRefs, provide } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('collapse');
-
+import collapseitem from '@/packages/collapseitem/index.vue';
 export default create({
+  components: {
+    [collapseitem.name]: collapseitem
+  },
   props: {
     active: {
       type: [String, Number, Array]

+ 6 - 20
src/packages/dialog/demo.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="demo-list">
-    <h4>基本用法</h4>
+  <div class="demo">
+    <h2>基本用法</h2>
     <div>
       <nut-cell
         :is-link="true"
@@ -53,7 +53,7 @@
       >
       </nut-cell>
     </div>
-    <h4>图片弹窗</h4>
+    <h2>图片弹窗</h2>
     <p>
       type值为“image”时为图片弹窗,需要配置一张图片,可带链接(非必须)。默认展示关闭按钮。点击图片触发onClickImageLink事件,返回false可阻止默认的跳转链接行为。
     </p>
@@ -66,7 +66,7 @@
       >
       </nut-cell>
     </div>
-    <h4>背景滚动锁定</h4>
+    <h2>背景滚动锁定</h2>
     <p
       >lockBgScroll值设为true时,可在弹窗出现时锁定页面滚动,且不影响窗体内部滚动。</p
     >
@@ -86,7 +86,7 @@
       >
       </nut-cell>
     </div>
-    <h4>高级用法</h4>
+    <h2>高级用法</h2>
     <p>如果Dialog内容有复杂交互,可使用Dialog的标签式用法。</p>
     <div>
       <nut-cell
@@ -261,18 +261,4 @@ export default createDemo({
   }
 });
 </script>
-<style lang="scss">
-.demo-list {
-  h4 {
-    font-size: 15px;
-    padding: 0 16px;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  p {
-    font-size: 12px;
-    padding: 0 16px;
-    margin: 5px 0;
-  }
-}
-</style>
+<style lang="scss"></style>

+ 4 - 1
src/packages/infiniteloading/index.vue

@@ -53,8 +53,11 @@ import {
 } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('infiniteloading');
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     hasMore: {
       type: Boolean,

+ 14 - 11
src/packages/inputnumber/index.vue

@@ -28,8 +28,21 @@
 import { computed, reactive, watch, toRefs } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('inputnumber');
-
+import Icon from '@/packages/icon/index.vue';
+interface Events {
+  eventName:
+    | 'update:modelValue'
+    | 'change'
+    | 'focus'
+    | 'blur'
+    | 'add-no-allow'
+    | 'reduce-no-allow';
+  params: (string | number | Event)[];
+}
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     size: {
       type: [String],
@@ -84,16 +97,6 @@ export default create({
   ],
 
   setup(props, { emit }) {
-    interface Events {
-      eventName:
-        | 'update:modelValue'
-        | 'change'
-        | 'focus'
-        | 'blur'
-        | 'add-no-allow'
-        | 'reduce-no-allow';
-      params: (string | number | Event)[];
-    }
     const { modelValue, min, max, step } = toRefs(props);
     const state = reactive({
       num: !modelValue.value ? min.value : modelValue.value,

+ 1 - 3
src/packages/layout/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>基础布局</h2>
     <div class="box-item">
       <nut-row>
@@ -119,7 +119,6 @@
 <script lang="ts">
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('layout');
-
 export default createDemo({
   props: {}
 });
@@ -130,7 +129,6 @@ export default createDemo({
   background: #fff;
   margin-bottom: 20px;
   padding: 20px 0;
-  border: 1px solid #ddd;
 }
 .demo .nut-row {
   overflow: hidden;

+ 4 - 2
src/packages/menu/index.vue

@@ -7,7 +7,7 @@
 import { toRefs, reactive, provide } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('menu');
-
+import menuitem from '@/packages/menuitem/index.vue';
 export default create({
   props: {
     type: {
@@ -20,7 +20,9 @@ export default create({
       default: true
     }
   },
-  components: {},
+  components: {
+    [menuitem.name]: menuitem
+  },
 
   setup(props, { emit }) {
     const state = reactive({

+ 4 - 2
src/packages/menuitem/index.vue

@@ -56,10 +56,12 @@ import {
   inject
 } from 'vue';
 import { createComponent } from '@/utils/create';
-import Icon from '@/packages/icon/index.vue';
 const { create } = createComponent('menu-item');
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     title: {
       type: String,

+ 4 - 1
src/packages/navbar/index.vue

@@ -63,8 +63,11 @@ import { computed, ref } from 'vue';
 import { createComponent } from '@/utils/create';
 import { useRouter } from 'vue-router';
 const { componentName, create } = createComponent('navbar');
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     leftShow: { type: Boolean, default: true }, //左侧  是否显示返回
     title: { type: String, default: '' }, //中间  文字标题

+ 4 - 1
src/packages/popup/index.vue

@@ -103,8 +103,11 @@ const popupProps = {
     default: false
   }
 };
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     ...overlayProps,
     ...popupProps

+ 2 - 1
src/packages/pullrefresh/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>纵向</h2>
     <nut-cell>
       <div class="vertical">
@@ -77,6 +77,7 @@ export default createDemo({
 .vertical {
   height: 300px;
   overflow: hidden;
+  width: 100%;
 }
 .content {
   height: 100%;

+ 4 - 1
src/packages/rate/index.vue

@@ -23,8 +23,11 @@
 import { watch, reactive, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('rate');
-
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     total: {
       type: [String, Number],

+ 4 - 0
src/packages/shortpassword/index.vue

@@ -46,7 +46,11 @@
 import { ref, watch, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('shortpassword');
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     title: {
       type: String,

+ 4 - 0
src/packages/tabbar/index.vue

@@ -8,7 +8,11 @@
 import { provide, reactive } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('tabbar');
+import tabbaritem from '@/packages/tabbaritem/index.vue';
 export default create({
+  components: {
+    [tabbaritem.name]: tabbaritem
+  },
   props: {
     show: {
       type: [Number, String],

src/packages/tabbar-item/index.scss → src/packages/tabbaritem/index.scss


+ 4 - 0
src/packages/tabbar-item/index.vue

@@ -32,7 +32,11 @@ import {
   watch
 } from 'vue';
 const { create } = createComponent('tabbar-item');
+import Icon from '@/packages/icon/index.vue';
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     tabTitle: {
       // 标签页的标题

+ 3 - 3
src/packages/toast/index.vue

@@ -30,6 +30,9 @@ import { toRefs, toRef, reactive, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/utils/create';
 const { create } = createComponent('toast');
 export default create({
+  components: {
+    [Icon.name]: Icon
+  },
   props: {
     id: String,
     msg: String,
@@ -80,9 +83,6 @@ export default create({
       default: false
     }
   },
-  components: {
-    'nut-icon': Icon
-  },
   setup(props) {
     let timer;
     const state = reactive({

+ 3 - 0
src/sites/mobile/App.vue

@@ -93,6 +93,9 @@ export default defineComponent({
       font-size: 14px;
       color: rgba(144, 156, 164, 1);
     }
+    > p {
+      font-size: 12px;
+    }
 
     .card {
       padding: 25px 18px;