graceSpread.nvue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <template name="graceSpread">
  2. <view class="grace-spread" :style="{height:reHeight, width:width}">
  3. <view :style="{paddingBottom: !isBtn && isShrink ? '80rpx' : '0rpx'}"><slot></slot></view>
  4. <view v-if="isBtn" class="grace-spread-btn" @tap.stop="spreadContent" :style="{width:width, backgroundColor:isBtn ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0)'}">
  5. <text :style="{color:btnColor, fontSize:btnTxtSize}">{{btnTxt}}</text>
  6. <text :style="{color:btnColor, fontSize:btnTxtSize}" class="grace-icons" style="padding-left:12rpx;">&#xe69d;</text>
  7. </view>
  8. <view v-if="!isBtn && isShrink" class="grace-spread-btn" @tap="shrinkContent" :style="{width:width, backgroundColor:!isBtn && isShrink ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,0.1)'}">
  9. <text :style="{color:btnColor, fontSize:btnTxtSize}">{{shrinkBtnTxt}}</text>
  10. <text :style="{color:btnColor, fontSize:btnTxtSize}" class="grace-icons" style="padding-left:12rpx;">&#xe638;</text>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. width:{
  18. type : String,
  19. default : "700rpx"
  20. },
  21. height:{
  22. type : String,
  23. default : "600rpx"
  24. },
  25. btnTxt:{
  26. type : String,
  27. default : "展开阅读全文"
  28. },
  29. btnColor:{
  30. type : String,
  31. default : "#999999"
  32. },
  33. btnTxtSize:{
  34. type : String,
  35. default : "28rpx"
  36. },
  37. isShrink:{type:Boolean,default:false},
  38. shrinkBtnTxt:{type : String,default : "收缩展示"}
  39. },
  40. data() {
  41. return {
  42. reHeight: "600px",
  43. isBtn : true
  44. }
  45. },
  46. created:function(){
  47. this.reHeight = this.height;
  48. },
  49. methods: {
  50. spreadContent : function () {
  51. this.reHeight = '';
  52. this.isBtn = false;
  53. },
  54. shrinkContent : function () {
  55. console.log('ok');
  56. this.reHeight = this.height;
  57. this.isBtn = true;
  58. }
  59. },
  60. }
  61. </script>
  62. <style scoped>
  63. .grace-spread{overflow:hidden;}
  64. .grace-spread-btn{flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; height:80rpx; line-height:80rpx; position:absolute; left:0; bottom:0;}
  65. </style>