graceCheckBtn.nvue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="grace-nowrap grace-flex-vcenter" @tap.stop="changeStatus">
  3. <text v-if="status" class="grace-check-btn grace-icons" :style="{fontSize:size+'rpx', lineHeight:size+'rpx', color : checkedColor}">&#xe7f8;</text>
  4. <text v-else class="grace-check-btn grace-icons" :style="{fontSize:size+'rpx', lineHeight:size+'rpx', color : color}">&#xe762;</text>
  5. <view class="grace-check-lable"><slot></slot></view>
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props: {
  11. size : {
  12. type : Number,
  13. default : 38
  14. },
  15. color : {
  16. type : String,
  17. default : '#EEEEEE'
  18. },
  19. checked : {
  20. type : Boolean,
  21. default : false
  22. },
  23. checkedColor : {
  24. type : String,
  25. default : '#FF0036'
  26. },
  27. parameter : {
  28. type : Array,
  29. default : function () {
  30. return []
  31. }
  32. }
  33. },
  34. data() {
  35. return {
  36. status : false
  37. }
  38. },
  39. watch: {
  40. checked : function (val, old) {
  41. this.status = val;
  42. }
  43. },
  44. created : function(){
  45. this.status = this.checked;
  46. },
  47. methods:{
  48. changeStatus : function(){
  49. this.status = !this.status;
  50. this.$emit('change', [this.status, this.parameter]);
  51. }
  52. }
  53. }
  54. </script>
  55. <style scoped>
  56. .grace-check-btn{color:#999999;}
  57. .grace-check-lable{color:#555555; margin-left:20rpx; font-size:26rpx; width:700rpx; flex:1;}
  58. </style>