¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <text |
| | | class="u-link" |
| | | @tap.stop="openLink" |
| | | :style="[linkStyle, $u.addStyle(customStyle)]" |
| | | >{{text}}</text> |
| | | </template> |
| | | |
| | | <script> |
| | | import props from './props.js'; |
| | | |
| | | /** |
| | | * link è¶
龿¥ |
| | | * @description 该ç»ä»¶ä¸ºè¶
龿¥ç»ä»¶ï¼å¨ä¸å平尿ä¸å表ç°å½¢å¼ï¼å¨APPå¹³å°ä¼éè¿plusç¯å¢æå¼å
ç½®æµè§å¨ï¼å¨å°ç¨åºä¸æé¾æ¥å¤å¶å°ç²è´´æ¿ï¼åæ¶æç¤ºä¿¡æ¯ï¼å¨H5ä¸éè¿window.openæå¼é¾æ¥ã |
| | | * @tutorial https://www.uviewui.com/components/link.html |
| | | * @property {String} color æåé¢è² ï¼é»è®¤ color['u-primary'] ï¼ |
| | | * @property {String ï½ Number} fontSize åä½å¤§å°ï¼åä½px ï¼é»è®¤ 15 ï¼ |
| | | * @property {Boolean} underLine æ¯å¦æ¾ç¤ºä¸å线 ï¼é»è®¤ false ï¼ |
| | | * @property {String} href 跳转ç龿¥ï¼è¦å¸¦ä¸http(s) |
| | | * @property {String} mpTips å个å°ç¨åºå¹³å°æé¾æ¥å¤å¶å°ç²è´´æ¿åçæç¤ºè¯ï¼é»è®¤â龿¥å·²å¤å¶ï¼è¯·å¨æµè§å¨æå¼âï¼ |
| | | * @property {String} lineColor ä¸å线é¢è²ï¼é»è®¤åcoloråæ°é¢è² |
| | | * @property {String} text è¶
龿¥çé®é¢ï¼ä¸ä½¿ç¨slotå½¢å¼ä¼ å
¥ï¼æ¯å 为nvue䏿 æ³ä¿®æ¹é¢è² |
| | | * @property {Object} customStyle å®ä¹éè¦ç¨å°çå¤é¨æ ·å¼ |
| | | * |
| | | * @example <u-link href="http://www.uviewui.com">èéé¾ï¼é¾äºä¸é天</u-link> |
| | | */ |
| | | export default { |
| | | name: "u-link", |
| | | mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
| | | computed: { |
| | | linkStyle() { |
| | | const style = { |
| | | color: this.color, |
| | | fontSize: uni.$u.addUnit(this.fontSize), |
| | | // line-height设置为æ¯åä½å¤§å°å¤2px |
| | | lineHeight: uni.$u.addUnit(uni.$u.getPx(this.fontSize) + 2), |
| | | textDecoration: this.underLine ? 'underline' : 'none' |
| | | } |
| | | // if (this.underLine) { |
| | | // style.borderBottomColor = this.lineColor || this.color |
| | | // style.borderBottomWidth = '1px' |
| | | // } |
| | | return style |
| | | } |
| | | }, |
| | | methods: { |
| | | openLink() { |
| | | // #ifdef APP-PLUS |
| | | plus.runtime.openURL(this.href) |
| | | // #endif |
| | | // #ifdef H5 |
| | | window.open(this.href) |
| | | // #endif |
| | | // #ifdef MP |
| | | uni.setClipboardData({ |
| | | data: this.href, |
| | | success: () => { |
| | | uni.hideToast(); |
| | | this.$nextTick(() => { |
| | | uni.$u.toast(this.mpTips); |
| | | }) |
| | | } |
| | | }); |
| | | // #endif |
| | | this.$emit('click') |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import "../../libs/css/components.scss"; |
| | | $u-link-line-height:1 !default; |
| | | |
| | | .u-link { |
| | | /* #ifndef APP-NVUE */ |
| | | line-height: $u-link-line-height; |
| | | /* #endif */ |
| | | @include flex; |
| | | flex-wrap: wrap; |
| | | flex: 1; |
| | | } |
| | | </style> |