Vue learning diary 36

Posted by minou on Fri, 11 Feb 2022 06:48:51 +0100

1.p:last-child
Resolution:
[1] The: last child selector is used to match the last child element in the parent element
[2] P: last child is equivalent to P: nth last child (1)

2. Hidden classes based on breakpoints
Parsing: import 'element UI / lib / theme talk / display css’;
[1] Hidden xs only: hidden when viewport is at xs size
[2] Hidden sm only: hidden when the viewport is at sm size
[3] Hidden sm and down: hidden when the viewport is sm and below
[4] Hidden sm and up: hidden when the viewport is sm and above
[5] Hidden md only: hidden when the viewport is at md size
[6] Hidden md and down: hidden when the viewport is md and below
[7] Hidden md and up: hidden when the viewport is md and above
[8] Hidden lg only: hidden when the viewport is at lg size
[9] Hidden lg and down: hidden when the viewport is lg and below
[10] Hidden lg and up: hidden when the viewport is lg and above
[11] Hidden xl only: hidden when the viewport is at xl size

3.Layout line attribute
Resolution:
[1]gutter: grid spacing
[2]type: layout mode, optional flex, effective in modern browsers
[3]justify: horizontal arrangement under flex layout
[4]align: vertical arrangement under flex layout
[5]tag: Custom element tag

4.Layout column properties
Resolution:
[1]span: number of columns occupied by the grid
[2]offset: the number of spacing cells on the left side of the grid
[3]push: the number of cells the grid moves to the right
[4]pull: the number of cells the grid moves to the left
[5]xs: < 768px responsive grid number or grid attribute object
[6]sm: ≥ 768px responsive grid number or grid attribute object
[7]md: ≥ 992px responsive grid number or grid attribute object
[8]lg: ≥ 1200px responsive grid number or grid attribute object
[9]xl: ≥ 1920px responsive grid number or grid attribute object
[10]tag: Custom element tag

5.PageHeader header
Parsing: if the path of the page is relatively simple, it is recommended to use the page header component instead of the bread crumb component.

Pageheader property
Resolution:
[1]title: title
[2]content: content

7.PageHeader header event
Resolution:
[1]back: click the left area to trigger

8.PageHeader header Slots
Resolution:
[1]title: Title Content
[2]content: content

9.Breadcrumb bread crumbs
Parsing: displays the path of the current page and quickly returns to any previous page.

10.Breadcrumb attribute
Resolution:
[1]separator: separator
[2] Separator class: icon separator class

11.BreadcrumbItem property
Resolution:
[1]to: route jump object, the same as to of Vue router
[2] When you enable replace, you will not use replace to add a new route to the history record

12.Container layout
Resolution:
[1]direction: arrangement direction of child elements
[2]height: top bar height
[3]width: sidebar width
[4]height: bottom bar height

13.Vue 3. setup in X
Parsing: the setup function will be executed after beforeCreate and before created.

14.Message attribute
Resolution:

[1]message: message text
[2]type: theme
[3]iconClass: The class name of the custom icon will be overwritten type
[4]dangerouslyUseHTMLString: Will message Attribute as HTML Fragment processing
[5]customClass: Custom class name
[6]duration: Display time,millisecond. If set to 0, it will not turn off automatically
[7]showClose: Show close button
[8]center: Whether the text is centered
[9]onClose: Callback function when closing,Parameter is closed message example
[10]offset: Message Offset from the top of the window

15.Message method
Parsing: call message or this$ Message returns an instance of the current message. If you need to close the instance manually, you can call its close method.
[1]close: close the current Message

16.MessageBox global method
Parsing: if the Element is completely introduced, it will be Vue Prototype adds the following global methods: $msgbox, $alert, $confirm, and $prompt. Therefore, in Vue instance, you can call MessageBox in the way in this page. Call parameters are:

$msgbox(options)
$alert(message, title, options) or $alert(message, options)
$confirm(message, title, options) or $confirm(message, options)
$prompt(message, title, options) or $prompt(message, options)

17.MessageBox properties
Resolution:

[1]title: MessageBox title
[2]message: MessageBox Message body content
[3]dangerouslyUseHTMLString: Will message Attribute as HTML Fragment processing
[4]type: Message type for displaying icons
[5]iconClass: The class name of the custom icon will be overwritten type
[6]customClass: MessageBox Custom class name for
[7]callback: If not used Promise,You can use this parameter to specify MessageBox Callback after closing
[8]showClose: MessageBox Whether to display the close button in the upper right corner
[9]beforeClose: MessageBox The callback before closing will pause the closing of the instance
[10]distinguishCancelAndClose: Cancel[Click the Cancel button]And close[Click the close button or mask layer, press ESC key]Distinguish
[11]lockScroll: Is it MessageBox Will appear body Scroll lock
[12]showCancelButton: Show cancel button
[13]showConfirmButton: Show OK button
[14]cancelButtonText: Text content of cancel button
[15]confirmButtonText: Determines the text content of the button
[16]cancelButtonClass: Custom class name of cancel button
[17]confirmButtonClass: Confirm the custom class name of the button:
[18]closeOnClickModal: Can I close the mask by clicking MessageBox
[19]closeOnPressEscape: Can I press ESC Key off MessageBox
[20]closeOnHashChange: Is it hashchange Close when MessageBox
[21]showInput: Whether to display the input box
[22]inputPlaceholder: Placeholder for input box
[23]inputType: Type of input box
[24]inputValue: Initial text of the input box
[25]inputPattern: Check expression of input box
[26]inputValidator: Check function of input box. You can return Boolean values or strings, if you return a string,The returned result will be assigned to inputErrorMessage
[27]inputErrorMessage: Prompt text when verification fails
[28]center: Center layout
[29]roundButton: Use fillet button

18.Notification attribute
Resolution:

[1]title: title
[2]message: Explanatory text
[3]dangerouslyUseHTMLString: Will message Attribute as HTML Fragment processing
[4]type: Theme style, if not within the optional value, will be ignored
[5]iconClass: The class name of the custom icon. If set type,be iconClass Will be overwritten:
[6]customClass: Custom class name
[7]duration: Display time,millisecond. If set to 0, it will not turn off automatically
[8]position: Custom pop-up location
[9]showClose: Show close button
[10]onClose: Callback function when closing
[11]onClick: click Notification Callback function at
[12]offset: Offset distance, at the same time, all Notification The instance should have the same offset

19.Notification method
Parsing: call Notification or this$ Notify returns an instance of the current Notification. If you need to close the instance manually, you can call its close method.
[1]close: close the current Notification

20.Menu Properties
Resolution:

[1]mode: pattern
[2]collapse: Whether to fold the menu horizontally[Only in mode by vertical Available when]
[3]background-color: Background color of menu[Only supported hex format]
[4]text-color: Text color of the menu[Only supported hex format]
[5]active-text-color: The text color of the currently active menu[Only supported hex format]
[6]default-active: Of the currently active menu index
[7]default-openeds: Currently open sub-menu of index Array of
[8]unique-opened: Keep only one submenu expanded
[9]menu-trigger: Trigger mode of submenu opening[Only in mode by horizontal Time effective]
[10]router: Whether to use vue-router Mode, which will be activated when navigation is activated index As path Route jump
[11]collapse-transition: Turn on collapse animation

21.Menu method
Resolution:
[1]open: expand the specified sub menu
[2]close: collapse the specified sub menu

22.Menu events
Resolution:
[1]select: menu activation callback
[2]open: callback of sub menu expansion
[3]close: sub menu retracted callback

23.SubMenu submenu properties
Resolution:

[1]index: Unique flag
[2]popper-class: Custom class name of pop-up menu
[3]show-timeout: open sub-menu Delay of
[4]hide-timeout: Put away sub-menu Delay of
[5]disabled: Disable
[6]popper-append-to-body: Insert pop-up menu into body Element. When there is a problem with the positioning of the menu, you can try to modify this property

24. Menu item property
Resolution:
[1]index: unique flag
[2]route: vueroouter path object
[3]disabled: disable or not

25. Menu group property
Resolution:
[1]title: group title

reference:
[1]CSS selector: https://www.runoob.com/cssref/css-selectors.html
[2]Vue3+TS from entry to mastery: https://www.bilibili.com/video/BV1CK411u75G?p=38
[3]vue3-ts-element-plus: https://gitlab.com/hemiahwu/vue3-ts-element-plus

Topics: Container Software Engineering layout