Vuejs Dynamic Slot Content

1. Vuejs Dynamic Slot Content Guide
2. Vuejs Dynamic Slot Content Tutorial
3. Vuejs Dynamic Slot Content Key

You can pass components through props or a globally available method and render them with insde the modal. For “global modals” this is the way to go, and the modal system I made for my previous project worked like that. Another really cool feature of VueJS is Dynamic Components. What are dynamic components you ask? Well, let’s say you have a main component and you would like to dynamically load other components into the main template by clicking a button or some other means. This is what can be accomplished with dynamic components. I have to create multiple tabs having dynamic content. There will be one parent component to handle switching between tabs and master data for tabs. This parent-child component system is to be used as a generic component which accepts a list about tabs and renders tabs as per the list. I can use this parent component in my root component where tabs list information is available and also the.

# component

• Props:

  • is - string Component

• Usage:

  A 'meta component' for rendering dynamic components. The actual component to render is determined by the is prop. An is prop as a string could be either an HTML tag name or a Component name.

• Example:

• See also:Dynamic Components

# transition

• Props:

  • name - string Used to automatically generate transition CSS class names. e.g. name: 'fade' will auto expand to .fade-enter, .fade-enter-active, etc.
  • appear - boolean, Whether to apply transition on initial render. Defaults to false.
  • persisted - boolean. If true, indicates this is a transition that doesn't actually insert/remove the element, but toggles the show / hidden status instead. The transition hooks are injected, but will be skipped by the renderer. Instead, a custom directive can control the transition by calling the injected hooks (e.g. v-show).
  • css - boolean. Whether to apply CSS transition classes. Defaults to true. If set to false, will only trigger JavaScript hooks registered via component events.
  • type - string. Specifies the type of transition events to wait for to determine transition end timing. Available values are 'transition' and 'animation'. By default, it will automatically detect the type that has a longer duration.
  • mode - string Controls the timing sequence of leaving/entering transitions. Available modes are 'out-in' and 'in-out'; defaults to simultaneous.
  • duration - number {enter: number,leave: number }. Specifies the duration of transition. By default, Vue waits for the first transitionend or animationend event on the root transition element.
  • enter-from-class - string
  • leave-from-class - string
  • appear-class - string
  • enter-to-class - string
  • leave-to-class - string
  • appear-to-class - string
  • enter-active-class - string
  • leave-active-class - string
  • appear-active-class - string

• Events:

  • before-enter
  • before-leave
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled (v-show only)
  • appear-cancelled

• Usage:

  <transition> serve as transition effects for single element/component. The <transition> only applies the transition behavior to the wrapped content inside; it doesn't render an extra DOM element, or show up in the inspected component hierarchy.

• See also:Enter & Leave Transitions

# transition-group

• Props:

  • tag - string, if not defined, renders without a root element.
  • move-class - overwrite CSS class applied during moving transition.
  • exposes the same props as <transition> except mode.

• Events:

  • exposes the same events as <transition>.

• Usage:

  <transition-group> provides transition effects for multiple elements/components. By default it doesn't render a wrapper DOM element, but one can be defined via the tag attribute.

  Note that every child in a <transition-group> must be uniquely keyed for the animations to work properly.

  <transition-group> supports moving transitions via CSS transform. When a child's position on screen has changed after an update, it will get applied a moving CSS class (auto generated from the name attribute or configured with the move-class attribute). If the CSS transform property is 'transition-able' when the moving class is applied, the element will be smoothly animated to its destination using the FLIP technique(opens new window).

• See also:List Transitions

# keep-alive

• Props:

  • include - string RegExp Array. Only components with matching names will be cached.
  • exclude - string RegExp Array. Any component with a matching name will not be cached.
  • max - number string. The maximum number of component instances to cache.

• Usage:

  When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them. Similar to <transition>, <keep-alive> is an abstract component: it doesn't render a DOM element itself, and doesn't show up in the component parent chain.

  When a component is toggled inside <keep-alive>, its activated and deactivated lifecycle hooks will be invoked accordingly.

  Primarily used to preserve component state or avoid re-rendering.

  Note, <keep-alive> is designed for the case where it has one direct child component that is being toggled. It does not work if you have v-for inside it. When there are multiple conditional children, as above, <keep-alive> requires that only one child is rendered at a time.

• include and exclude

  The include and exclude props allow components to be conditionally cached. Both props can be a comma-delimited string, a RegExp or an Array:

  The match is first checked on the component's own name option, then its local registration name (the key in the parent's components option) if the name option is not available. Anonymous components cannot be matched against.

• max

  The maximum number of component instances to cache. Once this number is reached, the cached component instance that was least recently accessed will be destroyed before creating a new instance.

  WARNING

  <keep-alive> does not work with functional components because they do not have instances to be cached.

• See also:Dynamic Components - keep-alive

# slot

• Props:

  • name - string, Used for named slot.

• Usage:

  <slot> serve as content distribution outlets in component templates. <slot> itself will be replaced.

  For detailed usage, see the guide section linked below.

• See also:Content Distribution with Slots

# teleport

• Props:

  • to - string. Required prop, has to be a valid query selector, or an HTMLElement (if used in a browser environment). Specifies a target element where <teleport> content will be moved
  • disabled - boolean. This optional prop can be used to disable the <teleport>'s functionality, which means that its slot content will not be moved anywhere and instead be rendered where you specified the <teleport> in the surrounding parent component.

  Notice that this will move the actual DOM nodes instead of being destroyed and recreated, and it will keep any component instances alive as well. All stateful HTML elements (i.e. a playing video) will keep their state.

• See also:Teleport component

vue-table-dynamic

A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.

vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and oriented to the runtime.

Features

• Multiple Select
• Search
• Sort
• Filter
• Pagination
• Edit
• Border
• Stripe
• Highlight
• Column Width
• Configure Header
• Fixed Header

Install

Usage

Import

Registration

Global registration

Local registration

Basic Table

Basic table usage

Border

Bordered table usage

• border:true with border
• border:false without border

Stripe

Striped rows

• stripe:true striped
• stripe:false unstriped

Highlight

Highlighted rows/columns/cells

• highlight:{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;} configure highlighted rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]} if negative, the position from the end of the array.
• highlightedColor:string configure highlighted colors

Multiple Select

Select multiple rows

• showCheck:boolean show checkbox of rows
• getCheckedRowDatas:function get data for all currently selected rows
• setAllRowChecked:function(selected:boolean) toggle all selection
• select:event currently selected/unselected rows

Search

Filter rows by keyword

Vuejs Dynamic Slot Content Guide

• enableSearch:boolean enable/disable searching
• search:function(value:string) manual row filtering

Sort

Sort rows based on specified column data

• sort:Array<number> array members are sortable column indexes. such as: [0, 1]

Filter

Filter rows based on specified column data and rule

• filter:Array<{column:number; content:Array<{text:string; value:string number;}>; method:function;}> specify filterable columns and rules. such as: [{column: 0, content: [{text: '> 2', value: 2}], method: (value, cell) => { return cell.data > value }}]
• filter[].column: column index
• filter[].content: filter items
• filter[].method: filter rule.

Pagination

Table with pagination

• pagination:boolean enable/disable pagination
• pageSize?:number row count of each page. default: 10
• pageSizes?:Array<number> options of row count per page. default: [10, 20, 50, 100]

Edit

Editable table
Support specifying rows/columns/cells for editing

• edit:{row?:Array<number>; column?:Array<number>; cell?:Array<[number,number]>;} configure editable rows, columns, cells. such as: {row: [1], column: [1], cell: [[-1, -1]]}. if negative, the position from the end of the array.
• getData:function() table data changed after editing, get the latest data by this method.
• cell-change:event cell data changed event
• edit:{row: 'all'} all cells can be edited
• if header is 'row', the first row is not editable

Column width

Configure column width

• columnWidth:Array<{column:number; width:number string;}> such as: [{column: 0, width: 60}, {column: 3, width: '15%'}]
• columnWidth[].column index of column
• columnWidth[].width width of column. number for pixel value, string for percentage

Header Configure

• header:row the first row is header
• header:column the first column is header
• header:' no header

Fixed Header

Fix header by configure the height of table

• height:number table height
• when the value of header is not 'row', the first row is a normal row, will not fixed

API

Attributes

• params is the object that need to be passed to the component props
• the following items are all child properties of the params object
• data is required attribute, others are optional

Methods

Events

Vuejs Dynamic Slot Content Tutorial

Vuejs Dynamic Slot Content Key

GitHub