graceToTop.nvue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <text class="grace-totop grace-icons" v-if="show" @tap="totop" :style="{bottom:bottom, backgroundColor:background,color:color}">&#xe637;</text>
  3. </template>
  4. <script>
  5. export default{
  6. props:{
  7. top : {
  8. type : Number,
  9. default : 0
  10. },
  11. color : {
  12. type : String,
  13. default : "#3688FF"
  14. },
  15. bottom : {
  16. type : String,
  17. default : "80rpx"
  18. },
  19. background:{
  20. type : String,
  21. default : "#FFFFFF"
  22. }
  23. },
  24. data() {
  25. return {
  26. show : false,
  27. timer : null
  28. }
  29. },
  30. watch:{
  31. top : function(topVal){
  32. if(this.timer != null){clearTimeout(this.timer);}
  33. this.timer = setTimeout(function(){
  34. if(topVal > 100){
  35. this.show = true;
  36. }else{
  37. this.show = false;
  38. }
  39. }.bind(this), 80);
  40. }
  41. },
  42. methods:{
  43. totop : function(){
  44. this.$emit('totop');
  45. }
  46. }
  47. }
  48. </script>
  49. <style scoped>
  50. .grace-totop{width:40px; height:40px; line-height:40px; background-color:#FFFFFF; color:#3688FF; position:fixed; bottom:80px; z-index:9999; right:15px; border-radius:5px; text-align:center;}
  51. </style>