mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-07 22:47:38 +08:00
调整基础组件演示页面
This commit is contained in:
Hooray
parent
1b0389c1b5
commit
639868dc8b
@ -8,120 +8,18 @@ const routes: RouteRecordRaw = {
|
||||
redirect: '/component_basic_example/icon',
|
||||
name: 'componentBasicExample',
|
||||
meta: {
|
||||
title: '基础组件（部分）',
|
||||
title: '基础组件',
|
||||
icon: 'ep:element-plus',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'icon',
|
||||
name: 'componentBasicExampleIcon',
|
||||
component: () => import('@/views/component_basic_example/icon.vue'),
|
||||
path: '',
|
||||
name: 'componentBasicExampleIndex',
|
||||
component: () => import('@/views/component_basic_example/index.vue'),
|
||||
meta: {
|
||||
title: '图标',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'button',
|
||||
name: 'componentBasicExampleButton',
|
||||
component: () => import('@/views/component_basic_example/button.vue'),
|
||||
meta: {
|
||||
title: '按钮',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'link',
|
||||
name: 'componentBasicExampleLink',
|
||||
component: () => import('@/views/component_basic_example/link.vue'),
|
||||
meta: {
|
||||
title: '文字链接',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'radio',
|
||||
name: 'componentBasicExampleRadio',
|
||||
component: () => import('@/views/component_basic_example/radio.vue'),
|
||||
meta: {
|
||||
title: '单选框',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'checkbox',
|
||||
name: 'componentBasicExampleCheckbox',
|
||||
component: () => import('@/views/component_basic_example/checkbox.vue'),
|
||||
meta: {
|
||||
title: '多选框',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'input',
|
||||
name: 'componentBasicExampleInput',
|
||||
component: () => import('@/views/component_basic_example/input.vue'),
|
||||
meta: {
|
||||
title: '输入框',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'inputnumber',
|
||||
name: 'componentBasicExampleInputnumber',
|
||||
component: () => import('@/views/component_basic_example/inputnumber.vue'),
|
||||
meta: {
|
||||
title: '数字输入框',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'select',
|
||||
name: 'componentBasicExampleSelect',
|
||||
component: () => import('@/views/component_basic_example/select.vue'),
|
||||
meta: {
|
||||
title: '选择器',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'switch',
|
||||
name: 'componentBasicExampleSwitch',
|
||||
component: () => import('@/views/component_basic_example/switch.vue'),
|
||||
meta: {
|
||||
title: '开关',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'slider',
|
||||
name: 'componentBasicExampleSlider',
|
||||
component: () => import('@/views/component_basic_example/slider.vue'),
|
||||
meta: {
|
||||
title: '滑块',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'timepicker',
|
||||
name: 'componentBasicExampleTimepicker',
|
||||
component: () => import('@/views/component_basic_example/timepicker.vue'),
|
||||
meta: {
|
||||
title: '时间选择器',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'datepicker',
|
||||
name: 'componentBasicExampleDatepicker',
|
||||
component: () => import('@/views/component_basic_example/datepicker.vue'),
|
||||
meta: {
|
||||
title: '日期选择器',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'datetimepicker',
|
||||
name: 'componentBasicExampleDatetimepicker',
|
||||
component: () => import('@/views/component_basic_example/datetimepicker.vue'),
|
||||
meta: {
|
||||
title: '日期时间选择器',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'rate',
|
||||
name: 'componentBasicExampleRate',
|
||||
component: () => import('@/views/component_basic_example/rate.vue'),
|
||||
meta: {
|
||||
title: '评分',
|
||||
title: '基础组件',
|
||||
sidebar: false,
|
||||
breadcrumb: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,294 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="按钮" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-row>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success">
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info">
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning">
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger">
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button plain>
|
||||
朴素按钮
|
||||
</el-button>
|
||||
<el-button type="primary" plain>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" plain>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" plain>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" plain>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" plain>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button round>
|
||||
圆角按钮
|
||||
</el-button>
|
||||
<el-button type="primary" round>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" round>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" round>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" round>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" round>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:search" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:edit" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="success" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:check" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="info" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:message" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="warning" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:star" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="danger" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:delete" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-row>
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-row>
|
||||
<el-button disabled>
|
||||
默认按钮
|
||||
</el-button>
|
||||
<el-button type="primary" disabled>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" disabled>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" disabled>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" disabled>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" disabled>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button plain disabled>
|
||||
朴素按钮
|
||||
</el-button>
|
||||
<el-button type="primary" plain disabled>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" plain disabled>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" plain disabled>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" plain disabled>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" plain disabled>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
</page-main>
|
||||
<page-main title="文字按钮" class="demo">
|
||||
<el-button text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="primary" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="success" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="info" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="warning" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="danger" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
</page-main>
|
||||
<page-main title="图标按钮" class="demo">
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:edit" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:share" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:delete" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:search" />
|
||||
</el-icon>
|
||||
</template>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
上传
|
||||
<el-icon class="el-icon--right">
|
||||
<svg-icon name="ep:upload" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</page-main>
|
||||
<page-main title="按钮组" class="demo">
|
||||
<el-button-group style="margin-right: 10px;">
|
||||
<el-button type="primary">
|
||||
<el-icon class="el-icon--left">
|
||||
<svg-icon name="ep:arrow-left" />
|
||||
</el-icon>
|
||||
上一页
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
下一页
|
||||
<el-icon class="el-icon--right">
|
||||
<svg-icon name="ep:arrow-right" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:edit" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:share" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="ep:delete" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
</page-main>
|
||||
<page-main title="加载中" class="demo">
|
||||
<el-button type="primary" :loading="true">
|
||||
加载中
|
||||
</el-button>
|
||||
</page-main>
|
||||
<page-main title="不同尺寸" class="demo">
|
||||
<div style="margin-bottom: 10px;">
|
||||
<el-button size="large">
|
||||
大号按钮
|
||||
</el-button>
|
||||
<el-button size="default">
|
||||
默认按钮
|
||||
</el-button>
|
||||
<el-button size="small">
|
||||
小号按钮
|
||||
</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" round>
|
||||
大号按钮
|
||||
</el-button>
|
||||
<el-button size="default" round>
|
||||
默认按钮
|
||||
</el-button>
|
||||
<el-button size="small" round>
|
||||
小号按钮
|
||||
</el-button>
|
||||
</div>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo {
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,65 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const checked = ref(true)
|
||||
const checked1 = ref(false)
|
||||
const checked2 = ref(true)
|
||||
const checkList = ref(['选中且禁用', '复选框 A'])
|
||||
const checkedCities = ref(['上海', '北京'])
|
||||
const cities = ref(['上海', '北京', '广州', '深圳'])
|
||||
const checkboxGroup1 = ref(['上海'])
|
||||
const checked3 = ref(true)
|
||||
const checked4 = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="多选框" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-checkbox v-model="checked">
|
||||
备选项
|
||||
</el-checkbox>
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-checkbox v-model="checked1" disabled>
|
||||
备选项1
|
||||
</el-checkbox>
|
||||
<el-checkbox v-model="checked2" disabled>
|
||||
备选项
|
||||
</el-checkbox>
|
||||
</page-main>
|
||||
<page-main title="多选框组" class="demo">
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="复选框 A" />
|
||||
<el-checkbox label="复选框 B" />
|
||||
<el-checkbox label="复选框 C" />
|
||||
<el-checkbox label="禁用" disabled />
|
||||
<el-checkbox label="选中且禁用" disabled />
|
||||
</el-checkbox-group>
|
||||
</page-main>
|
||||
<page-main title="可选项目数量的限制" class="demo">
|
||||
<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>
|
||||
</page-main>
|
||||
<page-main title="按钮样式" class="demo">
|
||||
<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>
|
||||
</page-main>
|
||||
<page-main title="带有边框" class="demo">
|
||||
<el-checkbox v-model="checked3" label="备选项1" border />
|
||||
<el-checkbox v-model="checked4" label="备选项2" border />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,20 +0,0 @@
|
||||
<template>
|
||||
<div class="alert">
|
||||
<el-alert show-icon type="info" :closable="false" close-text="前往 Element Plus 官网">
|
||||
<template #title>
|
||||
基础组件来自 Element Plus ，更多组件及使用技巧请查看
|
||||
<el-link type="primary" href="https://element-plus.org/#/zh-CN" target="_blank">
|
||||
Element Plus 官网
|
||||
</el-link>
|
||||
</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.alert {
|
||||
padding: 20px 20px 0;
|
||||
background-color: var(--g-app-bg);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
</style>
|
||||
288
src/views/component_basic_example/components/button.vue
Normal file
288
src/views/component_basic_example/components/button.vue
Normal file
@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-row>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary">
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success">
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info">
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning">
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger">
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button plain>
|
||||
朴素按钮
|
||||
</el-button>
|
||||
<el-button type="primary" plain>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" plain>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" plain>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" plain>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" plain>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button round>
|
||||
圆角按钮
|
||||
</el-button>
|
||||
<el-button type="primary" round>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" round>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" round>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" round>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" round>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:search" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:edit" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="success" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:check" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="info" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:message" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="warning" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:star" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="danger" circle>
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:delete" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-row>
|
||||
<el-button disabled>
|
||||
默认按钮
|
||||
</el-button>
|
||||
<el-button type="primary" disabled>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" disabled>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" disabled>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" disabled>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" disabled>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-button plain disabled>
|
||||
朴素按钮
|
||||
</el-button>
|
||||
<el-button type="primary" plain disabled>
|
||||
主要按钮
|
||||
</el-button>
|
||||
<el-button type="success" plain disabled>
|
||||
成功按钮
|
||||
</el-button>
|
||||
<el-button type="info" plain disabled>
|
||||
信息按钮
|
||||
</el-button>
|
||||
<el-button type="warning" plain disabled>
|
||||
警告按钮
|
||||
</el-button>
|
||||
<el-button type="danger" plain disabled>
|
||||
危险按钮
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-divider content-position="left">
|
||||
文字按钮
|
||||
</el-divider>
|
||||
<el-button text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="primary" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="success" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="info" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="warning" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-button type="danger" text>
|
||||
文字按钮
|
||||
</el-button>
|
||||
<el-divider content-position="left">
|
||||
图标按钮
|
||||
</el-divider>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:edit" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:share" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:delete" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:search" />
|
||||
</el-icon>
|
||||
</template>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
上传
|
||||
<el-icon class="el-icon--right">
|
||||
<svg-icon name="i-ep:upload" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-divider content-position="left">
|
||||
按钮组
|
||||
</el-divider>
|
||||
<el-button-group style="margin-right: 10px;">
|
||||
<el-button type="primary">
|
||||
<el-icon class="el-icon--left">
|
||||
<svg-icon name="i-ep:arrow-left" />
|
||||
</el-icon>
|
||||
上一页
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
下一页
|
||||
<el-icon class="el-icon--right">
|
||||
<svg-icon name="i-ep:arrow-right" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-button-group>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:edit" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:share" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:delete" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-divider content-position="left">
|
||||
加载中
|
||||
</el-divider>
|
||||
<el-button type="primary" :loading="true">
|
||||
加载中
|
||||
</el-button>
|
||||
<el-divider content-position="left">
|
||||
不同尺寸
|
||||
</el-divider>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<el-button size="large">
|
||||
大号按钮
|
||||
</el-button>
|
||||
<el-button size="default">
|
||||
默认按钮
|
||||
</el-button>
|
||||
<el-button size="small">
|
||||
小号按钮
|
||||
</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" round>
|
||||
大号按钮
|
||||
</el-button>
|
||||
<el-button size="default" round>
|
||||
默认按钮
|
||||
</el-button>
|
||||
<el-button size="small" round>
|
||||
小号按钮
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
62
src/views/component_basic_example/components/checkbox.vue
Normal file
62
src/views/component_basic_example/components/checkbox.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<script lang="ts" setup>
|
||||
const checked = ref(true)
|
||||
const checked1 = ref(false)
|
||||
const checked2 = ref(true)
|
||||
const checkList = ref(['选中且禁用', '复选框 A'])
|
||||
const checkedCities = ref(['上海', '北京'])
|
||||
const cities = ref(['上海', '北京', '广州', '深圳'])
|
||||
const checkboxGroup1 = ref(['上海'])
|
||||
const checked3 = ref(true)
|
||||
const checked4 = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-checkbox v-model="checked">
|
||||
备选项
|
||||
</el-checkbox>
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-checkbox v-model="checked1" disabled>
|
||||
备选项1
|
||||
</el-checkbox>
|
||||
<el-checkbox v-model="checked2" disabled>
|
||||
备选项
|
||||
</el-checkbox>
|
||||
<el-divider content-position="left">
|
||||
多选框组
|
||||
</el-divider>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox label="复选框 A" />
|
||||
<el-checkbox label="复选框 B" />
|
||||
<el-checkbox label="复选框 C" />
|
||||
<el-checkbox label="禁用" disabled />
|
||||
<el-checkbox label="选中且禁用" disabled />
|
||||
</el-checkbox-group>
|
||||
<el-divider content-position="left">
|
||||
可选项目数量的限制
|
||||
</el-divider>
|
||||
<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>
|
||||
<el-divider content-position="left">
|
||||
按钮样式
|
||||
</el-divider>
|
||||
<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>
|
||||
<el-divider content-position="left">
|
||||
带有边框
|
||||
</el-divider>
|
||||
<el-checkbox v-model="checked3" label="备选项1" border />
|
||||
<el-checkbox v-model="checked4" label="备选项2" border />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,17 +1,10 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
import { icons } from '@iconify-json/ep'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="图标" />
|
||||
<page-main class="demo">
|
||||
<div class="demo">
|
||||
<el-icon><svg-icon name="ep:edit" /></el-icon>
|
||||
<el-icon><svg-icon name="ep:share" /></el-icon>
|
||||
<el-icon><svg-icon name="ep:delete" /></el-icon>
|
||||
@ -23,7 +16,17 @@ import Alert from './components/alert.vue'
|
||||
</template>
|
||||
搜索
|
||||
</el-button>
|
||||
</page-main>
|
||||
</div>
|
||||
<el-divider content-position="left">
|
||||
图标集合
|
||||
</el-divider>
|
||||
<div v-for="(item, index) in icons.icons" :key="index" class="list-icon">
|
||||
<el-tooltip class="item" effect="dark" :content="`ep:${index}`" placement="top">
|
||||
<el-icon>
|
||||
<svg-icon :name="`ep:${index}`" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -45,7 +48,7 @@ import Alert from './components/alert.vue'
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
|
||||
i {
|
||||
.el-icon {
|
||||
font-size: 32px;
|
||||
color: #606266;
|
||||
}
|
||||
48
src/views/component_basic_example/components/input.vue
Normal file
48
src/views/component_basic_example/components/input.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<script lang="ts" setup>
|
||||
const input = ref('')
|
||||
const input1 = ref('')
|
||||
const input2 = ref('')
|
||||
const textarea = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-input v-model="input" placeholder="请输入内容" />
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-input v-model="input" placeholder="请输入内容" :disabled="true" />
|
||||
<el-divider content-position="left">
|
||||
可清空
|
||||
</el-divider>
|
||||
<el-input v-model="input" placeholder="请输入内容" clearable />
|
||||
<el-divider content-position="left">
|
||||
密码框
|
||||
</el-divider>
|
||||
<el-input v-model="input" placeholder="请输入内容" show-password />
|
||||
<el-divider content-position="left">
|
||||
带 icon 的输入框
|
||||
</el-divider>
|
||||
<el-input v-model="input1" placeholder="请选择日期">
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<svg-icon name="i-ep:calendar" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input v-model="input2" placeholder="请输入内容">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<svg-icon name="i-ep:search" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-divider content-position="left">
|
||||
文本域
|
||||
</el-divider>
|
||||
<el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
|
||||
</div>
|
||||
</template>
|
||||
32
src/views/component_basic_example/components/inputnumber.vue
Normal file
32
src/views/component_basic_example/components/inputnumber.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<script lang="ts" setup>
|
||||
const num = ref(1)
|
||||
const num2 = ref(1)
|
||||
const num3 = ref(5)
|
||||
const num4 = ref(1)
|
||||
const num5 = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-input-number v-model="num" :min="1" :max="10" label="描述文字" />
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-input-number v-model="num2" :disabled="true" />
|
||||
<el-divider content-position="left">
|
||||
步数
|
||||
</el-divider>
|
||||
<el-input-number v-model="num3" :step="2" />
|
||||
<el-divider content-position="left">
|
||||
精度
|
||||
</el-divider>
|
||||
<el-input-number v-model="num4" :precision="2" :step="0.1" :max="10" />
|
||||
<el-divider content-position="left">
|
||||
按钮位置
|
||||
</el-divider>
|
||||
<el-input-number v-model="num5" controls-position="right" :min="1" :max="10" />
|
||||
</div>
|
||||
</template>
|
||||
74
src/views/component_basic_example/components/link.vue
Normal file
74
src/views/component_basic_example/components/link.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-link href="https://element.eleme.io" target="_blank">
|
||||
默认链接
|
||||
</el-link>
|
||||
<el-link type="primary">
|
||||
主要链接
|
||||
</el-link>
|
||||
<el-link type="success">
|
||||
成功链接
|
||||
</el-link>
|
||||
<el-link type="warning">
|
||||
警告链接
|
||||
</el-link>
|
||||
<el-link type="danger">
|
||||
危险链接
|
||||
</el-link>
|
||||
<el-link type="info">
|
||||
信息链接
|
||||
</el-link>
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-link disabled>
|
||||
默认链接
|
||||
</el-link>
|
||||
<el-link type="primary" disabled>
|
||||
主要链接
|
||||
</el-link>
|
||||
<el-link type="success" disabled>
|
||||
成功链接
|
||||
</el-link>
|
||||
<el-link type="warning" disabled>
|
||||
警告链接
|
||||
</el-link>
|
||||
<el-link type="danger" disabled>
|
||||
危险链接
|
||||
</el-link>
|
||||
<el-link type="info" disabled>
|
||||
信息链接
|
||||
</el-link>
|
||||
<el-divider content-position="left">
|
||||
下划线
|
||||
</el-divider>
|
||||
<el-link :underline="false">
|
||||
无下划线
|
||||
</el-link>
|
||||
<el-link>有下划线</el-link>
|
||||
<el-divider content-position="left">
|
||||
图标
|
||||
</el-divider>
|
||||
<el-link>
|
||||
<el-icon class="el-icon--left">
|
||||
<svg-icon name="i-ep:edit" />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-link>
|
||||
查看
|
||||
<el-icon class="el-icon--right">
|
||||
<svg-icon name="i-ep:view" />
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-link {
|
||||
margin: 0 5px;
|
||||
}
|
||||
</style>
|
||||
62
src/views/component_basic_example/components/radio.vue
Normal file
62
src/views/component_basic_example/components/radio.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<script lang="ts" setup>
|
||||
const radio = ref('1')
|
||||
const radio2 = ref('选中且禁用')
|
||||
const radio3 = ref(3)
|
||||
const radio4 = ref('上海')
|
||||
const radio5 = ref('1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-radio v-model="radio" label="1">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio v-model="radio" label="2">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-radio v-model="radio2" disabled label="禁用">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio v-model="radio2" disabled label="选中且禁用">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-divider content-position="left">
|
||||
单选框组
|
||||
</el-divider>
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio :label="3">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio :label="6">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio :label="9">
|
||||
备选项
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-divider content-position="left">
|
||||
按钮样式
|
||||
</el-divider>
|
||||
<el-radio-group v-model="radio4">
|
||||
<el-radio-button label="上海" />
|
||||
<el-radio-button label="北京" />
|
||||
<el-radio-button label="广州" />
|
||||
<el-radio-button label="深圳" />
|
||||
</el-radio-group>
|
||||
<el-divider content-position="left">
|
||||
带有边框
|
||||
</el-divider>
|
||||
<el-radio v-model="radio5" label="1" border>
|
||||
备选项1
|
||||
</el-radio>
|
||||
<el-radio v-model="radio5" label="2" border>
|
||||
备选项2
|
||||
</el-radio>
|
||||
</div>
|
||||
</template>
|
||||
22
src/views/component_basic_example/components/rate.vue
Normal file
22
src/views/component_basic_example/components/rate.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts" setup>
|
||||
const value1 = ref()
|
||||
const value2 = ref()
|
||||
const value3 = ref(3.7)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-rate v-model="value1" />
|
||||
<el-divider content-position="left">
|
||||
辅助文字
|
||||
</el-divider>
|
||||
<el-rate v-model="value2" show-text :texts="['极差', '差', '一般', '好', '极好']" />
|
||||
<el-divider content-position="left">
|
||||
只读
|
||||
</el-divider>
|
||||
<el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}" />
|
||||
</div>
|
||||
</template>
|
||||
60
src/views/component_basic_example/components/select.vue
Normal file
60
src/views/component_basic_example/components/select.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<script lang="ts" setup>
|
||||
const options1 = ref([
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项5', label: '北京烤鸭' },
|
||||
])
|
||||
const value1 = ref('')
|
||||
const options2 = ref([
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶', disabled: true },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项5', label: '北京烤鸭' },
|
||||
])
|
||||
const value2 = ref('')
|
||||
const value3 = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-select v-model="value1" placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-divider content-position="left">
|
||||
有禁用选项
|
||||
</el-divider>
|
||||
<el-select v-model="value2" placeholder="请选择">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-select v-model="value1" disabled placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-divider content-position="left">
|
||||
可清空单选
|
||||
</el-divider>
|
||||
<el-select v-model="value1" clearable placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-divider content-position="left">
|
||||
基础多选
|
||||
</el-divider>
|
||||
<el-select v-model="value3" multiple placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<el-divider content-position="left">
|
||||
可搜索
|
||||
</el-divider>
|
||||
<el-select v-model="value1" filterable placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
52
src/views/component_basic_example/components/slider.vue
Normal file
52
src/views/component_basic_example/components/slider.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<script lang="ts" setup>
|
||||
const value1 = ref(0)
|
||||
const value2 = ref(50)
|
||||
const value3 = ref(36)
|
||||
const value4 = ref(48)
|
||||
const value5 = ref(42)
|
||||
const value6 = ref(0)
|
||||
const value7 = ref(0)
|
||||
const value8 = ref([4, 8])
|
||||
const value9 = ref(0)
|
||||
|
||||
function formatTooltip(val: number) {
|
||||
return val / 100
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<span>默认</span>
|
||||
<el-slider v-model="value1" />
|
||||
<span>自定义初始值</span>
|
||||
<el-slider v-model="value2" />
|
||||
<span>隐藏 Tooltip</span>
|
||||
<el-slider v-model="value3" :show-tooltip="false" />
|
||||
<span>格式化 Tooltip</span>
|
||||
<el-slider v-model="value4" :format-tooltip="formatTooltip" />
|
||||
<span>禁用</span>
|
||||
<el-slider v-model="value5" disabled />
|
||||
<el-divider content-position="left">
|
||||
离散值
|
||||
</el-divider>
|
||||
<span>不显示间断点</span>
|
||||
<el-slider v-model="value6" :step="10" />
|
||||
<span>显示间断点</span>
|
||||
<el-slider v-model="value6" :step="10" show-stops />
|
||||
<el-divider content-position="left">
|
||||
带有输入框
|
||||
</el-divider>
|
||||
<el-slider v-model="value7" show-input />
|
||||
<el-divider content-position="left">
|
||||
范围选择
|
||||
</el-divider>
|
||||
<el-slider v-model="value8" range show-stops :max="10" />
|
||||
<el-divider content-position="left">
|
||||
竖向模式
|
||||
</el-divider>
|
||||
<el-slider v-model="value9" vertical height="200px" />
|
||||
</div>
|
||||
</template>
|
||||
24
src/views/component_basic_example/components/switch.vue
Normal file
24
src/views/component_basic_example/components/switch.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script lang="ts" setup>
|
||||
const value = ref(true)
|
||||
const value1 = ref(true)
|
||||
const value2 = ref(true)
|
||||
const value3 = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-divider content-position="left">
|
||||
基础用法
|
||||
</el-divider>
|
||||
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
|
||||
<el-divider content-position="left">
|
||||
文字描述
|
||||
</el-divider>
|
||||
<el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
|
||||
<el-divider content-position="left">
|
||||
禁用状态
|
||||
</el-divider>
|
||||
<el-switch v-model="value2" disabled style="margin-right: 10px;" />
|
||||
<el-switch v-model="value3" disabled />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,73 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
function disabledDate(time: Date) {
|
||||
return time.getTime() > Date.now()
|
||||
}
|
||||
|
||||
const shortcuts = ref([
|
||||
{
|
||||
text: '今天',
|
||||
value: new Date(),
|
||||
},
|
||||
{
|
||||
text: '昨天',
|
||||
value: (() => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
||||
return date
|
||||
})(),
|
||||
},
|
||||
{
|
||||
text: '一周前',
|
||||
value: (() => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return date
|
||||
})(),
|
||||
},
|
||||
])
|
||||
|
||||
const value1 = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref('')
|
||||
const value4 = ref('')
|
||||
const value5 = ref('')
|
||||
const value6 = ref('')
|
||||
const value7 = ref('')
|
||||
const value8 = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="日期选择器" />
|
||||
<page-main title="选择日" class="demo">
|
||||
<div>默认</div>
|
||||
<el-date-picker v-model="value1" type="date" placeholder="选择日期" />
|
||||
<div>带快捷选项</div>
|
||||
<el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :disabled-date="disabledDate" :shortcuts="shortcuts" />
|
||||
</page-main>
|
||||
<page-main title="其他日期单位" class="demo">
|
||||
<div>周</div>
|
||||
<el-date-picker v-model="value3" type="week" format="gggg 第 ww 周" placeholder="选择周" />
|
||||
<div>月</div>
|
||||
<el-date-picker v-model="value4" type="month" placeholder="选择月" />
|
||||
<div>年</div>
|
||||
<el-date-picker v-model="value5" type="year" placeholder="选择年" />
|
||||
<div>多个日期</div>
|
||||
<el-date-picker v-model="value6" type="dates" placeholder="选择一个或多个日期" />
|
||||
</page-main>
|
||||
<page-main title="选择日期范围" class="demo">
|
||||
<el-date-picker v-model="value7" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
</page-main>
|
||||
<page-main title="选择月份范围" class="demo">
|
||||
<el-date-picker v-model="value8" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,32 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const value1 = ref('')
|
||||
const value2 = ref<any>([
|
||||
new Date(2000, 10, 10, 10, 10),
|
||||
new Date(2000, 10, 11, 10, 10),
|
||||
])
|
||||
const value3 = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="日期时间选择器" />
|
||||
<page-main title="日期和时间点" class="demo">
|
||||
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" />
|
||||
</page-main>
|
||||
<page-main title="日期和时间范围" class="demo">
|
||||
<el-date-picker v-model="value2" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
||||
</page-main>
|
||||
<page-main title="默认的起始与结束时刻" class="demo">
|
||||
<div>起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</div>
|
||||
<el-date-picker v-model="value3" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
58
src/views/component_basic_example/index.vue
Normal file
58
src/views/component_basic_example/index.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Icon from './components/icon.vue'
|
||||
import Button from './components/button.vue'
|
||||
import Link from './components/link.vue'
|
||||
import Radio from './components/radio.vue'
|
||||
import Checkbox from './components/checkbox.vue'
|
||||
import Input from './components/input.vue'
|
||||
import InputNumber from './components/inputnumber.vue'
|
||||
import Select from './components/select.vue'
|
||||
import Switch from './components/switch.vue'
|
||||
import Slider from './components/slider.vue'
|
||||
import Rate from './components/rate.vue'
|
||||
|
||||
const components = {
|
||||
图标: Icon,
|
||||
按钮: Button,
|
||||
文字链接: Link,
|
||||
单选框: Radio,
|
||||
多选框: Checkbox,
|
||||
输入框: Input,
|
||||
数字输入框: InputNumber,
|
||||
选择器: Select,
|
||||
开关: Switch,
|
||||
滑块: Slider,
|
||||
评分: Rate,
|
||||
}
|
||||
|
||||
function open(url: string) {
|
||||
window.open(url, '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<page-header title="基础组件" content="由 Element Plus 提供，本页仅展示部分组件，更多组件及使用说明请查看 Element Plus 官网">
|
||||
<el-button @click="open('https://element-plus.org/#/zh-CN')">
|
||||
<template #icon>
|
||||
<el-icon>
|
||||
<svg-icon name="i-ep:link" />
|
||||
</el-icon>
|
||||
</template>
|
||||
Element Plus 官网
|
||||
</el-button>
|
||||
</page-header>
|
||||
<page-main>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane v-for="(item, key) in components" :key="key" :label="key">
|
||||
<component :is="item" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,51 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const input = ref('')
|
||||
const input1 = ref('')
|
||||
const input2 = ref('')
|
||||
const textarea = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="输入框" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-input v-model="input" placeholder="请输入内容" />
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-input v-model="input" placeholder="请输入内容" :disabled="true" />
|
||||
</page-main>
|
||||
<page-main title="可清空" class="demo">
|
||||
<el-input v-model="input" placeholder="请输入内容" clearable />
|
||||
</page-main>
|
||||
<page-main title="密码框" class="demo">
|
||||
<el-input v-model="input" placeholder="请输入内容" show-password />
|
||||
</page-main>
|
||||
<page-main title="带 icon 的输入框" class="demo">
|
||||
<el-input v-model="input1" placeholder="请选择日期">
|
||||
<template #suffix>
|
||||
<el-icon class="el-input__icon">
|
||||
<svg-icon name="i-ep:calendar" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input v-model="input2" placeholder="请输入内容">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<svg-icon name="i-ep:search" />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</page-main>
|
||||
<page-main title="文本域" class="demo">
|
||||
<el-input v-model="textarea" type="textarea" :rows="2" placeholder="请输入内容" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,36 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const num = ref(1)
|
||||
const num2 = ref(1)
|
||||
const num3 = ref(5)
|
||||
const num4 = ref(1)
|
||||
const num5 = ref(1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="数字输入框" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-input-number v-model="num" :min="1" :max="10" label="描述文字" />
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-input-number v-model="num2" :disabled="true" />
|
||||
</page-main>
|
||||
<page-main title="步数" class="demo">
|
||||
<el-input-number v-model="num3" :step="2" />
|
||||
</page-main>
|
||||
<page-main title="精度" class="demo">
|
||||
<el-input-number v-model="num4" :precision="2" :step="0.1" :max="10" />
|
||||
</page-main>
|
||||
<page-main title="按钮位置" class="demo">
|
||||
<el-input-number v-model="num5" controls-position="right" :min="1" :max="10" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,83 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="文字链接" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-link href="https://element.eleme.io" target="_blank">
|
||||
默认链接
|
||||
</el-link>
|
||||
<el-link type="primary">
|
||||
主要链接
|
||||
</el-link>
|
||||
<el-link type="success">
|
||||
成功链接
|
||||
</el-link>
|
||||
<el-link type="warning">
|
||||
警告链接
|
||||
</el-link>
|
||||
<el-link type="danger">
|
||||
危险链接
|
||||
</el-link>
|
||||
<el-link type="info">
|
||||
信息链接
|
||||
</el-link>
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-link disabled>
|
||||
默认链接
|
||||
</el-link>
|
||||
<el-link type="primary" disabled>
|
||||
主要链接
|
||||
</el-link>
|
||||
<el-link type="success" disabled>
|
||||
成功链接
|
||||
</el-link>
|
||||
<el-link type="warning" disabled>
|
||||
警告链接
|
||||
</el-link>
|
||||
<el-link type="danger" disabled>
|
||||
危险链接
|
||||
</el-link>
|
||||
<el-link type="info" disabled>
|
||||
信息链接
|
||||
</el-link>
|
||||
</page-main>
|
||||
<page-main title="下划线" class="demo">
|
||||
<el-link :underline="false">
|
||||
无下划线
|
||||
</el-link>
|
||||
<el-link>有下划线</el-link>
|
||||
</page-main>
|
||||
<page-main title="图标" class="demo">
|
||||
<el-link>
|
||||
<el-icon class="el-icon--left">
|
||||
<svg-icon name="i-ep:edit" />
|
||||
</el-icon>
|
||||
编辑
|
||||
</el-link>
|
||||
<el-link>
|
||||
查看
|
||||
<el-icon class="el-icon--right">
|
||||
<svg-icon name="i-ep:view" />
|
||||
</el-icon>
|
||||
</el-link>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo {
|
||||
.el-link {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const radio = ref('1')
|
||||
const radio2 = ref('选中且禁用')
|
||||
const radio3 = ref(3)
|
||||
const radio4 = ref('上海')
|
||||
const radio5 = ref('1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="单选框" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-radio v-model="radio" label="1">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio v-model="radio" label="2">
|
||||
备选项
|
||||
</el-radio>
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-radio v-model="radio2" disabled label="禁用">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio v-model="radio2" disabled label="选中且禁用">
|
||||
备选项
|
||||
</el-radio>
|
||||
</page-main>
|
||||
<page-main title="单选框组" class="demo">
|
||||
<el-radio-group v-model="radio3">
|
||||
<el-radio :label="3">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio :label="6">
|
||||
备选项
|
||||
</el-radio>
|
||||
<el-radio :label="9">
|
||||
备选项
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</page-main>
|
||||
<page-main title="按钮样式" class="demo">
|
||||
<el-radio-group v-model="radio4">
|
||||
<el-radio-button label="上海" />
|
||||
<el-radio-button label="北京" />
|
||||
<el-radio-button label="广州" />
|
||||
<el-radio-button label="深圳" />
|
||||
</el-radio-group>
|
||||
</page-main>
|
||||
<page-main title="带有边框" class="demo">
|
||||
<el-radio v-model="radio5" label="1" border>
|
||||
备选项1
|
||||
</el-radio>
|
||||
<el-radio v-model="radio5" label="2" border>
|
||||
备选项2
|
||||
</el-radio>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,28 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const value1 = ref()
|
||||
const value2 = ref()
|
||||
const value3 = ref(3.7)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="评分" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-rate v-model="value1" />
|
||||
</page-main>
|
||||
<page-main title="辅助文字" class="demo">
|
||||
<el-rate v-model="value2" show-text :texts="['极差', '差', '一般', '好', '极好']" />
|
||||
</page-main>
|
||||
<page-main title="只读" class="demo">
|
||||
<el-rate v-model="value3" disabled show-score text-color="#ff9900" score-template="{value}" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,63 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const options1 = ref([
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶' },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项5', label: '北京烤鸭' },
|
||||
])
|
||||
const value1 = ref('')
|
||||
const options2 = ref([
|
||||
{ value: '选项1', label: '黄金糕' },
|
||||
{ value: '选项2', label: '双皮奶', disabled: true },
|
||||
{ value: '选项3', label: '蚵仔煎' },
|
||||
{ value: '选项4', label: '龙须面' },
|
||||
{ value: '选项5', label: '北京烤鸭' },
|
||||
])
|
||||
const value2 = ref('')
|
||||
const value3 = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="选择器" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-select v-model="value1" placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</page-main>
|
||||
<page-main title="有禁用选项" class="demo">
|
||||
<el-select v-model="value2" placeholder="请选择">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-select v-model="value1" disabled placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</page-main>
|
||||
<page-main title="可清空单选" class="demo">
|
||||
<el-select v-model="value1" clearable placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</page-main>
|
||||
<page-main title="基础多选" class="demo">
|
||||
<el-select v-model="value3" multiple placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</page-main>
|
||||
<page-main title="可搜索" class="demo">
|
||||
<el-select v-model="value1" filterable placeholder="请选择">
|
||||
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,56 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const value1 = ref(0)
|
||||
const value2 = ref(50)
|
||||
const value3 = ref(36)
|
||||
const value4 = ref(48)
|
||||
const value5 = ref(42)
|
||||
const value6 = ref(0)
|
||||
const value7 = ref(0)
|
||||
const value8 = ref([4, 8])
|
||||
const value9 = ref(0)
|
||||
|
||||
function formatTooltip(val: number) {
|
||||
return val / 100
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="滑块" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<span class="demonstration">默认</span>
|
||||
<el-slider v-model="value1" />
|
||||
<span class="demonstration">自定义初始值</span>
|
||||
<el-slider v-model="value2" />
|
||||
<span class="demonstration">隐藏 Tooltip</span>
|
||||
<el-slider v-model="value3" :show-tooltip="false" />
|
||||
<span class="demonstration">格式化 Tooltip</span>
|
||||
<el-slider v-model="value4" :format-tooltip="formatTooltip" />
|
||||
<span class="demonstration">禁用</span>
|
||||
<el-slider v-model="value5" disabled />
|
||||
</page-main>
|
||||
<page-main title="离散值" class="demo">
|
||||
<span class="demonstration">不显示间断点</span>
|
||||
<el-slider v-model="value6" :step="10" />
|
||||
<span class="demonstration">显示间断点</span>
|
||||
<el-slider v-model="value6" :step="10" show-stops />
|
||||
</page-main>
|
||||
<page-main title="带有输入框" class="demo">
|
||||
<el-slider v-model="value7" show-input />
|
||||
</page-main>
|
||||
<page-main title="范围选择" class="demo">
|
||||
<el-slider v-model="value8" range show-stops :max="10" />
|
||||
</page-main>
|
||||
<page-main title="竖向模式" class="demo">
|
||||
<el-slider v-model="value9" vertical height="200px" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,30 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const value = ref(true)
|
||||
const value1 = ref(true)
|
||||
const value2 = ref(true)
|
||||
const value3 = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="开关" />
|
||||
<page-main title="基础用法" class="demo">
|
||||
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
|
||||
</page-main>
|
||||
<page-main title="文字描述" class="demo">
|
||||
<el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
|
||||
</page-main>
|
||||
<page-main title="禁用状态" class="demo">
|
||||
<el-switch v-model="value2" disabled style="margin-right: 10px;" />
|
||||
<el-switch v-model="value3" disabled />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,62 +0,0 @@
|
||||
<route lang="yaml">
|
||||
meta:
|
||||
enabled: false
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Alert from './components/alert.vue'
|
||||
|
||||
const makeRange = (start: number, end: number) => {
|
||||
const result: number[] = []
|
||||
for (let i = start; i <= end; i++) {
|
||||
result.push(i)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const value = ref('')
|
||||
const value1 = ref(new Date(2016, 9, 10, 18, 30))
|
||||
const startTime = ref('')
|
||||
const endTime = ref('')
|
||||
|
||||
// 如允许 17:30:00 - 18:30:00
|
||||
const disabledHours = () => {
|
||||
return makeRange(0, 16).concat(makeRange(19, 23))
|
||||
}
|
||||
const disabledMinutes = (hour: number) => {
|
||||
if (hour === 17) {
|
||||
return makeRange(0, 29)
|
||||
}
|
||||
else if (hour === 18) {
|
||||
return makeRange(31, 59)
|
||||
}
|
||||
else {
|
||||
return makeRange(0, 59)
|
||||
}
|
||||
}
|
||||
const disabledSeconds = (hour: number, minute: number) => {
|
||||
if (hour === 18 && minute === 30) {
|
||||
return makeRange(1, 59)
|
||||
}
|
||||
else {
|
||||
return makeRange(0, 59)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Alert />
|
||||
<page-header title="时间选择器" />
|
||||
<page-main title="固定时间点" class="demo">
|
||||
<el-time-select v-model="value" start="08:30" step="00:15" end="18:30" placeholder="选择时间" />
|
||||
</page-main>
|
||||
<page-main title="限制时间选择范围" class="demo">
|
||||
<el-time-picker v-model="value1" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds" placeholder="任意时间点" />
|
||||
</page-main>
|
||||
<page-main title="固定时间范围" class="demo">
|
||||
<el-time-select v-model="startTime" placeholder="起始时间" start="08:30" step="00:15" end="18:30" style="margin-right: 10px;" />
|
||||
<el-time-select v-model="endTime" placeholder="结束时间" start="08:30" step="00:15" end="18:30" :min-time="startTime" />
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user