dpzvc-ui 1.0.0 → 1.2.0

package/src/main.js

@@ -1,76 +1,34 @@
-/**
- * Created by yishide .
- */
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './components/app.vue';
 import Routers from './router';
+import Config from './config/config';
+import dpzvc from './index';
 
-import Config from './config/config'
-// import Modal from './components/modal/index'
-// import Prompt from './components/prompt/index'
-
-
-// import Message from './components/message/index'
-
-import dpzvc from './index'
-
-Vue.use(dpzvc)
-
-
-    // var log = console.log;
-    // console.log = function () {
-    //     var args = Array.from(arguments);
-    //     args = args.map(arg => {
-    //         try {
-    //             return JSON.parse(JSON.stringify(arg));
-    //         } catch (e) {
-    //             return arg;
-    //         }
-    //     });
-    //
-    //     log.apply(console, args);
-    // };
-    //
-    // window.vConsole = require('./vconsole.min');
-    // require('./vconsole-resources.min');
-    // require('./vconsole-sources.min');
-
+// 安装自定义组件库
+Vue.use(dpzvc);
 
 Vue.use(VueRouter);
-// Vue.use(VueTouch);
-
-
-// 开启debug模式
-
 
+// 配置全局变量
 Vue.prototype.$Config = Config;
 
+// 创建全局事件总线
+window.EventBus = new Vue();
 
-let EventBus = new Vue();
 // 路由配置
-let router = new VueRouter({
-
-    history: process.env.NODE_ENV != 'production',
-    routes:Routers
+const router = new VueRouter({
+  mode: process.env.NODE_ENV !== 'production' ? 'hash' : 'hash', // VueRouter 3 兼容写法
+  routes: Routers
 });
 
-
-router.beforeEach((to,from,next) => {
-    // let title = to.meta.title || Config.doc_title;
-    // setPageTitle(title);
-    window.scrollTo(0, 0);
-    next();
+router.beforeEach((to, from, next) => {
+  window.scrollTo(0, 0);
+  next();
 });
-
-router.afterEach(() => {
-
-});
-
-window.EventBus = new Vue();
-
+// 根实例
 new Vue({
-    el: '#app',
-    router: router,
-    render: h => h(App)
-})
+  el: '#app',
+  router,
+  render: h => h(App)
+});

package/src/router.js

@@ -1,229 +1,36 @@
 /**
- * Created by lcfevr on 16/8/22.
+ * 路由配置 - 按需加载版本
  */
 const routers = [
-    {
-        path:'/',
-        redirect:'/guide'
-    },
+  { path: '/', redirect: '/guide' },
 
-    {
-        path:'/guide',
-        name:'guide',
-        component:require('./views/guide.vue'),
-        meta:{
-            title:'guide'
-        }
-    },
-    {
-        path:'/ActionSheet',
-        name:'ActionSheet',
-        component:require('./views/ActionSheet.vue'),
-        meta:{
-            title:'ActionSheet'
-        }
-    },
-    {
-        path:'/Badge',
-        name:'Badge',
-        component:require('./views/Badge.vue'),
-        meta:{
-            title:'Badge'
-        }
-    },
-    {
-        path:'/Button',
-        name:'Button',
-        component:require('./views/Button.vue'),
-        meta:{
-            title:'Button'
-        }
-    },
-    {
-        path:'/Card',
-        name:'Card',
-        component:require('./views/Card.vue'),
-        meta:{
-            title:'Card'
-        }
-    },
-    {
-        path:'/Cell',
-        name:'Cell',
-        component:require('./views/Cell.vue'),
-        meta:{
-            title:'Cell'
-        }
-    },
-    {
-        path:'/CellSwipe',
-        name:'CellSwipe',
-        component:require('./views/CellSwipe.vue'),
-        meta:{
-            title:'CellSwipe'
-        }
-    },
-    {
-        path:'/CheckBox',
-        name:'CheckBox',
-        component:require('./views/CheckBox.vue'),
-        meta:{
-            title:'CheckBox'
-        }
-    },
-    {
-        path:'/Header',
-        name:'Header',
-        component:require('./views/Header.vue'),
-        meta:{
-            title:'Header'
-        }
-    },
-    {
-        path:'/Indicator',
-        name:'Indicator',
-        component:require('./views/Indicator.vue'),
-        meta:{
-            title:'Indicator'
-        }
-    },
-    {
-        path:'/LoadMore',
-        name:'LoadMore',
-        component:require('./views/LoadMore.vue'),
-        meta:{
-            title:'LoadMore'
-        }
-    },
-    {
-        path:'/Message',
-        name:'Message',
-        component:require('./views/Message.vue'),
-        meta:{
-            title:'Message'
-        }
-    },
-    {
-        path:'/Modal',
-        name:'Modal',
-        component:require('./views/Modal.vue'),
-        meta:{
-            title:'Modal'
-        }
-    },
-    {
-        path:'/Picker',
-        name:'Picker',
-        component:require('./views/Picker.vue'),
-        meta:{
-            title:'Picker'
-        }
-    },
-    {
-        path:'/Popup',
-        name:'Popup',
-        component:require('./views/Popup.vue'),
-        meta:{
-            title:'Popup'
-        }
-    },
-    {
-        path:'/Progress',
-        name:'Progress',
-        component:require('./views/Progress.vue'),
-        meta:{
-            title:'Progress'
-        }
-    },
-    {
-        path:'/Prompt',
-        name:'Prompt',
-        component:require('./views/Prompt.vue'),
-        meta:{
-            title:'Prompt'
-        }
-    },
-    {
-        path:'/RadioBox',
-        name:'RadioBox',
-        component:require('./views/RadioBox.vue'),
-        meta:{
-            title:'RadioBox'
-        }
-    },
-    {
-        path:'/Rater',
-        name:'Rater',
-        component:require('./views/Rater.vue'),
-        meta:{
-            title:'Rater'
-        }
-    },
-    {
-        path:'/SlideBar',
-        name:'SlideBar',
-        component:require('./views/SlideBar.vue'),
-        meta:{
-            title:'SlideBar'
-        }
-    },
-    {
-        path:'/Spinner',
-        name:'Spinner',
-        component:require('./views/Spinner.vue'),
-        meta:{
-            title:'Spinner'
-        }
-    },
-    {
-        path:'/Swipe',
-        name:'Swipe',
-        component:require('./views/Swipe.vue'),
-        meta:{
-            title:'Swipe'
-        }
-    },
-    {
-        path:'/SwitchBar',
-        name:'SwitchBar',
-        component:require('./views/SwitchBar.vue'),
-        meta:{
-            title:'SwitchBar'
-        }
-    },
-    {
-        path:'/Tab',
-        name:'Tab',
-        component:require('./views/Tab.vue'),
-        meta:{
-            title:'Tab'
-        }
-    },
-    {
-        path:'/Text',
-        name:'Text',
-        component:require('./views/Text.vue'),
-        meta:{
-            title:'Text'
-        }
-    },
-    {
-        path:'/ToTop',
-        name:'ToTop',
-        component:require('./views/ToTop.vue'),
-        meta:{
-            title:'ToTop'
-        }
-    },
-    {
-        path:'/Upload',
-        name:'Upload',
-        component:require('./views/Upload.vue'),
-        meta:{
-            title:'Upload'
-        }
-    },
+  { path: '/guide', name: 'guide', component: () => import(/* webpackChunkName: "guide" */ './views/guide.vue'), meta: { title: 'guide' } },
+  { path: '/ActionSheet', name: 'ActionSheet', component: () => import(/* webpackChunkName: "actionsheet" */ './views/ActionSheet.vue'), meta: { title: 'ActionSheet' } },
+  { path: '/Badge', name: 'Badge', component: () => import(/* webpackChunkName: "badge" */ './views/Badge.vue'), meta: { title: 'Badge' } },
+  { path: '/Button', name: 'Button', component: () => import(/* webpackChunkName: "button" */ './views/Button.vue'), meta: { title: 'Button' } },
+  { path: '/Card', name: 'Card', component: () => import(/* webpackChunkName: "card" */ './views/Card.vue'), meta: { title: 'Card' } },
+  { path: '/Cell', name: 'Cell', component: () => import(/* webpackChunkName: "cell" */ './views/Cell.vue'), meta: { title: 'Cell' } },
+  { path: '/CellSwipe', name: 'CellSwipe', component: () => import(/* webpackChunkName: "cellswipe" */ './views/CellSwipe.vue'), meta: { title: 'CellSwipe' } },
+  { path: '/CheckBox', name: 'CheckBox', component: () => import(/* webpackChunkName: "checkbox" */ './views/CheckBox.vue'), meta: { title: 'CheckBox' } },
+  { path: '/Header', name: 'Header', component: () => import(/* webpackChunkName: "header" */ './views/Header.vue'), meta: { title: 'Header' } },
+  { path: '/Indicator', name: 'Indicator', component: () => import(/* webpackChunkName: "indicator" */ './views/Indicator.vue'), meta: { title: 'Indicator' } },
+  { path: '/LoadMore', name: 'LoadMore', component: () => import(/* webpackChunkName: "loadmore" */ './views/LoadMore.vue'), meta: { title: 'LoadMore' } },
+  { path: '/Message', name: 'Message', component: () => import(/* webpackChunkName: "message" */ './views/Message.vue'), meta: { title: 'Message' } },
+  { path: '/Modal', name: 'Modal', component: () => import(/* webpackChunkName: "modal" */ './views/Modal.vue'), meta: { title: 'Modal' } },
+  { path: '/Picker', name: 'Picker', component: () => import(/* webpackChunkName: "picker" */ './views/Picker.vue'), meta: { title: 'Picker' } },
+  { path: '/Popup', name: 'Popup', component: () => import(/* webpackChunkName: "popup" */ './views/Popup.vue'), meta: { title: 'Popup' } },
+  { path: '/Progress', name: 'Progress', component: () => import(/* webpackChunkName: "progress" */ './views/Progress.vue'), meta: { title: 'Progress' } },
+  { path: '/Prompt', name: 'Prompt', component: () => import(/* webpackChunkName: "prompt" */ './views/Prompt.vue'), meta: { title: 'Prompt' } },
+  { path: '/RadioBox', name: 'RadioBox', component: () => import(/* webpackChunkName: "radiobox" */ './views/RadioBox.vue'), meta: { title: 'RadioBox' } },
+  { path: '/Rater', name: 'Rater', component: () => import(/* webpackChunkName: "rater" */ './views/Rater.vue'), meta: { title: 'Rater' } },
+  { path: '/SlideBar', name: 'SlideBar', component: () => import(/* webpackChunkName: "slidebar" */ './views/SlideBar.vue'), meta: { title: 'SlideBar' } },
+  { path: '/Spinner', name: 'Spinner', component: () => import(/* webpackChunkName: "spinner" */ './views/Spinner.vue'), meta: { title: 'Spinner' } },
+  { path: '/Swipe', name: 'Swipe', component: () => import(/* webpackChunkName: "swipe" */ './views/Swipe.vue'), meta: { title: 'Swipe' } },
+  { path: '/SwitchBar', name: 'SwitchBar', component: () => import(/* webpackChunkName: "switchbar" */ './views/SwitchBar.vue'), meta: { title: 'SwitchBar' } },
+  { path: '/Tab', name: 'Tab', component: () => import(/* webpackChunkName: "tab" */ './views/Tab.vue'), meta: { title: 'Tab' } },
+  { path: '/Text', name: 'Text', component: () => import(/* webpackChunkName: "text" */ './views/Text.vue'), meta: { title: 'Text' } },
+  { path: '/ToTop', name: 'ToTop', component: () => import(/* webpackChunkName: "totop" */ './views/ToTop.vue'), meta: { title: 'ToTop' } },
+  { path: '/Upload', name: 'Upload', component: () => import(/* webpackChunkName: "upload" */ './views/Upload.vue'), meta: { title: 'Upload' } },
+];
 
-
-]
 export default routers;

package/src/styles/base/reset.less

@@ -1,4 +1,7 @@
-html,body{
+@import "../base/variable.less";
+
+html,
+body {
   font-family: @FontFamily;
   font-size: @FontSizeBase;
   color: @TxtColor;
@@ -8,45 +11,106 @@ html,body{
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
 }
-body, div, ul, li, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, select, button, p, a, img, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+
+body,
+div,
+ul,
+li,
+ol,
+dl,
+dt,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+fieldset,
+legend,
+input,
+textarea,
+select,
+button,
+p,
+a,
+img,
+table,
+th,
+tr,
+td,
+tbody,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   border-width: thin;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
-em, i {
+
+em,
+i {
   font-style: normal;
 }
+
 strong {
   font-weight: normal;
 }
-a, a:hover {
+
+a,
+a:hover {
   color: inherit;
   -webkit-touch-callout: none;
   text-decoration: none;
 }
-ul, ol {
+
+ul,
+ol {
   list-style: none;
 }
-h1 ,h2, h3, h4, h5, h6 {
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-size: 100%;
   font-weight: normal;
 }
-fieldset, img {
+
+fieldset,
+img {
   border: none;
 }
+
 img {
   max-width: 100%;
   height: auto;
-  width:auto\9;
+  width: auto\9;
   -ms-interpolation-mode: bicubic;
 }
-input, textarea, select, button {
+
+input,
+textarea,
+select,
+button {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -55,15 +119,17 @@ input, textarea, select, button {
   -webkit-appearance: none;
   background: none;
 }
+
 textarea {
   resize: none;
 }
+
 input:focus::-webkit-input-placeholder,
 textarea:focus::-webkit-input-placeholder {
   opacity: 0;
 }
+
 :focus {
   outline: none;
   -webkit-tap-highlight-color: transparent;
-}
-
+}

package/src/styles/components/badge.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-badge {
   position: relative;
   display: inline-block;

package/src/styles/components/button.less

@@ -1,4 +1,5 @@
 @width: 40px;
+@import "../base/variable.less";
 
 .dpzvc-button {
   position: relative;

package/src/styles/components/checkBox.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-checkbox {
   display: inline-block;
   margin-right: 8px;

package/src/styles/components/header.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-header {
     position: absolute;
     left: 0;

package/src/styles/components/indicator.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-Indicator {
   width: 100%;
   position: absolute;

package/src/styles/components/modal.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-modal {
   transform: translate3d(-50%, -50%, 0) scale(1);
   position: absolute;

package/src/styles/components/number.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-number {
 
   width: 100%;

package/src/styles/components/picker.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-picker-wrapper {
   position: relative;
   height: 100%;

package/src/styles/components/progress.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-progress {
   display: flex;
   position: relative;

package/src/styles/components/radioBox.less

@@ -8,6 +8,8 @@
 //    }
 //  }
 //}
+@import "../base/variable.less";
+
 .dpzvc-radioBoxGroup.dpzvc-radioBoxGroup-vertical .dpzvc-radiobox {
   margin-right: 0;
   margin-bottom: 8px;

package/src/styles/components/slide-Bar.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-slideBar {
   border-top-color: @SlideBarBgColor;
   border-bottom-color: @SlideBarBgColor;

package/src/styles/components/spinner.less

@@ -1,3 +1,4 @@
+@import "../base/variable.less";
 // spinner.less - 完整可用版本（无 unit()/round()，可直接编译）
 @SpinnerSize: 28px;
 @SpinnerColor: #ccc;

package/src/styles/components/tab.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-tab {
   background: @TabBgColor;
   position: absolute;

package/src/styles/components/text.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-textBar {
 
   background: #ffffff;

package/src/styles/components/toTop.less

@@ -1,3 +1,5 @@
+@import "../base/variable.less";
+
 .dpzvc-toTop {
   position: fixed;
   right: 15px;

package/src/styles/utils/1px.less

@@ -1,4 +1,6 @@
 // 使用1px类时，需要注意 如果是absolute定位的，在引入mx-1px后，需要重新写入absolute定位
+@import "../base/variable.less";
+
 .dpzvc-1px {
   &-all {
     .dpzvc-1px(@BorderColor);

package/src/styles/utils/nowrap.less

@@ -7,7 +7,7 @@
 
 .dpzvc-nowrap(@n, @i: 1) when (@i <=@n) {
   .dpzvc-nowrap-@{i} {
-    .dpzvc-nowrap;
+    .dpzvc-nowrap();
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: @i;