Browse Source

fix: 修复字体样式和增加动态监听和修改demo

yushuang24 5 years ago
parent
commit
c1ea29535e
3 changed files with 21 additions and 6 deletions
  1. 5 3
      src/packages/rate/demo.vue
  2. 3 0
      src/packages/rate/rate.scss
  3. 13 3
      src/packages/rate/rate.vue

+ 5 - 3
src/packages/rate/demo.vue

@@ -23,7 +23,7 @@
     <h4>自定义尺寸</h4>
     <div>
       <nut-cell>
-        <span slot="title"><nut-rate :size="30"></nut-rate></span>
+        <span slot="title"><nut-rate :size="30" :showHalf="false"></nut-rate></span>
       </nut-cell>
     </div>
 
@@ -67,8 +67,10 @@ export default {
       result: '',
       result2: '',
       checkedColor:'#FFC200',
-      icon1: require('./../../assets/img/checked.png'),
-      icon2: require('./../../assets/img/unchecked.png')
+      icon1: `url(${require('./../../assets/img/checked.png')})`,
+      icon2: `url(${require('./../../assets/img/unchecked.png')})`
+      // icon1: `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
+      // icon2: `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
     };
   },
 

+ 3 - 0
src/packages/rate/rate.scss

@@ -44,4 +44,7 @@
 			color: $primary-color;
 		}
 	}
+	.fontcolor{
+		font-size: 13px;
+	}
 }

+ 13 - 3
src/packages/rate/rate.vue

@@ -11,10 +11,10 @@
         width: size + 'px',
         color:`${n <= current ? checkedColor : ''}`,
         marginRight: spacing + 'px',
-        backgroundImage: n <= current ? `url(${checkedIcon})` : `url(${uncheckedIcon})`,
+        backgroundImage: n <= current ? checkedIcon : uncheckedIcon
       }"
     >
-      <i v-if="!checkedIcon">
+      <i v-if="!checkedIcon || !uncheckedIcon">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M18,27.4l-7.9,4.1c-0.7,0.4-1.6,0.1-2-0.6c-0.2-0.3-0.2-0.6-0.2-1l1.5-8.8l0,0
 	      L3.1,15c-0.6-0.6-0.6-1.5,0-2.1c0.2-0.2,0.5-0.4,0.9-0.4l8.8-1.3l0,0l3.9-8c0.4-0.7,1.3-1,2-0.7c0.3,0.1,0.5,0.4,0.7,0.7l3.9,8l0,0
 	      l8.8,1.3c0.8,0.1,1.4,0.9,1.3,1.7c0,0.3-0.2,0.6-0.4,0.9l-6.4,6.2l0,0l1.5,8.8c0.1,0.8-0.4,1.6-1.2,1.7c-0.3,0.1-0.7,0-1-0.2
@@ -75,7 +75,6 @@ export default {
   data() {
     return {
       current: 3,
-      defaultImage:require('./../../assets/svg/rate-default-img.svg'),
       halfStarClick:false
     };
   },
@@ -114,6 +113,17 @@ export default {
         this.$emit('click', idx-0.5);
       }
     }
+  },
+  watch: {
+    value(newVal, oldVal) {
+        if(parseInt(newVal) === parseFloat(newVal)){
+           this.current = newVal;
+        }else{
+           this.current = newVal;
+           this.showHalf = true;
+           this.halfStarClick = true;
+        }
+    }
   }
 };
 </script>