permiMode.tsx 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { ComponentOptions, defineComponent, ref } from 'vue'
  2. import type { IPermiObj } from './type'
  3. import { css } from '@emotion/css'
  4. import 'vant/lib/index.css';
  5. import { Button } from 'vant';
  6. const MyComponent = (prop: IPermiObj | Boolean): ComponentOptions =>
  7. defineComponent({
  8. name: 'MyComponent',
  9. components: {
  10. [Button.name as string]: Button
  11. },
  12. setup() {
  13. const obj = prop as IPermiObj
  14. const FixDivMode = css`
  15. width: 100vw;
  16. height: 100vh;
  17. position: fixed;
  18. left: 0;
  19. top: 0;
  20. overflow: hidden;
  21. z-index: 999999;
  22. `
  23. const FixUpperLevels = css`
  24. width: 100%;
  25. height: 185px;
  26. background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, #FFFFFF 100%);
  27. `
  28. const FixTips = css`
  29. font-size: 14px;
  30. text-align: center;
  31. width: 100%;
  32. color: #666666;
  33. height: calc(100vh - 185px);
  34. background: #fff;
  35. padding-top: 138px;
  36. box-sizing: border-box;
  37. `
  38. const FixBtn = css`
  39. font-size: 13px;
  40. margin-top: 15px;
  41. width: 315px;
  42. height: 42px;
  43. white-space: nowrap;
  44. background-color: #FF5B00;
  45. color: #FFF;
  46. `
  47. const handleClick = () => {
  48. //window.localStorage.setItem('permission', '0')
  49. window.open('https://www.caimei365.com/')
  50. }
  51. const pageLocation = ref<number>(0)
  52. const stop = () => {
  53. pageLocation.value = window.scrollY
  54. document.body.style.position = 'fixed'
  55. document.body.style.top = '-' + pageLocation.value + 'px'
  56. }
  57. const move = () => {
  58. document.body.style.position = 'static';
  59. window.scrollTo(0, pageLocation.value);
  60. }
  61. return {
  62. FixTips,
  63. FixDivMode,
  64. FixBtn,
  65. FixUpperLevels,
  66. handleClick,
  67. obj,
  68. stop,
  69. move
  70. }
  71. },
  72. render() {
  73. prop ? this.stop() : this.move()
  74. return prop && <div class={this.FixDivMode}>
  75. <div class={this.FixUpperLevels}></div>
  76. <div class={this.FixTips}>
  77. <div>
  78. {this.obj.text}
  79. </div>
  80. <div>
  81. <van-button class={this.FixBtn} onClick={this.handleClick}>{this.obj.btnText}</van-button>
  82. </div>
  83. </div>
  84. </div>
  85. },
  86. })
  87. export default MyComponent