浏览代码

fix: 抽离 collapse-item,全局下无需单独引入

Ymm0008 5 年之前
父节点
当前提交
e2c3b22d06

文件差异内容过多而无法显示
+ 706 - 694
src/config.json


+ 127 - 125
src/nutui.js

@@ -134,80 +134,82 @@ import './packages/fixednav/fixednav.scss'; // import Gesture from './packages/g
 
 import Collapse from './packages/collapse/index.js';
 import './packages/collapse/collapse.scss';
-import Luckycard from "./packages/luckycard/index.js";
-import "./packages/luckycard/luckycard.scss";
+import Luckycard from './packages/luckycard/index.js';
+import './packages/luckycard/luckycard.scss';
 import NumberKeyboard from './packages/numberkeyboard/index.js';
 import './packages/numberkeyboard/numberkeyboard.scss';
+import CollapseItem from './packages/collapseitem/index.js';
+import './packages/collapseitem/collapseitem.scss';
 
 const packages = {
-    Cell,
-    Dialog,
-    Icon,
-    Toast,
-    ActionSheet,
-    Tab,
-    TabPanel,
-    TabBar,
-    Calendar,
-    DatePicker,
-    NavBar,
-    NoticeBar,
-    Switch,
-    Slider,
-    Range,
-    Picker,
-    Progress,
-    Price,
-    Flex,
-    Col,
-    Row,
-    Steps,
-    Button,
-    Badge,
-    Rate,
-    Swiper,
-    Menu,
-    Stepper,
-    ButtonGroup,
-    SearchBar,
-    ImagePicker,
-    Radio,
-    RadioGroup,
-    CheckBox,
-    CheckBoxGroup,
-    ShortPassword,
-    Skeleton,
-    Scroller,
-    BackTop,
-    CountDown,
-    InfiniteLoading,
-    Uploader,
-    TextInput,
-    TextBox,
-    Avatar,
-    Elevator,
-    Popup,
-    LeftSlip,
-    TabSelect,
-    LuckDraw,
-    Video,
-    Signature,
-    CircleProgress,
-    TimeLine,
-    TimeLineItem,
-    SideNavBar,
-    SubSideNavBar,
-    SideNavBarItem,
-    Drag,
-    Address,
-    Notify,
-    CountUp,
-    FixedNav,
-    // Gesture: Gesture
-    Collapse: Collapse,
-
-    Luckycard: Luckycard,
-    NumberKeyboard: NumberKeyboard
+  Cell,
+  Dialog,
+  Icon,
+  Toast,
+  ActionSheet,
+  Tab,
+  TabPanel,
+  TabBar,
+  Calendar,
+  DatePicker,
+  NavBar,
+  NoticeBar,
+  Switch,
+  Slider,
+  Range,
+  Picker,
+  Progress,
+  Price,
+  Flex,
+  Col,
+  Row,
+  Steps,
+  Button,
+  Badge,
+  Rate,
+  Swiper,
+  Menu,
+  Stepper,
+  ButtonGroup,
+  SearchBar,
+  ImagePicker,
+  Radio,
+  RadioGroup,
+  CheckBox,
+  CheckBoxGroup,
+  ShortPassword,
+  Skeleton,
+  Scroller,
+  BackTop,
+  CountDown,
+  InfiniteLoading,
+  Uploader,
+  TextInput,
+  TextBox,
+  Avatar,
+  Elevator,
+  Popup,
+  LeftSlip,
+  TabSelect,
+  LuckDraw,
+  Video,
+  Signature,
+  CircleProgress,
+  TimeLine,
+  TimeLineItem,
+  SideNavBar,
+  SubSideNavBar,
+  SideNavBarItem,
+  Drag,
+  Address,
+  Notify,
+  CountUp,
+  FixedNav,
+  // Gesture: Gesture
+  Collapse: Collapse,
+  Luckycard: Luckycard,
+  NumberKeyboard: NumberKeyboard,
+  CollapseItem: CollapseItem
 };
 
 const components = {};
@@ -215,80 +217,80 @@ const methods = {};
 const filters = {};
 const directives = {};
 pkgList.map(item => {
-    const pkg = packages[item.name];
-    if (!pkg) return;
+  const pkg = packages[item.name];
+  if (!pkg) return;
 
-    if (item.type == 'component') {
-        if (pkg.name) {
-            components[pkg.name] = pkg;
-        } else {
-            for (let n in pkg) {
-                components[n] = pkg[n];
-            }
-        }
-    } else if (item.type == 'method') {
-        methods[item.name] = pkg;
-    } else if (item.type == 'filter') {
-        filters[item.name] = pkg;
-    } else if (item.type == 'directive') {
-        directives[item.name] = pkg;
+  if (item.type == 'component') {
+    if (pkg.name) {
+      components[pkg.name] = pkg;
+    } else {
+      for (let n in pkg) {
+        components[n] = pkg[n];
+      }
     }
+  } else if (item.type == 'method') {
+    methods[item.name] = pkg;
+  } else if (item.type == 'filter') {
+    filters[item.name] = pkg;
+  } else if (item.type == 'directive') {
+    directives[item.name] = pkg;
+  }
 });
 
 const install = function(Vue, opts = {}) {
-    if (install.installed) return;
+  if (install.installed) return;
 
-    if (opts.locale) {
-        Vue.config.lang = opts.locale;
-    }
+  if (opts.locale) {
+    Vue.config.lang = opts.locale;
+  }
 
-    if (opts.lang) locale(Vue.config.lang, opts.lang);
+  if (opts.lang) locale(Vue.config.lang, opts.lang);
 
-    for (let cptName in methods) {
-        if (Array.isArray(methods[cptName])) {
-            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
-            Vue.component(methods[cptName][1].name, methods[cptName][1]);
-        } else {
-            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
-        }
+  for (let cptName in methods) {
+    if (Array.isArray(methods[cptName])) {
+      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
+      Vue.component(methods[cptName][1].name, methods[cptName][1]);
+    } else {
+      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
     }
+  }
 
-    for (let cptName in components) {
-        if (components[cptName] && components[cptName].name) {
-            Vue.component(components[cptName].name, components[cptName]);
-        }
+  for (let cptName in components) {
+    if (components[cptName] && components[cptName].name) {
+      Vue.component(components[cptName].name, components[cptName]);
     }
+  }
 
-    for (let cptName in filters) {
-        if (filters[cptName] && filters[cptName].name) {
-            Vue.filter(cptName, filters[cptName]);
-        }
+  for (let cptName in filters) {
+    if (filters[cptName] && filters[cptName].name) {
+      Vue.filter(cptName, filters[cptName]);
     }
+  }
 
-    for (let cptName in directives) {
-        if (directives[cptName] && directives[cptName].name) {
-            Vue.directive(directives[cptName].name, directives[cptName]);
-        }
+  for (let cptName in directives) {
+    if (directives[cptName] && directives[cptName].name) {
+      Vue.directive(directives[cptName].name, directives[cptName]);
     }
+  }
 
-    Vue.use(Lazyload, {
-        lazyComponent: true,
-        loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
-    });
+  Vue.use(Lazyload, {
+    lazyComponent: true,
+    loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
+  });
 };
 
 if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
+  install(window.Vue);
 }
 
 export default {
-    version,
-    locale,
-    install,
-    Lazyload,
-    // VueQr,
-    ...components,
-    ...filters,
-    ...directives,
-    ...methods
-};
+  version,
+  locale,
+  install,
+  Lazyload,
+  // VueQr,
+  ...components,
+  ...filters,
+  ...directives,
+  ...methods
+};

+ 0 - 94
src/packages/collapse/collapse.scss

@@ -1,94 +0,0 @@
-.nut-collapse {
-  position: relative;
-  .collapse-item,
-  .collapse-wrapper {
-    &::after {
-      position: absolute;
-      box-sizing: border-box;
-      content: ' ';
-      pointer-events: none;
-      right: 16px;
-      bottom: 0;
-      left: 16px;
-      border-bottom: 1px solid #ebedf0;
-      -webkit-transform: scaleY(0.5);
-      transform: scaleY(0.5);
-    }
-  }
-  .nut-collapse-item {
-    .collapse-item {
-      position: relative;
-      width: 100%;
-      overflow: hidden;
-      padding: 10px 16px;
-      color: #323233;
-      font-size: 14px;
-      line-height: 24px;
-      background-color: #fff;
-      box-sizing: border-box;
-      .collapse-icon {
-        display: block;
-        position: absolute;
-        top: 50%;
-        margin-top: -10px;
-        right: 16px;
-        width: 20px;
-        height: 20px;
-        line-height: 24px;
-        background-image: url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        transition: transform 0.3s;
-      }
-      .col-expanded {
-        transform: rotate(-180deg);
-      }
-      .subTitle {
-        position: absolute;
-        top: 50%;
-        right: 40px;
-        margin-top: -12px;
-        color: #969799;
-      }
-    }
-    .collapse-wrapper {
-      position: relative;
-      height: 0;
-      overflow: hidden;
-      transition: height 0.3s ease-in-out;
-      .collapse-content {
-        padding: 12px 16px;
-        color: #969799;
-        font-size: 14px;
-        line-height: 1.5;
-        background-color: #fff;
-      }
-    }
-    .nut-collapse-item-disabled {
-      color: #c8c9cc;
-      cursor: not-allowed;
-      pointer-events: none;
-      .collapse-icon-disabled {
-        background-image: url(https://img12.360buyimg.com/imagetools/jfs/t1/150037/5/8088/344/5f5b0bf2E214aac54/ec3e64ce3fc46200.png);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-  .nut-collapse-item-left {
-    .collapse-item {
-      padding: 10px 16px 10px 50px;
-      .collapse-icon {
-        left: 20px;
-      }
-      .subTitle {
-        right: 16px;
-      }
-    }
-  }
-  // .nut-collapse-item.nut-collapse-item-icon {
-  //     .collapse-icon {
-  //         transform: rotate(0deg);
-  //     }
-  // }
-}

+ 0 - 4
src/packages/collapse/collapse.vue

@@ -4,12 +4,8 @@
   </div>
 </template>
 <script>
-import nutCollapseItem from './collapse-item';
 export default {
   name: 'nut-collapse',
-  components: {
-    nutCollapseItem
-  },
   model: {
     prop: 'value',
     event: 'change-active'

+ 0 - 4
src/packages/collapse/demo.vue

@@ -40,11 +40,7 @@
   </div>
 </template>
 <script>
-import nutCollapseItem from './collapse-item';
 export default {
-  components: {
-    nutCollapseItem
-  },
   data() {
     return {
       active1: [1, '2'],

+ 5 - 0
src/packages/collapseitem/__test__/collapseitem.spec.js

@@ -0,0 +1,5 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import CollapseItem from '../collapseitem.vue';
+import Vue from 'vue';
+
+describe('CollapseItem.vue', () => {});

+ 91 - 0
src/packages/collapseitem/collapseitem.scss

@@ -0,0 +1,91 @@
+.nut-collapse-item {
+  position: relative;
+  .collapse-item {
+    &::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      right: 16px;
+      bottom: 0;
+      left: 16px;
+      border-bottom: 1px solid #ebedf0;
+      -webkit-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+  }
+  .collapse-item {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    padding: 10px 16px;
+    color: #323233;
+    font-size: 14px;
+    line-height: 24px;
+    background-color: #fff;
+    box-sizing: border-box;
+    .collapse-icon {
+      display: block;
+      position: absolute;
+      top: 50%;
+      margin-top: -10px;
+      right: 16px;
+      width: 20px;
+      height: 20px;
+      line-height: 24px;
+      background-image: url(https://img10.360buyimg.com/imagetools/jfs/t1/111306/10/17422/341/5f58aa0eEe9218dd6/28d76a42db334e31.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      transition: transform 0.3s;
+    }
+    .col-expanded {
+      transform: rotate(-180deg);
+    }
+    .subTitle {
+      position: absolute;
+      top: 50%;
+      right: 40px;
+      margin-top: -12px;
+      color: #969799;
+    }
+  }
+  .collapse-wrapper {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+    .collapse-content {
+      padding: 12px 16px;
+      color: #969799;
+      font-size: 14px;
+      line-height: 1.5;
+      background-color: #fff;
+    }
+  }
+  .nut-collapse-item-disabled {
+    color: #c8c9cc;
+    cursor: not-allowed;
+    pointer-events: none;
+    .collapse-icon-disabled {
+      background-image: url(https://img12.360buyimg.com/imagetools/jfs/t1/150037/5/8088/344/5f5b0bf2E214aac54/ec3e64ce3fc46200.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .nut-collapse-item-left {
+    .collapse-item {
+      padding: 10px 16px 10px 50px;
+      .collapse-icon {
+        left: 20px;
+      }
+      .subTitle {
+        right: 16px;
+      }
+    }
+  }
+  // .nut-collapse-item.nut-collapse-item-icon {
+  //     .collapse-icon {
+  //         transform: rotate(0deg);
+  //     }
+  // }
+}

src/packages/collapse/collapse-item.vue → src/packages/collapseitem/collapseitem.vue


+ 11 - 0
src/packages/collapseitem/demo.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="demo-list"></div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>

+ 1 - 0
src/packages/collapseitem/doc.md

@@ -0,0 +1 @@
+collapseitem

+ 8 - 0
src/packages/collapseitem/index.js

@@ -0,0 +1,8 @@
+import CollapseItem from './collapseitem.vue';
+import './collapseitem.scss';
+
+CollapseItem.install = function(Vue) {
+  Vue.component(CollapseItem.name, CollapseItem);
+};
+
+export default CollapseItem;

+ 1 - 0
types/nutui.d.ts

@@ -87,3 +87,4 @@ export declare class Gesture extends UIComponent {}
 export declare class Collapse extends UIComponent {}
 export declare class Luckycard extends UIComponent {}
 export declare class NumberKeyboard extends UIComponent {}
+export declare class CollapseItem extends UIComponent {}