如何使用stripe_使用Stripe等动画创建菜单

如何使用stripe

Vue条纹菜单 (Vue Stripe Menu)

Create a dropdown like on Stripe.

像在Stripe上一样创建一个下拉列表。

View Demo 查看演示 View Github 查看Github

如何安装 (How to install)

$ npm i vue-stripe-menu
// or
$ yarn add vue-stripe-menu

import Vue from 'Vue'
import VueStripeMenu from 'vue-stripe-menu'

Vue.use(VueStripeMenu)

// Import styles
import 'vue-stripe-menu/dist/vue-stripe-menu.css'

基本演示 (Basic Demo)

<template>
  <vsm-menu :menu="menu">
    <template #default="data">
      <div>{{ data }}</div>
    </template>
  </vsm-menu>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { title: 'First item', dropdown: 'first' },
        { title: 'Second item', dropdown: 'second' },
        { title: 'No dropdown' }
      ]
    }
  }
}
</script>

进阶示范 (Advanced Demo)

Code for creating a menu as on a demo: Link

用于创建菜单的代码，如演示所示： 链接

API (API)

属性 (Attributes)

Property	Parameters	Description	Type	Default	Required
menu	MenuObject	Description of the menu items, see below	Array		true
element		HTML element for root element	String	header	false
base-width		The relationship between the width of the content and this value	string, number	header	false
base-height		The relationship between the height of the content and this value	string, number	header	false
screen-offset		Offset from the window screen	string, number	header	false

属性	参量	描述	类型	默认	需要
菜单	菜单对象	菜单项说明，请参见下文	数组		真正
元件		根元素HTML元素	串	标头	假
基本宽度		内容的宽度与该值之间的关系	字符串，数字	标头	假
基本高度		内容的高度与该值之间的关系	字符串，数字	标头	假
屏幕偏移		与窗口屏幕的偏移	字符串，数字	标头	假

大事记 (Events)

Name	Description	Return
open-dropdown	Open the dropdown menu, return the active DOM Element	Element
close-dropdown	Close the dropdown menu, return the active DOM Element	Element

名称	描述	返回
打开下拉菜单	打开下拉菜单，返回活动的DOM元素	元件
关闭下拉	关闭下拉菜单，返回活动的DOM元素	元件

插槽 (Slots)

Name	Parameters	Description
default	MenuItem, index	The main content for the drop-down list (slot-scope)
before-nav	before-nav	Content to the left of the list
after-nav	after-nav	Content to the right of the list

名称	参量	描述
默认	MenuItem，索引	下拉列表的主要内容(slot-scope)
导航前	导航前	列表左侧的内容
导航后	导航后	列表右边的内容

MenuObject(菜单道具) (MenuObject (menu props))

Property	Type	Description
title	String	Menu item name. Can also be redefined through the slot
dropdown	String	Unique value indicates that this item has a dropdown menu
element	String	HTML element in the header element, if not specified, it will be or
attributes	Object	All attributes to be assigned in the header element (v-bind)
listeners	Object	All events to be assigned in the header element (v-on)

属性	类型	描述
标题	串	菜单项名称。 也可以通过插槽重新定义
落下	串	唯一值表示该项目具有下拉菜单
元件	串	标头元素中HTML元素(如果未指定)将为 要么
属性	目的	所有要在标头元素中分配的属性(v-bind)
听众	目的	所有要在标头元素中分配的事件(v-on)

贡献 (Contributing)

启动演示项目(开发lib) (Launch of a demo project (development of lib))

$ npm run dev

建立一个示范项目 (Build a demo project)

$ npm run build

构建库 (Build library)

$ npm run build:lib

运行测试 (Run tests)

$ npm run test

检查Eslint上的代码 (Check code on Eslint)

$ npm run lint

翻译自: https://vuejsexamples.com/creating-menus-with-animations-like-on-stripe/

如何使用stripe