2020-12-08 18:20:35 +08:00
|
|
|
|
<template>
|
2020-12-20 16:05:55 +08:00
|
|
|
|
<div id="main-warp">
|
|
|
|
|
|
<img src="/@/assets/logo-web-element.svg" />
|
|
|
|
|
|
<div style="display:flex;">
|
|
|
|
|
|
<span style="display:flex;align-items: center;">primary:<el-color-picker v-model="color1" @change="colorChange1">
|
|
|
|
|
|
</el-color-picker></span>
|
|
|
|
|
|
<span style="display:flex;align-items: center;margin-left:15px;">success:<el-color-picker v-model="color2"
|
|
|
|
|
|
@change="colorChange2">
|
|
|
|
|
|
</el-color-picker></span>
|
|
|
|
|
|
<span style="display:flex;align-items: center;margin-left:15px;">info:<el-color-picker v-model="color3"
|
|
|
|
|
|
@change="colorChange3">
|
|
|
|
|
|
</el-color-picker></span>
|
|
|
|
|
|
<span style="display:flex;align-items: center;margin-left:15px;">warning:<el-color-picker v-model="color4"
|
|
|
|
|
|
@change="colorChange4">
|
|
|
|
|
|
</el-color-picker></span>
|
|
|
|
|
|
<span style="display:flex;align-items: center;margin-left:15px;">danger:<el-color-picker v-model="color5"
|
|
|
|
|
|
@change="colorChange5">
|
|
|
|
|
|
</el-color-picker></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<span>灰色模式</span>
|
|
|
|
|
|
<el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
|
|
|
|
|
|
<el-divider></el-divider>
|
2020-12-22 14:03:50 +08:00
|
|
|
|
<span>开启水印</span>
|
|
|
|
|
|
<el-switch v-model="wart" @change="onSwitchChange2"></el-switch>
|
|
|
|
|
|
<el-divider></el-divider>
|
2020-12-20 16:05:55 +08:00
|
|
|
|
<div>Button 按钮</div>
|
|
|
|
|
|
<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 icon="el-icon-search" circle></el-button>
|
|
|
|
|
|
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
|
|
|
|
<el-button type="success" icon="el-icon-check" circle></el-button>
|
|
|
|
|
|
<el-button type="info" icon="el-icon-message" circle></el-button>
|
|
|
|
|
|
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
|
|
|
|
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Link 文字链接</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-link 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>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Radio 单选框</div>
|
|
|
|
|
|
<el-radio v-model="radio" label="1">备选项</el-radio>
|
|
|
|
|
|
<el-radio v-model="radio" label="2">备选项</el-radio>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-radio-group v-model="radio1">
|
|
|
|
|
|
<el-radio-button label="上海"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="北京"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="广州"></el-radio-button>
|
|
|
|
|
|
<el-radio-button label="深圳"></el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-radio v-model="radio" label="1" border>备选项1</el-radio>
|
|
|
|
|
|
<el-radio v-model="radio" label="2" border>备选项2</el-radio>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Checkbox 多选框</div>
|
|
|
|
|
|
<el-checkbox v-model="checked">备选项</el-checkbox>
|
|
|
|
|
|
<el-checkbox-group v-model="checkboxGroup1">
|
|
|
|
|
|
<el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
|
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-checkbox v-model="checked" label="备选项1" border></el-checkbox>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Input 输入框</div>
|
|
|
|
|
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">InputNumber 计数器</div>
|
|
|
|
|
|
<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Select 选择器</div>
|
|
|
|
|
|
<el-select v-model="value" placeholder="请选择">
|
|
|
|
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
|
|
|
</el-option>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Cascader 级联选择器</div>
|
|
|
|
|
|
<el-cascader v-model="cascader" :options="optionsOne" :props="props"></el-cascader>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Switch 开关</div>
|
|
|
|
|
|
<el-switch v-model="switch" active-text="按月付费" inactive-text="按年付费">
|
|
|
|
|
|
</el-switch>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Slider 滑块</div>
|
|
|
|
|
|
<el-slider v-model="slider"></el-slider>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">TimePicker 时间选择器</div>
|
|
|
|
|
|
<el-time-picker is-range arrow-control v-model="timepicker" range-separator="至" start-placeholder="开始时间"
|
|
|
|
|
|
end-placeholder="结束时间" placeholder="选择时间范围">
|
|
|
|
|
|
</el-time-picker>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">TimeSelect 时间选择</div>
|
|
|
|
|
|
<el-time-select v-model="timeselect" start='08:30' step='00:15' end='18:30' placeholder="选择时间">
|
|
|
|
|
|
</el-time-select>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">DatePicker 日期选择器</div>
|
|
|
|
|
|
<el-date-picker v-model="datepicker1" type="date" placeholder="选择日期">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="datepicker1" align="right" type="date" placeholder="选择日期" :disabled-date="disabledDate"
|
|
|
|
|
|
:shortcuts="shortcuts">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="datepicker1" type="week" format="gggg 第 ww 周" placeholder="选择周">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker type="dates" v-model="datepicker2" placeholder="选择一个或多个日期">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="datepicker1" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
|
|
|
|
end-placeholder="结束日期">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="datepicker1" type="daterange" align="right" unlink-panels range-separator="至"
|
|
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">DateTimePicker 日期时间选择器</div>
|
|
|
|
|
|
<el-date-picker v-model="valuepicker1" type="datetime" placeholder="选择日期时间">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="valuepicker1" type="datetime" placeholder="选择日期时间" align="right" :shortcuts="shortcuts">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="valuepicker1" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="valuepicker2" type="datetimerange" range-separator="至" start-placeholder="开始日期"
|
|
|
|
|
|
end-placeholder="结束日期">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-date-picker v-model="valuepicker3" type="datetimerange" :shortcuts="shortcuts1" range-separator="至"
|
|
|
|
|
|
start-placeholder="开始日期" end-placeholder="结束日期" align="right">
|
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Upload 上传</div>
|
|
|
|
|
|
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3"
|
|
|
|
|
|
:file-list="fileList">
|
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
|
<template #tip>
|
|
|
|
|
|
<div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card">
|
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
|
|
|
|
|
|
list-type="picture">
|
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
|
<template #tip>
|
|
|
|
|
|
<div class="el-upload__tip">
|
|
|
|
|
|
只能上传 jpg/png 文件，且不超过 500kb
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
|
|
|
|
|
|
<i class="el-icon-upload"></i>
|
|
|
|
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
|
|
|
|
<template #tip>
|
|
|
|
|
|
<div class="el-upload__tip">
|
|
|
|
|
|
只能上传 jpg/png 文件，且不超过 500kb
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-upload>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Upload 上传</div>
|
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
|
<el-transfer v-model="rightValue" style="text-align: left; display: inline-block" filterable
|
|
|
|
|
|
:left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="['Source', 'Target']"
|
|
|
|
|
|
:button-texts="['到左边', '到右边']" :format="{
|
|
|
|
|
|
noChecked: '${total}',
|
|
|
|
|
|
hasChecked: '${checked}/${total}'
|
|
|
|
|
|
}" :data="datas">
|
|
|
|
|
|
<template #default="{option}">
|
|
|
|
|
|
<span>{{ option.key }} - {{ option.label }}</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template #left-footer>
|
|
|
|
|
|
<el-button class="transfer-footer" size="small">操作</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<template #right-footer>
|
|
|
|
|
|
<el-button class="transfer-footer" size="small">操作</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-transfer>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Form 表单</div>
|
|
|
|
|
|
<el-form ref="form" :model="forms" label-width="80px">
|
|
|
|
|
|
<el-form-item label="活动名称">
|
|
|
|
|
|
<el-input v-model="forms.name"></el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="活动区域">
|
|
|
|
|
|
<el-select v-model="forms.region" placeholder="请选择活动区域">
|
|
|
|
|
|
<el-option label="区域一" value="shanghai"></el-option>
|
|
|
|
|
|
<el-option label="区域二" value="beijing"></el-option>
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="活动时间">
|
|
|
|
|
|
<el-col :span="11">
|
|
|
|
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="forms.date1" style="width: 100%;"></el-date-picker>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col class="line" :span="2">-</el-col>
|
|
|
|
|
|
<el-col :span="11">
|
|
|
|
|
|
<el-time-picker placeholder="选择时间" v-model="forms.date2" style="width: 100%;"></el-time-picker>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="即时配送">
|
|
|
|
|
|
<el-switch v-model="forms.delivery"></el-switch>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="活动性质">
|
|
|
|
|
|
<el-checkbox-group v-model="forms.type">
|
|
|
|
|
|
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
|
|
|
|
|
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
|
|
|
|
|
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
|
|
|
|
|
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
|
|
|
|
|
</el-checkbox-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="特殊资源">
|
|
|
|
|
|
<el-radio-group v-model="forms.resource">
|
|
|
|
|
|
<el-radio label="线上品牌商赞助"></el-radio>
|
|
|
|
|
|
<el-radio label="线下场地免费"></el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="活动形式">
|
|
|
|
|
|
<el-input type="textarea" v-model="forms.desc"></el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
|
<el-button type="primary">立即创建</el-button>
|
|
|
|
|
|
<el-button>取消</el-button>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Table 表格</div>
|
|
|
|
|
|
<el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
|
|
|
|
|
|
<el-table-column prop="date" label="日期" sortable width="180">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="name" label="姓名" sortable width="180">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="address" label="地址" :formatter="formatter">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
<div class="aaa">Table 表格</div>
|
|
|
|
|
|
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type" effect="light">
|
|
|
|
|
|
{{tag.name}}
|
|
|
|
|
|
</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" closable>
|
|
|
|
|
|
{{ 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" closable>
|
|
|
|
|
|
{{ item.label }}
|
|
|
|
|
|
</el-tag>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Progress 进度条</div>
|
|
|
|
|
|
<el-progress :percentage="50"></el-progress>
|
|
|
|
|
|
<el-progress :percentage="40" status="success"></el-progress>
|
|
|
|
|
|
<el-progress :percentage="40" status="warning"></el-progress>
|
|
|
|
|
|
<el-progress :percentage="50" status="exception"></el-progress>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Pagination 分页</div>
|
|
|
|
|
|
<el-pagination layout="prev, pager, next" :total="1000">
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
<el-pagination :current-page="4" background :page-sizes="[100, 200, 300, 400]" :page-size="100"
|
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="400">
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Badge 标记</div>
|
|
|
|
|
|
<el-badge :value="1" class="item" style="margin-right: 40px;" type="primary">
|
|
|
|
|
|
<el-button size="small">评论</el-button>
|
|
|
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge :value="2" style="margin-right: 40px;" type="success">
|
|
|
|
|
|
<el-button size="small">回复</el-button>
|
|
|
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge :value="2" style="margin-right: 40px;" type="warning">
|
|
|
|
|
|
<el-button size="small">回复</el-button>
|
|
|
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge :value="2" style="margin-right: 40px;" type="danger">
|
|
|
|
|
|
<el-button size="small">回复</el-button>
|
|
|
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge :value="222" style="margin-right: 40px;" type="info">
|
|
|
|
|
|
<el-button size="small">回复</el-button>
|
|
|
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge value="new" style="margin-right: 40px;">
|
|
|
|
|
|
<el-button size="small">评论</el-button>
|
|
|
|
|
|
</el-badge>
|
|
|
|
|
|
<el-badge is-dot class="item">数据查询</el-badge>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Alert 警告</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-alert title="成功提示的文案" type="success" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="消息提示的文案" type="info" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="警告提示的文案" type="warning" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="错误提示的文案" type="error" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-alert title="成功提示的文案" type="success" effect="dark" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="消息提示的文案" type="info" effect="dark" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="警告提示的文案" type="warning" effect="dark" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="错误提示的文案" type="error" effect="dark" style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style="margin: 15px 0;">
|
|
|
|
|
|
<el-alert title="成功提示的文案" type="success" show-icon style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="消息提示的文案" type="info" show-icon style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="警告提示的文案" type="warning" show-icon style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="错误提示的文案" type="error" show-icon style="margin-bottom: 10px;"></el-alert>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon
|
|
|
|
|
|
style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon
|
|
|
|
|
|
style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon
|
|
|
|
|
|
style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
<el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon
|
|
|
|
|
|
style="margin-bottom: 10px;">
|
|
|
|
|
|
</el-alert>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Loading 加载</div>
|
|
|
|
|
|
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
|
|
|
|
|
<el-table-column prop="date" label="日期" width="180">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="name" label="姓名" width="180">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="address" label="地址">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
|
|
|
|
|
element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" style="width: 100%">
|
|
|
|
|
|
<el-table-column prop="date" label="日期" width="180">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="name" label="姓名" width="180">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="address" label="地址">
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Message 消息提示</div>
|
|
|
|
|
|
<el-button :plain="true" @click="open1">成功</el-button>
|
|
|
|
|
|
<el-button :plain="true" @click="open2">警告</el-button>
|
|
|
|
|
|
<el-button :plain="true" @click="open3">消息</el-button>
|
|
|
|
|
|
<el-button :plain="true" @click="open4">错误</el-button>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">MessageBox 弹框</div>
|
|
|
|
|
|
<el-button type="text" @click="open5">点击打开 Message Box</el-button>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Notification 通知</div>
|
|
|
|
|
|
<el-button plain @click="open6">
|
|
|
|
|
|
成功
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button plain @click="open7">
|
|
|
|
|
|
警告
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button plain @click="open8">
|
|
|
|
|
|
消息
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-button plain @click="open9">
|
|
|
|
|
|
错误
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">NavMenu 导航菜单</div>
|
|
|
|
|
|
<el-menu default-active="1" class="el-menu-demo" mode="horizontal">
|
|
|
|
|
|
<el-menu-item index="1">处理中心</el-menu-item>
|
|
|
|
|
|
<el-submenu index="2">
|
|
|
|
|
|
<template #title>我的工作台</template>
|
|
|
|
|
|
<el-menu-item index="2-1">选项1</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="2-2">选项2</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="2-3">选项3</el-menu-item>
|
|
|
|
|
|
<el-submenu index="2-4">
|
|
|
|
|
|
<template #title>选项4</template>
|
|
|
|
|
|
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="4">订单管理</el-menu-item>
|
|
|
|
|
|
</el-menu>
|
|
|
|
|
|
<el-row class="tac">
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<h5>默认颜色</h5>
|
|
|
|
|
|
<el-menu default-active="2" style="width:210px;">
|
|
|
|
|
|
<el-submenu index="1">
|
|
|
|
|
|
<template #title>
|
|
|
|
|
|
<i class="el-icon-location"></i>
|
|
|
|
|
|
<span>导航一</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<el-menu-item-group>
|
|
|
|
|
|
<template #title>分组一</template>
|
|
|
|
|
|
<el-menu-item index="1-1">选项1</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="1-2">选项2</el-menu-item>
|
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
|
<el-menu-item-group title="分组2">
|
|
|
|
|
|
<el-menu-item index="1-3">选项3</el-menu-item>
|
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
|
<el-submenu index="1-4">
|
|
|
|
|
|
<template #title>选项4</template>
|
|
|
|
|
|
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
<el-menu-item index="2">
|
|
|
|
|
|
<i class="el-icon-menu"></i>
|
|
|
|
|
|
<template #title>导航二</template>
|
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="3" disabled>
|
|
|
|
|
|
<i class="el-icon-document"></i>
|
|
|
|
|
|
<template #title>导航三</template>
|
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="4">
|
|
|
|
|
|
<i class="el-icon-setting"></i>
|
|
|
|
|
|
<template #title>导航四</template>
|
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
</el-menu>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<h5>自定义颜色</h5>
|
|
|
|
|
|
<el-menu :uniqueOpened="true" default-active="2" background-color="#545c64" style="width:210px;"
|
|
|
|
|
|
text-color="#fff" active-text-color="#ffd04b">
|
|
|
|
|
|
<el-submenu index="1">
|
|
|
|
|
|
<template #title>
|
|
|
|
|
|
<i class="el-icon-location"></i>
|
|
|
|
|
|
<span>导航一</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<el-menu-item-group>
|
|
|
|
|
|
<template #title>分组一</template>
|
|
|
|
|
|
<el-menu-item index="1-1">选项1</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="1-2">选项2</el-menu-item>
|
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
|
<el-menu-item-group title="分组2">
|
|
|
|
|
|
<el-menu-item index="1-3">选项3</el-menu-item>
|
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
|
<el-submenu index="1-4">
|
|
|
|
|
|
<template #title>选项4</template>
|
|
|
|
|
|
<el-menu-item index="1-4-1">选项1</el-menu-item>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
<el-menu-item index="2">
|
|
|
|
|
|
<i class="el-icon-menu"></i>
|
|
|
|
|
|
<template #title>导航二</template>
|
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="3" disabled>
|
|
|
|
|
|
<i class="el-icon-document"></i>
|
|
|
|
|
|
<template #title>导航三</template>
|
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="4">
|
|
|
|
|
|
<i class="el-icon-setting"></i>
|
|
|
|
|
|
<template #title>导航四</template>
|
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
|
<el-submenu index="5">
|
|
|
|
|
|
<template #title>
|
|
|
|
|
|
<i class="el-icon-location"></i>
|
|
|
|
|
|
<span>导航一</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<el-menu-item-group>
|
|
|
|
|
|
<template #title>分组一</template>
|
|
|
|
|
|
<el-menu-item index="5-1">选项1</el-menu-item>
|
|
|
|
|
|
<el-menu-item index="5-2">选项2</el-menu-item>
|
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
|
<el-menu-item-group title="分组2">
|
|
|
|
|
|
<el-menu-item index="5-3">选项3</el-menu-item>
|
|
|
|
|
|
</el-menu-item-group>
|
|
|
|
|
|
</el-submenu>
|
|
|
|
|
|
</el-menu>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Tabs 标签页</div>
|
|
|
|
|
|
<el-tabs v-model="activeName">
|
|
|
|
|
|
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
|
|
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
|
|
|
|
|
|
<el-radio-button label="top">top</el-radio-button>
|
|
|
|
|
|
<el-radio-button label="right">right</el-radio-button>
|
|
|
|
|
|
<el-radio-button label="bottom">bottom</el-radio-button>
|
|
|
|
|
|
<el-radio-button label="left">left</el-radio-button>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
|
|
|
|
|
|
<el-tabs :tab-position="tabPosition" style="height: 200px;">
|
|
|
|
|
|
<el-tab-pane label="用户管理">用户管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
|
|
|
|
|
|
<el-tabs type="border-card">
|
|
|
|
|
|
<el-tab-pane>
|
|
|
|
|
|
<template #label>
|
|
|
|
|
|
<span><i class="el-icon-date"></i> 我的行程</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
我的行程
|
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="消息中心">消息中心</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="角色管理">角色管理</el-tab-pane>
|
|
|
|
|
|
<el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Breadcrumb 面包屑</div>
|
|
|
|
|
|
<el-breadcrumb separator="/">
|
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
|
|
|
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
|
|
|
|
|
|
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
|
|
|
|
|
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
|
|
|
|
|
</el-breadcrumb>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Dropdown 下拉菜单</div>
|
|
|
|
|
|
<el-dropdown>
|
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
|
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
|
<el-dropdown-item>黄金糕</el-dropdown-item>
|
|
|
|
|
|
<el-dropdown-item>狮子头</el-dropdown-item>
|
|
|
|
|
|
<el-dropdown-item>螺蛳粉</el-dropdown-item>
|
|
|
|
|
|
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
|
|
|
|
|
|
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
|
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Steps 步骤条</div>
|
|
|
|
|
|
<el-steps :active="active111" finish-status="success">
|
|
|
|
|
|
<el-step title="步骤 1"></el-step>
|
|
|
|
|
|
<el-step title="步骤 2"></el-step>
|
|
|
|
|
|
<el-step title="步骤 3"></el-step>
|
|
|
|
|
|
</el-steps>
|
|
|
|
|
|
<el-button style="margin-top: 12px;" @click="next">下一步</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
<el-steps :active="2">
|
|
|
|
|
|
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
|
|
|
|
|
|
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
|
|
|
|
|
|
<el-step title="步骤 3" description="这段就没那么长了"></el-step>
|
|
|
|
|
|
</el-steps>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Dialog 对话框</div>
|
|
|
|
|
|
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog title="提示" v-model="dialogVisible" width="30%">
|
|
|
|
|
|
<span>这是一段信息</span>
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Timeline 时间线</div>
|
|
|
|
|
|
<div class="block" style="margin:15px;">
|
|
|
|
|
|
<el-timeline>
|
|
|
|
|
|
<el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
|
|
|
|
|
|
:type="activity.type" :color="activity.color" :size="activity.size" :timestamp="activity.timestamp">
|
|
|
|
|
|
{{activity.content}}
|
|
|
|
|
|
</el-timeline-item>
|
|
|
|
|
|
</el-timeline>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Calendar 日历</div>
|
|
|
|
|
|
<el-calendar v-model="calendarvalue"></el-calendar>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="aaa">Backtop 回到顶部</div>
|
|
|
|
|
|
<el-backtop target="#main-warp"></el-backtop>
|
|
|
|
|
|
<el-divider></el-divider>
|
|
|
|
|
|
</div>
|
2020-12-08 18:20:35 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
2020-12-22 14:03:50 +08:00
|
|
|
|
import { reactive, toRefs, getCurrentInstance } from "vue";
|
2020-12-20 16:05:55 +08:00
|
|
|
|
import { getLightColor } from "/@/utils/theme.ts";
|
2020-12-22 14:03:50 +08:00
|
|
|
|
import Watermark from "/@/utils/wartermark.ts";
|
2020-12-20 16:05:55 +08:00
|
|
|
|
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
|
2020-12-08 18:20:35 +08:00
|
|
|
|
export default {
|
|
|
|
|
|
name: "App",
|
2020-12-13 22:46:41 +08:00
|
|
|
|
setup() {
|
2020-12-22 14:03:50 +08:00
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
// proxy.$message("mesage")
|
|
|
|
|
|
|
2020-12-20 16:05:55 +08:00
|
|
|
|
const generateData = (_) => {
|
|
|
|
|
|
const data = [];
|
|
|
|
|
|
for (let i = 1; i <= 15; i++) {
|
|
|
|
|
|
data.push({
|
|
|
|
|
|
key: i,
|
|
|
|
|
|
label: `备选项 ${i}`,
|
|
|
|
|
|
disabled: i % 4 === 0,
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
return data;
|
|
|
|
|
|
};
|
2020-12-13 22:46:41 +08:00
|
|
|
|
const state = reactive({
|
2020-12-20 16:05:55 +08:00
|
|
|
|
calendarvalue: new Date(),
|
|
|
|
|
|
activities: [
|
|
|
|
|
|
{
|
|
|
|
|
|
content: "支持使用图标",
|
|
|
|
|
|
timestamp: "2018-04-12 20:46",
|
|
|
|
|
|
size: "large",
|
|
|
|
|
|
type: "primary",
|
|
|
|
|
|
icon: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
content: "支持自定义颜色",
|
|
|
|
|
|
timestamp: "2018-04-03 20:46",
|
|
|
|
|
|
type: "success",
|
|
|
|
|
|
icon: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
content: "支持自定义尺寸",
|
|
|
|
|
|
timestamp: "2018-04-03 20:46",
|
|
|
|
|
|
size: "large",
|
|
|
|
|
|
type: "warning",
|
|
|
|
|
|
icon: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
content: "默认样式的节点",
|
|
|
|
|
|
timestamp: "2018-04-03 20:46",
|
|
|
|
|
|
type: "danger",
|
|
|
|
|
|
icon: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
content: "默认344 info",
|
|
|
|
|
|
timestamp: "2018-04-03 20:46",
|
|
|
|
|
|
type: "info",
|
|
|
|
|
|
icon: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
|
active111: 0,
|
|
|
|
|
|
tabPosition: "left",
|
|
|
|
|
|
activeName: "second",
|
|
|
|
|
|
loading: true,
|
|
|
|
|
|
customColor: "#409eff",
|
|
|
|
|
|
items: [
|
|
|
|
|
|
{ type: "", label: "标签一" },
|
|
|
|
|
|
{ type: "success", label: "标签二" },
|
|
|
|
|
|
{ type: "info", label: "标签三" },
|
|
|
|
|
|
{ type: "warning", label: "标签四" },
|
|
|
|
|
|
{ type: "danger", label: "标签五" },
|
|
|
|
|
|
],
|
|
|
|
|
|
tags: [
|
|
|
|
|
|
{ name: "标签一", type: "" },
|
|
|
|
|
|
{ name: "标签二", type: "success" },
|
|
|
|
|
|
{ name: "标签三", type: "info" },
|
|
|
|
|
|
{ name: "标签四", type: "warning" },
|
|
|
|
|
|
{ name: "标签五", type: "danger" },
|
|
|
|
|
|
],
|
|
|
|
|
|
tableData: [
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-03",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-02",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-04",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-01",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-08",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-06",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
date: "2016-05-07",
|
|
|
|
|
|
name: "王小虎",
|
|
|
|
|
|
province: "上海",
|
|
|
|
|
|
city: "普陀区",
|
|
|
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
|
|
|
zip: 200333,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
forms: {
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
region: "",
|
|
|
|
|
|
date1: "",
|
|
|
|
|
|
date2: "",
|
|
|
|
|
|
delivery: false,
|
|
|
|
|
|
type: [],
|
|
|
|
|
|
resource: "",
|
|
|
|
|
|
desc: "",
|
|
|
|
|
|
},
|
|
|
|
|
|
rightValue: [1],
|
|
|
|
|
|
datas: generateData(),
|
|
|
|
|
|
imageUrl: "",
|
|
|
|
|
|
fileList: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "food.jpeg",
|
|
|
|
|
|
url:
|
|
|
|
|
|
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "food2.jpeg",
|
|
|
|
|
|
url:
|
|
|
|
|
|
"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
valuepicker2: [
|
|
|
|
|
|
new Date(2000, 10, 10, 10, 10),
|
|
|
|
|
|
new Date(2000, 10, 11, 10, 10),
|
|
|
|
|
|
],
|
|
|
|
|
|
valuepicker3: "",
|
|
|
|
|
|
shortcuts1: [
|
|
|
|
|
|
{
|
|
|
|
|
|
text: "最近一周",
|
|
|
|
|
|
value: (() => {
|
|
|
|
|
|
const end = new Date();
|
|
|
|
|
|
const start = new Date();
|
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
|
|
return [start, end];
|
|
|
|
|
|
})(),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
text: "最近一个月",
|
|
|
|
|
|
value: (() => {
|
|
|
|
|
|
const end = new Date();
|
|
|
|
|
|
const start = new Date();
|
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
|
|
return [start, end];
|
|
|
|
|
|
})(),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
text: "最近三个月",
|
|
|
|
|
|
value: (() => {
|
|
|
|
|
|
const end = new Date();
|
|
|
|
|
|
const start = new Date();
|
|
|
|
|
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
|
|
|
return [start, end];
|
|
|
|
|
|
})(),
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
valuepicker1: "",
|
|
|
|
|
|
color1: "#409EFF",
|
|
|
|
|
|
color2: "#67C23A",
|
|
|
|
|
|
color3: "#909399",
|
|
|
|
|
|
color4: "#E6A23C",
|
|
|
|
|
|
color5: "#F56C6C",
|
2020-12-17 18:59:01 +08:00
|
|
|
|
value1: false,
|
2020-12-20 16:05:55 +08:00
|
|
|
|
radio: "1",
|
|
|
|
|
|
radio1: "上海",
|
|
|
|
|
|
checked: true,
|
|
|
|
|
|
cities: ["上海", "北京", "广州", "深圳"],
|
|
|
|
|
|
checkboxGroup1: ["上海"],
|
|
|
|
|
|
input: "",
|
|
|
|
|
|
num: 1,
|
|
|
|
|
|
options: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "选项1",
|
|
|
|
|
|
label: "黄金糕",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "选项2",
|
|
|
|
|
|
label: "双皮奶",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
value: "",
|
|
|
|
|
|
props: { expandTrigger: "hover" },
|
|
|
|
|
|
cascader: [],
|
|
|
|
|
|
optionsOne: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "zhinan",
|
|
|
|
|
|
label: "指南",
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "shejiyuanze",
|
|
|
|
|
|
label: "设计原则",
|
|
|
|
|
|
children: [
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "yizhi",
|
|
|
|
|
|
label: "一致",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "fankui",
|
|
|
|
|
|
label: "反馈",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "xiaolv",
|
|
|
|
|
|
label: "效率",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
value: "kekong",
|
|
|
|
|
|
label: "可控",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
switch: true,
|
|
|
|
|
|
slider: 50,
|
|
|
|
|
|
timepicker: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
|
|
|
|
|
|
timeselect: "",
|
|
|
|
|
|
datepicker1: "",
|
|
|
|
|
|
datepicker2: "",
|
|
|
|
|
|
disabledDate(time) {
|
|
|
|
|
|
return time.getTime() > Date.now();
|
|
|
|
|
|
},
|
|
|
|
|
|
shortcuts: [
|
|
|
|
|
|
{
|
|
|
|
|
|
text: "Today",
|
|
|
|
|
|
value: new Date(),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
text: "Yesterday",
|
|
|
|
|
|
value: (() => {
|
|
|
|
|
|
const date = new Date();
|
|
|
|
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
|
|
|
return date;
|
|
|
|
|
|
})(),
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
text: "A week ago",
|
|
|
|
|
|
value: (() => {
|
|
|
|
|
|
const date = new Date();
|
|
|
|
|
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
|
|
return date;
|
|
|
|
|
|
})(),
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
2020-12-22 14:03:50 +08:00
|
|
|
|
wart: false,
|
2020-12-13 22:46:41 +08:00
|
|
|
|
});
|
2020-12-20 16:05:55 +08:00
|
|
|
|
function colorChange1() {
|
2020-12-17 18:59:01 +08:00
|
|
|
|
document.documentElement.style.setProperty(
|
2020-12-18 01:03:13 +08:00
|
|
|
|
"--color-primary",
|
2020-12-20 16:05:55 +08:00
|
|
|
|
state.color1
|
2020-12-17 18:59:01 +08:00
|
|
|
|
);
|
2020-12-18 17:18:51 +08:00
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-1",
|
2020-12-20 16:05:55 +08:00
|
|
|
|
getLightColor(state.color1, 0.1)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-2",
|
|
|
|
|
|
getLightColor(state.color1, 0.2)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-3",
|
|
|
|
|
|
getLightColor(state.color1, 0.3)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-4",
|
|
|
|
|
|
getLightColor(state.color1, 0.4)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-5",
|
|
|
|
|
|
getLightColor(state.color1, 0.5)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-6",
|
|
|
|
|
|
getLightColor(state.color1, 0.6)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-7",
|
|
|
|
|
|
getLightColor(state.color1, 0.7)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-8",
|
|
|
|
|
|
getLightColor(state.color1, 0.8)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-primary-light-9",
|
|
|
|
|
|
getLightColor(state.color1, 0.9)
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
function colorChange2() {
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success",
|
|
|
|
|
|
state.color2
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-1",
|
|
|
|
|
|
getLightColor(state.color2, 0.1)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-2",
|
|
|
|
|
|
getLightColor(state.color2, 0.2)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-3",
|
|
|
|
|
|
getLightColor(state.color2, 0.3)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-4",
|
|
|
|
|
|
getLightColor(state.color2, 0.4)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-5",
|
|
|
|
|
|
getLightColor(state.color2, 0.5)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-6",
|
|
|
|
|
|
getLightColor(state.color2, 0.6)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-7",
|
|
|
|
|
|
getLightColor(state.color2, 0.7)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-8",
|
|
|
|
|
|
getLightColor(state.color2, 0.8)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-success-light-9",
|
|
|
|
|
|
getLightColor(state.color2, 0.9)
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
function colorChange3() {
|
|
|
|
|
|
document.documentElement.style.setProperty("--color-info", state.color3);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-1",
|
|
|
|
|
|
getLightColor(state.color3, 0.1)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-2",
|
|
|
|
|
|
getLightColor(state.color3, 0.2)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-3",
|
|
|
|
|
|
getLightColor(state.color3, 0.3)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-4",
|
|
|
|
|
|
getLightColor(state.color3, 0.4)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-5",
|
|
|
|
|
|
getLightColor(state.color3, 0.5)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-6",
|
|
|
|
|
|
getLightColor(state.color3, 0.6)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-7",
|
|
|
|
|
|
getLightColor(state.color3, 0.7)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-8",
|
|
|
|
|
|
getLightColor(state.color3, 0.8)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-info-light-9",
|
|
|
|
|
|
getLightColor(state.color3, 0.9)
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
function colorChange4() {
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning",
|
|
|
|
|
|
state.color4
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-1",
|
|
|
|
|
|
getLightColor(state.color4, 0.1)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-2",
|
|
|
|
|
|
getLightColor(state.color4, 0.2)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-3",
|
|
|
|
|
|
getLightColor(state.color4, 0.3)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-4",
|
|
|
|
|
|
getLightColor(state.color4, 0.4)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-5",
|
|
|
|
|
|
getLightColor(state.color4, 0.5)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-6",
|
|
|
|
|
|
getLightColor(state.color4, 0.6)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-7",
|
|
|
|
|
|
getLightColor(state.color4, 0.7)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-8",
|
|
|
|
|
|
getLightColor(state.color4, 0.8)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-warning-light-9",
|
|
|
|
|
|
getLightColor(state.color4, 0.9)
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
function colorChange5() {
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger",
|
|
|
|
|
|
state.color5
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-1",
|
|
|
|
|
|
getLightColor(state.color5, 0.1)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-2",
|
|
|
|
|
|
getLightColor(state.color5, 0.2)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-3",
|
|
|
|
|
|
getLightColor(state.color5, 0.3)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-4",
|
|
|
|
|
|
getLightColor(state.color5, 0.4)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-5",
|
|
|
|
|
|
getLightColor(state.color5, 0.5)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-6",
|
|
|
|
|
|
getLightColor(state.color5, 0.6)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-7",
|
|
|
|
|
|
getLightColor(state.color5, 0.7)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-8",
|
|
|
|
|
|
getLightColor(state.color5, 0.8)
|
|
|
|
|
|
);
|
|
|
|
|
|
document.documentElement.style.setProperty(
|
|
|
|
|
|
"--color-danger-light-9",
|
|
|
|
|
|
getLightColor(state.color5, 0.9)
|
2020-12-18 17:18:51 +08:00
|
|
|
|
);
|
2020-12-17 18:59:01 +08:00
|
|
|
|
}
|
|
|
|
|
|
function onSwitchChange1() {
|
2020-12-18 01:03:13 +08:00
|
|
|
|
document.body.setAttribute(
|
|
|
|
|
|
"style",
|
2020-12-22 14:03:50 +08:00
|
|
|
|
state.value1 ? `filter:grayscale(1);overflow:hidden;` : ""
|
2020-12-17 18:59:01 +08:00
|
|
|
|
);
|
2020-12-13 22:46:41 +08:00
|
|
|
|
}
|
2020-12-22 14:03:50 +08:00
|
|
|
|
function onSwitchChange2() {
|
|
|
|
|
|
state.wart
|
|
|
|
|
|
? Watermark.set("small@小柒")
|
|
|
|
|
|
: Watermark.del();
|
|
|
|
|
|
}
|
2020-12-20 16:05:55 +08:00
|
|
|
|
function open1() {
|
2020-12-22 14:03:50 +08:00
|
|
|
|
proxy.$message.success({
|
2020-12-20 16:05:55 +08:00
|
|
|
|
message: "恭喜你，这是一条成功消息",
|
|
|
|
|
|
type: "success",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open2() {
|
|
|
|
|
|
ElMessage.warning({
|
|
|
|
|
|
message: "警告哦，这是一条警告消息",
|
|
|
|
|
|
type: "warning",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open3() {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
message: "这是一条消息提示",
|
|
|
|
|
|
type: "info",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open4() {
|
|
|
|
|
|
ElMessage.error({
|
|
|
|
|
|
message: "错了哦，这是一条错误消息",
|
|
|
|
|
|
type: "error",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open5() {
|
|
|
|
|
|
ElMessageBox.confirm("success", "提示", {
|
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
|
type: "error",
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
type: "success",
|
|
|
|
|
|
message: "删除成功!",
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(() => {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
type: "info",
|
|
|
|
|
|
message: "已取消删除",
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open6() {
|
|
|
|
|
|
ElNotification({
|
|
|
|
|
|
title: "成功",
|
|
|
|
|
|
message: "这是一条成功的提示消息",
|
|
|
|
|
|
type: "success",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open7() {
|
|
|
|
|
|
ElNotification({
|
|
|
|
|
|
title: "警告",
|
|
|
|
|
|
message: "这是一条警告的提示消息",
|
|
|
|
|
|
type: "warning",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open8() {
|
|
|
|
|
|
ElNotification.info({
|
|
|
|
|
|
title: "消息",
|
|
|
|
|
|
message: "这是一条消息的提示消息",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function open9() {
|
|
|
|
|
|
ElNotification.error({
|
|
|
|
|
|
title: "错误",
|
|
|
|
|
|
message: "这是一条错误的提示消息",
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
function next() {
|
|
|
|
|
|
if (state.active111++ > 2) state.active111 = 0;
|
2020-12-18 17:18:51 +08:00
|
|
|
|
}
|
2020-12-13 22:46:41 +08:00
|
|
|
|
return {
|
2020-12-20 16:05:55 +08:00
|
|
|
|
colorChange1,
|
|
|
|
|
|
colorChange2,
|
|
|
|
|
|
colorChange3,
|
|
|
|
|
|
colorChange4,
|
|
|
|
|
|
colorChange5,
|
|
|
|
|
|
open1,
|
|
|
|
|
|
open2,
|
|
|
|
|
|
open3,
|
|
|
|
|
|
open4,
|
|
|
|
|
|
open5,
|
|
|
|
|
|
open6,
|
|
|
|
|
|
open7,
|
|
|
|
|
|
open8,
|
|
|
|
|
|
open9,
|
|
|
|
|
|
next,
|
2020-12-17 18:59:01 +08:00
|
|
|
|
onSwitchChange1,
|
2020-12-22 14:03:50 +08:00
|
|
|
|
onSwitchChange2,
|
2020-12-13 22:46:41 +08:00
|
|
|
|
...toRefs(state),
|
|
|
|
|
|
};
|
2020-12-08 18:20:35 +08:00
|
|
|
|
},
|
|
|
|
|
|
};
|
2020-12-20 16:05:55 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
#main-warp {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
