Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added programmatic router on button #284

Merged
merged 1 commit into from Oct 7, 2018
Merged

Added programmatic router on button #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/components/README.md
View file
Open in desktop
Expand Up @@ -40,6 +40,11 @@ API:
parameters: null
description: Change the secondary color on the button (gradient)
default: primary
- name: to
type: String | Object
parameters: null
description: Added router push navigation to button
default: false
---

# Buttons **- update**
Expand Down Expand Up @@ -77,6 +82,7 @@ To define the type of button the directive is used `vs-type` with the value of s
<vs-button vs-color="dark" vs-type="filled">Dark</vs-button>
<vs-button vs-color="rgb(134, 4, 98)" vs-type="filled">RGB</vs-button>
<vs-button disabled vs-type="filled">Disabled</vs-button>
<vs-button vs-color="primary" vs-type="filled" to="/components/list.html">Router</vs-button>
```

</div>
Expand Down Expand Up @@ -429,3 +435,31 @@ It is not important to specify the size when the button is of type `default`
</div>
</vuecode>
</box>

<box>

## Router

You can send a string or object to directive `to`. This directive wrap a `$router.push()` vue method,
you can use all programmatic navigation on vue router.

<vuecode md center>
<div slot="demo">
<vs-button vs-color="primary" vs-type="filled" to="/components/list.html">String literal</vs-button>
<vs-button vs-color="warning" vs-type="filled" :to="{path: '/components/list.html'}">Object Path</vs-button>
<vs-button vs-color="success" vs-type="filled" :to="{ name: 'user', params: { userId: 123 }}">Named Router</vs-button>
<vs-button vs-color="dark" vs-type="filled" :to="{ path: 'register', query: { plan: 'private' }}">With Query</vs-button>
</div>

<div slot="code">

```html
<vs-button vs-color="primary" vs-type="filled" to="/components/list.html">String literal</vs-button>
<vs-button vs-color="warning" vs-type="filled" :to="{ path: '/components/list.html' }">Object Path</vs-button>
<vs-button vs-color="success" vs-type="filled" :to="{ name: 'user', params: { userId: 123 } }">Named Router</vs-button>
<vs-button vs-color="dark" vs-type="filled" :to="{ path: 'register', query: { plan: 'private' } }">With Query</vs-button>
```

</div>
</vuecode>
</box>
10 changes: 10 additions & 0 deletions src/components/vsButton/vsButton.vue
View file
Open in desktop
Expand Up @@ -90,6 +90,10 @@ export default {
vsIconAfter:{
default:false,
type:Boolean
},
to:{
default:false,
type:String | Object
}
},
data:()=>({
Expand Down Expand Up @@ -180,6 +184,9 @@ export default {
}
},
methods:{
routerPush() {
this.$router.push(this.to)
},
is(which){
let type = this.vsType
return type == which
Expand Down Expand Up @@ -207,6 +214,9 @@ export default {
if(this.isActive){
return
}
if(this.to){
this.routerPush()
}
this.isActive = true
let btn = this.$refs.btn
let xEvent = event.offsetX
Expand Down