u-tag.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <view v-if="show" :class="[
  3. disabled ? 'u-disabled' : '',
  4. 'u-size-' + size,
  5. 'u-shape-' + shape,
  6. 'u-mode-' + mode + '-' + type
  7. ]"
  8. class="u-tag" :style="[customStyle]" @tap="clickTag">
  9. {{text}}
  10. <view class="u-icon-wrap" @tap.stop>
  11. <u-icon @click="close" size="22" v-if="closeable" :color="closeIconColor"
  12. name="close" class="u-close-icon" :style="[iconStyle]"></u-icon>
  13. </view>
  14. </view>
  15. </template>
  16. <script>
  17. /**
  18. * tag 提示
  19. * @description 该组件一般用于标记和选择
  20. * @tutorial https://www.uviewui.com/components/tag.html
  21. * @property {String} type 主题类型(默认primary)
  22. * @property {String} size 标签大小(默认default)
  23. * @property {String} shape 标签形状(默认square)
  24. * @property {String} text 标签的文字内容
  25. * @property {String} bg-color 自定义标签的背景颜色
  26. * @property {String} border-color 标签的边框颜色
  27. * @property {String} close-color 关闭按钮的颜色
  28. * @property {String Number} index 点击标签时,会通过click事件返回该值
  29. * @property {String} mode 模式选择,见官网说明(默认light)
  30. * @property {Boolean} closeable 是否可关闭,设置为true,文字右边会出现一个关闭图标(默认false)
  31. * @property {Boolean} show 标签显示与否(默认true)
  32. * @event {Function} click 点击标签触发
  33. * @event {Function} close closeable为true时,点击标签关闭按钮触发
  34. * @example <u-tag text="雪月夜" type="success" />
  35. */
  36. export default {
  37. name: 'u-tag',
  38. // 是否禁用这个标签,禁用的话,会屏蔽点击事件
  39. props: {
  40. // 标签类型info、primary、success、warning、error
  41. type: {
  42. type: String,
  43. default: 'primary'
  44. },
  45. disabled: {
  46. type: [Boolean, String],
  47. default: false
  48. },
  49. // 标签的大小,分为default(默认),mini(较小)
  50. size: {
  51. type: String,
  52. default: 'default'
  53. },
  54. // tag的形状,circle(两边半圆形), square(方形,带圆角),circleLeft(左边是半圆),circleRight(右边是半圆)
  55. shape: {
  56. type: String,
  57. default: 'square'
  58. },
  59. // 标签文字
  60. text: {
  61. type: [String, Number],
  62. default: ''
  63. },
  64. // 背景颜色,默认为空字符串,即不处理
  65. bgColor: {
  66. type: String,
  67. default: ''
  68. },
  69. // 标签字体颜色,默认为空字符串,即不处理
  70. color: {
  71. type: String,
  72. default: ''
  73. },
  74. // 镂空形式标签的边框颜色
  75. borderColor: {
  76. type: String,
  77. default: ''
  78. },
  79. // 关闭按钮图标的颜色
  80. closeColor: {
  81. type: String,
  82. default: ''
  83. },
  84. // 点击时返回的索引值,用于区分例遍的数组哪个元素被点击了
  85. index: {
  86. type: [Number, String],
  87. default: ''
  88. },
  89. // 模式选择,dark|light|plain
  90. mode: {
  91. type: String,
  92. default: 'light'
  93. },
  94. // 是否可关闭
  95. closeable: {
  96. type: Boolean,
  97. default: false
  98. },
  99. // 是否显示
  100. show: {
  101. type: Boolean,
  102. default: true
  103. }
  104. },
  105. data() {
  106. return {
  107. }
  108. },
  109. computed: {
  110. customStyle() {
  111. let style = {};
  112. // 文字颜色(如果有此值,会覆盖type值的颜色)
  113. if(this.color) style.color = this.color;
  114. // tag的背景颜色(如果有此值,会覆盖type值的颜色)
  115. if(this.bgColor) style.backgroundColor = this.bgColor;
  116. // 如果是镂空型tag,没有传递边框颜色(borderColor)的话,使用文字的颜色(color属性)
  117. if(this.mode == 'plain' && this.color && !this.borderColor) style.borderColor = this.color;
  118. else style.borderColor = this.borderColor;
  119. return style;
  120. },
  121. iconStyle() {
  122. if(!this.closeable) return ;
  123. let style = {};
  124. if(this.size == 'mini') style.fontSize = '20rpx';
  125. else style.fontSize = '22rpx';
  126. if(this.mode == 'plain' || this.mode == 'light') style.color = this.type;
  127. else if(this.mode == 'dark') style.color = "#ffffff";
  128. if(this.closeColor) style.color = this.closeColor;
  129. return style;
  130. },
  131. // 关闭图标的颜色
  132. closeIconColor() {
  133. // 如果定义了关闭图标的颜色,就用此值,否则用字体颜色的值
  134. // 如果上面的二者都没有,如果是dark深色模式,图标就为白色
  135. // 最后如果上面的三者都不合适,就返回type值给图标获取颜色
  136. let color = '';
  137. if(this.closeColor) return this.closeColor;
  138. else if(this.color) return this.color;
  139. else if(this.mode == 'dark') return '#ffffff';
  140. else return this.type;
  141. }
  142. },
  143. methods: {
  144. // 标签被点击
  145. clickTag() {
  146. // 如果是disabled状态,不发送点击事件
  147. if(this.disabled) return ;
  148. this.$emit('click', this.index);
  149. },
  150. // 点击标签关闭按钮
  151. close() {
  152. this.$emit('close', this.index);
  153. }
  154. }
  155. }
  156. </script>
  157. <style lang="scss" scoped>
  158. @import "../../libs/css/style.components.scss";
  159. .u-tag {
  160. box-sizing: border-box;
  161. align-items: center;
  162. border-radius: 6rpx;
  163. /* #ifndef APP-NVUE */
  164. display: inline-block;
  165. /* #endif */
  166. line-height: 1;
  167. }
  168. .u-size-default {
  169. font-size: 22rpx;
  170. padding: 12rpx 22rpx;
  171. }
  172. .u-size-mini {
  173. font-size: 20rpx;
  174. padding: 6rpx 12rpx;
  175. }
  176. .u-mode-light-primary {
  177. background-color: $u-type-primary-light;
  178. color: $u-type-primary;
  179. border: 1px solid $u-type-primary-disabled;
  180. }
  181. .u-mode-light-success {
  182. background-color: $u-type-success-light;
  183. color: $u-type-success;
  184. border: 1px solid $u-type-success-disabled;
  185. }
  186. .u-mode-light-error {
  187. background-color: $u-type-error-light;
  188. color: $u-type-error;
  189. border: 1px solid $u-type-error-disabled;
  190. }
  191. .u-mode-light-warning {
  192. background-color: $u-type-warning-light;
  193. color: $u-type-warning;
  194. border: 1px solid $u-type-warning-disabled;
  195. }
  196. .u-mode-light-info {
  197. background-color: $u-type-info-light;
  198. color: $u-type-info;
  199. border: 1px solid $u-type-info-disabled;
  200. }
  201. .u-mode-dark-primary {
  202. background-color: $u-type-primary;
  203. color: #FFFFFF;
  204. }
  205. .u-mode-dark-success {
  206. background-color: $u-type-success;
  207. color: #FFFFFF;
  208. }
  209. .u-mode-dark-error {
  210. background-color: $u-type-error;
  211. color: #FFFFFF;
  212. }
  213. .u-mode-dark-warning {
  214. background-color: $u-type-warning;
  215. color: #FFFFFF;
  216. }
  217. .u-mode-dark-info {
  218. background-color: $u-type-info;
  219. color: #FFFFFF;
  220. }
  221. .u-mode-plain-primary {
  222. background-color: #FFFFFF;
  223. color: $u-type-primary;
  224. border: 1px solid $u-type-primary;
  225. }
  226. .u-mode-plain-success {
  227. background-color: #FFFFFF;
  228. color: $u-type-success;
  229. border: 1px solid $u-type-success;
  230. }
  231. .u-mode-plain-error {
  232. background-color: #FFFFFF;
  233. color: $u-type-error;
  234. border: 1px solid $u-type-error;
  235. }
  236. .u-mode-plain-warning {
  237. background-color: #FFFFFF;
  238. color: $u-type-warning;
  239. border: 1px solid $u-type-warning;
  240. }
  241. .u-mode-plain-info {
  242. background-color: #FFFFFF;
  243. color: $u-type-info;
  244. border: 1px solid $u-type-info;
  245. }
  246. .u-disabled {
  247. opacity: 0.55;
  248. }
  249. .u-shape-circle {
  250. border-radius: 100rpx;
  251. }
  252. .u-shape-circleRight {
  253. border-radius: 0 100rpx 100rpx 0;
  254. }
  255. .u-shape-circleLeft {
  256. border-radius: 100rpx 0 0 100rpx;
  257. }
  258. .u-close-icon {
  259. margin-left: 14rpx;
  260. font-size: 22rpx;
  261. color: $u-type-success;
  262. }
  263. .u-icon-wrap {
  264. display: inline-flex;
  265. transform: scale(0.86);
  266. }
  267. </style>