mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-15 17:14:05 -08:00
5bd8f7c93e
* split up main, sass imports, import new nds
* migrate most buttons
* update sizes based on feedback
* update copy buttons
* update executions list
* fix issues
* force message box buttons
* update warning color
* update more buttons
* wrap message box buttons
* update last component
* lint fixes
* add build report step
* breakout imports
* set package.json
* fix notification bug
* clean up imports
* use build directories directly
* update imports
* remove xl size
* update number inputs
* fix input width
* update line height, fix icon bug
* fix up editor
* fix spacing between buttons
* Reset line height
* revert changes to this
* revert changes
* clean up button sizes
* change to outline
* update select height
* update tooltip
* remove build report step
* clean up impl
* remove regenerator runtime
* add design system repo
* apply editorconfig
* apply editor config prettier
* lint issue
* switch to tabs
* switch to single space
* update eslintrc
* remove git modules
* update sass package
* support dart sass
* add build
* update dependency
* update contributing.md
* set repo
* update versions
* add tslint step
* update spacing to spaces, add dev step
* add test step
* add test step
* update browser lint rc
* remove .github
* delete .gitignore
* set comment for icons
* remove preview link
* update button interface
* update types
* set types
* clean up intro
* update intro
* remove assets
* move into preview
* remove headline comment
* reduce theme build
* loading executions
* match deps versions
* match deps versions
* fix lint issues
* fix lint issues
* update callback
* disable codacy for docs.css
* fix storybook issues
* add design system to docker image
* update spacing around delete sort button
* set line height to stop juggling headline
* update sizes
* clean up vars
* fix scss issues
* update button vars
* add shade color
* fix button without click
* fix buttons bug
* fix bug with executions list
* clean up theme
* update link styling
* fix typo
* run prettier
* 🎨 code format
* 🎨 code format
* 🔥 remove empty files
* ✨ N8n 2284 new inputs (#2075)
* implement inputs
* prettier fixes
* revert unnessary change
* move input components and tooltip
* remove form elements
* move select
* update input placements
* update sizes
* update credentails
* clean up select size
* fix caret issue
* update inputs
* clean up select
* fix tags dropdown border
* clean up tags input
* fix workflow name bug
* clean up select here
* add sizes template
* fix option caret
* fix input sizes
* update date input size
* remove tags input override
* update prop
* update input size
* center run data inputs
* update disabled colors
* update execution header
* update scrollbar
* update text area spacing
* fix items in header
* update run data tooltip
* remove popover
* update prefix positions
* add filterable demo
* address design issues
* fix input issues, flip boolean input to text
* update input sufffix colors
* remove override
* speed up switch, fix toggle spacing issue
* update icon
* remove icon classes
* clean up inputs
* clean up inputs with icons
* update input spacing again
* update suffix position
* build
* Add support for xlarge inputs
* fix input issues
* fix input issue
* update listeners
* update number inputs for settings
* update append/prepend spacing
* clean up inputs, set expression input as text
* fix type errors
* fix workflow number input
* fix tags dropdown bug
* fix bugs
* fix menu item bug
* remove font weight from link element
* remove default
* fix select option
* fix contrast issues
* allow overflow x for multi selects
* fix icon
* update options select
* fix issue that resolves expression to null
* update how actions are centered
* fix up selects
* update selects to support limiting size
* update option styles
* ⚡ Apply suggestions BHesseldieck
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
* 🎨 code format
Co-authored-by: Jan <janober@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
* ⏪ Revert "🔥 remove empty files"
This reverts commit e91ace4e52.
* ⚡ Remove private from n8n-design-system package
* 🎨 Change to spaces to stay consistent with editorconfig & others
package files
* ⚡ Fix year in license
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Jan <janober@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
1526 lines
42 KiB
HTML
1526 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Deprecated - Element UI Theme CSS Variable</title>
|
||
<!-- import CSS -->
|
||
<link rel="stylesheet" href="../dist/index.css" />
|
||
<link rel="stylesheet" href="./docs.min.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div id="app">
|
||
<el-container>
|
||
<el-container>
|
||
<el-main>
|
||
<div class="component-preview">
|
||
<h4>Color</h4>
|
||
<div class="color">
|
||
<el-row :gutter="12">
|
||
<el-col
|
||
:span="4"
|
||
v-for="(color, key) in colorLine"
|
||
:key="key"
|
||
>
|
||
<div
|
||
class="demo-color-box"
|
||
:style="{ background: dataProxy(color) }"
|
||
>
|
||
{{color}}
|
||
<div class="value">{{dataProxy(color)}}</div>
|
||
<div class="bg-color-sub">
|
||
<div
|
||
class="bg-success-sub-item"
|
||
v-for="(item, key) in Array(2)"
|
||
:key="key"
|
||
:style="{ background: tintColor(dataProxy(color), (key + 8) / 10) }"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="12">
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other"
|
||
:style="{ background: color_text_primary }"
|
||
>
|
||
Primary Text
|
||
<div class="value">{{color_text_primary}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other"
|
||
:style="{ background: color_text_regular }"
|
||
>
|
||
Regular Text
|
||
<div class="value">{{color_text_regular}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other"
|
||
:style="{ background: color_text_secondary }"
|
||
>
|
||
Secondary Text
|
||
<div class="value">{{color_text_secondary}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other"
|
||
:style="{ background: color_text_placeholder }"
|
||
>
|
||
Placeholder
|
||
<div class="value">{{color_text_placeholder}}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="12">
|
||
<el-col :span="4">
|
||
<div
|
||
class="
|
||
demo-color-box demo-color-box-other demo-color-box-lite
|
||
"
|
||
:style="{ background: border_color_base }"
|
||
>
|
||
Border Base
|
||
<div class="value">{{border_color_base}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="
|
||
demo-color-box demo-color-box-other demo-color-box-lite
|
||
"
|
||
:style="{ background: border_color_light }"
|
||
>
|
||
Border Light
|
||
<div class="value">{{border_color_light}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="
|
||
demo-color-box demo-color-box-other demo-color-box-lite
|
||
"
|
||
:style="{ background: border_color_lighter }"
|
||
>
|
||
Border Lighter
|
||
<div class="value">{{border_color_lighter}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="
|
||
demo-color-box demo-color-box-other demo-color-box-lite
|
||
"
|
||
:style="{ background: border_color_extra_light }"
|
||
>
|
||
Border Extralight
|
||
<div class="value">{{border_color_extra_light}}</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="12" v-if="false">
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other"
|
||
:style="{ background: color_black }"
|
||
>
|
||
Background B
|
||
<div class="value">{{color_black}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other"
|
||
:style="{ background: color_white, color: '#303133', border: '1px solid #eee' }"
|
||
>
|
||
Background W
|
||
<div class="value">{{color_white}}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
class="demo-color-box demo-color-box-other bg-transparent"
|
||
>
|
||
Background
|
||
<div class="value">Transparent</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<h4>Typography</h4>
|
||
<el-row :gutter="12">
|
||
<el-col :span="6" class="heading">
|
||
<div :style="{ fontSize: font_size_extra_large }">
|
||
Heading1
|
||
</div>
|
||
<div :style="{ fontSize: font_size_large }">Heading2</div>
|
||
<div :style="{ fontSize: font_size_medium }">Heading3</div>
|
||
<div :style="{ fontSize: font_size_base }">Heading4</div>
|
||
<div :style="{ fontSize: font_size_small }">Heading5</div>
|
||
<div :style="{ fontSize: font_size_extra_small }">
|
||
Heading6
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<div class="title">Example body text</div>
|
||
<p
|
||
class="paragraph"
|
||
:style="{
|
||
fontSize: font_size_base,
|
||
fontWeight: font_weight_primary,
|
||
lineHeight: font_line_height_primary
|
||
}"
|
||
>
|
||
With MySpace becoming more popular every day, there is the
|
||
constant need to be different. There are millions of users.
|
||
If MySpace layouts are chosen well, then you can enhance
|
||
your profile a great deal.
|
||
</p>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<div class="title">Example small text</div>
|
||
<p
|
||
class="paragraph"
|
||
:style="{
|
||
fontSize: font_size_small,
|
||
fontWeight: font_weight_secondary,
|
||
lineHeight: font_line_height_secondary
|
||
}"
|
||
>
|
||
Computers have become ubiquitous in almost every facet of
|
||
our lives. At work, desk jockeys spend hours in front of
|
||
their desktops, while delivery people scan bar codes with
|
||
handhelds and workers in the field stay in touch with the
|
||
central office via their notebooks. Computer hardware weaves
|
||
itself through the fabric of our lives.
|
||
</p>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<h4>Button</h4>
|
||
<el-row class="demo-line">
|
||
<el-button>Default</el-button>
|
||
<el-button type="primary">Primary</el-button>
|
||
<el-button type="success">Success</el-button>
|
||
<el-button type="info">Info</el-button>
|
||
<el-button type="warning">Warning</el-button>
|
||
<el-button type="danger">Danger</el-button>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-button disabled>Default</el-button>
|
||
<el-button disabled type="primary">Primary</el-button>
|
||
<el-button disabled type="success">Success</el-button>
|
||
<el-button disabled type="info">Info</el-button>
|
||
<el-button disabled type="warning">Warning</el-button>
|
||
<el-button disabled type="danger">Danger</el-button>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-button plain>Plain</el-button>
|
||
<el-button type="primary" plain>Primary</el-button>
|
||
<el-button type="success" plain>Success</el-button>
|
||
<el-button type="info" plain>Info</el-button>
|
||
<el-button type="warning" plain>Warning</el-button>
|
||
<el-button type="danger" plain>Danger</el-button>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-button disabled plain>Plain</el-button>
|
||
<el-button disabled type="primary" plain>Primary</el-button>
|
||
<el-button disabled type="success" plain>Success</el-button>
|
||
<el-button disabled type="info" plain>Info</el-button>
|
||
<el-button disabled type="warning" plain>Warning</el-button>
|
||
<el-button disabled type="danger" plain>Danger</el-button>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-button round>Round</el-button>
|
||
<el-button type="primary" round>Primary</el-button>
|
||
<el-button type="success" round>Success</el-button>
|
||
<el-button type="info" round>Info</el-button>
|
||
<el-button type="warning" round>Warning</el-button>
|
||
<el-button type="danger" round>Danger</el-button>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-button icon="el-icon-search" circle></el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-edit"
|
||
circle
|
||
></el-button>
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-check"
|
||
circle
|
||
></el-button>
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-message"
|
||
circle
|
||
></el-button>
|
||
<el-button
|
||
type="warning"
|
||
icon="el-icon-star-off"
|
||
circle
|
||
></el-button>
|
||
<el-button
|
||
type="danger"
|
||
icon="el-icon-delete"
|
||
circle
|
||
></el-button>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-button>Default</el-button>
|
||
<el-button size="medium">Medium</el-button>
|
||
<el-button size="small">Small</el-button>
|
||
<el-button size="mini">Mini</el-button>
|
||
</el-row>
|
||
<el-row>
|
||
<el-button type="text">文字按钮</el-button>
|
||
<el-button type="text" disabled>文字按钮</el-button>
|
||
</el-row>
|
||
<h4>Radio</h4>
|
||
<el-row class="demo-line">
|
||
<el-radio v-model="radio" label="1">Option A</el-radio>
|
||
<el-radio v-model="radio" label="2">Option B</el-radio>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-radio-group v-model="radio1">
|
||
<el-radio-button label="New York"></el-radio-button>
|
||
<el-radio-button label="Washington"></el-radio-button>
|
||
<el-radio-button label="Los Angeles"></el-radio-button>
|
||
<el-radio-button label="Chicago"></el-radio-button>
|
||
</el-radio-group>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-radio v-model="radio2" label="1" border>Option A</el-radio>
|
||
<el-radio v-model="radio2" label="2" border>Option B</el-radio>
|
||
</el-row>
|
||
<h4>Checkbox</h4>
|
||
<el-row class="demo-line">
|
||
<el-checkbox v-model="checked">Option</el-checkbox>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-checkbox-group v-model="checked1">
|
||
<el-checkbox-button
|
||
v-for="city in ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']"
|
||
:label="city"
|
||
:key="city"
|
||
>{{city}}</el-checkbox-button
|
||
>
|
||
</el-checkbox-group>
|
||
</el-row>
|
||
<el-row class="demo-line">
|
||
<el-checkbox
|
||
v-model="checked2"
|
||
label="Option1"
|
||
border
|
||
></el-checkbox>
|
||
</el-row>
|
||
<h4>Input</h4>
|
||
<el-row style="width: 180px">
|
||
<el-input placeholder="Please input" v-model="input"></el-input>
|
||
</el-row>
|
||
<h4>InputNumber</h4>
|
||
<el-row>
|
||
<el-input-number
|
||
v-model="inputNumber"
|
||
:min="1"
|
||
:max="10"
|
||
></el-input-number>
|
||
</el-row>
|
||
<h4>Select</h4>
|
||
<el-row>
|
||
<el-select v-model="selectValue" placeholder="Select">
|
||
<el-option
|
||
v-for="item in selectOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-row>
|
||
<h4>Cascader</h4>
|
||
<el-row>
|
||
<el-cascader
|
||
:options="cascadeOptions"
|
||
v-model="cascaderValue"
|
||
></el-cascader>
|
||
</el-row>
|
||
<h4>Switch</h4>
|
||
<el-row>
|
||
<el-switch v-model="switchValue"></el-switch>
|
||
<el-switch
|
||
style="margin-left: 40px"
|
||
v-model="switchValue"
|
||
active-text="Pay by month"
|
||
inactive-text="Pay by year"
|
||
>
|
||
</el-switch>
|
||
</el-row>
|
||
<h4>Slider</h4>
|
||
<el-row style="width: 380px">
|
||
<el-slider v-model="slider"></el-slider>
|
||
</el-row>
|
||
<h4>DatePicker</h4>
|
||
<el-row>
|
||
<el-date-picker
|
||
v-model="datePicker"
|
||
type="date"
|
||
></el-date-picker>
|
||
</el-row>
|
||
<h4>Rate</h4>
|
||
<el-row>
|
||
<el-rate class="demo-line" v-model="rate"></el-rate>
|
||
<el-rate
|
||
class="demo-line"
|
||
v-model="rate"
|
||
show-score
|
||
text-color="#ff9900"
|
||
score-template="{value} points"
|
||
>
|
||
</el-rate>
|
||
</el-row>
|
||
<h4>Transfer</h4>
|
||
<el-row>
|
||
<el-transfer v-model="transfer" filterable :data="transferData">
|
||
<el-button
|
||
class="transfer-footer"
|
||
slot="left-footer"
|
||
size="small"
|
||
>Operation</el-button
|
||
>
|
||
<el-button
|
||
class="transfer-footer"
|
||
slot="right-footer"
|
||
size="small"
|
||
>Operation</el-button
|
||
>
|
||
</el-transfer>
|
||
</el-row>
|
||
<h4>Table</h4>
|
||
<el-row>
|
||
<el-table :data="tableData" style="width: 70%">
|
||
<el-table-column
|
||
prop="date"
|
||
label="Date"
|
||
width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
label="Name"
|
||
width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
label="Address"
|
||
></el-table-column>
|
||
</el-table>
|
||
</el-row>
|
||
<h4>Tag</h4>
|
||
<el-row>
|
||
<el-tag class="demo-item" closable>Tag One</el-tag>
|
||
<el-tag class="demo-item" closable type="success"
|
||
>Tag Two</el-tag
|
||
>
|
||
<el-tag class="demo-item" closable type="info"
|
||
>Tag Three</el-tag
|
||
>
|
||
<el-tag class="demo-item" closable type="warning"
|
||
>Tag Four</el-tag
|
||
>
|
||
<el-tag class="demo-item" closable type="danger"
|
||
>Tag Five</el-tag
|
||
>
|
||
</el-row>
|
||
<h4>Progress</h4>
|
||
<el-row style="width: 380px">
|
||
<el-progress :percentage="20"></el-progress>
|
||
<el-progress :percentage="60" status="exception"></el-progress>
|
||
<el-progress :percentage="100" status="success"></el-progress>
|
||
</el-row>
|
||
<h4>Tree</h4>
|
||
<el-row style="width: 380px">
|
||
<el-tree :data="treeData" :props="defaultTreeProps"></el-tree>
|
||
</el-row>
|
||
<h4>Pagination</h4>
|
||
<el-row>
|
||
<el-pagination
|
||
layout="prev, pager, next"
|
||
:total="1000"
|
||
></el-pagination>
|
||
</el-row>
|
||
<h4>Badge</h4>
|
||
<el-row>
|
||
<el-badge :value="12" class="demo-item">
|
||
<el-button size="small">comments</el-button>
|
||
</el-badge>
|
||
<el-badge :value="3" class="demo-item">
|
||
<el-button size="small">replies</el-button>
|
||
</el-badge>
|
||
<el-badge :value="1" class="demo-item" type="primary">
|
||
<el-button size="small">comments</el-button>
|
||
</el-badge>
|
||
<el-badge :value="2" class="demo-item" type="warning">
|
||
<el-button size="small">replies</el-button>
|
||
</el-badge>
|
||
</el-row>
|
||
<h4>Alert</h4>
|
||
<el-row style="width: 380px">
|
||
<el-alert
|
||
class="demo-item"
|
||
title="success alert"
|
||
type="success"
|
||
show-icon
|
||
></el-alert>
|
||
<el-alert
|
||
class="demo-item"
|
||
title="info alert"
|
||
type="info"
|
||
close-text="Gotcha"
|
||
show-icon
|
||
></el-alert>
|
||
<el-alert
|
||
class="demo-item"
|
||
title="warning alert"
|
||
type="warning"
|
||
show-icon
|
||
></el-alert>
|
||
<el-alert
|
||
class="demo-item"
|
||
title="error alert"
|
||
type="error"
|
||
description="more text description"
|
||
show-icon
|
||
>
|
||
</el-alert>
|
||
</el-row>
|
||
<h4>Loading</h4>
|
||
<el-row>
|
||
<el-table :data="tableData" style="width: 90%" v-loading="true">
|
||
<el-table-column
|
||
prop="date"
|
||
label="Date"
|
||
width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="name"
|
||
label="Name"
|
||
width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="address"
|
||
label="Address"
|
||
></el-table-column>
|
||
</el-table>
|
||
</el-row>
|
||
<h4>Message</h4>
|
||
<el-row>
|
||
<div
|
||
role="alert"
|
||
class="
|
||
demo-item
|
||
el-message el-message--success
|
||
el-message-fade-leave-active el-message-fade-leave-to
|
||
"
|
||
style="
|
||
top: 0;
|
||
left: 0;
|
||
width: 100px;
|
||
opacity: 1;
|
||
position: relative;
|
||
transform: none;
|
||
"
|
||
>
|
||
<i class="el-message__icon el-icon-success"></i>
|
||
<p class="el-message__content">
|
||
Congrats, this is a success message.
|
||
</p>
|
||
<!---->
|
||
</div>
|
||
<div
|
||
role="alert"
|
||
class="
|
||
demo-item
|
||
el-message el-message--warning
|
||
el-message-fade-leave-active el-message-fade-leave-to
|
||
"
|
||
style="
|
||
top: 0;
|
||
left: 0;
|
||
width: 100px;
|
||
opacity: 1;
|
||
position: relative;
|
||
transform: none;
|
||
"
|
||
>
|
||
<i class="el-message__icon el-icon-warning"></i>
|
||
<p class="el-message__content">
|
||
Warning, this is a warning message.
|
||
</p>
|
||
<!---->
|
||
</div>
|
||
<div
|
||
role="alert"
|
||
class="
|
||
demo-item
|
||
el-message el-message--info
|
||
el-message-fade-leave-active el-message-fade-leave-to
|
||
"
|
||
style="
|
||
top: 0;
|
||
left: 0;
|
||
width: 100px;
|
||
opacity: 1;
|
||
position: relative;
|
||
transform: none;
|
||
"
|
||
>
|
||
<i class="el-message__icon el-icon-info"></i>
|
||
<p class="el-message__content">This is a message.</p>
|
||
<!---->
|
||
</div>
|
||
<div
|
||
role="alert"
|
||
class="
|
||
demo-item
|
||
el-message el-message--error
|
||
is-closable
|
||
el-message-fade-leave-active el-message-fade-leave-to
|
||
"
|
||
style="
|
||
top: 0;
|
||
left: 0;
|
||
width: 100px;
|
||
opacity: 1;
|
||
position: relative;
|
||
transform: none;
|
||
"
|
||
>
|
||
<i class="el-message__icon el-icon-error"></i>
|
||
<p class="el-message__content">
|
||
Oops, this is a error message.
|
||
</p>
|
||
<i class="el-message__closeBtn el-icon-close"></i>
|
||
</div>
|
||
</el-row>
|
||
<h4>MessageBox</h4>
|
||
<el-row>
|
||
<div class="el-message-box">
|
||
<div class="el-message-box__header">
|
||
<div class="el-message-box__title">
|
||
<!----><span>Warning</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
aria-label="Close"
|
||
class="el-message-box__headerbtn"
|
||
>
|
||
<i class="el-message-box__close el-icon-close"></i>
|
||
</button>
|
||
</div>
|
||
<div class="el-message-box__content">
|
||
<div class="el-message-box__status el-icon-warning"></div>
|
||
<div class="el-message-box__message">
|
||
<p>This will permanently delete the file. Continue?</p>
|
||
</div>
|
||
<div class="el-message-box__input" style="display: none">
|
||
<div class="el-input">
|
||
<!----><input
|
||
type="text"
|
||
autocomplete="off"
|
||
placeholder=""
|
||
class="el-input__inner"
|
||
/>
|
||
<!---->
|
||
<!---->
|
||
<!---->
|
||
</div>
|
||
<div
|
||
class="el-message-box__errormsg"
|
||
style="visibility: hidden"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="el-message-box__btns">
|
||
<button
|
||
type="button"
|
||
class="el-button el-button--default el-button--small"
|
||
>
|
||
<!---->
|
||
<!----><span> Cancel </span></button
|
||
><button
|
||
type="button"
|
||
class="
|
||
el-button
|
||
el-button--default
|
||
el-button--small
|
||
el-button--primary
|
||
"
|
||
>
|
||
<!---->
|
||
<!----><span> OK </span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<h4>Notification</h4>
|
||
<el-row>
|
||
<div
|
||
role="alert"
|
||
class="el-notification right"
|
||
style="position: relative; left: 0"
|
||
>
|
||
<!---->
|
||
<div class="el-notification__group">
|
||
<span class="el-notification__title">Notification</span>
|
||
<div class="el-notification__content">
|
||
<div>This is a message</div>
|
||
</div>
|
||
<div class="el-notification__closeBtn el-icon-close"></div>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<h4>Menu</h4>
|
||
<el-row>
|
||
<el-menu
|
||
:default-active="menu"
|
||
class="el-menu-demo"
|
||
mode="horizontal"
|
||
>
|
||
<el-menu-item index="1">Processing Center</el-menu-item>
|
||
<el-submenu index="2">
|
||
<template slot="title">Workspace</template>
|
||
<el-menu-item index="2-1">item one</el-menu-item>
|
||
<el-menu-item index="2-2">item two</el-menu-item>
|
||
<el-menu-item index="2-3">item three</el-menu-item>
|
||
<el-submenu index="2-4">
|
||
<template slot="title">item four</template>
|
||
<el-menu-item index="2-4-1">item one</el-menu-item>
|
||
<el-menu-item index="2-4-2">item two</el-menu-item>
|
||
<el-menu-item index="2-4-3">item three</el-menu-item>
|
||
</el-submenu>
|
||
</el-submenu>
|
||
<el-menu-item index="3" disabled>Info</el-menu-item>
|
||
<el-menu-item index="4">
|
||
<a href="https://www.ele.me" target="_blank">Orders</a>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
<el-menu default-active="2" class="demo-line">
|
||
<el-submenu index="1">
|
||
<template slot="title">
|
||
<i class="el-icon-location"></i>
|
||
<span>Navigator One</span>
|
||
</template>
|
||
<el-menu-item-group title="Group One">
|
||
<el-menu-item index="1-1">item one</el-menu-item>
|
||
<el-menu-item index="1-2">item one</el-menu-item>
|
||
</el-menu-item-group>
|
||
<el-menu-item-group title="Group Two">
|
||
<el-menu-item index="1-3">item three</el-menu-item>
|
||
</el-menu-item-group>
|
||
<el-submenu index="1-4">
|
||
<template slot="title">item four</template>
|
||
<el-menu-item index="1-4-1">item one</el-menu-item>
|
||
</el-submenu>
|
||
</el-submenu>
|
||
<el-menu-item index="2">
|
||
<i class="el-icon-menu"></i>
|
||
<span>Navigator Two</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="3" disabled>
|
||
<i class="el-icon-document"></i>
|
||
<span>Navigator Three</span>
|
||
</el-menu-item>
|
||
<el-menu-item index="4">
|
||
<i class="el-icon-setting"></i>
|
||
<span>Navigator Four</span>
|
||
</el-menu-item>
|
||
</el-menu>
|
||
</el-row>
|
||
<h4>Tabs</h4>
|
||
<el-row>
|
||
<el-tabs v-model="tab" class="demo-item">
|
||
<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>
|
||
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
||
</el-tabs>
|
||
<el-tabs type="card" class="demo-item">
|
||
<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>
|
||
<el-tab-pane label="Task">Task</el-tab-pane>
|
||
</el-tabs>
|
||
</el-row>
|
||
<h4>Dialog</h4>
|
||
<el-row>
|
||
<div
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="Tips"
|
||
class="el-dialog"
|
||
style="margin: 0"
|
||
>
|
||
<div class="el-dialog__header">
|
||
<span class="el-dialog__title">Tips</span
|
||
><button
|
||
type="button"
|
||
aria-label="Close"
|
||
class="el-dialog__headerbtn"
|
||
>
|
||
<i class="el-dialog__close el-icon el-icon-close"></i>
|
||
</button>
|
||
</div>
|
||
<div class="el-dialog__body">
|
||
<span>This is a message</span>
|
||
</div>
|
||
<div class="el-dialog__footer">
|
||
<span class="dialog-footer"
|
||
><button
|
||
type="button"
|
||
class="el-button el-button--default"
|
||
>
|
||
<!---->
|
||
<!----><span>Cancel</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="el-button el-button--primary"
|
||
>
|
||
<!---->
|
||
<!----><span>Confirm</span>
|
||
</button></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<h4>Tooltip</h4>
|
||
<el-row>
|
||
<div
|
||
role="tooltip"
|
||
x-placement="top"
|
||
class="el-tooltip__popper is-dark"
|
||
style="position: relative; width: 40px; text-align: center"
|
||
>
|
||
Dark
|
||
<div x-arrow="" class="popper__arrow"></div>
|
||
</div>
|
||
<div
|
||
role="tooltip"
|
||
x-placement="top"
|
||
class="el-tooltip__popper is-light"
|
||
style="
|
||
margin-top: 10px;
|
||
position: relative;
|
||
width: 40px;
|
||
text-align: center;
|
||
"
|
||
>
|
||
Light
|
||
<div x-arrow="" class="popper__arrow"></div>
|
||
</div>
|
||
</el-row>
|
||
<h4>Popover</h4>
|
||
<el-row>
|
||
<div
|
||
role="tooltip"
|
||
x-placement="top"
|
||
id="el-popover-2936"
|
||
aria-hidden="true"
|
||
class="el-popover el-popper el-popover--plain"
|
||
tabindex="0"
|
||
style="width: 200px; position: relative"
|
||
>
|
||
<div class="el-popover__title">Title</div>
|
||
this is content, this is content, this is content
|
||
<div x-arrow="" class="popper__arrow"></div>
|
||
</div>
|
||
</el-row>
|
||
<h4>Card</h4>
|
||
<el-row>
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>Card name</span>
|
||
</div>
|
||
</el-card>
|
||
</el-row>
|
||
<h4>Carousel</h4>
|
||
<el-row>
|
||
<el-carousel height="150px">
|
||
<el-carousel-item v-for="item in 4" :key="item">
|
||
<h3>{{ item }}</h3>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</el-row>
|
||
<h4>Collapse</h4>
|
||
<el-row>
|
||
<el-collapse v-model="collapse">
|
||
<el-collapse-item title="Consistent" name="1">
|
||
<div>
|
||
Consistent with real life: in line with the process and
|
||
logic of real life, and comply with languages and habits
|
||
that the users are used to;
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item title="Feedback" name="2">
|
||
<div>
|
||
Operation feedback: enable the users to clearly perceive
|
||
their operations by style updates and interactive effects;
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</el-row>
|
||
<h4>Avatar</h4>
|
||
<el-row class="demo-line avatar-demo">
|
||
<el-avatar icon="el-icon-user-solid" />
|
||
<el-avatar> avatar </el-avatar>
|
||
<el-avatar
|
||
shape="square"
|
||
fit="contain"
|
||
:src="avatarData.url"
|
||
></el-avatar>
|
||
<el-avatar size="large"> large </el-avatar>
|
||
<el-avatar size="medium"> medium </el-avatar>
|
||
<el-avatar size="small"> small </el-avatar>
|
||
</el-row>
|
||
<h4>Tree</h4>
|
||
<el-row class="demo-line">
|
||
<el-tree :data="treeData"></el-tree>
|
||
</el-row>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
<el-aside width="400px">
|
||
<div class="color-wrap">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="box-card-header">
|
||
<span>Color</span>
|
||
<el-button
|
||
size="small"
|
||
round
|
||
type="primary"
|
||
@click.native="copyCssVariables"
|
||
>复制变量</el-button
|
||
>
|
||
</div>
|
||
<el-row>
|
||
<p>color-primary 主题色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker v-model="color_primary"></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_primary"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-success 成功题色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker v-model="color_success"></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_success"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-warning 警告题色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker v-model="color_warning"></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_warning"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-danger 危险题色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker v-model="color_danger"></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_danger"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-info 信息题色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker v-model="color_info"></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_info"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-text-primary 主要文字颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="color_text_primary"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_text_primary"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-text-regular 常规文字颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="color_text_regular"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_text_regular"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-text-secondary 次要文字颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="color_text_secondary"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_text_secondary"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>color-text-placeholder 占位文字颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="color_text_placeholder"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="color_text_placeholder"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>border-color-base 一级边框颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="border_color_base"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="border_color_base"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>border-color-light 二级边框颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="border_color_light"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="border_color_light"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>border-color-lighter 三级边框颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="border_color_lighter"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="border_color_lighter"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<p>border-color-xlight 四级边框颜色</p>
|
||
<el-col :span="6">
|
||
<el-color-picker
|
||
v-model="border_color_extra_light"
|
||
></el-color-picker>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-input v-model="border_color_extra_light"></el-input>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</div>
|
||
|
||
<el-dialog :visible.sync="visible" title="复制CSS变量">
|
||
<pre>{{ cssVariables}}</pre>
|
||
<small
|
||
>使用方式：将上面的代码通过style属性添加到项目的html标签上</small
|
||
>
|
||
</el-dialog>
|
||
</el-aside>
|
||
</el-container>
|
||
</div>
|
||
</body>
|
||
<!-- import Vue before Element -->
|
||
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<!-- import JavaScript -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<script>
|
||
const original = {
|
||
color_primary: '#409EFF',
|
||
color_success: '#67C23A',
|
||
color_warning: '#E6A23C',
|
||
color_danger: '#F56C6C',
|
||
color_info: '#909399',
|
||
color_white: '#FFFFFF',
|
||
color_black: '#000000',
|
||
color_text_primary: '#303133',
|
||
color_text_regular: '#606266',
|
||
color_text_secondary: '#909399',
|
||
color_text_placeholder: '#C0C4CC',
|
||
border_color_base: '#DCDFE6',
|
||
border_color_light: '#E4E7ED',
|
||
border_color_lighter: '#EBEEF5',
|
||
border_color_extra_light: '#F2F6FC',
|
||
font_size_extra_large: '20px',
|
||
font_size_large: '18px',
|
||
font_size_medium: '16px',
|
||
font_size_base: '14px',
|
||
font_size_small: '13px',
|
||
font_size_extra_small: '12px',
|
||
font_weight_primary: 500,
|
||
font_weight_secondary: 100,
|
||
font_line_height_primary: '24px',
|
||
font_line_height_secondary: '16px',
|
||
};
|
||
|
||
Vue.config.devtools = true;
|
||
new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
global: {},
|
||
colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
|
||
color_primary: '',
|
||
color_success: '',
|
||
color_warning: '',
|
||
color_danger: '',
|
||
color_info: '',
|
||
color_white: '',
|
||
color_black: '',
|
||
color_text_primary: '',
|
||
color_text_regular: '',
|
||
color_text_secondary: '',
|
||
color_text_placeholder: '',
|
||
border_color_base: '',
|
||
border_color_light: '',
|
||
border_color_lighter: '',
|
||
border_color_extra_light: '',
|
||
font_size_extra_large: '',
|
||
font_size_large: '',
|
||
font_size_medium: '',
|
||
font_size_base: '',
|
||
font_size_small: '',
|
||
font_size_extra_small: '',
|
||
font_weight_primary: 0,
|
||
font_weight_secondary: 0,
|
||
font_line_height_primary: '',
|
||
font_line_height_secondary: '',
|
||
radio: '1',
|
||
radio1: 'Washington',
|
||
radio2: '1',
|
||
checked: true,
|
||
checked1: ['Shanghai'],
|
||
checked2: true,
|
||
input: 'Element',
|
||
inputNumber: 1,
|
||
treeData: [
|
||
{
|
||
label: '一级 1',
|
||
children: [
|
||
{
|
||
label: '二级 1-1',
|
||
children: [
|
||
{
|
||
label: '三级 1-1-1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: '一级 2',
|
||
children: [
|
||
{
|
||
label: '二级 2-1',
|
||
children: [
|
||
{
|
||
label: '三级 2-1-1',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: '二级 2-2',
|
||
children: [
|
||
{
|
||
label: '三级 2-2-1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: '一级 3',
|
||
children: [
|
||
{
|
||
label: '二级 3-1',
|
||
children: [
|
||
{
|
||
label: '三级 3-1-1',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: '二级 3-2',
|
||
children: [
|
||
{
|
||
label: '三级 3-2-1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
selectOptions: [
|
||
{
|
||
value: 'Option1',
|
||
label: 'Option1',
|
||
},
|
||
{
|
||
value: 'Option2',
|
||
label: 'Option2',
|
||
},
|
||
{
|
||
value: 'Option3',
|
||
label: 'Option3',
|
||
},
|
||
{
|
||
value: 'Option4',
|
||
label: 'Option4',
|
||
},
|
||
{
|
||
value: 'Option5',
|
||
label: 'Option5',
|
||
},
|
||
],
|
||
selectValue: '',
|
||
cascadeOptions: [
|
||
{
|
||
value: 'guide',
|
||
label: 'Guide',
|
||
children: [
|
||
{
|
||
value: 'disciplines',
|
||
label: 'Disciplines',
|
||
children: [
|
||
{
|
||
value: 'consistency',
|
||
label: 'Consistency',
|
||
},
|
||
{
|
||
value: 'feedback',
|
||
label: 'Feedback',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
value: 'resource',
|
||
label: 'Resource',
|
||
children: [
|
||
{
|
||
value: 'axure',
|
||
label: 'Axure Components',
|
||
},
|
||
{
|
||
value: 'sketch',
|
||
label: 'Sketch Templates',
|
||
},
|
||
{
|
||
value: 'docs',
|
||
label: 'Design Documentation',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
cascaderValue: [],
|
||
switchValue: true,
|
||
slider: 28,
|
||
datePicker: '',
|
||
rate: null,
|
||
transferData: (() => {
|
||
const data = [];
|
||
for (let i = 1; i <= 15; i++) {
|
||
data.push({
|
||
key: i,
|
||
label: `Option ${i}`,
|
||
disabled: i % 4 === 0,
|
||
});
|
||
}
|
||
return data;
|
||
})(),
|
||
transfer: [1, 4],
|
||
tableData: [
|
||
{
|
||
date: '2016-05-03',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
{
|
||
date: '2016-05-02',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
{
|
||
date: '2016-05-04',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
{
|
||
date: '2016-05-01',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
],
|
||
menu: '1',
|
||
tab: 'first',
|
||
collapse: ['1'],
|
||
treeData: [
|
||
{
|
||
label: 'Level one 1',
|
||
children: [
|
||
{
|
||
label: 'Level two 1-1',
|
||
children: [
|
||
{
|
||
label: 'Level three 1-1-1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: 'Level one 2',
|
||
children: [
|
||
{
|
||
label: 'Level two 2-1',
|
||
children: [
|
||
{
|
||
label: 'Level three 2-1-1',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: 'Level two 2-2',
|
||
children: [
|
||
{
|
||
label: 'Level three 2-2-1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: 'Level one 3',
|
||
children: [
|
||
{
|
||
label: 'Level two 3-1',
|
||
children: [
|
||
{
|
||
label: 'Level three 3-1-1',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: 'Level two 3-2',
|
||
children: [
|
||
{
|
||
label: 'Level three 3-2-1',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
defaultTreeProps: {
|
||
children: 'children',
|
||
label: 'label',
|
||
},
|
||
avatarData: {
|
||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
||
},
|
||
cssVariables: '',
|
||
visible: false,
|
||
};
|
||
},
|
||
watch: {
|
||
global: {
|
||
immediate: true,
|
||
handler(value) {
|
||
Object.keys(original).forEach((v) => {
|
||
const key = `$--${v.replace(/_/g, '-')}`;
|
||
if (value[key]) {
|
||
this[v] = value[key];
|
||
} else {
|
||
this[v] = original[v];
|
||
}
|
||
});
|
||
},
|
||
},
|
||
color_primary(v) {
|
||
this.setCssVariable('color-primary-base', v);
|
||
},
|
||
color_success(v) {
|
||
this.setCssVariable('color-success-base', v);
|
||
},
|
||
color_warning(v) {
|
||
this.setCssVariable('color-warning-base', v);
|
||
},
|
||
color_danger(v) {
|
||
this.setCssVariable('color-danger-base', v);
|
||
},
|
||
color_info(v) {
|
||
this.setCssVariable('color-info-base', v);
|
||
},
|
||
color_text_primary(v) {
|
||
this.setCssVariable('color-text-dark', v);
|
||
},
|
||
color_text_regular(v) {
|
||
this.setCssVariable('color-text-base', v);
|
||
},
|
||
color_text_secondary(v) {
|
||
this.setCssVariable('color-text-light', v);
|
||
},
|
||
color_text_placeholder(v) {
|
||
this.setCssVariable('color-text-lighter', v);
|
||
},
|
||
border_color_base(v) {
|
||
this.setCssVariable('border-color-base', v);
|
||
},
|
||
border_color_light(v) {
|
||
this.setCssVariable('border-color-light', v);
|
||
},
|
||
border_color_lighter(v) {
|
||
this.setCssVariable('border-color-lighter', v);
|
||
},
|
||
border_color_extra_light(v) {
|
||
this.setCssVariable('border-color-xlight', v);
|
||
},
|
||
},
|
||
methods: {
|
||
tintColor(a, b) {
|
||
return tintColor(a, b);
|
||
},
|
||
dataProxy(value) {
|
||
return this[`color_${value.toLowerCase()}`];
|
||
},
|
||
setGlobal() {
|
||
if (window.userThemeConfig) {
|
||
this.global = window.userThemeConfig.global;
|
||
}
|
||
},
|
||
tintColor(c, tint) {
|
||
const color = c.replace('#', '');
|
||
let red = parseInt(color.slice(0, 2), 16);
|
||
let green = parseInt(color.slice(2, 4), 16);
|
||
let blue = parseInt(color.slice(4, 6), 16);
|
||
|
||
if (tint === 0) {
|
||
// when primary color is in its rgb space
|
||
return [red, green, blue].join(',');
|
||
} else {
|
||
red += Math.round(tint * (255 - red));
|
||
green += Math.round(tint * (255 - green));
|
||
blue += Math.round(tint * (255 - blue));
|
||
red = red.toString(16);
|
||
green = green.toString(16);
|
||
blue = blue.toString(16);
|
||
return `#${red}${green}${blue}`;
|
||
}
|
||
},
|
||
hexToHSL(hex) {
|
||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||
|
||
var r = parseInt(result[1], 16);
|
||
var g = parseInt(result[2], 16);
|
||
var b = parseInt(result[3], 16);
|
||
|
||
(r /= 255), (g /= 255), (b /= 255);
|
||
var max = Math.max(r, g, b),
|
||
min = Math.min(r, g, b);
|
||
var h,
|
||
s,
|
||
l = (max + min) / 2;
|
||
|
||
if (max == min) {
|
||
h = s = 0; // achromatic
|
||
} else {
|
||
var d = max - min;
|
||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||
switch (max) {
|
||
case r:
|
||
h = (g - b) / d + (g < b ? 6 : 0);
|
||
break;
|
||
case g:
|
||
h = (b - r) / d + 2;
|
||
break;
|
||
case b:
|
||
h = (r - g) / d + 4;
|
||
break;
|
||
}
|
||
h /= 6;
|
||
}
|
||
|
||
s = s * 100;
|
||
s = Math.round(s);
|
||
l = l * 100;
|
||
l = Math.round(l);
|
||
h = Math.round(360 * h);
|
||
|
||
return {
|
||
h: h,
|
||
s: s + '%',
|
||
l: l + '%',
|
||
};
|
||
},
|
||
setCssVariable(key, color) {
|
||
const hslColor = this.hexToHSL(color);
|
||
document.documentElement.style.setProperty(`--${key}-h`, hslColor.h);
|
||
document.documentElement.style.setProperty(`--${key}-s`, hslColor.s);
|
||
document.documentElement.style.setProperty(`--${key}-l`, hslColor.l);
|
||
},
|
||
copyCssVariables() {
|
||
const cssVariables = document
|
||
.querySelector('html')
|
||
.getAttribute('style');
|
||
this.cssVariables = cssVariables
|
||
? cssVariables
|
||
: '没有进行颜色修改，请先修改颜色！';
|
||
this.visible = true;
|
||
},
|
||
},
|
||
});
|
||
</script>
|
||
</html>
|