feat: 🎸 Table组件重构完成并给出相应示例
chenkl
5 years ago
parent
429e42809c
commit
35879f8ecc
@ -0,0 +1,91 @@
|
|||||||
|
import Mock from 'mockjs'
|
||||||
|
import { toAnyString } from '@/utils'
|
||||||
|
|
||||||
|
const List: any[] = []
|
||||||
|
const count = 100
|
||||||
|
|
||||||
|
const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
|
||||||
|
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
|
||||||
|
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
List.push(Mock.mock({
|
||||||
|
id: toAnyString(),
|
||||||
|
timestamp: +Mock.Random.date('T'),
|
||||||
|
author: '@first',
|
||||||
|
reviewer: '@first',
|
||||||
|
title: '@title(5, 10)',
|
||||||
|
content_short: 'mock data',
|
||||||
|
content: baseContent,
|
||||||
|
forecast: '@float(0, 100, 2, 2)',
|
||||||
|
importance: '@integer(1, 3)',
|
||||||
|
'type|1': ['CN', 'US', 'JP', 'EU'],
|
||||||
|
'status|1': ['published', 'draft', 'deleted'],
|
||||||
|
display_time: '@datetime',
|
||||||
|
comment_disabled: true,
|
||||||
|
pageviews: '@integer(300, 5000)',
|
||||||
|
image_uri,
|
||||||
|
platforms: ['a-platform']
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
url: 'http://mockjs.test.cn/example/list',
|
||||||
|
type: 'get',
|
||||||
|
response: (config: any) => {
|
||||||
|
const { title, pageIndex, pageSize } = config.query
|
||||||
|
|
||||||
|
const mockList = List.filter(item => {
|
||||||
|
if (title && item.title.indexOf(title) < 0) return false
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
const pageList = mockList.filter((item, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1))
|
||||||
|
|
||||||
|
return {
|
||||||
|
code: '0000',
|
||||||
|
data: {
|
||||||
|
total: mockList.length,
|
||||||
|
list: pageList
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
url: 'http://mockjs.test.cn/example/delete',
|
||||||
|
type: 'post',
|
||||||
|
response: (config: any) => {
|
||||||
|
return {
|
||||||
|
code: '0000',
|
||||||
|
data: '删除成功'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
url: 'http://mockjs.test.cn/example/detail',
|
||||||
|
type: 'get',
|
||||||
|
response: (config: any) => {
|
||||||
|
const { id } = config.query
|
||||||
|
for (const example of List) {
|
||||||
|
if (example.id === id) {
|
||||||
|
return {
|
||||||
|
code: '0000',
|
||||||
|
data: example
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
url: 'http://mockjs.test.cn/example/save',
|
||||||
|
type: 'post',
|
||||||
|
response: (config: any) => {
|
||||||
|
return {
|
||||||
|
code: '0000',
|
||||||
|
data: 'success'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import Mock from 'mockjs'
|
||||||
|
import { param2Obj } from '@/utils'
|
||||||
|
|
||||||
|
import example from './example'
|
||||||
|
|
||||||
|
const mocks: any[] = [
|
||||||
|
...example
|
||||||
|
]
|
||||||
|
|
||||||
|
// for front mock
|
||||||
|
// please use it cautiously, it will redefine XMLHttpRequest,
|
||||||
|
// which will cause many of your third-party libraries to be invalidated(like progress event).
|
||||||
|
export function mockXHR() {
|
||||||
|
const send: any = (Mock as any).XHR.prototype.send;
|
||||||
|
((Mock as any).XHR.prototype as any).proxy_send = send;
|
||||||
|
(Mock as any).XHR.prototype.send = function() {
|
||||||
|
if (this.custom.xhr) {
|
||||||
|
this.custom.xhr.withCredentials = this.withCredentials || false
|
||||||
|
|
||||||
|
if (this.responseType) {
|
||||||
|
this.custom.xhr.responseType = this.responseType
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.proxy_send(...arguments)
|
||||||
|
}
|
||||||
|
|
||||||
|
function XHR2ExpressReqWrap(respond: any) {
|
||||||
|
return function(options: any) {
|
||||||
|
let result = null
|
||||||
|
if (respond instanceof Function) {
|
||||||
|
const { body, type, url } = options
|
||||||
|
// https://expressjs.com/en/4x/api.html#req
|
||||||
|
result = respond({
|
||||||
|
method: type,
|
||||||
|
body: JSON.parse(body),
|
||||||
|
query: param2Obj(url)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
result = respond
|
||||||
|
}
|
||||||
|
return Mock.mock(result)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const i of mocks) {
|
||||||
|
Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// for mock server
|
||||||
|
const responseFake = (url: string, type: string, respond: any) => {
|
||||||
|
return {
|
||||||
|
url: new RegExp(`${url}`),
|
||||||
|
type: type || 'get',
|
||||||
|
response(req: any, res: any) {
|
||||||
|
res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default mocks.map(route => {
|
||||||
|
return responseFake(route.url, route.type, route.response)
|
||||||
|
})
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
const chokidar = require('chokidar')
|
||||||
|
const bodyParser = require('body-parser')
|
||||||
|
const chalk = require('chalk')
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
const mockDir = path.join(process.cwd(), 'mock')
|
||||||
|
|
||||||
|
function registerRoutes(app) {
|
||||||
|
let mockLastIndex
|
||||||
|
const { default: mocks } = require('./index.ts')
|
||||||
|
for (const mock of mocks) {
|
||||||
|
app[mock.type](mock.url, mock.response)
|
||||||
|
mockLastIndex = app._router.stack.length
|
||||||
|
}
|
||||||
|
const mockRoutesLength = Object.keys(mocks).length
|
||||||
|
return {
|
||||||
|
mockRoutesLength: mockRoutesLength,
|
||||||
|
mockStartIndex: mockLastIndex - mockRoutesLength
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unregisterRoutes() {
|
||||||
|
Object.keys(require.cache).forEach(i => {
|
||||||
|
if (i.includes(mockDir)) {
|
||||||
|
delete require.cache[require.resolve(i)]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = app => {
|
||||||
|
// es6 polyfill
|
||||||
|
require('@babel/register')
|
||||||
|
|
||||||
|
// parse app.body
|
||||||
|
// https://expressjs.com/en/4x/api.html#req.body
|
||||||
|
app.use(bodyParser.json())
|
||||||
|
app.use(bodyParser.urlencoded({
|
||||||
|
extended: true
|
||||||
|
}))
|
||||||
|
|
||||||
|
const mockRoutes = registerRoutes(app)
|
||||||
|
var mockRoutesLength = mockRoutes.mockRoutesLength
|
||||||
|
var mockStartIndex = mockRoutes.mockStartIndex
|
||||||
|
|
||||||
|
// watch files, hot reload mock server
|
||||||
|
chokidar.watch(mockDir, {
|
||||||
|
ignored: /mock-server/,
|
||||||
|
ignoreInitial: true
|
||||||
|
}).on('all', (event, path) => {
|
||||||
|
if (event === 'change' || event === 'add') {
|
||||||
|
try {
|
||||||
|
// remove mock routes stack
|
||||||
|
app._router.stack.splice(mockStartIndex, mockRoutesLength)
|
||||||
|
|
||||||
|
// clear routes cache
|
||||||
|
unregisterRoutes()
|
||||||
|
|
||||||
|
const mockRoutes = registerRoutes(app)
|
||||||
|
mockRoutesLength = mockRoutes.mockRoutesLength
|
||||||
|
mockStartIndex = mockRoutes.mockStartIndex
|
||||||
|
|
||||||
|
console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`))
|
||||||
|
} catch (error) {
|
||||||
|
console.log(chalk.redBright(error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Button v-bind="getBindValue" :class="[getColor, $attrs.class]">
|
|
||||||
<template #default="data">
|
|
||||||
<slot name="icon" />
|
|
||||||
<slot v-bind="data" />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import { PropType } from 'vue'
|
|
||||||
import { defineComponent, computed, VNodeChild } from 'vue'
|
|
||||||
import { Button } from 'ant-design-vue'
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'AButton',
|
|
||||||
components: { Button },
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
|
||||||
// 按钮类型
|
|
||||||
type: {
|
|
||||||
type: String as PropType<'primary' | 'default' | 'danger' | 'dashed' | 'link' | 'warning' | 'success' | 'info'>,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean as PropType<boolean>,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
htmlType: {
|
|
||||||
type: String as PropType<'button' | 'submit' | 'reset' | 'menu'>,
|
|
||||||
default: 'button'
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: Object as PropType<VNodeChild | JSX.Element>,
|
|
||||||
default: () => null
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: String as PropType<'small' | 'large' | 'default'>,
|
|
||||||
default: 'default'
|
|
||||||
},
|
|
||||||
loading: {
|
|
||||||
type: Boolean as PropType<boolean>,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
ghost: {
|
|
||||||
type: Boolean as PropType<boolean>,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
block: {
|
|
||||||
type: Boolean as PropType<boolean>,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setup(props, { attrs }) {
|
|
||||||
const getColor = computed(() => {
|
|
||||||
const res: string[] = []
|
|
||||||
const { type, disabled } = props
|
|
||||||
type && res.push(`ant-btn-${type}`)
|
|
||||||
disabled && res.push('is-disabled')
|
|
||||||
return res
|
|
||||||
})
|
|
||||||
|
|
||||||
const getBindValue = computed((): any => {
|
|
||||||
const otherTypes = ['warning', 'success', 'info']
|
|
||||||
const bindValue = { ...attrs, ...props }
|
|
||||||
if (otherTypes.indexOf(props.type) !== -1) {
|
|
||||||
bindValue.type = 'default'
|
|
||||||
}
|
|
||||||
return bindValue
|
|
||||||
})
|
|
||||||
|
|
||||||
return { getBindValue, getColor }
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
let messageInstance: any | null = null
|
||||||
|
|
||||||
|
const resetMessage = (options: any) => {
|
||||||
|
if (messageInstance) {
|
||||||
|
messageInstance.close()
|
||||||
|
}
|
||||||
|
messageInstance = ElMessage(options)
|
||||||
|
}
|
||||||
|
['error', 'success', 'info', 'warning'].forEach((type: string) => {
|
||||||
|
resetMessage[type] = (options: any) => {
|
||||||
|
if (typeof options === 'string') {
|
||||||
|
options = {
|
||||||
|
message: options
|
||||||
|
}
|
||||||
|
}
|
||||||
|
options.type = type
|
||||||
|
return resetMessage(options)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export const Message = resetMessage as any
|
||||||
@ -1,6 +1,40 @@
|
|||||||
// 常用的增删改查 hook
|
// 常用的增删改查 hook
|
||||||
import { reactive } from 'vue'
|
import { reactive, ref } from 'vue'
|
||||||
|
|
||||||
export function() {
|
interface DefalutParams {
|
||||||
|
pageIndex: number
|
||||||
|
pageSize: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useExample() {
|
||||||
|
const defalutParams = reactive<DefalutParams>({
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableData = ref<any[]>([])
|
||||||
|
|
||||||
|
const loading = ref<boolean>(true)
|
||||||
|
|
||||||
|
const total = ref<number>(0)
|
||||||
|
|
||||||
|
function sizeChange(val: number) {
|
||||||
|
loading.value = true
|
||||||
|
defalutParams.pageIndex = 1
|
||||||
|
defalutParams.pageSize = val
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentChange(val: number) {
|
||||||
|
loading.value = true
|
||||||
|
defalutParams.pageIndex = val
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
defalutParams,
|
||||||
|
tableData,
|
||||||
|
loading,
|
||||||
|
total,
|
||||||
|
sizeChange,
|
||||||
|
currentChange
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-alert
|
||||||
|
effect="dark"
|
||||||
|
:closable="false"
|
||||||
|
title="二次封装 Element 的 Message 组件，每次只显示最新一条消息，避免出现太多消息提示导致不美观。"
|
||||||
|
type="info"
|
||||||
|
style="margin-bottom: 20px;"
|
||||||
|
/>
|
||||||
|
<el-button @click="show">显示</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from 'vue'
|
||||||
|
import { Message } from '_c/Message'
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'MessageDemo',
|
||||||
|
setup() {
|
||||||
|
const count = ref<number>(0)
|
||||||
|
function show() {
|
||||||
|
count.value = count.value + 1
|
||||||
|
Message.success('这是成功消息' + count.value)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
count,
|
||||||
|
show
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-alert
|
||||||
|
effect="dark"
|
||||||
|
:closable="false"
|
||||||
|
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 自定义索引"
|
||||||
|
type="info"
|
||||||
|
style="margin-bottom: 20px;"
|
||||||
|
/>
|
||||||
|
<com-table
|
||||||
|
v-loading="loading"
|
||||||
|
:columns="columns"
|
||||||
|
:data="tableData"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from 'vue'
|
||||||
|
import ComTable from '_c/Table/index.vue'
|
||||||
|
|
||||||
|
const tableData = [
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1517 弄'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1519 弄'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1516 弄'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
// name: 'CustomIndex',
|
||||||
|
components: {
|
||||||
|
ComTable
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const loading = ref<boolean>(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
const columns = ref<any[]>([
|
||||||
|
{
|
||||||
|
key: 'index',
|
||||||
|
type: 'index',
|
||||||
|
index: (index: number) => {
|
||||||
|
return index * 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'date',
|
||||||
|
label: '日期'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'name',
|
||||||
|
label: '姓名'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'address',
|
||||||
|
label: '地址'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
tableData,
|
||||||
|
loading
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-alert
|
||||||
|
effect="dark"
|
||||||
|
:closable="false"
|
||||||
|
title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 分页表格"
|
||||||
|
type="info"
|
||||||
|
style="margin-bottom: 20px;"
|
||||||
|
/>
|
||||||
|
<com-table
|
||||||
|
v-loading="loading"
|
||||||
|
:columns="columns"
|
||||||
|
:data="tableData"
|
||||||
|
:pagination="{
|
||||||
|
currentPage: 1,
|
||||||
|
total: 400,
|
||||||
|
onSizeChange: handleSizeChange,
|
||||||
|
onCurrentChange: handleCurrentChange
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from 'vue'
|
||||||
|
import ComTable from '_c/Table/index.vue'
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
key: 'date',
|
||||||
|
label: '日期'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'name',
|
||||||
|
label: '姓名'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'address',
|
||||||
|
label: '地址'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const tableData = [
|
||||||
|
{
|
||||||
|
date: '2016-05-02',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1518 弄'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-04',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1517 弄'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-01',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1519 弄'
|
||||||
|
}, {
|
||||||
|
date: '2016-05-03',
|
||||||
|
name: '王小虎',
|
||||||
|
address: '上海市普陀区金沙江路 1516 弄'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
// name: 'PageTable',
|
||||||
|
components: {
|
||||||
|
ComTable
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const loading = ref<boolean>(true)
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
function handleSizeChange(val: number) {
|
||||||
|
console.log(val)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCurrentChange(val: number) {
|
||||||
|
console.log(val)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
columns,
|
||||||
|
tableData,
|
||||||
|
loading,
|
||||||
|
handleSizeChange, handleCurrentChange
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -1,126 +1,39 @@
|
|||||||
@import "~ant-design-vue/lib/style/themes/default";
|
.el-button + .el-button {
|
||||||
@import "~ant-design-vue/es/button/style/mixin";
|
position: relative;
|
||||||
|
|
||||||
// warning button style
|
|
||||||
@btn-warning-color: #fff;
|
|
||||||
@btn-warning-bg: @warning-color;
|
|
||||||
@btn-warning-disabled-border-color: #f3d19e;
|
|
||||||
@btn-warning-disabled-bg-color: #f3d19e;
|
|
||||||
|
|
||||||
// success button style
|
|
||||||
@btn-success-color: #fff;
|
|
||||||
@btn-success-bg: @success-color;
|
|
||||||
@btn-success-disabled-border-color: #b3e19d;
|
|
||||||
@btn-success-disabled-bg-color: #b3e19d;
|
|
||||||
|
|
||||||
// info button style
|
|
||||||
@btn-info-color: #fff;
|
|
||||||
@btn-info-bg: #909399;
|
|
||||||
@btn-info-disabled-border-color: #c8c9cc;
|
|
||||||
@btn-info-disabled-bg-color: #c8c9cc;
|
|
||||||
|
|
||||||
// primary button style
|
|
||||||
@btn-primary-disabled-border-color: #a0cfff;
|
|
||||||
@btn-primary-disabled-bg-color: #a0cfff;
|
|
||||||
|
|
||||||
// danger button style
|
|
||||||
@btn-danger-disabled-border-color: #fab6b6;
|
|
||||||
@btn-danger-disabled-bg-color: #fab6b6;
|
|
||||||
|
|
||||||
// set button margin
|
|
||||||
.ant-btn+.ant-btn {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
}
|
||||||
|
.el-button:not(.is-disabled) {
|
||||||
.button-variant(@color; @background) {
|
position: relative;
|
||||||
.button-color(@color; @background; @background);
|
|
||||||
|
|
||||||
text-shadow: @btn-text-shadow;
|
|
||||||
box-shadow: @btn-primary-shadow;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
&:focus {
|
||||||
.button-color(@color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `);
|
outline: none;
|
||||||
}
|
}
|
||||||
|
&:after {
|
||||||
&:active,
|
content: "";
|
||||||
&.active {
|
display: block;
|
||||||
.button-color(@color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `);
|
position: absolute;
|
||||||
}
|
top: -6px;
|
||||||
|
left: -6px;
|
||||||
.button-disabled();
|
right: -6px;
|
||||||
}
|
bottom: -6px;
|
||||||
|
pointer-events: none;
|
||||||
.ant-btn-warning,
|
background-color: inherit;
|
||||||
.ant-btn-success,
|
background-repeat: no-repeat;
|
||||||
.ant-btn-info {
|
background-position: 50%;
|
||||||
|
opacity: 0;
|
||||||
.ant-btn-group {
|
transition: all .3s;
|
||||||
&:not(:first-child):not(:last-child) {
|
border-radius: inherit;
|
||||||
border-right-color: @gold-5;
|
}
|
||||||
border-left-color: @gold-5;
|
&:active:after {
|
||||||
|
opacity: .7;
|
||||||
&:disabled {
|
top: 0;
|
||||||
border-color: @btn-default-border;
|
left: 0;
|
||||||
}
|
right: 0;
|
||||||
}
|
bottom: 0;
|
||||||
|
transition: 0s;
|
||||||
&:first-child {
|
}
|
||||||
&:not(:last-child) {
|
}
|
||||||
border-right-color: @gold-5;
|
|
||||||
|
.el-button--default {
|
||||||
&[disabled] {
|
&:after {
|
||||||
border-right-color: @btn-default-border;
|
background-color: lightgrey !important;
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-btn-group &:last-child:not(:first-child),
|
|
||||||
.ant-btn-group & + & {
|
|
||||||
border-left-color: @gold-5;
|
|
||||||
|
|
||||||
&[disabled] {
|
|
||||||
border-left-color: @btn-default-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-btn-success {
|
|
||||||
.button-variant(@btn-success-color; @btn-success-bg);
|
|
||||||
&:not(.ant-btn-link)[disabled] {
|
|
||||||
color: #fff;
|
|
||||||
background-color: @btn-success-disabled-bg-color;
|
|
||||||
border-color: @btn-success-disabled-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-btn-info {
|
|
||||||
.button-variant(@btn-info-color; @btn-info-bg);
|
|
||||||
&:not(.ant-btn-link)[disabled] {
|
|
||||||
color: #fff;
|
|
||||||
background-color: @btn-info-disabled-bg-color;
|
|
||||||
border-color: @btn-info-disabled-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-btn-warning {
|
|
||||||
.button-variant(@btn-warning-color; @btn-warning-bg);
|
|
||||||
&:not(.ant-btn-link)[disabled] {
|
|
||||||
color: #fff;
|
|
||||||
background-color: @btn-warning-disabled-bg-color;
|
|
||||||
border-color: @btn-warning-disabled-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-btn-primary {
|
|
||||||
&:not(.ant-btn-link)[disabled] {
|
|
||||||
color: #fff;
|
|
||||||
background-color: @btn-primary-disabled-bg-color;
|
|
||||||
border-color: @btn-primary-disabled-border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-btn-danger {
|
|
||||||
&:not(.ant-btn-link)[disabled] {
|
|
||||||
color: #fff;
|
|
||||||
background-color: @btn-danger-disabled-bg-color;
|
|
||||||
border-color: @btn-danger-disabled-border-color;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
@import '~element-plus/lib/theme-chalk/index.css';
|
@import '~element-plus/lib/theme-chalk/index.css';
|
||||||
// @import './sidebar.less';
|
|
||||||
@import './transition.less';
|
@import './transition.less';
|
||||||
@import './sider.less';
|
@import './sider.less';
|
||||||
@import './glob.less';
|
@import './glob.less';
|
||||||
// @import './button.less';
|
@import './button.less';
|
||||||
// @import './antdv.less';
|
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
import ResizeObserver from 'resize-observer-polyfill'
|
|
||||||
|
|
||||||
const isServer = typeof window === 'undefined'
|
|
||||||
|
|
||||||
/* istanbul ignore next */
|
|
||||||
const resizeHandler = function(entries: any[]) {
|
|
||||||
for (const entry of entries) {
|
|
||||||
const listeners = entry.target.__resizeListeners__ || []
|
|
||||||
if (listeners.length) {
|
|
||||||
listeners.forEach((fn: () => any) => {
|
|
||||||
fn()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* istanbul ignore next */
|
|
||||||
export const addResizeListener = function(element: any, fn: () => any) {
|
|
||||||
if (isServer) return
|
|
||||||
if (!element.__resizeListeners__) {
|
|
||||||
element.__resizeListeners__ = []
|
|
||||||
element.__ro__ = new ResizeObserver(resizeHandler)
|
|
||||||
element.__ro__.observe(element)
|
|
||||||
}
|
|
||||||
element.__resizeListeners__.push(fn)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* istanbul ignore next */
|
|
||||||
export const removeResizeListener = function(element: any, fn: () => any) {
|
|
||||||
if (!element || !element.__resizeListeners__) return
|
|
||||||
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
|
|
||||||
if (!element.__resizeListeners__.length) {
|
|
||||||
element.__ro__.disconnect()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
import { isWindow } from '@/utils/is'
|
|
||||||
|
|
||||||
let scrollBarWidth: number
|
|
||||||
|
|
||||||
export default function(): number {
|
|
||||||
if (!isWindow) return 0
|
|
||||||
if (scrollBarWidth !== undefined) return scrollBarWidth
|
|
||||||
|
|
||||||
const outer = document.createElement('div')
|
|
||||||
outer.className = 'scrollbar__wrap'
|
|
||||||
outer.style.visibility = 'hidden'
|
|
||||||
outer.style.width = '100px'
|
|
||||||
outer.style.position = 'absolute'
|
|
||||||
outer.style.top = '-9999px'
|
|
||||||
document.body.appendChild(outer)
|
|
||||||
|
|
||||||
const widthNoScroll = outer.offsetWidth
|
|
||||||
outer.style.overflow = 'scroll'
|
|
||||||
|
|
||||||
const inner = document.createElement('div')
|
|
||||||
inner.style.width = '100%'
|
|
||||||
outer.appendChild(inner)
|
|
||||||
|
|
||||||
const widthWithScroll = inner.offsetWidth
|
|
||||||
const parentNode = outer.parentNode
|
|
||||||
parentNode && parentNode.removeChild(outer)
|
|
||||||
scrollBarWidth = widthNoScroll - widthWithScroll
|
|
||||||
|
|
||||||
return scrollBarWidth
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue