WU-UILink
This component is a hyperlink component, which has different manifestations on different platforms:
- On the APP platform, the built-in browser will be opened through the plus environment
- Copy the link to the clipboard in the applet, and prompt information at the same time
- Open link via window.open in H5
platform compatibility
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
Basic usage
- Use
hrefto set the link to open, andtextto set the displayed content
vue
<template>
<wu-link href="https://wuui.cn" text="Open wu-ui document" @click="click"></wu-link>
</template>
<script>
export default {
methods: {
click() {
console.log('click');
}
}
}
</script><template>
<wu-link href="https://wuui.cn" text="Open wu-ui document" @click="click"></wu-link>
</template>
<script>
export default {
methods: {
click() {
console.log('click');
}
}
}
</script>underscore
Use under-line to set whether to display the underline of the link
vue
<template>
<wu-link href="https://wuui.cn" text="Open wu-ui document" :under-line="true"></wu-link>
</template><template>
<wu-link href="https://wuui.cn" text="Open wu-ui document" :under-line="true"></wu-link>
</template>Custom Colors
- Set text color via
color - Set underline color via
line-color
vue
<template>
<wu-link href="https://wuui.cn" text="Open wu-ui document" color="#19be6b" line-color="#19be6b"></wu-link>
</template><template>
<wu-link href="https://wuui.cn" text="Open wu-ui document" color="#19be6b" line-color="#19be6b"></wu-link>
</template>API
Link Props
| property name | description | type | default value | optional values |
|---|---|---|---|---|
| color | text color | String | - | - |
| fontSize | font size, default unit px(rpx) | String / Number | 15 | - |
| underLine | whether to display underline | Boolean | false | true / false |
| href | Link to jump to, with http(s) | String | - | - |
| mpTips | Prompt after copying the link to the clipboard for each mini program platform | String | The link has been copied, please open it in a browser | - |
| lineColor | Underline color, the default is the same as color parameter color | String | - | - |
| text | The problem of hyperlinks, do not use the slot form to pass in, because the color cannot be modified under nvue | String | - | - |
Link Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| click | Triggered when a connection is clicked | - |