1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <template>
- <text
- class="u-link"
- @tap.stop="openLink"
- :style="[linkStyle, $u.addStyle(customStyle)]"
- >{{text}}</text>
- </template>
- <script>
- import props from './props.js';
- import mpMixin from '../../libs/mixin/mpMixin.js';
- import mixin from '../../libs/mixin/mixin.js';
- /**
- * link 超链接
- * @description 该组件为超链接组件,在不同平台有不同表现形式:在APP平台会通过plus环境打开内置浏览器,在小程序中把链接复制到粘贴板,同时提示信息,在H5中通过window.open打开链接。
- * @tutorial https://ijry.github.io/uview-plus/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: [mpMixin, 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
- }
- },
- emits: ["click"],
- 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>
|