New file |
| | |
| | | <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> |