Merge branch 'dev' of https://github.com/jdf2e/nutui into dev

config.json

@@ -299,6 +299,13 @@
       "desc": "基于animate.css的动画指令",
       "type": "directive",
       "showDemo": true
+    },
+    {
+      "name": "Progress",
+      "chnName": "进度条",
+      "desc": "进度条",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

src/demo/progress.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <p>默认用法</p>
+        <nut-progress percent="15" />
+        <p>设置高度和颜色</p>
+        <nut-progress height="0.15rem" color="#F54C12" />
+        <p>显示进度数</p>
+        <nut-progress percent="15" :showText="true" />
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/package/progress/index.js

@@ -0,0 +1,7 @@
+import Progress from './src/progress';
+
+Progress.install = function(Vue) {
+    Vue.component(Progress.name, Progress);
+}
+
+export default Progress;

src/package/progress/src/progress.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="nut-progress">
+        <div class="nut-progress-cont" :style="{height}">
+            <div class="nut-progress-bar" :style="{background: color, width: per}">
+                <div class="nut-progress-text" :style="{lineHeight: height}" v-if="showText">{{per}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'nut-progress',
+    props: {
+        percent: {
+            type: [String, Number],
+            default: '0'
+        },
+        color: {
+            type: String,
+            default: '#f23030'
+        },
+        height: {
+            type: String,
+            default: '.06rem'
+        },
+        showText: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        per() {
+            let per = String(this.percent);
+            if(per.lastIndexOf('%') == per.length - 1) {
+                per = parseFloat(per.slice(0, -1));
+            }else{
+                per = parseFloat(per);
+            }
+            return Math.min(per, 100) + '%';
+        }
+    },
+    data() {
+        return {
+            
+        };
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="scss">
+.nut-progress-cont{
+    border-radius: 100px;
+    background-color: #ebeef5;
+    overflow: hidden;
+    position: relative;
+}
+.nut-progress-bar{
+    border-radius: 100px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+.nut-progress-text{
+    float: right;
+    font-size: .14rem;
+    color: #fff;
+    margin-right: 5px;
+}
+</style>

src/view/progress.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <p>默认用法</p>
+        <nut-codebox code="<nut-progress percent='15' />" />
+        <nut-progress percent="15" />
+        <p>设置高度和颜色</p>
+        <nut-codebox code="<nut-progress height='0.15rem' color='#F54C12' />" />
+        <nut-progress height="0.15rem" color="#F54C12" />
+        <p>显示进度数</p>
+        <nut-codebox code="<nut-progress height='0.25rem' percent='20' :showText='true' />" />
+        <nut-progress percent="15" :showText="true" />
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>