浏览代码

修改侧滑按钮组件给默认样式

liaoyanli5 7 年之前
父节点
当前提交
ba5e03a146

文件差异内容过多而无法显示
+ 7 - 66
src/demo/sideslipbutton.vue


+ 18 - 12
src/demo/timer.vue

@@ -3,26 +3,32 @@
         <nut-demoheader 
         :name="$route.name"
         ></nut-demoheader>
-
-        <nut-timer :timespacer="6000000000"></nut-timer>
-               
+        <!-- DEMO区域 -->
+        <h3>示例1</h3>
+        <nut-timer 
+        :timespacer="600000000"  
+        @end-timer="endTimer1"></nut-timer>
+        <h3>示例2</h3>
+        <nut-timer 
+        timespacer="600000000" 
+        @end-timer="endTimer2" 
+        formater="dd天hh时mm分ss秒" 
+        starttime="2018-06-05 12:30:30" 
+        endtime="2018-06-06 10:13:30"></nut-timer>       
     </div>
-
-
 </template>
 
 <script>
 export default {
     data(){
-      return {
-        demo:`<nut-timer :timespacer="6000000000"></nut-timer>`
-      }
     },
     methods:{
+      endTimer1() {
+        console.log('示例1倒计时结束了!');
+      },
+      endTimer2() {
+        console.log('示例2倒计时结束了!');
+      }
     }
 }
 </script>
-
-<style>
-
-</style>

文件差异内容过多而无法显示
+ 69 - 4
src/package/sideslipbutton/src/sideslipbutton.vue


+ 2 - 2
src/package/timer/src/timer.vue

@@ -15,11 +15,11 @@
                 default: 0
             },
             'endtime': {
-                type: [Number,String],
+                type: [Number,String,Date],
                 default: 0
             },
             'formater': {
-                type: [Number,Date],
+                type: [Number,String,Date],
                 default: 'hh:mm:ss'
             }
         },

+ 22 - 10
src/view/sideslipbutton.vue

@@ -37,6 +37,13 @@
                 <td>true</td>
                 <td>true/false</td>
               </tr>
+              <tr>
+                <td>customClass</td>
+                <td>自定义样式名</td>
+                <td>String</td>
+                <td> </td>
+                <td> </td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -76,16 +83,21 @@
 export default {
     data(){
         return{
-            demo: `<nut-sideslipbutton @slide-left="slideLeft" @slide-right="slideRight" @slide-no="slideNo" :during="0.5">
-    <div slot="slidedom" class="slidedom">
-        <div class="addr">
-            <p class="name-mobile">159****8888</p>
-            <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座</p>
-        </div>
-        <a class="addr-edit" href="javascript:void(0)"></a>
-    </div>
-    <div slot="slideoper" class="slideoper">删除/收藏</div>
-</nut-sideslipbutton>`
+            demo: `<nut-sideslipbutton 
+        @slide-left="slideLeft" 
+        @slide-right="slideRight" 
+        @slide-no="slideNo" 
+        during="0.2" 
+        customClass="aaaaa">
+            <div slot="slidedom" class="slidedom">
+                <div class="addr">
+                    <p class="name-mobile">159****8888</p>
+                    <p class="full-addr">北京市大兴区亦庄经济开发中心京东大厦B座</p>
+                </div>
+                <a class="addr-edit" href="javascript:void(0)"></a>
+            </div>
+            <div slot="slideoper" class="slideoper">删除/收藏</div>
+        </nut-sideslipbutton>`
         }
     },
     methods:{

+ 9 - 6
src/view/timer.vue

@@ -64,15 +64,15 @@
             <tr>
               <td>starttime</td>
               <td>倒计时起始时间,可以为ms格式,可以是时间格式</td>
-              <td>String</td>
-              <td>2018-06-05</td>
+              <td>Number | String | Date</td>
+              <td>0</td>
               <td>--</td>
             </tr>
             <tr>
               <td>startend</td>
               <td>倒计时结束时间,可以为ms格式,可以是时间格式</td>
-              <td>String</td>
-              <td>2018-06-05</td>
+              <td>Number String | Date</td>
+              <td>0</td>
               <td>--</td>
             </tr>
           </tbody>
@@ -119,8 +119,11 @@ export default {
       }
     },
     methods:{
-      endTimer() {
-        console.log('倒计时结束了!');
+      endTimer1() {
+        console.log('示例1倒计时结束了!');
+      },
+      endTimer2() {
+        console.log('示例2倒计时结束了!');
       }
     }
 }