Merge pull request lusaxweb#284 from brunokunace/feature/router_on_bu…

…tton Added programmatic router on button
Tofandel · Oct 7, 2018 · fa14972 · fa14972
2 parents 260178a + 964404b
commit fa14972
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/docs/components/README.md b/docs/components/README.md
@@ -45,6 +45,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**
@@ -82,6 +87,7 @@ To define the type of button the directive is used `vs-type` with the value of s
 <vs-button color="dark" vs-type="filled">Dark</vs-button>
 <vs-button 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>
@@ -465,3 +471,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>
diff --git a/src/components/vsButton/vsButton.vue b/src/components/vsButton/vsButton.vue
@@ -90,6 +90,10 @@ export default {
     vsIconAfter:{
       default:false,
       type:Boolean
+    },
+    to:{
+      default:false,
+      type:String | Object
     }
   },
   data:()=>({
@@ -180,6 +184,9 @@ export default {
     }
   },
   methods:{
+    routerPush() {
+      this.$router.push(this.to)
+    },
     is(which){
       let type = this.vsType
       return type == which
@@ -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