github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 15:28:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化组件

Browse Source
This commit is contained in:
hooray
2020-10-21 02:04:54 +08:00
parent de7d2085e9
commit 43339fee20
17 changed files with 259 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ImagePreview/index.vue
+2 -5
View File
@@ -1,13 +1,10 @@
<template>
<div>
<el-image class="img" :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" @click="dialogVisible = true">
<el-image class="img" :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
<div slot="error" class="image-slot">
<svg-icon name="image-load-fail" />
</div>
</el-image>
<el-dialog :visible.sync="dialogVisible" title="预览" width="800px">
<img :src="src" style="display: block; max-width: 100%; margin: 0 auto;">
</el-dialog>
</div>
</template>
@@ -55,7 +52,7 @@ export default {
transition: all 0.3s;
cursor: pointer;
&:hover {
transform: scale(1.2) rotateZ(-10deg);
transform: scale(1.2);
}
}
::v-deep .image-slot {
src/components/PageHeader/index.vue
+7 -2
View File
@@ -2,9 +2,11 @@
<div class="header">
<div>
<div class="title">{{ title }}</div>
<div v-if="content" class="content">{{ content }}</div>
<div class="content">
<slot name="content">{{ content }}</slot>
</div>
</div>
<div v-if="$slots.default">
<div>
<slot />
</div>
</div>
@@ -42,6 +44,9 @@ export default {
color: #909399;
font-size: 14px;
margin-top: 10px;
&:empty {
display: none;
}
}
}
</style>
src/components/PageMain/index.vue
+17 -1
View File
@@ -1,19 +1,35 @@
<template>
<div class="page-main">
<div v-if="title" class="title-container">{{ title }}</div>
<slot />
</div>
</template>
<script>
export default {
name: 'PageMain'
name: 'PageMain',
props: {
title: {
type: String,
default: ''
}
}
}
</script>
<style lang="scss" scoped>
.page-main {
position: relative;
margin: 20px;
padding: 20px;
background-color: #fff;
.title-container {
width: calc(100% + 40px);
padding: 14px 20px;
margin-left: -20px;
margin-top: -20px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}
}
</style>
src/components/Result/index.vue
+1 -1
View File
@@ -47,7 +47,7 @@ $warning: #e6a23c;
$error: #f56c6c;
.result {
width: 72%;
margin: 0 auto;
margin: 20px auto 0;
text-align: center;
.icon {
i {
src/components/Time/index.vue
-96
View File
@@ -1,96 +0,0 @@
<template>
<span :title="$dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')">{{ date }}</span>
</template>
<script>
export default {
name: 'Time',
props: {
value: {
type: [Number, Date, String],
required: true
},
cutOff: {
type: String,
validator: val => ['', 'minute', 'hour', 'day', 'month', 'year'].includes(val),
default: ''
}
},
data() {
return {
date: '',
intervalMillisec: null,
oneSecond: 1000,
oneMinute: 60000,
oneHour: 3600000,
oneDay: 86400000,
oneMonth: 2623860000,
oneYear: 31567860000
}
},
computed: {
timestamp() {
return this.$dayjs(this.value).valueOf()
}
},
mounted() {
this.setTime()
this.startInterval()
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
}
},
updated() {
if (this.timer) {
clearInterval(this.timer)
}
this.setTime()
this.startInterval()
},
methods: {
startInterval() {
this.intervalMillisec = this.getIntervalMillisec()
this.timer = setInterval(() => {
this.setTime()
if (this.intervalMillisec !== this.getIntervalMillisec()) {
this.restartInterval()
}
}, this.intervalMillisec)
},
restartInterval() {
clearInterval(this.timer)
this.startInterval()
},
setTime() {
// 获取当前时间时间戳
const currentTime = new Date().getTime()
// 获取两个时间戳差值
const diff = Math.abs(currentTime - this.timestamp)
// 判断传入时间戳是否早于当前时间戳
const dirStr = this.timestamp <= currentTime ? '前' : '后'
if (diff < this.oneMinute) {
this.date = parseInt(diff / this.oneSecond) + '秒' + dirStr
} else if (diff >= this.oneMinute && diff < this.oneHour && this.cutOff != 'minute') {
this.date = parseInt(diff / this.oneMinute) + '分钟' + dirStr
} else if (diff >= this.oneHour && diff < this.oneDay && this.cutOff != 'hour') {
this.date = parseInt(diff / this.oneHour) + '小时' + dirStr
} else if (diff >= this.oneDay && diff < this.oneMonth && this.cutOff != 'day') {
this.date = parseInt(diff / this.oneDay) + '天' + dirStr
} else if (diff >= this.oneMonth && diff < this.oneYear && this.cutOff != 'month') {
this.date = parseInt(diff / this.oneMonth) + '个月' + dirStr
} else if (diff >= this.oneYear && this.cutOff != 'year') {
this.date = parseInt(diff / this.oneYear) + '年' + dirStr
} else {
this.date = this.$dayjs(this.timestamp).format('YYYY-MM-DD HH:mm:ss')
}
},
// 获取 setInterval 的周期，如果小于 1 分钟，则周期为 1 秒，否则则为 1 分钟
getIntervalMillisec() {
const diff = Math.abs(new Date().getTime() - this.timestamp)
return diff < 60000 ? 1000 : 60000
}
}
}
</script>
src/router/modules/component.example.js
+8 -8
View File
@@ -10,14 +10,6 @@ export default {
icon: 'sidebar-component'
},
children: [
{
path: 'pagemain',
name: 'componentExamplePagemain',
component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/pagemain'),
meta: {
title: '空白页'
}
},
{
path: 'pageheader',
name: 'componentExamplePageheader',
@@ -26,6 +18,14 @@ export default {
title: '页头'
}
},
{
path: 'pagemain',
name: 'componentExamplePagemain',
component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/pagemain'),
meta: {
title: '内容块'
}
},
{
path: 'editor',
name: 'componentExampleEditor',
src/views/component_example/actionbar.vue
+82
View File
@@ -1,5 +1,11 @@
<template>
<div>
<page-header title="固定底部操作栏" content="避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页">
<template #content>
<p>FixedActionBar</p>
<p style="margin-bottom: 0;">避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页</p>
</template>
</page-header>
<page-main>
<el-row>
<el-col :md="24" :lg="12">
@@ -42,6 +48,82 @@
<el-form-item label="活动形式">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item label="活动名称">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery" />
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type" />
<el-checkbox label="地推活动" name="type" />
<el-checkbox label="线下主题活动" name="type" />
<el-checkbox label="单纯品牌曝光" name="type" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助" />
<el-radio label="线下场地免费" />
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item label="活动名称">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery" />
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type" />
<el-checkbox label="地推活动" name="type" />
<el-checkbox label="线下主题活动" name="type" />
<el-checkbox label="单纯品牌曝光" name="type" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助" />
<el-radio label="线下场地免费" />
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
</el-form>
</el-col>
</el-row>
src/views/component_example/area.vue
+1
View File
@@ -1,5 +1,6 @@
<template>
<div>
<page-header title="省市区联动" content="CascaderArea" />
<page-main>
<cascader-area v-model="area" />
</page-main>
src/views/component_example/batchactionbar.vue
+6
View File
@@ -1,5 +1,11 @@
<template>
<div>
<page-header title="批量操作栏">
<template #content>
<p>BatchActionBar</p>
<p style="margin-bottom: 0;">该组件需要和 ElTable 搭配使用</p>
</template>
</page-header>
<page-main>
<batch-action-bar :data="dataList" :selection-data="selectionDataList" @checkAll="$refs.table.toggleAllSelection()" @checkNull="$refs.table.clearSelection()">
<el-button size="small">单个批量操作按钮</el-button>
src/views/component_example/image.preview.vue
+1 -2
View File
@@ -1,9 +1,8 @@
<template>
<div>
<page-header title="图片预览" content="ImagePreview" />
<page-main>
<image-preview src="https://s1.ax1x.com/2020/07/03/NOeqld.jpg" :width="200" />
<image-preview src="http://image.lookbi.com/four_season/uploads/supply//1/20200623/1592845429844750.png" :width="200" :height="150" />
<el-divider content-position="left">加载失败</el-divider>
<image-preview src="" width="100px" height="100px" />
</page-main>
</div>
src/views/component_example/pageheader.vue
+6 -3
View File
@@ -1,8 +1,11 @@
<template>
<div>
<page-header title="页面标题" />
<page-header title="页面标题" content="这是一段页面的介绍。" />
<page-header title="页面标题" content="右侧提供了一块 slot 插槽">
<page-header title="页头" content="PageHeader" />
<page-header title="页面标题">
<template #content>
<p>提供两块插槽：</p>
<p>一块是 content 区域插槽，一块是右侧区域</p>
</template>
<el-button icon="el-icon-arrow-left" round>返回</el-button>
</page-header>
</div>
src/views/component_example/pagemain.vue
+22 -1
View File
@@ -1,7 +1,28 @@
<template>
<div>
<page-header title="内容块" content="PageMain" />
<page-main>
&lt;page-main>&lt;/page-main> 是最常用的页面组件，几乎所有页面都会使用到
PageMain 是最常用的页面组件，几乎所有页面都会使用到
</page-main>
<page-main title="你可以设置一个自定义的标题">
这里放页面内容
</page-main>
<el-row :gutter="20" style="margin: 0 10px;">
<el-col :span="8">
<page-main style="margin: 0;">
还可以结合 ElRow 使用
</page-main>
</el-col>
<el-col :span="8">
<page-main style="margin: 0;">
这里放页面内容
</page-main>
</el-col>
<el-col :span="8">
<page-main style="margin: 0;">
这里放页面内容
</page-main>
</el-col>
</el-row>
</div>
</template>
src/views/component_example/result.vue
+3 -1
View File
@@ -1,11 +1,13 @@
<template>
<div>
<page-header title="处理结果" content="Result" />
<page-main>
<result type="success" title="提交成功" desc="提交结果页用于反馈一系列操作任务的处理结果。">
<el-button type="primary" size="small">返回列表</el-button>
<el-button size="small">打印</el-button>
</result>
<el-divider />
</page-main>
<page-main>
<result type="error" title="提交失败" desc="灰色额外区域可以显示一些补充的信息。请核对并修改以下信息后，再重新提交。">
<div slot="extra">
<div>您提交的内容有如下错误：</div>
src/views/component_example/searchbar.vue
+58 -2
View File
@@ -1,5 +1,6 @@
<template>
<div>
<page-header title="搜索面板" content="SearchBar" />
<page-main>
<search-bar show-more @toggle="searchMore = $event">
<el-form :model="search" size="small" label-width="120px">
@@ -54,6 +55,60 @@
</el-form>
</search-bar>
</page-main>
<page-main title="默认展开">
<search-bar show-more unfold @toggle="searchMore2 = $event">
<el-form :model="search" size="small" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="姓名 / 手机号">
<el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item v-auth="'supplay.department.browse'" label="部门">
<el-select v-model="search.department_id" clearable placeholder="请选择部门">
<el-option label="技术部" :value="1" />
<el-option label="设计部" :value="2" />
<el-option label="行政部" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-auth="'supplay.department_job.browse'" label="职位">
<el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
<el-option label="程序员" :value="1" />
<el-option label="设计师" :value="2" />
<el-option label="人事" :value="3" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-auth="'supplay.role.browse'" label="角色">
<el-select v-model="search.role_id" clearable placeholder="请选择角色">
<el-option label="主管" :value="1" />
<el-option label="普通职员" :value="2" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row v-show="searchMore2">
<el-col :span="24">
<el-form-item label="角色">
<el-checkbox :value="true">备选项</el-checkbox>
<el-checkbox :value="false">备选项</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-button type="primary" icon="el-icon-search">筛选</el-button>
<el-button>导出</el-button>
<el-button type="text">查看已导出记录</el-button>
</el-form-item>
</el-form>
</search-bar>
</page-main>
</div>
</template>
@@ -61,13 +116,14 @@
export default {
data() {
return {
searchMore: false,
search: {
name: '',
department_id: '',
department_job_id: '',
role_id: ''
}
},
searchMore: false,
searchMore2: false
}
}
}
src/views/component_example/table.autoheight.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="table-auto-height">
<page-header title="表格自适应" content="缩小浏览器窗口高度试试" />
<page-header title="表格自适应" content="缩小浏览器窗口高度看看效果。该演示非组件，由于实际页面情况复杂且不可控，故提供了一种实现思路" />
<page-main>
<el-table :data="dataList" border stripe highlight-current-row>
<el-table-column type="index" width="50" />
src/views/component_example/trend.vue
+38 -24
View File
@@ -1,28 +1,42 @@
<template>
<div>
<page-header title="趋势符号" content="标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。" />
<page-main>
<el-divider content-position="left">基础用法</el-divider>
<p>
<trend value="12.3" />
</p>
<p>
<trend value="12.3" type="down" />
</p>
<el-divider content-position="left">颜色反转</el-divider>
<p>
<trend value="12.3" reverse />
</p>
<p>
<trend value="12.3" type="down" reverse />
</p>
<el-divider content-position="left">前缀后缀</el-divider>
<p>
<trend value="12.3" prefix="$" />
</p>
<p>
<trend value="12.3" suffix="%" />
</p>
</page-main>
<page-header title="趋势符号">
<template #content>
<p>Trend</p>
<p style="margin-bottom: 0;">标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外</p>
</template>
</page-header>
<el-row :gutter="20" style="margin: 0 10px;">
<el-col :md="8">
<page-main title="基础用法" style="margin: 0;">
<p>
<trend value="12.3" />
</p>
<p>
<trend value="12.3" type="down" />
</p>
</page-main>
</el-col>
<el-col :md="8">
<page-main title="颜色反转" style="margin: 0;">
<p>
<trend value="12.3" reverse />
</p>
<p>
<trend value="12.3" type="down" reverse />
</p>
</page-main>
</el-col>
<el-col :md="8">
<page-main title="前缀后缀" style="margin: 0;">
<p>
<trend value="12.3" prefix="$" />
</p>
<p>
<trend value="12.3" suffix="%" />
</p>
</page-main>
</el-col>
</el-row>
</div>
</template>
src/views/component_example/upload.vue
+6 -4
View File
@@ -1,11 +1,13 @@
<template>
<div>
<page-main>
<el-divider content-position="left">单图上传</el-divider>
<page-header title="上传" content="ImageUpload / ImagesUpload / FileUpload" />
<page-main title="单图上传">
<image-upload :url.sync="image" action="http://scrm.1daas.com/api/upload/upload" name="image" :width="250" :height="150" :data="{'token':'TKD628431923530324'}" @onSuccess="handleSuccess1" />
<el-divider content-position="left">多图上传（默认最多3张）</el-divider>
</page-main>
<page-main title="多图上传（默认最多3张）">
<images-upload :url="images" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKD628431923530324'}" @onSuccess="handleSuccess2" />
<el-divider content-position="left">文件上传（默认最多3个）</el-divider>
</page-main>
<page-main title="文件上传（默认最多3个）">
<file-upload :files="files" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKD628431923530324'}" @onSuccess="handleSuccess3" />
</page-main>
</div>