mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-30 02:08:12 +08:00
chore(core): deprecate storybook (#343)
This commit is contained in:
jeremywu
GitHub
parent
fc308b7b4c
commit
7999433dd4
@ -1,69 +0,0 @@
|
|||||||
var VueLoaderPlugin = require('vue-loader/dist/plugin');
|
|
||||||
const path = require('path')
|
|
||||||
|
|
||||||
function webpack(config) {
|
|
||||||
return {
|
|
||||||
...config,
|
|
||||||
plugins: [...config.plugins, new VueLoaderPlugin.default()],
|
|
||||||
module: {
|
|
||||||
...config.module,
|
|
||||||
rules: [
|
|
||||||
...config.module.rules,
|
|
||||||
{
|
|
||||||
test: /\.vue$/,
|
|
||||||
loader: require.resolve('vue-loader'),
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(sass|scss)$/,
|
|
||||||
use: [
|
|
||||||
'style-loader',
|
|
||||||
'css-loader',
|
|
||||||
{
|
|
||||||
loader: 'sass-loader',
|
|
||||||
options: {
|
|
||||||
implementation: require('sass'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
include: path.resolve(__dirname, '../'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.stories\.ts$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: require.resolve('./export-loader')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: require.resolve('ts-loader'),
|
|
||||||
options: {
|
|
||||||
transpileOnly: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(ts|tsx)$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: require.resolve('ts-loader'),
|
|
||||||
options: {
|
|
||||||
transpileOnly: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
...config.resolve,
|
|
||||||
extensions: [...config.resolve.extensions, '.vue', '.ts'],
|
|
||||||
alias: {
|
|
||||||
...config.resolve.alias,
|
|
||||||
vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.webpack = webpack;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
body {
|
|
||||||
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
module.exports = function (content, map, meta) {
|
|
||||||
content = content.replace(
|
|
||||||
/^export\s*{\s*default as (.+?)}(.+)/mg,`
|
|
||||||
import _$1 $2
|
|
||||||
export const $1 = () => _$1
|
|
||||||
`.trim())
|
|
||||||
this.callback(null, content, map, meta)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
const path = require('path');
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
stories: ['../packages/**/doc/*.stories.[tj]s'],
|
|
||||||
presets: [path.resolve(__dirname, './custom-presets')],
|
|
||||||
addons: ['@storybook/addon-storysource'],
|
|
||||||
};
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import { addDecorator } from '@storybook/html'
|
|
||||||
import { createApp } from 'vue'
|
|
||||||
// import '../src/style/element-ui@2.13.2.css'
|
|
||||||
import '../packages/theme-chalk/src/index.scss'
|
|
||||||
import ElementUI from '../packages/element-plus'
|
|
||||||
import './demo.css'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wraps a story into a Vue Element
|
|
||||||
* @param {JSX.Element} template - Story templates
|
|
||||||
* @param {VueElement}
|
|
||||||
*/
|
|
||||||
const Wrapper = (template) => {
|
|
||||||
return {
|
|
||||||
data() {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
template,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Custom Addon for previewing ElementPlus component in Vue3
|
|
||||||
* Due to lacking of support for Vue3, the rendering method has to be made by ourself
|
|
||||||
* This method takes a template string as parameter returns a HTMLElement which will be inserted to the iframe root node by `@StoryBook`
|
|
||||||
* @param {Story} content
|
|
||||||
* @return {HTMLElement}
|
|
||||||
*/
|
|
||||||
function CustomDecorator(content, context) {
|
|
||||||
const templateOrComponent = content()
|
|
||||||
const app = typeof templateOrComponent === 'string'
|
|
||||||
? createApp(Wrapper(templateOrComponent))
|
|
||||||
: createApp(templateOrComponent)
|
|
||||||
ElementUI.install(app)
|
|
||||||
const entry = document.createElement('div')
|
|
||||||
entry.className = 'element-plus-previewer'
|
|
||||||
app.mount(entry)
|
|
||||||
return entry
|
|
||||||
}
|
|
||||||
|
|
||||||
addDecorator(CustomDecorator);
|
|
||||||
@ -6,7 +6,6 @@
|
|||||||
"cz": "npx git-cz",
|
"cz": "npx git-cz",
|
||||||
"test": "jest",
|
"test": "jest",
|
||||||
"gen": "bash ./scripts/gc.sh",
|
"gen": "bash ./scripts/gc.sh",
|
||||||
"storybook": "start-storybook",
|
|
||||||
"bootstrap": "yarn && npx lerna bootstrap",
|
"bootstrap": "yarn && npx lerna bootstrap",
|
||||||
"build": "yarn bootstrap && yarn build:lib && yarn build:theme",
|
"build": "yarn bootstrap && yarn build:lib && yarn build:theme",
|
||||||
"build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
|
"build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
|
||||||
@ -23,8 +22,6 @@
|
|||||||
"@babel/core": "^7.11.4",
|
"@babel/core": "^7.11.4",
|
||||||
"@commitlint/cli": "^9.1.2",
|
"@commitlint/cli": "^9.1.2",
|
||||||
"@commitlint/config-conventional": "^9.1.2",
|
"@commitlint/config-conventional": "^9.1.2",
|
||||||
"@storybook/addon-storysource": "^6.0.20",
|
|
||||||
"@storybook/html": "^6.0.20",
|
|
||||||
"@swc-node/jest": "^0.3.4",
|
"@swc-node/jest": "^0.3.4",
|
||||||
"@types/jest": "^26.0.10",
|
"@types/jest": "^26.0.10",
|
||||||
"@types/lodash": "^4.14.161",
|
"@types/lodash": "^4.14.161",
|
||||||
@ -36,6 +33,7 @@
|
|||||||
"algoliasearch": "^4.4.0",
|
"algoliasearch": "^4.4.0",
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.1.0",
|
||||||
"babel-preset-vue": "^2.0.2",
|
"babel-preset-vue": "^2.0.2",
|
||||||
|
"cp-cli": "^2.0.0",
|
||||||
"cross-env": "^7.0.2",
|
"cross-env": "^7.0.2",
|
||||||
"css-loader": "^4.2.2",
|
"css-loader": "^4.2.2",
|
||||||
"cz-conventional-changelog": "^3.3.0",
|
"cz-conventional-changelog": "^3.3.0",
|
||||||
@ -45,6 +43,7 @@
|
|||||||
"highlight.js": "^10.1.2",
|
"highlight.js": "^10.1.2",
|
||||||
"html-webpack-plugin": "^4.3.0",
|
"html-webpack-plugin": "^4.3.0",
|
||||||
"husky": "^4.2.5",
|
"husky": "^4.2.5",
|
||||||
|
"import-from": "^3.0.0",
|
||||||
"jest": "^26.4.2",
|
"jest": "^26.4.2",
|
||||||
"lerna": "^3.22.1",
|
"lerna": "^3.22.1",
|
||||||
"lint-staged": "^10.2.13",
|
"lint-staged": "^10.2.13",
|
||||||
@ -92,7 +91,6 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@popperjs/core": "^2.4.4",
|
"@popperjs/core": "^2.4.4",
|
||||||
"cp-cli": "^2.0.0",
|
|
||||||
"dayjs": "1.x",
|
"dayjs": "1.x",
|
||||||
"lodash": "^4.17.20",
|
"lodash": "^4.17.20",
|
||||||
"mitt": "^2.1.0"
|
"mitt": "^2.1.0"
|
||||||
|
|||||||
@ -1,51 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<el-alert
|
|
||||||
title="success alert"
|
|
||||||
type="success"
|
|
||||||
/>
|
|
||||||
<el-alert
|
|
||||||
title="info alert"
|
|
||||||
type="info"
|
|
||||||
/>
|
|
||||||
<el-alert
|
|
||||||
title="warning alert"
|
|
||||||
type="warning"
|
|
||||||
/>
|
|
||||||
<el-alert
|
|
||||||
title="error alert"
|
|
||||||
type="error"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-alert
|
|
||||||
title="success alert"
|
|
||||||
type="success"
|
|
||||||
show-icon
|
|
||||||
/>
|
|
||||||
<el-alert
|
|
||||||
title="info alert"
|
|
||||||
type="info"
|
|
||||||
effect="dark"
|
|
||||||
/>
|
|
||||||
<el-alert
|
|
||||||
title="warning alert"
|
|
||||||
type="warning"
|
|
||||||
:closable="false"
|
|
||||||
/>
|
|
||||||
<el-alert
|
|
||||||
title="error alert"
|
|
||||||
type="error"
|
|
||||||
center
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-alert {
|
|
||||||
margin: 6px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Alert',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-row class="demo-avatar demo-basic">
|
|
||||||
<el-col :span="12">
|
|
||||||
<div class="sub-title">circle</div>
|
|
||||||
<div class="demo-basic--circle">
|
|
||||||
<div class="block"><el-avatar :size="50" :src="circleUrl" /></div>
|
|
||||||
<div v-for="size in sizeList" :key="size" class="block">
|
|
||||||
<el-avatar :size="size" :src="circleUrl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<div class="sub-title">square</div>
|
|
||||||
<div class="demo-basic--circle">
|
|
||||||
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl" /></div>
|
|
||||||
<div v-for="size in sizeList" :key="size" class="block">
|
|
||||||
<el-avatar shape="square" :size="size" :src="squareUrl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
|
|
||||||
squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
|
|
||||||
sizeList: ['large', 'medium', 'small'],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.demo-avatar .sub-title {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #8492a6;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-avatar.demo-basic .demo-basic--circle,
|
|
||||||
.demo-avatar.demo-basic .demo-basic--square {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-avatar.demo-basic .demo-basic--circle .block:not(:last-child),
|
|
||||||
.demo-avatar.demo-basic .demo-basic--square .block:not(:last-child) {
|
|
||||||
flex: 1;
|
|
||||||
border-right: 1px solid rgba(224,230,237,.5);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-fit">
|
|
||||||
<div v-for="fit in fits" :key="fit" class="block">
|
|
||||||
<span class="title">{{ fit }}</span>
|
|
||||||
<el-avatar
|
|
||||||
shape="square"
|
|
||||||
:size="100"
|
|
||||||
:fit="fit"
|
|
||||||
:src="url"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
|
||||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.demo-fit {
|
|
||||||
display:flex;
|
|
||||||
text-align:center;
|
|
||||||
justify-content:space-between
|
|
||||||
}
|
|
||||||
.demo-fit .block {
|
|
||||||
flex:auto;
|
|
||||||
display:flex;
|
|
||||||
flex-direction:column;
|
|
||||||
flex-grow:0
|
|
||||||
}
|
|
||||||
.demo-fit .title {
|
|
||||||
margin-bottom:10px;
|
|
||||||
font-size:14px;
|
|
||||||
color:#8492a6
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Avatar',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
export { default as FitAvatarContainer } from './fit-container.vue'
|
|
||||||
|
|
||||||
export const differentAvatarTypes = () => `
|
|
||||||
<div class="demo-type">
|
|
||||||
<div>
|
|
||||||
<el-avatar icon="el-icon-user-solid"></el-avatar>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-avatar> user </el-avatar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
export const fallbackWhenImageLoadsError = () => `
|
|
||||||
<div class="demo-type">
|
|
||||||
<el-avatar :size="60" src="https://empty">
|
|
||||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
|
||||||
</el-avatar>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="visible" class="target" style="height:400px; overflow-y: auto">
|
|
||||||
<div style="height: 1000px; width: 100%">
|
|
||||||
<el-backtop target=".target">
|
|
||||||
<div
|
|
||||||
style="{
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f2f5f6;
|
|
||||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 40px;
|
|
||||||
color: #1989fa;
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
UP
|
|
||||||
</div>
|
|
||||||
</el-backtop>
|
|
||||||
<el-backtop target=".target" :bottom="100" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { onMounted, defineComponent, ref } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
setup() {
|
|
||||||
const visible = ref(false)
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
visible.value = true
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
visible,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Backtop',
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-badge :value="12" class="item">
|
|
||||||
<el-button size="small">comments</el-button>
|
|
||||||
</el-badge>
|
|
||||||
<el-badge :value="3" class="item">
|
|
||||||
<el-button size="small">replies</el-button>
|
|
||||||
</el-badge>
|
|
||||||
<el-badge :value="1" class="item" type="primary">
|
|
||||||
<el-button size="small">comments</el-button>
|
|
||||||
</el-badge>
|
|
||||||
<el-badge :value="2" class="item" type="warning">
|
|
||||||
<el-button size="small">replies</el-button>
|
|
||||||
</el-badge>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.item {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Badge',
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-breadcrumb separator="/">
|
|
||||||
<el-breadcrumb-item to="/">First</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item><a href="/">Second</a></el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>Third</el-breadcrumb-item>
|
|
||||||
<el-breadcrumb-item>Forth</el-breadcrumb-item>
|
|
||||||
</el-breadcrumb>
|
|
||||||
</template>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Breadcrumb',
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Button',
|
|
||||||
}
|
|
||||||
|
|
||||||
export const NormalButton = (): string => '<el-button>With Text</el-button>'
|
|
||||||
export const ButtonTwo = (): string => '<el-button>button two</el-button>'
|
|
||||||
export const ButtonGroup = (): string => `<el-button-group>
|
|
||||||
<el-button type="primary" icon="el-icon-arrow-left">Left</el-button>
|
|
||||||
<el-button type="primary">Right<i class="el-icon-arrow-right el-icon--right"></i></el-button>
|
|
||||||
</el-button-group>`
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-card class="box-card">
|
|
||||||
<template #header class="clearfix">
|
|
||||||
<span>Card name</span>
|
|
||||||
<el-button style="float: right; padding: 3px 0" type="text" @click="alert">Click Me</el-button>
|
|
||||||
</template>
|
|
||||||
<div v-for="o in 4" :key="o" class="text item">{{ 'List Content ' + o }}</div>
|
|
||||||
</el-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
alert(): void {
|
|
||||||
alert('Why do you click me?')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Card',
|
|
||||||
}
|
|
||||||
|
|
||||||
export const BasicCard = () :string => '<el-card header="I am the header">basic card</el-card>'
|
|
||||||
export const MinimalCard = (): string => '<el-card>Minimal card with no header</el-card>'
|
|
||||||
export { default as ComplexCard } from './complex.vue'
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-carousel :interval="4000" type="card" height="200px">
|
|
||||||
<el-carousel-item v-for="item in 6" :key="item">
|
|
||||||
<h3 class="medium">{{ item }}</h3>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</template>
|
|
||||||
<script lang="ts"></script>
|
|
||||||
<style>
|
|
||||||
.el-carousel__item h3 {
|
|
||||||
color: #475669;
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: 0.75;
|
|
||||||
line-height: 200px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__item:nth-child(2n) {
|
|
||||||
background-color: #99a9bf;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__item:nth-child(2n + 1) {
|
|
||||||
background-color: #d3dce6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-carousel height="200px" direction="vertical" :autoplay="false">
|
|
||||||
<el-carousel-item v-for="item in 3" :key="item">
|
|
||||||
<h3 class="medium">{{ item }}</h3>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-carousel__item h3 {
|
|
||||||
color: #475669;
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: 0.75;
|
|
||||||
line-height: 200px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__item:nth-child(2n) {
|
|
||||||
background-color: #99a9bf;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__item:nth-child(2n + 1) {
|
|
||||||
background-color: #d3dce6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="carousel">
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">默认 Hover 指示器触发</span>
|
|
||||||
<el-carousel height="150px">
|
|
||||||
<el-carousel-item v-for="item in 4" :key="item">
|
|
||||||
<h3 class="small">{{ item }}</h3>
|
|
||||||
</el-carousel-item>
|
|
||||||
</el-carousel>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.el-carousel__container {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.demonstration {
|
|
||||||
display: block;
|
|
||||||
color: #8492a6;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.el-carousel__item h3 {
|
|
||||||
color: #475669;
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: 0.75;
|
|
||||||
line-height: 150px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__item:nth-child(2n) {
|
|
||||||
background-color: #99a9bf;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-carousel__item:nth-child(2n + 1) {
|
|
||||||
background-color: #d3dce6;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export { default as BasicUsage } from './carousel.vue'
|
|
||||||
export { default as CardUsage } from './carousel-card.vue'
|
|
||||||
export { default as VerticalUsage } from './carousel-vertical.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Carousel',
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-checkbox v-model="checked" @change="onChange">{{ checked }}</el-checkbox>
|
|
||||||
<el-checkbox v-model="checked1" disabled>{{ checked1 }}</el-checkbox>
|
|
||||||
<el-checkbox v-model="checked2" disabled>{{ checked2 }}</el-checkbox>
|
|
||||||
<el-checkbox v-model="checked1" label="A" border />
|
|
||||||
<el-checkbox v-model="checked2" border />
|
|
||||||
<el-checkbox v-model="checked4" true-label="a" :false-label="3" />
|
|
||||||
{{ checked4 }}
|
|
||||||
<el-checkbox-button v-model="checkbox" label="a" />
|
|
||||||
<el-checkbox-group v-model="checkList">
|
|
||||||
<el-checkbox label="A" />
|
|
||||||
<el-checkbox label="B" />
|
|
||||||
<el-checkbox label="C" />
|
|
||||||
<el-checkbox label="D" disabled />
|
|
||||||
<el-checkbox label="Ha" disabled />
|
|
||||||
</el-checkbox-group>
|
|
||||||
{{ checkList }}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
export default defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checked: false,
|
|
||||||
checked1: false,
|
|
||||||
checked2: true,
|
|
||||||
checkList: ['Ha','A'],
|
|
||||||
checked4: 3,
|
|
||||||
checkbox: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange(val) {
|
|
||||||
console.log(val)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">All Selected</el-checkbox>
|
|
||||||
<div style="margin: 15px 0;"></div>
|
|
||||||
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
|
|
||||||
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<el-checkbox-group
|
|
||||||
v-model="checkedCities"
|
|
||||||
:min="1"
|
|
||||||
:max="2"
|
|
||||||
>
|
|
||||||
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<div>
|
|
||||||
<el-checkbox-group v-model="checkboxGroup1">
|
|
||||||
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 20px">
|
|
||||||
<el-checkbox-group v-model="checkboxGroup2" size="medium">
|
|
||||||
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 20px">
|
|
||||||
<el-checkbox-group v-model="checkboxGroup3" size="small">
|
|
||||||
<el-checkbox-button
|
|
||||||
v-for="city in cities"
|
|
||||||
:key="city"
|
|
||||||
:label="city"
|
|
||||||
:disabled="city === 'London'"
|
|
||||||
>
|
|
||||||
{{ city }}
|
|
||||||
</el-checkbox-button>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 20px">
|
|
||||||
<el-checkbox-group v-model="checkboxGroup4" :size="size" disabled>
|
|
||||||
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
const cityOptions = ['NYC', 'London', 'Tokyo', 'Singapore']
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checkAll: false,
|
|
||||||
checkedCities: ['NYC', 'London'],
|
|
||||||
cities: cityOptions,
|
|
||||||
isIndeterminate: true,
|
|
||||||
checkboxGroup1: ['NYC'],
|
|
||||||
checkboxGroup2: ['NYC'],
|
|
||||||
checkboxGroup3: ['NYC'],
|
|
||||||
checkboxGroup4: ['NYC'],
|
|
||||||
|
|
||||||
size: 'mini',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
setTimeout(() => this.size = 'medium', 3000)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleCheckAllChange(val) {
|
|
||||||
this.checkedCities = val ? cityOptions : []
|
|
||||||
this.isIndeterminate = false
|
|
||||||
},
|
|
||||||
handleCheckedCitiesChange(value) {
|
|
||||||
let checkedCount = value.length
|
|
||||||
this.checkAll = checkedCount === this.cities.length
|
|
||||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
export { default as GroupUsage } from './group.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Checkbox',
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div>accordion: false</div>
|
|
||||||
<el-collapse v-model="activeNames" @update:modelValue="handleChange">
|
|
||||||
<el-collapse-item title="title1" name="1">
|
|
||||||
<div>content 1</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="title2" name="2">
|
|
||||||
<div>content 2</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="title3" name="3">
|
|
||||||
<div>content 3</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="title4">
|
|
||||||
<div>content 4</div>
|
|
||||||
<div>content 4-1</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
<hr>
|
|
||||||
<div>accordion: true</div>
|
|
||||||
<el-collapse v-model="activeNames2" accordion>
|
|
||||||
<el-collapse-item title="title1" name="1">
|
|
||||||
<div>content 1</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="title2" name="2">
|
|
||||||
<div>content 2</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="title3" name="3">
|
|
||||||
<div>content 3</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
<el-collapse-item title="title4">
|
|
||||||
<div>content 4</div>
|
|
||||||
<div>content 4-1</div>
|
|
||||||
</el-collapse-item>
|
|
||||||
</el-collapse>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeNames: ['1'],
|
|
||||||
activeNames2: ['1'],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange(val) {
|
|
||||||
console.log(val)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Collapse',
|
|
||||||
}
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
</el-container>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
<el-footer>Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">Aside</el-aside>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
</el-container>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">Aside</el-aside>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">Aside</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
<el-footer>Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">Aside</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
<el-container>
|
|
||||||
<el-aside width="200px">Aside</el-aside>
|
|
||||||
<el-container>
|
|
||||||
<el-header>Header</el-header>
|
|
||||||
<el-main>Main</el-main>
|
|
||||||
<el-footer>Footer</el-footer>
|
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-header, .el-footer {
|
|
||||||
background-color: #B3C0D1;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 60px;
|
|
||||||
}
|
|
||||||
.el-aside {
|
|
||||||
background-color: #D3DCE6;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 200px;
|
|
||||||
}
|
|
||||||
.el-main {
|
|
||||||
background-color: #E9EEF3;
|
|
||||||
color: #333;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 160px;
|
|
||||||
}
|
|
||||||
body > .el-container {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Container',
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Dialog',
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-divider class="item" />
|
|
||||||
<el-divider class="item" @click="handleClick">click me</el-divider>
|
|
||||||
<el-divider class="item" content-position="left">清风徐来</el-divider>
|
|
||||||
<el-divider class="item" content-position="right">水波不兴</el-divider>
|
|
||||||
<el-divider class="item"><i class="el-icon-mobile-phone"></i></el-divider>
|
|
||||||
<div class="item">
|
|
||||||
<span>雨纷纷</span>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<span>旧故里</span>
|
|
||||||
<el-divider direction="vertical" />
|
|
||||||
<span>草木深</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Basic',
|
|
||||||
setup() {
|
|
||||||
const handleClick = () => alert('click')
|
|
||||||
return {
|
|
||||||
handleClick,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.item {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Divider',
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<label>
|
|
||||||
<input type="radio" :checked="direction === 'ltr'" @click="change('ltr')">从左到右
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" :checked="direction === 'rtl'" @click="change('rtl')">从右到左
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" :checked="direction === 'ttb'" @click="change('ttb')">从上到下
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" :checked="direction === 'btt'" @click="change('btt')">从下到上
|
|
||||||
</label>
|
|
||||||
<el-button @click="open">点击打开</el-button>
|
|
||||||
<el-drawer
|
|
||||||
v-model="visible"
|
|
||||||
size="50%"
|
|
||||||
title="我是标题"
|
|
||||||
:direction="direction"
|
|
||||||
>
|
|
||||||
<span>嵌套一层!</span>
|
|
||||||
<el-button @click="visible2 = true">点击打开</el-button>
|
|
||||||
<el-drawer
|
|
||||||
v-model="visible2"
|
|
||||||
:append-to-body="true"
|
|
||||||
title="我是标题"
|
|
||||||
:direction="direction"
|
|
||||||
>
|
|
||||||
<span>第二层!</span>
|
|
||||||
</el-drawer>
|
|
||||||
</el-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent(() => {
|
|
||||||
const direction = ref('ltr')
|
|
||||||
const visible = ref(false)
|
|
||||||
const visible2 = ref(false)
|
|
||||||
const open = () => {
|
|
||||||
visible.value = true
|
|
||||||
}
|
|
||||||
const change = val => {
|
|
||||||
direction.value = val
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
open,
|
|
||||||
direction,
|
|
||||||
visible,
|
|
||||||
visible2,
|
|
||||||
change,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Drawer',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-dropdown ref="c" placement="right" :hide-on-click="false">
|
|
||||||
<span ref="a" class="el-dropdown-link">
|
|
||||||
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu ref="b">
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown trigger="click" :hide-on-click="false">
|
|
||||||
<span class="el-dropdown-link">
|
|
||||||
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</span>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown>
|
|
||||||
<el-button type="primary">
|
|
||||||
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown @command="handleCommand">
|
|
||||||
<el-button type="primary">
|
|
||||||
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
|
|
||||||
</el-button>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item command="a">Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="b">Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="c">Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="d" disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item command="e" divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown split-button type="primary" @click="handleClick">
|
|
||||||
dropdown
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown
|
|
||||||
split-button
|
|
||||||
size="medium"
|
|
||||||
type="primary"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
dropdown
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown
|
|
||||||
split-button
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
dropdown
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
<el-dropdown
|
|
||||||
split-button
|
|
||||||
size="mini"
|
|
||||||
type="primary"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
dropdown
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<el-dropdown-item>Apple</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Orange</el-dropdown-item>
|
|
||||||
<el-dropdown-item>Cherry</el-dropdown-item>
|
|
||||||
<el-dropdown-item disabled>Peach</el-dropdown-item>
|
|
||||||
<el-dropdown-item divided>Pear</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
export default defineComponent({
|
|
||||||
methods: {
|
|
||||||
handleClick() {
|
|
||||||
alert('button click')
|
|
||||||
},
|
|
||||||
handleCommand(command) {
|
|
||||||
alert('click on item ' + command)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-dropdown-link {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #409EFF;
|
|
||||||
}
|
|
||||||
.el-icon-arrow-down {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.el-dropdown-menu__item {
|
|
||||||
word-break: keep-all;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Dropdown',
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-icon name="edit" />
|
|
||||||
<el-icon name="share" />
|
|
||||||
<el-icon name="delete" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
i {
|
|
||||||
color: #606266;
|
|
||||||
margin: 0 20px;
|
|
||||||
font-size: 1.5em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Icon',
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-image">
|
|
||||||
<div v-for="fit in fits" :key="fit" class="block">
|
|
||||||
<div class="demonstration">{{ fit }}</div>
|
|
||||||
<br>
|
|
||||||
<el-image
|
|
||||||
style="width: 100px; height: 100px"
|
|
||||||
:src="url"
|
|
||||||
:fit="fit"
|
|
||||||
alt="111"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
|
|
||||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.demo-image {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.block {
|
|
||||||
margin: 0 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.demo-image .demonstration {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-image__preview">
|
|
||||||
<el-image
|
|
||||||
style="width: 100px; height: 100px"
|
|
||||||
:src="url"
|
|
||||||
:preview-src-list="srcList"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
||||||
srcList: [
|
|
||||||
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
</style>
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-image__error">
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">默认</span>
|
|
||||||
<el-image />
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">自定义</span>
|
|
||||||
<el-image>
|
|
||||||
<template #error>
|
|
||||||
<div class="image-slot">
|
|
||||||
<i class="el-icon-picture-outline"></i>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.demo-image__error .block {
|
|
||||||
padding: 30px 0;
|
|
||||||
text-align: center;
|
|
||||||
border-right: 1px solid #eff2f6;
|
|
||||||
display: inline-block;
|
|
||||||
width: 49%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
vertical-align: top;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.demo-image__error .image-slot {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #f5f7fa;
|
|
||||||
color: #909399;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-image__error .demonstration {
|
|
||||||
display: block;
|
|
||||||
color: #8492a6;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.demo-image__error .el-image {
|
|
||||||
width: 300px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
export { default as LoadError } from './error.vue'
|
|
||||||
export { default as LoadPlaceholder } from './placeholder.vue'
|
|
||||||
export { default as LazyLoad } from './lazyload.vue'
|
|
||||||
export { default as BigImage } from './bigImage.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Image',
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-image__lazy" style="overflow: auto;height: 400px;">
|
|
||||||
<el-image
|
|
||||||
v-for="url in urls"
|
|
||||||
:key="url"
|
|
||||||
:src="url"
|
|
||||||
lazy
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
urls: [
|
|
||||||
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
|
||||||
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.demo-image__lazy {
|
|
||||||
height: 400px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.demo-image__lazy .el-image {
|
|
||||||
display: block;
|
|
||||||
min-height: 250px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
.demo-image__lazy .el-image:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-image__placeholder">
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">默认</span>
|
|
||||||
<el-image :src="src" />
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">自定义</span>
|
|
||||||
<el-image :src="src">
|
|
||||||
<template #placeholder>
|
|
||||||
<div class="image-slot">
|
|
||||||
加载中<span class="dot">...</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-image>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.demo-image__placeholder .block {
|
|
||||||
padding: 30px 0;
|
|
||||||
text-align: center;
|
|
||||||
border-right: 1px solid #eff2f6;
|
|
||||||
display: inline-block;
|
|
||||||
width: 49%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
vertical-align: top;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.demo-image__placeholder .image-slot {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #f5f7fa;
|
|
||||||
color: #909399;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.demo-image__placeholder .el-image {
|
|
||||||
width: 300px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
.demo-image__placeholder .demonstration {
|
|
||||||
display: block;
|
|
||||||
color: #8492a6;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ul v-infinite-scroll="load" class="infinite-list">
|
|
||||||
<li v-for="i in count" :key="i">{{ i }}</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const count = ref(0)
|
|
||||||
|
|
||||||
const load = () => {
|
|
||||||
count.value += 2
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
count,
|
|
||||||
load,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.infinite-list {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 50px;
|
|
||||||
background: #e8f3fe;
|
|
||||||
margin: 10px;
|
|
||||||
color: lighten(#1989fa, 20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ul
|
|
||||||
v-infinite-scroll="load"
|
|
||||||
infinite-scroll-disabled="disabled"
|
|
||||||
class="infinite-list"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
v-for="i in count"
|
|
||||||
:key="i"
|
|
||||||
class="list-item"
|
|
||||||
>
|
|
||||||
{{ i }}
|
|
||||||
</li>
|
|
||||||
<li v-if="loading">Loading...</li>
|
|
||||||
<li v-if="noMore">No more</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const count = ref(0)
|
|
||||||
const loading = ref(false)
|
|
||||||
const noMore = computed(() => count.value >= 20)
|
|
||||||
const disabled = computed(() => loading.value || noMore.value)
|
|
||||||
|
|
||||||
const load = () => {
|
|
||||||
loading.value = true
|
|
||||||
setTimeout(() => {
|
|
||||||
count.value += 2
|
|
||||||
loading.value = false
|
|
||||||
}, 2000)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
count,
|
|
||||||
loading,
|
|
||||||
noMore,
|
|
||||||
disabled,
|
|
||||||
load,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
.infinite-list {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 50px;
|
|
||||||
background: #e8f3fe;
|
|
||||||
margin: 10px;
|
|
||||||
color: lighten(#1989fa, 20%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'InfiniteScroll',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
export { default as LimitedScroll } from './disabled.vue'
|
|
||||||
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>基础用法</h3>
|
|
||||||
<el-input v-model="input1" placeholder="请输入内容" />
|
|
||||||
</div>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>禁用状态</h3>
|
|
||||||
<el-input v-model="input1" placeholder="请输入内容" :disabled="true" />
|
|
||||||
</div>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>可清空</h3>
|
|
||||||
<el-input v-model="input2" placeholder="请输入内容" clearable />
|
|
||||||
</div>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>密码框</h3>
|
|
||||||
<el-input v-model="input3" placeholder="请输入密码" show-password />
|
|
||||||
</div>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>带 icon 的输入框</h3>
|
|
||||||
<div class="demo-input-suffix">
|
|
||||||
属性方式：
|
|
||||||
<el-input v-model="input1" placeholder="请选择日期" suffix-icon="el-icon-date" />
|
|
||||||
<el-input v-model="input2" placeholder="请输入内容" prefix-icon="el-icon-search" />
|
|
||||||
</div>
|
|
||||||
<div class="demo-input-suffix">
|
|
||||||
slot 方式：
|
|
||||||
<el-input v-model="input3" placeholder="请选择日期">
|
|
||||||
<template #suffix>
|
|
||||||
<i class="el-input__icon el-icon-date"></i>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
<el-input v-model="input4" placeholder="请输入内容">
|
|
||||||
<template #prefix>
|
|
||||||
<i class="el-input__icon el-icon-search"></i>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
input1: '1111',
|
|
||||||
input2: '2222',
|
|
||||||
input3: '',
|
|
||||||
input4: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.demo-input-suffix {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.demo-input .el-input {
|
|
||||||
width: 180px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-input v-model="input1" placeholder="请输入内容">
|
|
||||||
<template #prepend>Http://</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 15px;">
|
|
||||||
<el-input v-model="input2" placeholder="请输入内容">
|
|
||||||
<template #append>.com</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 15px;">
|
|
||||||
<el-input v-model="input3" class="input-with-select" placeholder="请输入内容">
|
|
||||||
<!-- <el-select v-model="select" slot="prepend" placeholder="请选择">
|
|
||||||
<el-option label="餐厅名" value="1"></el-option>
|
|
||||||
<el-option label="订单号" value="2"></el-option>
|
|
||||||
<el-option label="用户电话" value="3"></el-option>
|
|
||||||
</el-select> -->
|
|
||||||
<template #append>
|
|
||||||
<el-button icon="el-icon-search" />
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
input1: '1111',
|
|
||||||
input2: '2222',
|
|
||||||
input3: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.demo-input .el-input {
|
|
||||||
width: 180px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
export { default as TextareaUsage } from './textarea.vue'
|
|
||||||
export { default as CompositionUsage } from './composition.vue'
|
|
||||||
export { default as SizeUsage } from './size.vue'
|
|
||||||
export { default as LengthUsage } from './length.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Input',
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-input
|
|
||||||
v-model="text"
|
|
||||||
type="text"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
maxlength="10"
|
|
||||||
show-word-limit
|
|
||||||
/>
|
|
||||||
<div style="margin: 20px 0;"></div>
|
|
||||||
<el-input
|
|
||||||
v-model="textarea"
|
|
||||||
type="textarea"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
maxlength="30"
|
|
||||||
show-word-limit
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
text: '',
|
|
||||||
textarea: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-input-size">
|
|
||||||
<el-input v-model="input1" placeholder="请输入内容" suffix-icon="el-icon-date" />
|
|
||||||
<el-input
|
|
||||||
v-model="input2"
|
|
||||||
size="medium"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
suffix-icon="el-icon-date"
|
|
||||||
/>
|
|
||||||
<el-input
|
|
||||||
v-model="input3"
|
|
||||||
size="small"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
suffix-icon="el-icon-date"
|
|
||||||
/>
|
|
||||||
<el-input
|
|
||||||
v-model="input4"
|
|
||||||
size="mini"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
suffix-icon="el-icon-date"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
input1: '1111',
|
|
||||||
input2: '2222',
|
|
||||||
input3: '',
|
|
||||||
input4: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.demo-input-size .el-input {
|
|
||||||
width: 180px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>文本域</h3>
|
|
||||||
<el-input
|
|
||||||
v-model="textarea1"
|
|
||||||
:rows="2"
|
|
||||||
type="textarea"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="demo-input">
|
|
||||||
<h3>可自适应文本高度的文本域</h3>
|
|
||||||
<el-input
|
|
||||||
v-model="textarea2"
|
|
||||||
type="textarea"
|
|
||||||
autosize
|
|
||||||
placeholder="请输入内容"
|
|
||||||
/>
|
|
||||||
<div style="margin: 20px 0;"></div>
|
|
||||||
<el-input
|
|
||||||
v-model="textarea3"
|
|
||||||
type="textarea"
|
|
||||||
:autosize="{minRows: 3, maxRows: 5}"
|
|
||||||
placeholder="请输入内容"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
textarea1: 'sda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasd',
|
|
||||||
textarea2: 'sda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasd',
|
|
||||||
textarea3: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.demo-input .el-textarea {
|
|
||||||
width: 414px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
|
|
||||||
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
|
|
||||||
</el-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-row {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.el-row:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.el-col {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.bg-purple-dark {
|
|
||||||
background: #99a9bf;
|
|
||||||
}
|
|
||||||
.bg-purple {
|
|
||||||
background: #d3dce6;
|
|
||||||
}
|
|
||||||
.bg-purple-light {
|
|
||||||
background: #e5e9f2;
|
|
||||||
}
|
|
||||||
.grid-content {
|
|
||||||
border-radius: 4px;
|
|
||||||
min-height: 36px;
|
|
||||||
}
|
|
||||||
.row-bg {
|
|
||||||
padding: 10px 0;
|
|
||||||
background-color: #f9fafc;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Layout',
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Link',
|
|
||||||
}
|
|
||||||
|
|
||||||
const commonProps = 'href="https://vuejs.org" target="_blank" rel="noreferrer noopener" style="margin-right: 10px;"'
|
|
||||||
|
|
||||||
export const BasicLinks = () => `
|
|
||||||
<el-link ${commonProps}>normal link</el-link>
|
|
||||||
<el-link ${commonProps} type="primary">primary link</el-link>
|
|
||||||
<el-link ${commonProps} type="success">success link</el-link>
|
|
||||||
<el-link ${commonProps} type="info">info link</el-link>
|
|
||||||
<el-link ${commonProps} type="warning">warning link</el-link>
|
|
||||||
<el-link ${commonProps} type="danger">error link</el-link>
|
|
||||||
`
|
|
||||||
|
|
||||||
export const DisabledLinks = () => `
|
|
||||||
<el-link disabled="true" ${commonProps}>disabled link</el-link>
|
|
||||||
`
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-button class="item" @click="onClick">With timer</el-button>
|
|
||||||
<el-button class="item" @click="onClickNoTimer">Without timer</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
onClick(): void {
|
|
||||||
this.$notify({
|
|
||||||
title: 'With Timer',
|
|
||||||
message: 'I\'ll go away within 4500ms ',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onClickNoTimer(): void {
|
|
||||||
this.$notify({
|
|
||||||
duration: 0,
|
|
||||||
message: 'I will not disappear unless you click close or press esc',
|
|
||||||
title: 'No Timer',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.item {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Notification',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicNotification } from './standealone.vue'
|
|
||||||
export { default as AdvancedNotification } from './vnode.vue'
|
|
||||||
export { default as Closable } from './closable.vue'
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-button class="item" @click="onClick">Normal</el-button>
|
|
||||||
<el-button class="item" @click="onClickSuccess">Success</el-button>
|
|
||||||
<el-button class="item" @click="onClickWarning">Warning</el-button>
|
|
||||||
<el-button class="item" @click="onClickInfo">Info</el-button>
|
|
||||||
<el-button class="item" @click="onClickError">Error</el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import Notify from '../src/notify'
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
onClick(): void {
|
|
||||||
Notify({
|
|
||||||
title: 'Normal title',
|
|
||||||
message: 'HI',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onClickSuccess(): void {
|
|
||||||
Notify.success({
|
|
||||||
title: 'Success',
|
|
||||||
message: 'Success notification!',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onClickWarning(): void {
|
|
||||||
Notify.warning({
|
|
||||||
title: 'Warning',
|
|
||||||
message: 'Warning notification',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onClickInfo(): void {
|
|
||||||
Notify.info({
|
|
||||||
title: 'Info',
|
|
||||||
message: 'Info notification',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onClickError(): void {
|
|
||||||
Notify.error({
|
|
||||||
title: 'Error',
|
|
||||||
message: 'Error notification',
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.item {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-button class="item" @click="onClick">HTML tags</el-button>
|
|
||||||
<el-button class="item" @click="onClickVNode"> VNode </el-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { h } from 'vue'
|
|
||||||
import Notify from '../src/notify'
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
onClick(): void {
|
|
||||||
Notify({
|
|
||||||
title: 'This is title',
|
|
||||||
message: '<strong>This is <i>HTML</i> segement</strong>',
|
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onClickVNode(): void {
|
|
||||||
Notify({
|
|
||||||
title: 'This is a vnode',
|
|
||||||
message: h('strong', ['This is ', h('i', 'VNode'), ' segment']),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.item {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-page-header content="Detail" @back="goBack" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang='ts'>
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
goBack() {
|
|
||||||
console.log('go back')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'PageHeader',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-progress :percentage="50" />
|
|
||||||
<el-progress :percentage="100" :format="() => '满'" />
|
|
||||||
<el-progress :percentage="100" status="success" />
|
|
||||||
<el-progress :percentage="100" status="warning" />
|
|
||||||
<el-progress :percentage="50" status="exception" />
|
|
||||||
<el-progress
|
|
||||||
:text-inside="true"
|
|
||||||
:stroke-width="24"
|
|
||||||
:percentage="100"
|
|
||||||
status="success"
|
|
||||||
/>
|
|
||||||
<el-progress
|
|
||||||
:text-inside="true"
|
|
||||||
:stroke-width="22"
|
|
||||||
:percentage="80"
|
|
||||||
status="warning"
|
|
||||||
/>
|
|
||||||
<el-progress type="circle" :percentage="25" />
|
|
||||||
<el-progress type="circle" :percentage="100" status="success" />
|
|
||||||
<el-progress type="circle" :percentage="70" status="warning" />
|
|
||||||
<div>
|
|
||||||
<el-progress type="dashboard" :percentage="percentage" :color="colors" />
|
|
||||||
<el-button-group>
|
|
||||||
<el-button icon="el-icon-minus" @click="decrease" />
|
|
||||||
<el-button icon="el-icon-plus" @click="increase" />
|
|
||||||
</el-button-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { defineComponent, ref } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Basic',
|
|
||||||
setup() {
|
|
||||||
const percentage = ref(10)
|
|
||||||
const colors = ref([
|
|
||||||
{ color: '#f56c6c', percentage: 20 },
|
|
||||||
{ color: '#e6a23c', percentage: 40 },
|
|
||||||
{ color: '#5cb87a', percentage: 60 },
|
|
||||||
{ color: '#1989fa', percentage: 80 },
|
|
||||||
{ color: '#6f7ad3', percentage: 100 },
|
|
||||||
])
|
|
||||||
const increase = () => {
|
|
||||||
percentage.value += 10
|
|
||||||
if (percentage.value > 100) {
|
|
||||||
percentage.value = 100
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const decrease = () => {
|
|
||||||
percentage.value -= 10
|
|
||||||
if (percentage.value < 0) {
|
|
||||||
percentage.value = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
percentage,
|
|
||||||
colors,
|
|
||||||
decrease,
|
|
||||||
increase,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
div[role=progressbar] {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Progress',
|
|
||||||
}
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<el-radio v-model="radio" label="1">1</el-radio>
|
|
||||||
<el-radio v-model="radio" label="2">2</el-radio>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-radio-group v-model="radio0">
|
|
||||||
<el-radio label="3">3</el-radio>
|
|
||||||
<el-radio label="6">6</el-radio>
|
|
||||||
<el-radio label="9">9</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<el-radio-group v-model="radio1">
|
|
||||||
<el-radio-button label="A" />
|
|
||||||
<el-radio-button label="B" />
|
|
||||||
<el-radio-button label="C" />
|
|
||||||
<el-radio-button label="D" />
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
radio: '1',
|
|
||||||
radio0: '3',
|
|
||||||
radio1: 'A',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Radio',
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">Default</span>
|
|
||||||
<el-rate v-model="value1" /> {{ value1 }}✨
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">Progressive discoloration</span>
|
|
||||||
<el-rate
|
|
||||||
v-model="value2"
|
|
||||||
:colors="colors"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<el-rate
|
|
||||||
v-model="value"
|
|
||||||
show-text
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
value: null,
|
|
||||||
value1: null,
|
|
||||||
value2: null,
|
|
||||||
colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Rate',
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="outter">
|
|
||||||
<el-scrollbar style="height: 200px">
|
|
||||||
<div class="inner"></div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.outter {
|
|
||||||
background: #EEE;
|
|
||||||
}
|
|
||||||
.inner {
|
|
||||||
height: 500px;
|
|
||||||
width: 500px;
|
|
||||||
background: linear-gradient(red, yellow, blue);;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'ScrollBar',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">默认</span>
|
|
||||||
<el-slider v-model="value1" />
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">自定义初始值</span>
|
|
||||||
<el-slider v-model="value2" />
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">隐藏 Tooltip</span>
|
|
||||||
<el-slider v-model="value3" :show-tooltip="false" />
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">格式化 Tooltip</span>
|
|
||||||
<el-slider v-model="value4" :format-tooltip="formatTooltip" />
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">禁用</span>
|
|
||||||
<el-slider v-model="value5" disabled />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { reactive, toRefs } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const values = reactive({
|
|
||||||
value1: 30,
|
|
||||||
value2: 50,
|
|
||||||
value3: 36,
|
|
||||||
value4: 48,
|
|
||||||
value5: 42,
|
|
||||||
})
|
|
||||||
const formatTooltip = (val: number) => `当前: ${ val }`
|
|
||||||
return {
|
|
||||||
...toRefs(values),
|
|
||||||
formatTooltip,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.block {
|
|
||||||
padding: 30px 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-bottom: 1px solid #EFF2F6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demonstration {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #8492A6;
|
|
||||||
line-height: 44px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">Breakpoints not displayed</span>
|
|
||||||
<el-slider
|
|
||||||
v-model="value1"
|
|
||||||
:step="10"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<span class="demonstration">Breakpoints displayed</span>
|
|
||||||
<el-slider
|
|
||||||
v-model="value2"
|
|
||||||
:step="10"
|
|
||||||
show-stops
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { reactive, toRefs } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const values = reactive({
|
|
||||||
value1: 0,
|
|
||||||
value2: 0,
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
...toRefs(values),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.demonstration {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #8492A6;
|
|
||||||
line-height: 44px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Slider',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as BasicUsage } from './basic-usage.vue'
|
|
||||||
|
|
||||||
export { default as DiscreteValues } from './discrete-values.vue'
|
|
||||||
|
|
||||||
export { default as RangeSelection } from './range-selection.vue'
|
|
||||||
|
|
||||||
export { default as VerticalMode } from './vertical-mode.vue'
|
|
||||||
|
|
||||||
export { default as ShowMarks } from './show-marks.vue'
|
|
||||||
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-slider
|
|
||||||
v-model="value"
|
|
||||||
range
|
|
||||||
show-stops
|
|
||||||
:max="10"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const value = ref([2, 5])
|
|
||||||
return {
|
|
||||||
value,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-slider
|
|
||||||
v-model="value"
|
|
||||||
range
|
|
||||||
:marks="marks"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { h, ref } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const value = ref([30, 60])
|
|
||||||
const marks = {
|
|
||||||
0: '0°C',
|
|
||||||
8: '8°C',
|
|
||||||
37: '37°C',
|
|
||||||
50: {
|
|
||||||
style: {
|
|
||||||
color: '#1989FA',
|
|
||||||
},
|
|
||||||
label: h('strong', '50%'),
|
|
||||||
},
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
value,
|
|
||||||
marks,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-slider
|
|
||||||
v-model="value"
|
|
||||||
vertical
|
|
||||||
height="200px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const value = ref(0)
|
|
||||||
return {
|
|
||||||
value,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-steps :active="active" direction="vertical" :space="100">
|
|
||||||
<el-step title="Step 1" description="This is a long long long description" />
|
|
||||||
<el-step title="Step 2" description="This is a long long long description" />
|
|
||||||
<el-step title="Step 3" description="This is a long long long description" />
|
|
||||||
</el-steps>
|
|
||||||
<el-steps :active="active">
|
|
||||||
<el-step title="Step 1" icon="el-icon-edit" />
|
|
||||||
<el-step title="Step 2" icon="el-icon-upload" />
|
|
||||||
<el-step title="Step 3" icon="el-icon-picture" />
|
|
||||||
</el-steps>
|
|
||||||
<el-steps :active="active" simple>
|
|
||||||
<el-step title="Step 1" icon="el-icon-edit" />
|
|
||||||
<el-step title="Step 2" icon="el-icon-upload" />
|
|
||||||
<el-step title="Step 3" icon="el-icon-picture" />
|
|
||||||
</el-steps>
|
|
||||||
<el-button type="primary" @click="handleClick">move</el-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
setup() {
|
|
||||||
const active = ref(0)
|
|
||||||
|
|
||||||
const handleClick = () => {
|
|
||||||
if (active.value++ > 2) active.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
active,
|
|
||||||
handleClick,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-steps {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Steps',
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
use v-model
|
|
||||||
<el-switch v-model="v" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
use :value
|
|
||||||
<el-switch :value="value" @change="value = $event" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
use :model-value
|
|
||||||
<el-switch :model-value="modelValue" @update:modelValue="modelValue = $event" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
export default defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
v: true,
|
|
||||||
value: true,
|
|
||||||
modelValue: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Switch',
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,265 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-button @click="show = !show">
|
|
||||||
display/hidden tab item
|
|
||||||
</el-button>
|
|
||||||
<el-button
|
|
||||||
@click="activeName = activeName === 'first' ? 'second' : 'first'"
|
|
||||||
>
|
|
||||||
Change
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
||||||
<el-tab-pane>
|
|
||||||
<template #label>label-1slot-title</template>
|
|
||||||
label-1slot-title
|
|
||||||
</el-tab-pane>
|
|
||||||
<template v-if="true">
|
|
||||||
<el-tab-pane
|
|
||||||
label="label-1"
|
|
||||||
name="first"
|
|
||||||
>
|
|
||||||
label-1
|
|
||||||
</el-tab-pane>
|
|
||||||
</template>
|
|
||||||
<el-tab-pane
|
|
||||||
v-if="show"
|
|
||||||
label="label-2"
|
|
||||||
name="fourth"
|
|
||||||
>
|
|
||||||
label-2
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-3" name="second">label-3</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-4" name="third">label-4</el-tab-pane>
|
|
||||||
<el-tab-pane v-for="i in 3" :key="i" :label="`a-${i}`">
|
|
||||||
{{
|
|
||||||
`name-${i}`
|
|
||||||
}}
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
||||||
<el-tab-pane
|
|
||||||
closable
|
|
||||||
label="label-1"
|
|
||||||
name="first"
|
|
||||||
>
|
|
||||||
label-1
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
disabled
|
|
||||||
label="label-2"
|
|
||||||
name="fourth"
|
|
||||||
>
|
|
||||||
label-2
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-3" name="second">label-3</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-4" name="third">label-4</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<el-tabs
|
|
||||||
v-model="activeName"
|
|
||||||
type="border-card"
|
|
||||||
@tab-click="handleClick"
|
|
||||||
>
|
|
||||||
<el-tab-pane
|
|
||||||
lazy
|
|
||||||
label="label-1"
|
|
||||||
name="first"
|
|
||||||
>
|
|
||||||
label-1
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
lazy
|
|
||||||
label="label-2"
|
|
||||||
name="fourth"
|
|
||||||
>
|
|
||||||
label-2
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
lazy
|
|
||||||
label="label-3"
|
|
||||||
name="second"
|
|
||||||
>
|
|
||||||
label-3
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
lazy
|
|
||||||
label="label-4"
|
|
||||||
name="third"
|
|
||||||
>
|
|
||||||
label-4
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<el-button @click="tabPosition = 'top'">top</el-button>
|
|
||||||
<el-button @click="tabPosition = 'right'">right</el-button>
|
|
||||||
<el-button @click="tabPosition = 'bottom'">bottom</el-button>
|
|
||||||
<el-button @click="tabPosition = 'left'">left</el-button>
|
|
||||||
|
|
||||||
<el-tabs :tab-position="tabPosition" style="height: 200px;">
|
|
||||||
<el-tab-pane label="label-1">label-1</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-3">label-3</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-4">label-4</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-2">label-2</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<el-tabs type="border-card">
|
|
||||||
<el-tab-pane>
|
|
||||||
<template #label>
|
|
||||||
<i class="el-icon-date"></i> label-1
|
|
||||||
</template>
|
|
||||||
label-1
|
|
||||||
</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-6">label-6</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-4">label-4</el-tab-pane>
|
|
||||||
<el-tab-pane label="label-2">label-2</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<el-tabs
|
|
||||||
v-model="editableTabsValue"
|
|
||||||
type="card"
|
|
||||||
editable
|
|
||||||
style="width: 450px;"
|
|
||||||
@edit="handleTabsEdit"
|
|
||||||
>
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="item in editableTabs"
|
|
||||||
:key="item.name"
|
|
||||||
:label="item.title"
|
|
||||||
:name="item.name"
|
|
||||||
>
|
|
||||||
{{ item.content }}
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flag">
|
|
||||||
<div style="margin-bottom: 20px;">
|
|
||||||
<el-button size="small" @click="addTab(editableTabsValue)">
|
|
||||||
add tab
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-tabs
|
|
||||||
v-model="editableTabsValue"
|
|
||||||
type="card"
|
|
||||||
stretch
|
|
||||||
addable
|
|
||||||
closable
|
|
||||||
@tab-remove="removeTab"
|
|
||||||
@tab-add="addTab(editableTabsValue)"
|
|
||||||
>
|
|
||||||
<el-tab-pane
|
|
||||||
v-for="item in editableTabs"
|
|
||||||
:key="item.name"
|
|
||||||
:label="item.title"
|
|
||||||
:name="item.name"
|
|
||||||
>
|
|
||||||
{{ item.content }}
|
|
||||||
</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang='ts'>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
activeName: 'second',
|
|
||||||
tabPosition: 'left',
|
|
||||||
|
|
||||||
editableTabsValue: '2',
|
|
||||||
editableTabs: [
|
|
||||||
{
|
|
||||||
title: 'Tab 1',
|
|
||||||
name: '1',
|
|
||||||
content: 'Tab 1 content',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Tab 2',
|
|
||||||
name: '2',
|
|
||||||
content: 'Tab 2 content',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
tabIndex: 2,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addTab() {
|
|
||||||
let newTabName = ++this.tabIndex + ''
|
|
||||||
this.editableTabs.push({
|
|
||||||
title: 'New Tab',
|
|
||||||
name: newTabName,
|
|
||||||
content: 'New Tab content',
|
|
||||||
})
|
|
||||||
this.editableTabsValue = newTabName
|
|
||||||
},
|
|
||||||
removeTab(targetName) {
|
|
||||||
let tabs = this.editableTabs
|
|
||||||
let activeName = this.editableTabsValue
|
|
||||||
if (activeName === targetName) {
|
|
||||||
tabs.forEach((tab, index) => {
|
|
||||||
if (tab.name === targetName) {
|
|
||||||
let nextTab = tabs[index + 1] || tabs[index - 1]
|
|
||||||
if (nextTab) {
|
|
||||||
activeName = nextTab.name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.editableTabsValue = activeName
|
|
||||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
|
|
||||||
},
|
|
||||||
handleTabsEdit(targetName, action) {
|
|
||||||
if (action === 'add') {
|
|
||||||
let newTabName = ++this.tabIndex + ''
|
|
||||||
this.editableTabs.push({
|
|
||||||
title: 'New Tab',
|
|
||||||
name: newTabName,
|
|
||||||
content: 'New Tab content',
|
|
||||||
})
|
|
||||||
this.editableTabsValue = newTabName
|
|
||||||
}
|
|
||||||
if (action === 'remove') {
|
|
||||||
let tabs = this.editableTabs
|
|
||||||
let activeName = this.editableTabsValue
|
|
||||||
if (activeName === targetName) {
|
|
||||||
tabs.forEach((tab, index) => {
|
|
||||||
if (tab.name === targetName) {
|
|
||||||
let nextTab = tabs[index + 1] || tabs[index - 1]
|
|
||||||
if (nextTab) {
|
|
||||||
activeName = nextTab.name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.editableTabsValue = activeName
|
|
||||||
this.editableTabs = tabs.filter(
|
|
||||||
tab => tab.name !== targetName,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleClick(tab, event) {
|
|
||||||
console.log(tab, event)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.flag {
|
|
||||||
border: 2px solid #eee;
|
|
||||||
margin: 15px 0;
|
|
||||||
padding: 10px;
|
|
||||||
min-height: 250px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Tabs',
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-tag closable>Default Label</el-tag>
|
|
||||||
<el-tag size="medium" closable>Medium Label</el-tag>
|
|
||||||
<el-tag size="small" closable>Small Label</el-tag>
|
|
||||||
<el-tag size="mini" closable>Mini Label</el-tag>
|
|
||||||
<div class="tag-group">
|
|
||||||
<span class="tag-group__title">Dark</span>
|
|
||||||
<el-tag
|
|
||||||
v-for="item in items"
|
|
||||||
:key="item.label"
|
|
||||||
:type="item.type"
|
|
||||||
effect="dark"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
<div class="tag-group">
|
|
||||||
<span class="tag-group__title">Plain</span>
|
|
||||||
<el-tag
|
|
||||||
v-for="item in items"
|
|
||||||
:key="item.label"
|
|
||||||
:type="item.type"
|
|
||||||
effect="plain"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
|
|
||||||
const basic = defineComponent({
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [
|
|
||||||
{ type: '', label: 'Label 1' },
|
|
||||||
{ type: 'success', label: 'Label 2' },
|
|
||||||
{ type: 'info', label: 'Label 3' },
|
|
||||||
{ type: 'danger', label: 'Label 4' },
|
|
||||||
{ type: 'warning', label: 'Label 5' },
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
export default basic
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-tag {
|
|
||||||
margin: 6px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Tag',
|
|
||||||
}
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="block">
|
|
||||||
<el-timeline>
|
|
||||||
<el-timeline-item
|
|
||||||
v-for="(activity, index) in activities"
|
|
||||||
:key="index"
|
|
||||||
:timestamp="activity.timestamp"
|
|
||||||
:placement="activity.placement"
|
|
||||||
:hide-timestamp="activity.hideTimestamp"
|
|
||||||
:type="activity.type"
|
|
||||||
:icon="activity.icon"
|
|
||||||
>
|
|
||||||
{{ activity.content }}
|
|
||||||
</el-timeline-item>
|
|
||||||
</el-timeline>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang='ts'>
|
|
||||||
import { defineComponent, reactive } from 'vue'
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
setup() {
|
|
||||||
return reactive({
|
|
||||||
activities: [{
|
|
||||||
content: 'Step 1: xxxxxx',
|
|
||||||
timestamp: '2018-04-15',
|
|
||||||
placement: 'top',
|
|
||||||
}, {
|
|
||||||
content: 'Step 2: xxxxxx',
|
|
||||||
timestamp: '2018-04-13',
|
|
||||||
hideTimestamp: true,
|
|
||||||
}, {
|
|
||||||
content: 'Step 3: xxxxxx',
|
|
||||||
timestamp: '2018-04-11',
|
|
||||||
type: 'large',
|
|
||||||
icon: 'el-icon-more',
|
|
||||||
},{
|
|
||||||
content: 'Step 4: xxxxxx',
|
|
||||||
timestamp: '2018-07-11',
|
|
||||||
type: 'primary',
|
|
||||||
}],
|
|
||||||
})
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
export { default as BasicUsage } from './basic.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Timeline',
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="box">
|
|
||||||
<div class="top">
|
|
||||||
<el-tooltip
|
|
||||||
v-model="model"
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Top Left prompts info"
|
|
||||||
placement="top-start"
|
|
||||||
:manual="true"
|
|
||||||
>
|
|
||||||
<el-button>top-start</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Top Center prompts info"
|
|
||||||
:append-to-body="false"
|
|
||||||
placement="top"
|
|
||||||
:trigger="['click', 'focus', 'hover']"
|
|
||||||
>
|
|
||||||
<el-button>top</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Top Right prompts info"
|
|
||||||
placement="top-end"
|
|
||||||
:trigger="['click']"
|
|
||||||
>
|
|
||||||
<el-button>top-end</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div class="left">
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Left Top prompts info"
|
|
||||||
placement="left-start"
|
|
||||||
>
|
|
||||||
<el-button>left-start</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Left Center prompts info"
|
|
||||||
placement="left"
|
|
||||||
>
|
|
||||||
<el-button>left</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Left Bottom prompts info"
|
|
||||||
placement="left-end"
|
|
||||||
>
|
|
||||||
<el-button>left-end</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="right">
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Right Top prompts info"
|
|
||||||
placement="right-start"
|
|
||||||
>
|
|
||||||
<el-button>right-start</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Right Center prompts info"
|
|
||||||
placement="right"
|
|
||||||
>
|
|
||||||
<el-button>right</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Right Bottom prompts info"
|
|
||||||
placement="right-end"
|
|
||||||
>
|
|
||||||
<el-button>right-end</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
<div class="bottom">
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Bottom Left prompts info"
|
|
||||||
placement="bottom-start"
|
|
||||||
>
|
|
||||||
<el-button>bottom-start</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Bottom Center prompts info"
|
|
||||||
placement="bottom"
|
|
||||||
>
|
|
||||||
<el-button>bottom</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip
|
|
||||||
class="item"
|
|
||||||
effect="dark"
|
|
||||||
content="Bottom Right prompts info"
|
|
||||||
placement="bottom-end"
|
|
||||||
>
|
|
||||||
<el-button>bottom-end</el-button>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import ClickOutside from '@element-plus/directives/click-outside'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
directives: {
|
|
||||||
ClickOutside,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
model: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.box {
|
|
||||||
width: 400px;
|
|
||||||
padding-left: 25%;
|
|
||||||
padding-top: 200px;
|
|
||||||
}
|
|
||||||
.box .top {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box .left {
|
|
||||||
float: left;
|
|
||||||
width: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box .right {
|
|
||||||
float: right;
|
|
||||||
width: 110px;
|
|
||||||
}
|
|
||||||
.box .bottom {
|
|
||||||
clear: both;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.box .item {
|
|
||||||
margin: 4px;
|
|
||||||
}
|
|
||||||
.box .left .el-tooltip__popper,
|
|
||||||
.box .right .el-tooltip__popper {
|
|
||||||
padding: 8px 10px;
|
|
||||||
}
|
|
||||||
.box .el-button {
|
|
||||||
width: 110px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Tooltip',
|
|
||||||
}
|
|
||||||
|
|
||||||
export { default as Basic } from './basic.vue'
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-transfer
|
|
||||||
v-model="value"
|
|
||||||
:data="data"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
const generateData = () => {
|
|
||||||
const data = []
|
|
||||||
for (let i = 1; i <= 15; i++) {
|
|
||||||
data.push({
|
|
||||||
key: i + '',
|
|
||||||
label: `Option ${ i }`,
|
|
||||||
disabled: i % 4 === 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
data: generateData(),
|
|
||||||
value: ['1', '4'],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
<template>
|
|
||||||
<p style="text-align: center; margin: 0 0 20px;">
|
|
||||||
Customize data items using render-content
|
|
||||||
</p>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<el-transfer
|
|
||||||
v-model="value"
|
|
||||||
style="text-align: left; display: inline-block;"
|
|
||||||
filterable
|
|
||||||
:left-default-checked="['2', '3']"
|
|
||||||
:right-default-checked="['1']"
|
|
||||||
:render-content="renderFunc"
|
|
||||||
:titles="['Source', 'Target']"
|
|
||||||
:button-texts="['To left', 'To right']"
|
|
||||||
:format="{
|
|
||||||
noChecked: '${total}',
|
|
||||||
hasChecked: '${checked}/${total}',
|
|
||||||
}"
|
|
||||||
:data="data"
|
|
||||||
@change="handleChange"
|
|
||||||
>
|
|
||||||
<template #left-footer>
|
|
||||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
|
||||||
</template>
|
|
||||||
<template #right-footer>
|
|
||||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
|
||||||
</template>
|
|
||||||
</el-transfer>
|
|
||||||
<p style="text-align: center; margin: 50px 0 20px;">
|
|
||||||
Customize data items using scoped slot
|
|
||||||
</p>
|
|
||||||
<div style="text-align: center;">
|
|
||||||
<el-transfer
|
|
||||||
v-model="value4"
|
|
||||||
style="text-align: left; display: inline-block;"
|
|
||||||
filterable
|
|
||||||
:left-default-checked="['2', '3']"
|
|
||||||
:right-default-checked="['1']"
|
|
||||||
:titles="['Source', 'Target']"
|
|
||||||
:button-texts="['To left', 'To right']"
|
|
||||||
:format="{
|
|
||||||
noChecked: '${total}',
|
|
||||||
hasChecked: '${checked}/${total}',
|
|
||||||
}"
|
|
||||||
:data="data"
|
|
||||||
@change="handleChange"
|
|
||||||
>
|
|
||||||
<template #default="{option}">
|
|
||||||
<span>{{ option.key }} - {{ option.label }}</span>
|
|
||||||
</template>
|
|
||||||
<template #left-footer>
|
|
||||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
|
||||||
</template>
|
|
||||||
<template #right-footer>
|
|
||||||
<el-button class="transfer-footer" size="small">Operation</el-button>
|
|
||||||
</template>
|
|
||||||
</el-transfer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
const generateData = () => {
|
|
||||||
const data = []
|
|
||||||
for (let i = 1; i <= 15; i++) {
|
|
||||||
data.push({
|
|
||||||
key: i + '',
|
|
||||||
label: `Option ${i}`,
|
|
||||||
disabled: i % 4 === 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
data: generateData(),
|
|
||||||
value: ['1'],
|
|
||||||
value4: ['1'],
|
|
||||||
renderFunc(h, option) {
|
|
||||||
return h('span', `${option.key} - ${option.label}`)
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleChange(value, direction, movedKeys) {
|
|
||||||
console.log(value, direction, movedKeys)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.transfer-footer {
|
|
||||||
margin-left: 20px;
|
|
||||||
padding: 6px 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-transfer
|
|
||||||
v-model="value"
|
|
||||||
filterable
|
|
||||||
:filter-method="filterMethod"
|
|
||||||
filter-placeholder="State Abbreviations"
|
|
||||||
:data="data"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
const generateData = () => {
|
|
||||||
const data = []
|
|
||||||
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']
|
|
||||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
|
|
||||||
states.forEach((city, index) => {
|
|
||||||
data.push({
|
|
||||||
label: city,
|
|
||||||
key: index + '',
|
|
||||||
initial: initials[index],
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
data: generateData(),
|
|
||||||
value: [],
|
|
||||||
filterMethod (query, item) {
|
|
||||||
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
export default {
|
|
||||||
title: 'Transfer',
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export { default as BaseUsage } from './base-usage.vue'
|
|
||||||
|
|
||||||
export { default as Filterable } from './filterable.vue'
|
|
||||||
|
|
||||||
export { default as Customizable } from './customizable.vue'
|
|
||||||
|
|
||||||
export { default as PropAliases } from './prop-aliases.vue'
|
|
||||||
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<template>
|
|
||||||
<el-transfer
|
|
||||||
v-model="value"
|
|
||||||
:props="{
|
|
||||||
key: 'value',
|
|
||||||
label: 'desc'
|
|
||||||
}"
|
|
||||||
:data="data"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
const generateData = () => {
|
|
||||||
const data = []
|
|
||||||
for (let i = 1; i <= 15; i++) {
|
|
||||||
data.push({
|
|
||||||
value: i + '',
|
|
||||||
desc: `Option ${ i }`,
|
|
||||||
disabled: i % 4 === 0,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
data: generateData(),
|
|
||||||
value: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -27,7 +27,6 @@ NAME=$NORMALIZED_NAME
|
|||||||
|
|
||||||
mkdir -p "$DIRNAME"
|
mkdir -p "$DIRNAME"
|
||||||
mkdir -p "$DIRNAME/src"
|
mkdir -p "$DIRNAME/src"
|
||||||
mkdir -p "$DIRNAME/doc"
|
|
||||||
mkdir -p "$DIRNAME/__tests__"
|
mkdir -p "$DIRNAME/__tests__"
|
||||||
|
|
||||||
cat > $DIRNAME/src/index.vue <<EOF
|
cat > $DIRNAME/src/index.vue <<EOF
|
||||||
@ -90,12 +89,3 @@ describe('$NAME.vue', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
EOF
|
EOF
|
||||||
|
|
||||||
cat <<EOF >"$DIRNAME/doc/index.stories.ts"
|
|
||||||
import El${NAME} from '../index'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: '${NAME}',
|
|
||||||
}
|
|
||||||
|
|
||||||
EOF
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user