引入slot-layout样例

hzsrc · hzsrc · commit 5cadd17b1071 · 2021-08-15T20:12:58.000+08:00
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ npm install
 
 启用方法：
 1、npm run dev默认会同时启动mock服务。
-2、单独运行：npm run mock
+2、单独运行：npm run mock。
 
 配置文件：
 1、config/serverMap.js中的接口服务地址为：base: '"//localhost:8085"'
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -51,7 +51,7 @@ module.exports = {
             },
             {
                 test: /\.js$/,
-                include: [resolve('src'), resolve('test')],
+                include: [resolve('src'), resolve('test'), resolve('node_modules/slot-layout')],
                 use: [
                     //step-2
                     {
diff --git a/mock/root/api/getMenus.js b/mock/root/api/getMenus.js
@@ -16,6 +16,11 @@ module.exports = {
                     url: '/theme',
                     icon: 'el-icon-theme'
                 },
+                {
+                    title: 'Layout',
+                    url: '/layout',
+                    icon: 'el-icon-grid'
+                },
                 {
                     title: 'Page1',
                     url: '/stage1',
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/component/topHeader.vue b/src/component/topHeader.vue
@@ -27,7 +27,7 @@
                 {{menu.title}}
             </nav>
         </div>
-        <debug-info :info="topMenus"></debug-info>
+        <!--<debug-info :info="topMenus"></debug-info>-->
     </header>
 </template>
 
diff --git a/src/css/utils.scss b/src/css/utils.scss
@@ -56,15 +56,20 @@ body, input, select, textarea, button {
 }
 
 .lined {
-    background-position: bottom;
-    background-repeat: no-repeat;
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdib3g9IjAsMCwxLDEiPjxsaW5lIHkxPSIxMDAlIiB4MT0iMCIgeTI9IjEwMCUiIHgyPSI5OTk5IiBzdHJva2U9IiNjY2MiIGZpbGw9Im5vbmUiLz48L3N2Zz4=');
-    min-height: 1px;
+    border-bottom: 1px solid #eee;
+}
+
+.toplined {
+    border-top: 1px solid #eee;
+}
+
+.shaddowed {
+    box-shadow: 0 0 4px 1px rgba(#000, 0.1);
 }
 
 .pre {
     white-space: pre-wrap;
-    line-height: 1.1em;
+    line-height: 1.5;
     word-break: break-all;
 }
 
@@ -86,10 +91,13 @@ body, input, select, textarea, button {
 
 .bordered {
     border: 1px solid #ddd;
+}
+
+.radius {
     border-radius: 4px;
 }
 
-.pointer {
+.pointer, .pointer * {
     cursor: pointer;
 }
 
@@ -161,6 +169,14 @@ body, input, select, textarea, button {
     flex-shrink: 0;
 }
 
+.f-grow {
+    flex-grow: 1;
+}
+
+.f-end {
+    justify-content: flex-end;
+}
+
 .t-right {
     text-align: right;
 }
@@ -212,16 +228,12 @@ table {
     overflow: auto;
 }
 
-.pd-10 {
-    padding: 10px;
-}
-
-.pd-20 {
-    padding: 20px;
+.absolute {
+    position: absolute;
 }
 
-.mg-10 {
-    margin: 10px;
+.relative {
+    position: relative;
 }
 
 .white-bg {
@@ -231,3 +243,31 @@ table {
 .pre {
     white-space: pre-wrap;
 }
+
+.bold {
+    font-weight: bold;
+}
+
+//最大4块，自动调整为4、3、2、1块并撑满
+.flex-4 {
+    flex-basis: 21%;
+    flex-grow: 1;
+}
+
+@media (max-width: 1400px) {
+    .flex-4 {
+        flex-basis: 26%;
+    }
+}
+
+@media (max-width: 1100px) {
+    .flex-4 {
+        flex-basis: 34%;
+    }
+}
+
+@media (max-width: 800px) {
+    .flex-4 {
+        flex-basis: 51%;
+    }
+}
diff --git a/src/iconfont/fonts/_font-preview.html b/src/iconfont/fonts/_font-preview.html
@@ -22,7 +22,7 @@
             flex-flow: column;
             flex: 0 0 240px;
             align-items: center;
-            margin-bottom: 50px;
+            padding-bottom: 50px;
         }
 
         .flex-tb > section > header {
@@ -40,6 +40,7 @@
             position: absolute;
             background: #fff;
             border: 1px solid #ddd;
+            top: 20px;
         }
 
         .flex-tb div:hover > i {
@@ -48,37 +49,53 @@
         body{
             background: #ddd;
         }
+        td { padding: 5px 10px; }
+        input { border: 0; outline: 0; width: 150px; text-align: center; background: transparent; }
+        section { position: relative; }
     </style>
+    <script>
+        function copyCls(el){
+            el = el.querySelector('input')
+            el.focus();
+            el.select()
+            document.execCommand('copy', false, null);            
+        }
+    </script>
 <body>
+    <h3 align="center"><a href="https://segmentfault.com/a/1190000017480480">webpack-iconfont-plugin-nodejs</a></h3>
+    <h4>
+    Modify or add a svg file in dir [src/iconfont/svgs], they will be parsed to iconfonts with css, and hot-loaded. <br/>
+    修改或者添加svg文件到[src/iconfont/svgs]目录，将自动生成为iconfonts以及配套的css，支持热重载。</h4>
+    <hr/>
     <div class="info">
-        <h3>my-app-icon (5)</h3>
-        <div>Class name prefix: my-icon-</div>
+        <h3>my-app-icon (5 icons, click to copy)</h3>
+        Class name prefix: <b>my-icon-</b> &emsp; You can use it like: &lt;i class="my-icon-success"&gt;&lt;/i&gt;
     </div>
     <hr/>
     <div class="flex-tb">
       
-        <section>
-            <header contenteditable>my-icon-bookmark</header>
+        <section onclick="copyCls(this)">
+            <input value="my-icon-bookmark" />
             <div><i class="my-icon-bookmark"></i></div>
         </section>
       
-        <section>
-            <header contenteditable>my-icon-calendar</header>
+        <section onclick="copyCls(this)">
+            <input value="my-icon-calendar" />
             <div><i class="my-icon-calendar"></i></div>
         </section>
       
-        <section>
-            <header contenteditable>my-icon-state-beinvited</header>
+        <section onclick="copyCls(this)">
+            <input value="my-icon-state-beinvited" />
             <div><i class="my-icon-state-beinvited"></i></div>
         </section>
       
-        <section>
-            <header contenteditable>my-icon-success</header>
+        <section onclick="copyCls(this)">
+            <input value="my-icon-success" />
             <div><i class="my-icon-success"></i></div>
         </section>
       
-        <section>
-            <header contenteditable>my-icon-warning</header>
+        <section onclick="copyCls(this)">
+            <input value="my-icon-warning" />
             <div><i class="my-icon-warning"></i></div>
         </section>
       
diff --git a/src/iconfont/fonts/my-app-icon.ttf b/src/iconfont/fonts/my-app-icon.ttf
diff --git a/src/iconfont/fonts/my-app-icon.woff b/src/iconfont/fonts/my-app-icon.woff
diff --git a/src/iconfont/fonts/my-app-icon.woff2 b/src/iconfont/fonts/my-app-icon.woff2
diff --git a/src/router/routerMain.js b/src/router/routerMain.js
@@ -35,6 +35,10 @@ const router = new Router({
                     component: () => spinRoute.require(import('../views/iconfontPreview/iconfontPreview.vue'))
                 },
                 { path: '/zrest', component: () => spinRoute.require(import('../views/zrest/zrest.vue')) },
+                {
+                    path: '/layout',
+                    component: () => spinRoute.require(import('../views/slot-layout.vue'))
+                },
                 { path: '*', component: () => spinRoute.require(import('../views/home/404.vue')) }
             ],
         },
diff --git a/src/views/iconfontPreview/iconfontPreview.vue b/src/views/iconfontPreview/iconfontPreview.vue
@@ -14,7 +14,7 @@
         flex-flow: column;
         flex: 0 0 240px;
         align-items: center;
-        margin-bottom: 50px;
+        padding-bottom: 50px;
     }
 
     .flex-tb > section > header {
@@ -33,25 +33,33 @@
         position: absolute;
         background: #fff;
         border: 1px solid #ddd;
+        top: 20px;
     }
 
     .flex-tb div:hover > i {
         font-size: 200px;
     }
+    
+    td { padding: 5px 10px; }
+    input { border: 0; outline: 0; width: 150px; text-align: center; background: transparent; }
+    section { position: relative; }
 </style>
 <template>
     <div>
-        <div class="info">
-            <h2>my-app-icon (5)</h2>
-            <div>Class name prefix: my-icon-</div>
-        </div>
+    <h4>
+    Modify or add a svg file in dir [src/iconfont/svgs], they will be parsed to iconfonts with css, and hot-loaded. <br/>
+    修改或者添加svg文件到[src/iconfont/svgs]目录，将自动生成为iconfonts以及配套的css，支持热重载。</h4>
+    <hr/>
+    <div class="info">
+        <h3>my-app-icon (5 icons, click to copy)</h3>
+        Class name prefix: <b>my-icon-</b> &emsp; You can use it like: &lt;i class="my-icon-success"&gt;&lt;/i&gt;
+    </div>
         <hr/>
         <div class="flex-tb">
-            <section v-for="font in fontList" :key="font.name">
-                <header contenteditable>my-icon-{{font.name}}</header>
+            <section v-for="font in fontList" :key="font.name" @click="copyCls">
+                <input :value="'my-icon-'+font.name" />
                 <div><i :class="'my-icon-'+font.name"></i></div>
             </section>
-
         </div>
 
         <foot-code></foot-code>
@@ -67,6 +75,14 @@
                 fontList
             }
         },
+        methods:{
+          copyCls(e){
+            var el = e.currentTarget.querySelector('input')
+            el.focus();
+            el.select()
+            document.execCommand('copy', false, null);            
+          }
+        },
         components: { footCode }
     }
 </script>

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ module.exports = {`
`51`	`51`	`},`
`52`	`52`	`{`
`53`	`53`	`test: /\.js$/,`
`54`		`- include: [resolve('src'), resolve('test')],`
	`54`	`+ include: [resolve('src'), resolve('test'), resolve('node_modules/slot-layout')],`
`55`	`55`	`use: [`
`56`	`56`	`//step-2`
`57`	`57`	`{`