mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-30 11:16:12 +08:00
docs(components): check docs before stable (#5740)
This commit is contained in:
C.Y.Kun
GitHub
parent
4501b6dd66
commit
b46bdae9e6
@ -64,14 +64,3 @@ affix/fixed
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
| — | customize default content |
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.affix-container {
|
||||
text-align: center;
|
||||
height: 400px;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -100,14 +100,3 @@ alert/icon-description
|
||||
| Event Name | Description | Parameters |
|
||||
| ---------- | -------------------------- | ---------- |
|
||||
| close | fires when alert is closed | — |
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
&:first-child {
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -70,69 +70,3 @@ avatar/fit
|
||||
| Name | Description |
|
||||
| ------- | ------------------------ |
|
||||
| default | customize avatar content |
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.demo-basic {
|
||||
text-align: center;
|
||||
|
||||
.demo-basic--circle,
|
||||
.demo-basic--square {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.block {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.block:not(:last-child) {
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
}
|
||||
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.demo-type {
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> div:not(:last-child) {
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
}
|
||||
|
||||
.demo-fit {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.block {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,15 +7,6 @@ lang: en-US
|
||||
|
||||
Use Collapse to store contents.
|
||||
|
||||
<style lang="scss">
|
||||
.demo-collapse {
|
||||
.el-collapse {
|
||||
padding: 8px;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
You can expand multiple panels
|
||||
|
||||
@ -92,52 +92,3 @@ container/example
|
||||
| Name | Description |
|
||||
| ---- | ------------------------- |
|
||||
| — | customize default content |
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.el-header,
|
||||
.el-footer {
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.common-layout {
|
||||
.el-header,
|
||||
.el-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #e9eef3;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
.el-container {
|
||||
margin-bottom: 40px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:nth-child(5) .el-aside,
|
||||
&:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
&:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,48 +7,6 @@ lang: en-US
|
||||
|
||||
Use Date Picker for date input.
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.example-showcase .demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-date-picker .container {
|
||||
flex: 1;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
.block {
|
||||
border-right: none;
|
||||
&:last-child {
|
||||
border-top: solid 1px var(--el-border-color-base);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
## Enter Date
|
||||
|
||||
Basic date picker measured by 'day'.
|
||||
|
||||
@ -13,27 +13,6 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
|
||||
|
||||
:::
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Date and time
|
||||
|
||||
:::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
|
||||
|
||||
@ -7,22 +7,6 @@ lang: en-US
|
||||
|
||||
Display multiple fields in list form.
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-showcase {
|
||||
.margin-top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.my-label {
|
||||
background: var(--el-color-success-lighter);
|
||||
}
|
||||
|
||||
.my-content {
|
||||
background: var(--el-color-danger-lighter);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
:::demo
|
||||
|
||||
@ -7,29 +7,6 @@ lang: en-US
|
||||
|
||||
Informs users while preserving the current page state.
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-showcase {
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.full-image {
|
||||
width: 100%;
|
||||
}
|
||||
.el-dialog__wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
Dialog pops up a dialog box, and it's quite customizable.
|
||||
|
||||
@ -13,31 +13,6 @@ Since v-model is natively supported for all components, `visible.sync` has been
|
||||
|
||||
:::
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-showcase {
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
form {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
button {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-drawer__body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Callout a temporary drawer, from multiple direction
|
||||
|
||||
@ -7,44 +7,6 @@ lang: en-US
|
||||
|
||||
Toggleable menu for displaying lists of links and actions.
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
.example-showcase {
|
||||
.el-dropdown {
|
||||
& + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.block-col-2 {
|
||||
margin: -24px;
|
||||
|
||||
.el-col {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.example-showcase .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
Hover on the dropdown menu to unfold it for more actions.
|
||||
|
||||
@ -13,78 +13,6 @@ The component has been upgraded with a flex layout to replace the old float layo
|
||||
|
||||
:::
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example-showcase {
|
||||
.el-select .el-input {
|
||||
width: 380px;
|
||||
}
|
||||
.el-form {
|
||||
width: 460px;
|
||||
}
|
||||
|
||||
.el-checkbox-group {
|
||||
width: 320px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
font-size: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.el-checkbox {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-right: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
+ .el-checkbox {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-form-normal {
|
||||
width: 460px;
|
||||
}
|
||||
.demo-form-inline {
|
||||
width: auto;
|
||||
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
> * {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.demo-ruleForm {
|
||||
width: 460px;
|
||||
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
.demo-dynamic {
|
||||
.el-input {
|
||||
margin-right: 10px;
|
||||
width: 270px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic form
|
||||
|
||||
It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`.
|
||||
|
||||
@ -7,76 +7,6 @@ lang: en-US
|
||||
|
||||
Besides the native features of img, support lazy load, custom placeholder and load failure, etc.
|
||||
|
||||
<style lang="scss">
|
||||
.demo-image {
|
||||
.block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-image__placeholder,
|
||||
.demo-image__error {
|
||||
@extend .demo-image;
|
||||
|
||||
.block {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
padding: 0 5px;
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-image__placeholder {
|
||||
.dot {
|
||||
animation: dot 2s infinite steps(3, start);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-image__error {
|
||||
.image-slot {
|
||||
font-size: 30px;
|
||||
.el-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic Usage
|
||||
|
||||
:::demo Indicate how the image should be resized to fit its container by `fit`, same as native [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。
|
||||
|
||||
@ -7,20 +7,6 @@ lang: en-US
|
||||
|
||||
Text hyperlink
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.example-showcase {
|
||||
.el-link {
|
||||
margin-right: 8px;
|
||||
|
||||
& .el-icon--right.el-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
## Basic
|
||||
|
||||
Basic text link
|
||||
|
||||
@ -7,32 +7,6 @@ lang: en-US
|
||||
|
||||
Progress is used to show the progress of current operation, and inform the user the current status.
|
||||
|
||||
<style lang="scss">
|
||||
$namespace: el;
|
||||
.example-showcase .demo-progress {
|
||||
.#{$namespace}-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.#{$namespace}-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.percentage-value {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Linear progress bar
|
||||
|
||||
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `format`.
|
||||
|
||||
@ -7,31 +7,6 @@ lang: en-US
|
||||
|
||||
Used for rating
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.demo-rate-block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
box-sizing: border-box;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
:::demo Rate divides rating scores into several levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them an array with three element to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`, or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
|
||||
|
||||
@ -7,45 +7,6 @@ lang: en-US
|
||||
|
||||
Used to replace the browser's native scrollbar.
|
||||
|
||||
<style lang="scss">
|
||||
.example-showcase {
|
||||
.el-scrollbar {
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.flex-content {
|
||||
display: flex;
|
||||
|
||||
.scrollbar-demo-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-danger-lighter);
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-slider {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
:::demo Use `height` property to set the height of the scrollbar, or if not set, it adapts according to the parent container height.
|
||||
|
||||
@ -7,30 +7,6 @@ lang: en-US
|
||||
|
||||
Drag the slider within a fixed range.
|
||||
|
||||
<style lang="scss">
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.demonstration {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
& + .el-slider {
|
||||
flex: 0 0 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
The current value is displayed when the slider is being dragged.
|
||||
|
||||
@ -7,23 +7,6 @@ lang: en-US
|
||||
|
||||
Divide data collections which are related yet belong to different types.
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
:not(.el-tabs--border-card) > .el-tabs__content {
|
||||
padding: 32px;
|
||||
background-color: #F4F5F7;
|
||||
color: #6B778C;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-tabs--right, .el-tabs--left {
|
||||
.el-tabs__content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Basic usage
|
||||
|
||||
Basic and concise tabs.
|
||||
|
||||
@ -145,13 +145,13 @@ tree/draggable
|
||||
|
||||
## props
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------- | ----------------------------------------------------------------------------- | ----------------------------- | --------------- | ------- |
|
||||
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
|
||||
| children | specify which node object is used as the node's subtree | string | — | — |
|
||||
| disabled | specify which key of node object represents if node's checkbox is disabled | string, function(data, node) | — | — |
|
||||
| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | boolean, function(data, node) | — | — |
|
||||
| class | custom node class name | string, function(data, node) | — | — |
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------- | ----------------------------------------------------------------------------- | ---------------------------- | --------------- | ------- |
|
||||
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
|
||||
| children | specify which node object is used as the node's subtree | string | — | — |
|
||||
| disabled | specify which key of node object represents if node's checkbox is disabled | string, function(data, node) | — | — |
|
||||
| isLeaf | specify whether the node is a leaf node, only works when lazy load is enabled | string, function(data, node) | — | — |
|
||||
| class | custom node class name | string, function(data, node) | — | — |
|
||||
|
||||
## Method
|
||||
|
||||
|
||||
@ -5,3 +5,11 @@
|
||||
</el-affix>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.affix-container {
|
||||
text-align: center;
|
||||
height: 400px;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,12 @@
|
||||
<el-alert title="warning alert" type="warning" />
|
||||
<el-alert title="error alert" type="error" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,11 @@
|
||||
<el-alert title="warning alert" type="warning" center show-icon> </el-alert>
|
||||
<el-alert title="error alert" type="error" center show-icon> </el-alert>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,16 +7,16 @@
|
||||
</el-alert>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const hello = () => {
|
||||
alert('Hello World!')
|
||||
}
|
||||
return {
|
||||
hello,
|
||||
}
|
||||
},
|
||||
})
|
||||
<script lang="ts" setup>
|
||||
const hello = () => {
|
||||
alert('Hello World!')
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,3 +28,11 @@
|
||||
>
|
||||
</el-alert>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,11 @@
|
||||
<el-alert title="warning alert" type="warning" show-icon> </el-alert>
|
||||
<el-alert title="error alert" type="error" show-icon> </el-alert>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,11 @@
|
||||
<el-alert title="warning alert" type="warning" effect="dark"> </el-alert>
|
||||
<el-alert title="error alert" type="error" effect="dark"> </el-alert>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-alert {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
.el-alert:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,3 +37,29 @@ const state = reactive({
|
||||
|
||||
const { circleUrl, squareUrl, sizeList } = toRefs(state)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-basic {
|
||||
text-align: center;
|
||||
}
|
||||
.demo-basic .sub-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.demo-basic .demo-basic--circle,
|
||||
.demo-basic .demo-basic--square {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-basic .block:not(:last-child) {
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
.demo-basic .block {
|
||||
flex: 1;
|
||||
}
|
||||
.demo-basic .el-col:not(:last-child) {
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,3 +16,23 @@ const state = reactive({
|
||||
|
||||
const { fits, url } = toRefs(state)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-fit {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.demo-fit .block {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.demo-fit .title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,3 +17,17 @@
|
||||
<script setup lang="ts">
|
||||
import { UserFilled } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-type {
|
||||
display: flex;
|
||||
}
|
||||
.demo-type > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-type > div:not(:last-child) {
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,26 +28,22 @@
|
||||
import { Eleme } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped>
|
||||
:root {
|
||||
--el-color-primary: #409eff;
|
||||
}
|
||||
.el-button {
|
||||
.custom-loading {
|
||||
.circular {
|
||||
margin-right: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
.path {
|
||||
animation: loading-dash 1.5s ease-in-out infinite;
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 2;
|
||||
stroke: var(--el-button-text-color);
|
||||
stroke-linecap: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button .custom-loading .circular {
|
||||
margin-right: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
}
|
||||
.el-button .custom-loading .circular .path {
|
||||
animation: loading-dash 1.5s ease-in-out infinite;
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 2;
|
||||
stroke: var(--el-button-text-color);
|
||||
stroke-linecap: round;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -303,7 +303,7 @@ const options = [
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
.example-block {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
@ -54,45 +54,42 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.common-layout {
|
||||
.el-header,
|
||||
.el-footer {
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
<style scoped>
|
||||
.common-layout .el-header,
|
||||
.common-layout .el-footer {
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
.common-layout .el-footer {
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-footer {
|
||||
line-height: 60px;
|
||||
}
|
||||
.common-layout .el-aside {
|
||||
background-color: #d3dce6;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
.common-layout .el-main {
|
||||
background-color: #e9eef3;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #e9eef3;
|
||||
color: var(--el-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 160px;
|
||||
}
|
||||
.common-layout > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.common-layout .el-container:nth-child(5) .el-aside,
|
||||
.common-layout .el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
.common-layout .el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -107,33 +107,31 @@ const item = {
|
||||
const tableData = ref(Array(20).fill(item))
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-container-demo {
|
||||
.el-header {
|
||||
position: relative;
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.el-aside {
|
||||
width: 240px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: #fff !important;
|
||||
border-right: solid 1px #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
.el-main {
|
||||
padding: 0;
|
||||
}
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
<style scoped>
|
||||
.layout-container-demo .el-header {
|
||||
position: relative;
|
||||
background-color: #b3c0d1;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.layout-container-demo .el-aside {
|
||||
width: 240px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: #fff !important;
|
||||
border-right: solid 1px #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.layout-container-demo .el-menu {
|
||||
border-right: none;
|
||||
}
|
||||
.layout-container-demo .el-main {
|
||||
padding: 0;
|
||||
}
|
||||
.layout-container-demo .toolbar {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,3 +24,26 @@ const customPrefix = shallowRef({
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -45,3 +45,26 @@ const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -63,3 +63,26 @@ const shortcuts = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,3 +22,20 @@ const defaultTime = ref([
|
||||
new Date(2000, 2, 1, 23, 59, 59),
|
||||
])
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,3 +30,26 @@ import { ref } from 'vue'
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,3 +52,26 @@ const disabledDate = (time: Date) => {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -57,3 +57,26 @@ const shortcuts = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -47,3 +47,42 @@ const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
const value4 = ref('')
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-date-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.demo-date-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-date-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo-date-picker .container {
|
||||
flex: 1;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
}
|
||||
.demo-date-picker .container .block {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-date-picker .container .block:last-child {
|
||||
border-top: solid 1px var(--el-border-color-base);
|
||||
}
|
||||
.demo-date-picker .container:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.demo-date-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="demo-date-picker">
|
||||
<div class="demo-datetime-picker">
|
||||
<div class="block">
|
||||
<span class="demonstration">Emits Date object</span>
|
||||
<div class="demonstration">Value: {{ value1 }}</div>
|
||||
@ -38,20 +38,33 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
|
||||
return {
|
||||
value1,
|
||||
value2,
|
||||
value3,
|
||||
}
|
||||
},
|
||||
})
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-datetime-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-datetime-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-datetime-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-datetime-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -63,3 +63,20 @@ const shortcuts = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.block .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div class="demo-datetime-picker">
|
||||
<div class="block">
|
||||
<span class="demonstration">Default</span>
|
||||
<el-date-picker
|
||||
@ -63,3 +63,26 @@ const shortcuts = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-datetime-picker {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-datetime-picker .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.demo-datetime-picker .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-datetime-picker .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,3 +37,20 @@ const defaultTime2 = [
|
||||
new Date(2000, 2, 1, 8, 0, 0),
|
||||
] // '12:00:00', '08:00:00'
|
||||
</script>
|
||||
<style scoped>
|
||||
.block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
flex: 1;
|
||||
}
|
||||
.block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.block .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,3 +24,11 @@
|
||||
>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<style scoped>
|
||||
.my-label {
|
||||
background: var(--el-color-success-lighter);
|
||||
}
|
||||
.my-content {
|
||||
background: var(--el-color-danger-lighter);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -131,9 +131,11 @@ const blockMargin = computed(() => {
|
||||
.el-descriptions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.cell-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.margin-top {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -37,3 +37,8 @@ const handleClose = (done: () => void) => {
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,3 +23,8 @@ import { ref } from 'vue'
|
||||
|
||||
const centerDialogVisible = ref(false)
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,7 +52,7 @@ import { reactive, ref } from 'vue'
|
||||
|
||||
const dialogTableVisible = ref(false)
|
||||
const dialogFormVisible = ref(false)
|
||||
const formLabelWidth = '120px'
|
||||
const formLabelWidth = '140px'
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
@ -88,3 +88,17 @@ const gridData = [
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-button--text {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
.el-input {
|
||||
width: 300px;
|
||||
}
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,3 +33,8 @@ import { ref } from 'vue'
|
||||
|
||||
const centerDialogVisible = ref(false)
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,3 +30,8 @@ import { ref } from 'vue'
|
||||
const outerVisible = ref(false)
|
||||
const innerVisible = ref(false)
|
||||
</script>
|
||||
<style scoped>
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,3 +21,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,3 +23,11 @@ const handleCommand = (command: string | number | object) => {
|
||||
ElMessage(`click on item ${command}`)
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -46,3 +46,11 @@ function showClick() {
|
||||
dropdown1.value.handleOpen()
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -70,3 +70,12 @@ import {
|
||||
Plus,
|
||||
} from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.block-col-2 .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,3 +19,14 @@
|
||||
<script lang="ts" setup>
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -35,3 +35,8 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,3 +36,14 @@ const handleClick = () => {
|
||||
alert('button click')
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -35,11 +35,10 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
|
||||
import { resetForm, submitForm } from './utils'
|
||||
import type { ElForm } from 'element-plus'
|
||||
|
||||
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
|
||||
type FormInstance = InstanceType<typeof ElForm>
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
const checkAge = (rule: any, value: any, callback: any) => {
|
||||
if (!value) {
|
||||
@ -90,4 +89,21 @@ const rules = reactive({
|
||||
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
|
||||
age: [{ validator: checkAge, trigger: 'blur' }],
|
||||
})
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -49,11 +49,10 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
|
||||
import { resetForm, submitForm } from './utils'
|
||||
import type { ElForm } from 'element-plus'
|
||||
|
||||
const formRef = ref<InstanceType<typeof ElForm>>()
|
||||
type FormInstance = InstanceType<typeof ElForm>
|
||||
const formRef = ref<FormInstance>()
|
||||
const dynamicValidateForm = reactive<{
|
||||
domains: DomainItem[]
|
||||
email: string
|
||||
@ -85,4 +84,21 @@ const addDomain = () => {
|
||||
value: '',
|
||||
})
|
||||
}
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -28,13 +28,29 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
|
||||
import { resetForm, submitForm } from './utils'
|
||||
import type { ElForm } from 'element-plus'
|
||||
|
||||
const formRef = ref<InstanceType<typeof ElForm>>()
|
||||
type FormInstance = InstanceType<typeof ElForm>
|
||||
const formRef = ref<FormInstance>()
|
||||
|
||||
const numberValidateForm = reactive({
|
||||
age: '',
|
||||
})
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import type { ElForm } from 'element-plus'
|
||||
|
||||
export const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
@ -71,13 +71,12 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
// More info see https://github.com/element-plus/element-plus/blob/dev/docs/examples/form/utils.ts
|
||||
import { resetForm, submitForm } from './utils'
|
||||
import type { ElForm } from 'element-plus'
|
||||
|
||||
const formSize = ref('')
|
||||
type FormInstance = InstanceType<typeof ElForm>
|
||||
|
||||
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
|
||||
const formSize = ref('')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const ruleForm = reactive({
|
||||
name: '',
|
||||
region: '',
|
||||
@ -149,4 +148,21 @@ const rules = reactive({
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -16,3 +16,24 @@ const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
|
||||
const url =
|
||||
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-image .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.demo-image .block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-image .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,3 +24,16 @@ const srcList = [
|
||||
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-image__error .image-slot {
|
||||
font-size: 30px;
|
||||
}
|
||||
.demo-image__error .image-slot .el-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
.demo-image__error .el-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,3 +20,42 @@
|
||||
<script setup lang="ts">
|
||||
import { Picture as IconPicture } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-image__error .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.demo-image__error .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-image__error .el-image {
|
||||
padding: 0 5px;
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.demo-image__error .image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 30px;
|
||||
}
|
||||
.demo-image__error .image-slot .el-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,3 +19,41 @@
|
||||
const src =
|
||||
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-image__placeholder .block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.demo-image__placeholder .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-image__placeholder .el-image {
|
||||
padding: 0 5px;
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.demo-image__placeholder.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
.demo-image__placeholder .dot {
|
||||
animation: dot 2s infinite steps(3, start);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,3 +8,11 @@
|
||||
<el-link type="info">info</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-link {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.el-link .el-icon--right.el-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,3 +8,11 @@
|
||||
<el-link type="info" disabled>info</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-link {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.el-link .el-icon--right.el-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,11 @@
|
||||
<el-link>With Underline</el-link>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.el-link {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.el-link .el-icon--right.el-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,3 +9,11 @@
|
||||
<script setup lang="ts">
|
||||
import { Edit, View as IconView } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-link {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.el-link .el-icon--right.el-icon {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,3 +7,12 @@
|
||||
<el-progress type="circle" :percentage="50" status="exception" />
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
.demo-progress .el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -52,3 +52,9 @@ const decrease = () => {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -33,10 +33,16 @@ import { Check } from '@element-plus/icons-vue'
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
.demo-progress .el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,3 +44,12 @@ onMounted(() => {
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
.demo-progress .el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,3 +21,9 @@
|
||||
<script lang="ts" setup>
|
||||
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,3 +21,10 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,3 +11,10 @@
|
||||
<script lang="ts" setup>
|
||||
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-progress .el-progress--line {
|
||||
margin-bottom: 15px;
|
||||
width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,4 +17,22 @@ const value2 = ref(null)
|
||||
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.demo-rate-block {
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px var(--el-border-color-base);
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.demo-rate-block:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.demo-rate-block .demonstration {
|
||||
display: block;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,3 +3,17 @@
|
||||
<p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,28 @@
|
||||
<template>
|
||||
<el-scrollbar>
|
||||
<div class="flex-content">
|
||||
<div class="scrollbar-flex-content">
|
||||
<p v-for="item in 50" :key="item" class="scrollbar-demo-item">
|
||||
{{ item }}
|
||||
</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-flex-content {
|
||||
display: flex;
|
||||
}
|
||||
.scrollbar-demo-item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-danger-lighter);
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -38,3 +38,20 @@ const formatTooltip = (value: number) => {
|
||||
return `${value} px`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
.el-slider {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,3 +21,17 @@ const onDelete = () => {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.scrollbar-demo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -49,8 +49,39 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const loading = ref(false)
|
||||
const currentDate = dayjs().format('YYYY-MM-DD')
|
||||
const currentDate = formatDate(new Date(), 'yyyy-MM-dd')
|
||||
|
||||
function formatDate(date: string | Date, fmt: string) {
|
||||
if (typeof date == 'string') {
|
||||
return date
|
||||
}
|
||||
|
||||
if (!fmt) fmt = 'yyyy-MM-dd hh:mm:ss'
|
||||
|
||||
if (!date || date == null) return null
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1, // 月份
|
||||
'd+': date.getDate(), // 日
|
||||
'h+': date.getHours(), // 小时
|
||||
'm+': date.getMinutes(), // 分
|
||||
's+': date.getSeconds(), // 秒
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
||||
S: date.getMilliseconds(), // 毫秒
|
||||
}
|
||||
if (/(y+)/.test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
`${date.getFullYear()}`.substr(4 - RegExp.$1.length)
|
||||
)
|
||||
for (const k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
|
||||
)
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -44,8 +44,39 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const loading = ref(true)
|
||||
const currentDate = dayjs().format('YYYY-MM-DD')
|
||||
const currentDate = formatDate(new Date(), 'yyyy-MM-dd')
|
||||
|
||||
function formatDate(date: string | Date, fmt: string) {
|
||||
if (typeof date == 'string') {
|
||||
return date
|
||||
}
|
||||
|
||||
if (!fmt) fmt = 'yyyy-MM-dd hh:mm:ss'
|
||||
|
||||
if (!date || date == null) return null
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1, // 月份
|
||||
'd+': date.getDate(), // 日
|
||||
'h+': date.getHours(), // 小时
|
||||
'm+': date.getMinutes(), // 分
|
||||
's+': date.getSeconds(), // 秒
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
||||
S: date.getMilliseconds(), // 毫秒
|
||||
}
|
||||
if (/(y+)/.test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
`${date.getFullYear()}`.substr(4 - RegExp.$1.length)
|
||||
)
|
||||
for (const k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
|
||||
)
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
interface ListItem {
|
||||
imgUrl: string
|
||||
@ -51,7 +50,7 @@ interface ListItem {
|
||||
|
||||
const loading = ref(true)
|
||||
const lists = ref<ListItem[]>([])
|
||||
const currentDate = ref(dayjs().format('YYYY-MM-DD'))
|
||||
const currentDate = formatDate(new Date(), 'yyyy-MM-dd')
|
||||
|
||||
const setLoading = () => {
|
||||
loading.value = true
|
||||
@ -80,4 +79,36 @@ onMounted(() => {
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
function formatDate(date: string | Date, fmt: string) {
|
||||
if (typeof date == 'string') {
|
||||
return date
|
||||
}
|
||||
|
||||
if (!fmt) fmt = 'yyyy-MM-dd hh:mm:ss'
|
||||
|
||||
if (!date || date == null) return null
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1, // 月份
|
||||
'd+': date.getDate(), // 日
|
||||
'h+': date.getHours(), // 小时
|
||||
'm+': date.getMinutes(), // 分
|
||||
's+': date.getSeconds(), // 秒
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
||||
S: date.getMilliseconds(), // 毫秒
|
||||
}
|
||||
if (/(y+)/.test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
`${date.getFullYear()}`.substr(4 - RegExp.$1.length)
|
||||
)
|
||||
for (const k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
|
||||
)
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -34,3 +34,26 @@ const formatTooltip = (val: number) => {
|
||||
return val / 100
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.slider-demo-block .demonstration {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.slider-demo-block .demonstration + .el-slider {
|
||||
flex: 0 0 70%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,3 +15,26 @@ import { ref } from 'vue'
|
||||
const value1 = ref(0)
|
||||
const value2 = ref(0)
|
||||
</script>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.slider-demo-block .demonstration {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.slider-demo-block .demonstration + .el-slider {
|
||||
flex: 0 0 70%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,3 +9,13 @@ import { ref } from 'vue'
|
||||
|
||||
const value = ref([4, 8])
|
||||
</script>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,3 +28,13 @@ const marks = reactive<Marks>({
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,3 +19,13 @@ const value = ref(0)
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,3 +9,13 @@ import { ref } from 'vue'
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,3 +9,13 @@ import { ref } from 'vue'
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
<style scoped>
|
||||
.slider-demo-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.slider-demo-block .el-slider {
|
||||
margin-top: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -25,9 +25,8 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
let now = dayjs('2016-05-03')
|
||||
const now = new Date()
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -61,9 +60,9 @@ const deleteRow = (index: number) => {
|
||||
}
|
||||
|
||||
const onAddItem = () => {
|
||||
now = now.add(1, 'day')
|
||||
now.setDate(now.getDate() + 1)
|
||||
tableData.value.push({
|
||||
date: now.format('YYYY-MM-DD'),
|
||||
date: formatDate(now, 'yyyy-MM-dd')!,
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
@ -71,4 +70,36 @@ const onAddItem = () => {
|
||||
zip: 'CA 90036',
|
||||
})
|
||||
}
|
||||
|
||||
function formatDate(date: string | Date, fmt: string) {
|
||||
if (typeof date == 'string') {
|
||||
return date
|
||||
}
|
||||
|
||||
if (!fmt) fmt = 'yyyy-MM-dd hh:mm:ss'
|
||||
|
||||
if (!date || date == null) return null
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1, // 月份
|
||||
'd+': date.getDate(), // 日
|
||||
'h+': date.getHours(), // 小时
|
||||
'm+': date.getMinutes(), // 分
|
||||
's+': date.getSeconds(), // 秒
|
||||
'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
|
||||
S: date.getMilliseconds(), // 毫秒
|
||||
}
|
||||
if (/(y+)/.test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
`${date.getFullYear()}`.substr(4 - RegExp.$1.length)
|
||||
)
|
||||
for (const k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt))
|
||||
fmt = fmt.replace(
|
||||
RegExp.$1,
|
||||
RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
|
||||
)
|
||||
}
|
||||
return fmt
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
||||
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
||||
@ -15,3 +15,12 @@ const handleClick = (tab: string, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
background-color: #f4f5f7;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane label="User">User</el-tab-pane>
|
||||
<el-tab-pane label="Config">Config</el-tab-pane>
|
||||
<el-tab-pane label="Role">Role</el-tab-pane>
|
||||
@ -15,3 +20,12 @@ const handleClick = (tab: string, event: Event) => {
|
||||
console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
background-color: #f4f5f7;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-tabs type="border-card">
|
||||
<el-tabs type="border-card" class="demo-tabs">
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<span>
|
||||
@ -17,3 +17,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { Calendar } from '@element-plus/icons-vue'
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
background-color: #f4f5f7;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<el-tabs
|
||||
v-model="editableTabsValue"
|
||||
type="card"
|
||||
class="demo-tabs"
|
||||
closable
|
||||
@tab-remove="removeTab"
|
||||
>
|
||||
@ -65,3 +66,12 @@ const removeTab = (targetName: string) => {
|
||||
editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
background-color: #f4f5f7;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user