在Header组件中更改具有不同功能的按钮数量。

huangapple go评论104阅读模式
英文:

Сhanging number of buttons with different functions in Header-component

问题

我想要一个具有不同数量的按钮和这些按钮可以触发不同功能的 Header 组件,例如,在主页上是 "访问关于页面" 和 "触发 Vuex 动作 A",在关于页面上是 "访问主页" 和 "触发 Vuex 动作 B"。在Vue中实现这个的正确方法是什么?

英文:

I would like to have a Header-component but with varying number of buttons and different functions that those buttons can trigger, for example, "visit about page", "trigger vuex action A" on home page and "visit home page", "trigger vuex action B" on about page.

What is the right way to achieve this in Vue?

答案1

得分: 0

以下是已翻译的内容:

  1. 这是一个使用Vue [组件][1]、[插槽][2]和[Semantic UI][3]的非常基本的示例。
  2. <my-menu>
  3. <menu-item header>
  4. <a href="#">Home</a>
  5. </menu-item>
  6. <menu-item @click="gotoAboutUs()">
  7. About Us
  8. </menu-item>
  9. </my-menu>
  10. <!-- begin snippet: js hide: false console: true babel: false -->
  11. <!-- language: lang-js -->
  12. const { createApp, ref } = Vue
  13. const MyMenu = {
  14. template: `<div class="ui menu"><slot></slot></div>`
  15. }
  16. const MenuItem = {
  17. props: {
  18. header: { type: Boolean },
  19. right: { type: Boolean }
  20. },
  21. template: `<div :class="['item', header ? 'header' : '', right ? 'right' : '']"><slot></slot></div>`
  22. }
  23. const App = {
  24. components: {
  25. MyMenu, MenuItem
  26. },
  27. methods: {
  28. gotoAboutUs: () => alert('About Us')
  29. }
  30. }
  31. const app = createApp(App)
  32. app.mount('#app')
  33. <!-- language: lang-css -->
  34. #app { line-height: 1.75; }
  35. [v-cloak] { display: none; }
  36. <!-- language: lang-html -->
  37. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
  38. <div id="app" v-cloak>
  39. <my-menu>
  40. <menu-item header>
  41. <a href="#">Home</a>
  42. </menu-item>
  43. <menu-item @click="gotoAboutUs()">
  44. About Us
  45. </menu-item>
  46. <menu-item right>
  47. <div class="ui action input">
  48. <input type="text" placeholder="Navigate to...">
  49. <div class="ui button">Go</div>
  50. </div>
  51. </menu-item>
  52. </my-menu>
  53. </div>
  54. <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  55. <!-- end snippet -->
  1. 注意:以上内容已经翻译,不包括代码部分。
  2. <details>
  3. <summary>英文:</summary>
  4. Here is a very basic example using Vue [Components][1], [Slots][2] and [Semantic UI][3].
  5. &lt;my-menu&gt;
  6. &lt;menu-item header&gt;
  7. &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  8. &lt;/menu-item&gt;
  9. &lt;menu-item @click=&quot;gotoAboutUs()&quot;&gt;
  10. About Us
  11. &lt;/menu-item&gt;
  12. &lt;/my-menu&gt;
  13. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  14. &lt;!-- language: lang-js --&gt;
  15. const { createApp, ref } = Vue
  16. const MyMenu = {
  17. template: `&lt;div class=&quot;ui menu&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;`
  18. }
  19. const MenuItem = {
  20. props: {
  21. header: { type: Boolean },
  22. right: { type: Boolean }
  23. },
  24. template: `&lt;div :class=&quot;[&#39;item&#39;, header ? &#39;header&#39; : &#39;&#39;, right ? &#39;right&#39; : &#39;&#39;]&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;`
  25. }
  26. const App = {
  27. components: {
  28. MyMenu, MenuItem
  29. },
  30. methods: {
  31. gotoAboutUs: () =&gt; alert(&#39;About Us&#39;)
  32. }
  33. }
  34. const app = createApp(App)
  35. app.mount(&#39;#app&#39;)
  36. &lt;!-- language: lang-css --&gt;
  37. #app { line-height: 1.75; }
  38. [v-cloak] { display: none; }
  39. &lt;!-- language: lang-html --&gt;
  40. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css&quot;&gt;
  41. &lt;div id=&quot;app&quot; v-cloak&gt;
  42. &lt;my-menu&gt;
  43. &lt;menu-item header&gt;
  44. &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
  45. &lt;/menu-item&gt;
  46. &lt;menu-item @click=&quot;gotoAboutUs()&quot;&gt;
  47. About Us
  48. &lt;/menu-item&gt;
  49. &lt;menu-item right&gt;
  50. &lt;div class=&quot;ui action input&quot;&gt;
  51. &lt;input type=&quot;text&quot; placeholder=&quot;Navigate to...&quot;&gt;
  52. &lt;div class=&quot;ui button&quot;&gt;Go&lt;/div&gt;
  53. &lt;/div&gt;
  54. &lt;/menu-item&gt;
  55. &lt;/my-menu&gt;
  56. &lt;/div&gt;
  57. &lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.prod.js&quot;&gt;&lt;/script&gt;
  58. &lt;!-- end snippet --&gt;
  59. [1]: https://vuejs.org/guide/essentials/component-basics.html
  60. [2]: https://vuejs.org/guide/components/slots.html
  61. [3]: https://semantic-ui.com/
  62. </details>

huangapple
  • 本文由 发表于 2023年3月7日 19:08:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75661200.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定