u-icon.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <view
  3. class="u-icon"
  4. @tap="clickHandler"
  5. :class="['u-icon--' + labelPos]"
  6. >
  7. <image
  8. class="u-icon__img"
  9. v-if="isImg"
  10. :src="name"
  11. :mode="imgMode"
  12. :style="[imgStyle, $u.addStyle(customStyle)]"
  13. ></image>
  14. <text
  15. v-else
  16. class="u-icon__icon"
  17. :class="uClasses"
  18. :style="[iconStyle, $u.addStyle(customStyle)]"
  19. :hover-class="hoverClass"
  20. ></text>
  21. <!-- 这里进行空字符串判断,如果仅仅是v-if="label",可能会出现传递0的时候,结果也无法显示 -->
  22. <text
  23. v-if="label !== ''"
  24. class="u-icon__label"
  25. :style="{
  26. color: labelColor,
  27. fontSize: $u.addUnit(labelSize),
  28. marginLeft: labelPos == 'right' ? $u.addUnit(space) : 0,
  29. marginTop: labelPos == 'bottom' ? $u.addUnit(space) : 0,
  30. marginRight: labelPos == 'left' ? $u.addUnit(space) : 0,
  31. marginBottom: labelPos == 'top' ? $u.addUnit(space) : 0,
  32. }"
  33. >{{ label }}</text>
  34. </view>
  35. </template>
  36. <script>
  37. // #ifdef APP-NVUE
  38. // nvue通过weex的dom模块引入字体,相关文档地址如下:
  39. // https://weex.apache.org/zh/docs/modules/dom.html#addrule
  40. const fontUrl = 'https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf'
  41. const domModule = weex.requireModule('dom')
  42. domModule.addRule('fontFace', {
  43. 'fontFamily': "uicon-iconfont",
  44. 'src': `url('${fontUrl}')`
  45. })
  46. // #endif
  47. // 引入图标名称,已经对应的unicode
  48. import icons from './icons'
  49. import props from './props.js';;
  50. /**
  51. * icon 图标
  52. * @description 基于字体的图标集,包含了大多数常见场景的图标。
  53. * @tutorial https://www.uviewui.com/components/icon.html
  54. * @property {String} name 图标名称,见示例图标集
  55. * @property {String} color 图标颜色,可接受主题色 (默认 color['u-content-color'] )
  56. * @property {String | Number} size 图标字体大小,单位px (默认 '16px' )
  57. * @property {Boolean} bold 是否显示粗体 (默认 false )
  58. * @property {String | Number} index 点击图标的时候传递事件出去的index(用于区分点击了哪一个)
  59. * @property {String} hoverClass 图标按下去的样式类,用法同uni的view组件的hoverClass参数,详情见官网
  60. * @property {String} customPrefix 自定义扩展前缀,方便用户扩展自己的图标库 (默认 'uicon' )
  61. * @property {String | Number} label 图标右侧的label文字
  62. * @property {String} labelPos label相对于图标的位置,只能right或bottom (默认 'right' )
  63. * @property {String | Number} labelSize label字体大小,单位px (默认 '15px' )
  64. * @property {String} labelColor 图标右侧的label文字颜色 ( 默认 color['u-content-color'] )
  65. * @property {String | Number} space label与图标的距离,单位px (默认 '3px' )
  66. * @property {String} imgMode 图片的mode
  67. * @property {String | Number} width 显示图片小图标时的宽度
  68. * @property {String | Number} height 显示图片小图标时的高度
  69. * @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下,让图标垂直居中的用途 (默认 0 )
  70. * @property {Boolean} stop 是否阻止事件传播 (默认 false )
  71. * @property {Object} customStyle icon的样式,对象形式
  72. * @event {Function} click 点击图标时触发
  73. * @event {Function} touchstart 事件触摸时触发
  74. * @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
  75. */
  76. export default {
  77. name: 'u-icon',
  78. data() {
  79. return {
  80. }
  81. },
  82. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  83. computed: {
  84. uClasses() {
  85. let classes = []
  86. classes.push(this.customPrefix + '-' + this.name)
  87. // // uView的自定义图标类名为u-iconfont
  88. // if (this.customPrefix == 'uicon') {
  89. // classes.push('u-iconfont')
  90. // } else {
  91. // classes.push(this.customPrefix)
  92. // }
  93. // 主题色,通过类配置
  94. if (this.color && uni.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
  95. // 阿里,头条,百度小程序通过数组绑定类名时,无法直接使用[a, b, c]的形式,否则无法识别
  96. // 故需将其拆成一个字符串的形式,通过空格隔开各个类名
  97. //#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
  98. classes = classes.join(' ')
  99. //#endif
  100. return classes
  101. },
  102. iconStyle() {
  103. let style = {}
  104. style = {
  105. fontSize: uni.$u.addUnit(this.size),
  106. lineHeight: uni.$u.addUnit(this.size),
  107. fontWeight: this.bold ? 'bold' : 'normal',
  108. // 某些特殊情况需要设置一个到顶部的距离,才能更好的垂直居中
  109. top: uni.$u.addUnit(this.top)
  110. }
  111. // 非主题色值时,才当作颜色值
  112. if (this.color && !uni.$u.config.type.includes(this.color)) style.color = this.color
  113. return style
  114. },
  115. // 判断传入的name属性,是否图片路径,只要带有"/"均认为是图片形式
  116. isImg() {
  117. return this.name.indexOf('/') !== -1
  118. },
  119. imgStyle() {
  120. let style = {}
  121. // 如果设置width和height属性,则优先使用,否则使用size属性
  122. style.width = this.width ? uni.$u.addUnit(this.width) : uni.$u.addUnit(this.size)
  123. style.height = this.height ? uni.$u.addUnit(this.height) : uni.$u.addUnit(this.size)
  124. return style
  125. },
  126. // 通过图标名,查找对应的图标
  127. icon() {
  128. // 如果内置的图标中找不到对应的图标,就直接返回name值,因为用户可能传入的是unicode代码
  129. return icons['uicon-' + this.name] || this.name
  130. }
  131. },
  132. methods: {
  133. clickHandler(e) {
  134. this.$emit('click', this.index)
  135. // 是否阻止事件冒泡
  136. this.stop && this.preventEvent(e)
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="scss" scoped>
  142. @import "../../libs/css/components.scss";
  143. // 变量定义
  144. $u-icon-primary: $u-primary !default;
  145. $u-icon-success: $u-success !default;
  146. $u-icon-info: $u-info !default;
  147. $u-icon-warning: $u-warning !default;
  148. $u-icon-error: $u-error !default;
  149. $u-icon-label-line-height:1 !default;
  150. /* #ifndef APP-NVUE */
  151. // 非nvue下加载字体
  152. @font-face {
  153. font-family: 'uicon-iconfont';
  154. src: url('https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf') format('truetype');
  155. }
  156. /* #endif */
  157. .u-icon {
  158. /* #ifndef APP-NVUE */
  159. display: flex;
  160. /* #endif */
  161. align-items: center;
  162. &--left {
  163. flex-direction: row-reverse;
  164. align-items: center;
  165. }
  166. &--right {
  167. flex-direction: row;
  168. align-items: center;
  169. }
  170. &--top {
  171. flex-direction: column-reverse;
  172. justify-content: center;
  173. }
  174. &--bottom {
  175. flex-direction: column;
  176. justify-content: center;
  177. }
  178. &__icon {
  179. font-family: uicon-iconfont;
  180. position: relative;
  181. @include flex;
  182. align-items: center;
  183. &--primary {
  184. color: $u-icon-primary;
  185. }
  186. &--success {
  187. color: $u-icon-success;
  188. }
  189. &--error {
  190. color: $u-icon-error;
  191. }
  192. &--warning {
  193. color: $u-icon-warning;
  194. }
  195. &--info {
  196. color: $u-icon-info;
  197. }
  198. }
  199. &__img {
  200. /* #ifndef APP-NVUE */
  201. height: auto;
  202. will-change: transform;
  203. /* #endif */
  204. }
  205. &__label {
  206. /* #ifndef APP-NVUE */
  207. line-height: $u-icon-label-line-height;
  208. /* #endif */
  209. }
  210. }
  211. </style>