text.nvue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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-page__text-item">
  7. <u--text text="我用十年青春,赴你最后之约"></u--text>
  8. </view>
  9. </view>
  10. </view>
  11. <view class="u-demo-block">
  12. <text class="u-demo-block__title">设置主题</text>
  13. <view class="u-demo-block__content">
  14. <view class="u-page__text-item">
  15. <u--text
  16. text="主色"
  17. type="primary"
  18. ></u--text>
  19. </view>
  20. <view class="u-page__text-item">
  21. <u--text
  22. type="error"
  23. text="错误"
  24. ></u--text>
  25. </view>
  26. <view class="u-page__text-item">
  27. <u--text
  28. type="success"
  29. text="成功"
  30. ></u--text>
  31. </view>
  32. <view class="u-page__text-item">
  33. <u--text
  34. type="warning"
  35. text="警告"
  36. ></u--text>
  37. </view>
  38. <view class="u-page__text-item">
  39. <u--text
  40. type="info"
  41. text="信息"
  42. ></u--text>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="u-demo-block">
  47. <text class="u-demo-block__title">拨打电话</text>
  48. <view class="u-demo-block__content">
  49. <view class="u-page__text-item">
  50. <u--text
  51. mode="phone"
  52. text="15019479320"
  53. ></u--text>
  54. </view>
  55. </view>
  56. </view>
  57. <view class="u-demo-block">
  58. <text class="u-demo-block__title">日期格式化</text>
  59. <view class="u-demo-block__content">
  60. <view class="u-page__text-item">
  61. <u--text
  62. mode="date"
  63. text="1612959739"
  64. ></u--text>
  65. </view>
  66. </view>
  67. </view>
  68. <view class="u-demo-block">
  69. <text class="u-demo-block__title">姓名脱敏</text>
  70. <view class="u-demo-block__content">
  71. <view class="u-page__text-item">
  72. <u--text
  73. mode="name"
  74. text="张三三"
  75. format="encrypt"
  76. ></u--text>
  77. </view>
  78. </view>
  79. </view>
  80. <view class="u-demo-block">
  81. <text class="u-demo-block__title">超链接</text>
  82. <view class="u-demo-block__content">
  83. <view class="u-page__text-item">
  84. <u--text
  85. mode="link"
  86. text="Go to uView docs"
  87. href="https://www.uviewui.com"
  88. ></u--text>
  89. </view>
  90. </view>
  91. </view>
  92. <view class="u-demo-block">
  93. <text class="u-demo-block__title">显示金额</text>
  94. <view class="u-demo-block__content">
  95. <view class="u-page__text-item">
  96. <u--text
  97. mode="price"
  98. text="728732.32"
  99. ></u--text>
  100. </view>
  101. </view>
  102. </view>
  103. <view class="u-demo-block">
  104. <text class="u-demo-block__title">前后图标</text>
  105. <view class="u-demo-block__content">
  106. <view
  107. class="u-page__text-item"
  108. style="margin-right: 50px;"
  109. >
  110. <u--text
  111. prefixIcon="baidu"
  112. iconStyle="font-size: 19px"
  113. text="百度一下"
  114. ></u--text>
  115. </view>
  116. <view class="u-page__text-item">
  117. <u--text
  118. suffixIcon="arrow-rightward"
  119. iconStyle="font-size: 18px"
  120. text="查看更多"
  121. ></u--text>
  122. </view>
  123. </view>
  124. </view>
  125. <view class="u-demo-block">
  126. <text class="u-demo-block__title">超出隐藏</text>
  127. <view class="u-demo-block__content">
  128. <u--text
  129. :lines="2"
  130. text="关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意,同时在此也对它们表示感谢。"
  131. ></u--text>
  132. </view>
  133. </view>
  134. <view class="u-demo-block">
  135. <text class="u-demo-block__title">小程序开放能力</text>
  136. <view class="u-demo-block__content">
  137. <u--text
  138. text="分享到微信"
  139. openType="share"
  140. type="success"
  141. @click="clickHandler"
  142. ></u--text>
  143. </view>
  144. </view>
  145. </view>
  146. </template>
  147. <script>
  148. export default {
  149. onLoad() {},
  150. methods: {
  151. clickHandler() {
  152. // #ifndef MP-WEIXIN
  153. uni.$u.toast('请在微信小程序内查看效果')
  154. // #endif
  155. }
  156. },
  157. }
  158. </script>
  159. <style lang="scss">
  160. .u-page__text-item {
  161. margin-right: 10px;
  162. flex: 1;
  163. }
  164. .u-demo-block__content {
  165. @include flex;
  166. flex-direction: row;
  167. flex-wrap: wrap;
  168. align-items: center;
  169. }
  170. </style>