alert.nvue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础功能</text>
  5. <view class="u-demo-block__content">
  6. <view class="u-alert-item">
  7. <u-alert
  8. description="山不在于高,有了神仙就出名"
  9. type="warning"
  10. ></u-alert>
  11. </view>
  12. <view class="u-alert-item">
  13. <u-alert
  14. description="水不在深,有龙则灵"
  15. type="primary"
  16. ></u-alert>
  17. </view>
  18. <view class="u-alert-item">
  19. <u-alert
  20. description="斯是陋室,惟吾德馨。苔痕上阶绿,草色入帘青"
  21. type="error"
  22. ></u-alert>
  23. </view>
  24. <view class="u-alert-item">
  25. <u-alert
  26. description="谈笑有鸿儒,往来无白丁"
  27. type="info"
  28. ></u-alert>
  29. </view>
  30. <view class="u-alert-item">
  31. <u-alert
  32. description="可以调素琴,阅金经"
  33. type="success"
  34. ></u-alert>
  35. </view>
  36. </view>
  37. </view>
  38. <view class="u-demo-block">
  39. <text class="u-demo-block__title">深浅色</text>
  40. <view class="u-demo-block__content">
  41. <view class="u-alert-item">
  42. <u-alert
  43. description="无丝竹之乱耳,无案牍之劳形"
  44. type="warning"
  45. ></u-alert>
  46. </view>
  47. <view class="u-alert-item">
  48. <u-alert
  49. description="南阳诸葛庐,西蜀子云亭。孔子云:何陋之有"
  50. type="warning"
  51. effect="dark"
  52. ></u-alert>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="u-demo-block">
  57. <text class="u-demo-block__title">显示图标</text>
  58. <view class="u-demo-block__content">
  59. <view class="u-alert-item">
  60. <u-alert
  61. description="六王毕,四海一;蜀山兀,阿房出"
  62. type="error"
  63. showIcon
  64. ></u-alert>
  65. </view>
  66. <view class="u-alert-item">
  67. <u-alert
  68. description="覆压三百余里,隔离天日。骊山北构而西折,直走咸阳,二川溶溶,流入宫墙"
  69. type="error"
  70. effect="dark"
  71. showIcon
  72. ></u-alert>
  73. </view>
  74. </view>
  75. </view>
  76. <view class="u-demo-block">
  77. <text class="u-demo-block__title">可关闭</text>
  78. <view class="u-demo-block__content">
  79. <view class="u-alert-item">
  80. <u-alert
  81. description="五步一楼,十步一阁;廊腰缦回,檐牙高啄;各抱地势,钩心斗角"
  82. type="success"
  83. showIcon
  84. closable
  85. ></u-alert>
  86. </view>
  87. <view class="u-alert-item">
  88. <u-alert
  89. description="盘盘焉,囷囷焉,蜂房水涡,矗不知其几千万落"
  90. type="success"
  91. effect="dark"
  92. closable
  93. showIcon
  94. ></u-alert>
  95. </view>
  96. </view>
  97. </view>
  98. <view class="u-demo-block">
  99. <text class="u-demo-block__title">带标题</text>
  100. <view class="u-demo-block__content">
  101. <view class="u-alert-item">
  102. <u-alert
  103. title="妃嫔媵嫱,王子皇孙,辞楼下殿"
  104. description="长桥卧波,未云何龙?复道行空,不霁何虹"
  105. type="info"
  106. showIcon
  107. closable
  108. ></u-alert>
  109. </view>
  110. <view class="u-alert-item">
  111. <u-alert
  112. title="辇来于秦,朝歌夜弦,为秦宫人。明星荧荧,开妆镜也"
  113. description="高低冥迷,不知西东。歌台暖响,春光融融;舞殿冷袖,风雨凄凄。一日之内,一宫之间,而气候不齐"
  114. type="info"
  115. effect="dark"
  116. closable
  117. showIcon
  118. ></u-alert>
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </template>
  124. <script>
  125. export default {
  126. data() {
  127. return {
  128. description: '',
  129. title: ''
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss">
  135. .u-alert-item {
  136. flex: 1;
  137. margin-bottom: 10px;
  138. }
  139. .u-demo-block__content {
  140. flex-direction: column !important;
  141. align-items: stretch;
  142. }
  143. </style>