去除多余的文件

This commit is contained in:
季圣华 2021-04-15 00:14:16 +08:00
parent 24e40a360b
commit 9141c5649f
7 changed files with 279 additions and 435 deletions

View File

@ -1,100 +1,91 @@
<!-- <!--
<template> <template>
<div :class="[prefixCls]"> <div :class="[prefixCls]">
<ul> <ul>
<slot></slot> <slot></slot>
<template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template> <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
<template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength"> <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
<avatar-item :size="size"> <avatar-item :size="size">
<avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar> <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
</avatar-item> </avatar-item>
</template> </template>
</ul> </ul>
</div> </div>
</template> </template>
--> -->
<script> <script>
import Avatar from 'ant-design-vue/es/avatar' import Avatar from 'ant-design-vue/es/avatar'
import AvatarItem from './Item' import AvatarItem from './Item'
import { filterEmpty } from '@/components/_util/util'
export default {
export default { AvatarItem,
AvatarItem, name: "AvatarList",
name: "AvatarList", components: {
components: { Avatar,
Avatar, AvatarItem
AvatarItem },
}, props: {
props: { prefixCls: {
prefixCls: { type: String,
type: String, default: 'ant-pro-avatar-list'
default: 'ant-pro-avatar-list' },
}, /**
/** * 头像大小 类型: largesmall mini, default
* 头像大小 类型: largesmall mini, default * 默认值: default
* 默认值: default */
*/ size: {
size: { type: [String, Number],
type: [String, Number], default: 'default'
default: 'default' },
}, /**
/** * 要显示的最大项目
* 要显示的最大项目 */
*/ maxLength: {
maxLength: { type: Number,
type: Number, default: 0
default: 0 },
}, /**
/** * 多余的项目风格
* 多余的项目风格 */
*/ excessItemsStyle: {
excessItemsStyle: { type: Object,
type: Object, default: () => {
default: () => { return {
return { color: '#f56a00',
color: '#f56a00', backgroundColor: '#fde3cf'
backgroundColor: '#fde3cf' }
} }
} }
} },
}, data () {
data () { return {}
return {} },
}, methods: {
methods: { getItems(items) {
getItems(items) { const classString = {
const classString = { [`${this.prefixCls}-item`]: true,
[`${this.prefixCls}-item`]: true, [`${this.size}`]: true
[`${this.size}`]: true }
}
if (this.maxLength > 0) {
if (this.maxLength > 0) { items = items.slice(0, this.maxLength)
items = items.slice(0, this.maxLength) items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>)) }
} const itemList = items.map((item) => (
const itemList = items.map((item) => ( <li class={ classString }>{ item }</li>
<li class={ classString }>{ item }</li> ))
)) return itemList
return itemList }
} },
}, render () {
render () { const { prefixCls, size } = this.$props
const { prefixCls, size } = this.$props const classString = {
const classString = { [`${prefixCls}`]: true,
[`${prefixCls}`]: true, [`${size}`]: true,
[`${size}`]: true, }
} }
const items = filterEmpty(this.$slots.default) }
const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
return (
<div class={ classString }>
{ itemsDom }
</div>
)
}
}
</script> </script>

View File

@ -1,49 +1,36 @@
<script> <script>
import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil' export default {
name: 'Ellipsis',
export default { props: {
name: 'Ellipsis', prefixCls: {
props: { type: String,
prefixCls: { default: 'ant-pro-ellipsis'
type: String, },
default: 'ant-pro-ellipsis' tooltip: {
}, type: Boolean,
tooltip: { default: true,
type: Boolean, },
default: true, length: {
}, type: Number,
length: { default: 25,
type: Number, },
default: 25, lines: {
}, type: Number,
lines: { default: 1
type: Number, },
default: 1 fullWidthRecognition: {
}, type: Boolean,
fullWidthRecognition: { default: false
type: Boolean, }
default: false },
} methods: {},
}, render() {
methods: {}, const { tooltip, length } = this.$props
render() { let text = ''
const { tooltip, length } = this.$props // 处理没有default插槽时的特殊情况
let text = '' if (this.$slots.default) {
// 处理没有default插槽时的特殊情况 text = this.$slots.default.map(vNode => vNode.text).join('')
if (this.$slots.default) { }
text = this.$slots.default.map(vNode => vNode.text).join('') }
} }
// 判断是否显示 tooltip
if (tooltip && getStrFullLength(text) > length) {
return (
<a-tooltip>
<template slot="title">{text}</template>
<span>{cutStrByFullLength(text, this.length) + '…'}</span>
</a-tooltip>
)
} else {
return (<span>{text}</span>)
}
}
}
</script> </script>

View File

@ -1,79 +0,0 @@
import { pcaa } from 'area-data'
/**
* 省市区
*/
export default class Area {
/**
* 构造器
* @param express
*/
constructor() {
let arr = []
const province = pcaa['86']
Object.keys(province).map(key=>{
arr.push({id:key, text:province[key], pid:'86'});
const city = pcaa[key];
Object.keys(city).map(key2=>{
arr.push({id:key2, text:city[key2], pid:key});
const qu = pcaa[key2];
Object.keys(qu).map(key3=>{
arr.push({id:key3, text:qu[key3], pid:key2});
})
})
})
this.all = arr;
}
get pca(){
return this.all;
}
getCode(text){
if(!text || text.length==0){
return ''
}
for(let item of this.all){
if(item.text === text){
return item.id;
}
}
}
getText(code){
if(!code || code.length==0){
return ''
}
let arr = []
this.getAreaBycode(code,arr);
return arr.join('/')
}
getRealCode(code){
let arr = []
this.getPcode(code, arr)
return arr;
}
getPcode(id, arr){
for(let item of this.all){
if(item.id === id){
arr.unshift(id)
if(item.pid != '86'){
this.getPcode(item.pid,arr)
}
}
}
}
getAreaBycode(code,arr){
//console.log("this.all.length",this.all)
for(let item of this.all){
if(item.id === code){
arr.unshift(item.text);
this.getAreaBycode(item.pid,arr)
}
}
}
}

View File

@ -1,35 +0,0 @@
/**
* 获取字符串的长度ascii长度为1 中文长度为2
* @param str
* @returns {number}
*/
export const getStrFullLength = (str = '') =>
str.split('').reduce((pre, cur) => {
const charCode = cur.charCodeAt(0)
if (charCode >= 0 && charCode <= 128) {
return pre + 1
}
return pre + 2
}, 0)
/**
* 给定一个字符串和一个长度,将此字符串按指定长度截取
* @param str
* @param maxLength
* @returns {string}
*/
export const cutStrByFullLength = (str = '', maxLength) => {
let showLength = 0
return str.split('').reduce((pre, cur) => {
const charCode = cur.charCodeAt(0)
if (charCode >= 0 && charCode <= 128) {
showLength += 1
} else {
showLength += 2
}
if (showLength <= maxLength) {
return pre + cur
}
return pre
}, '')
}

View File

@ -1,12 +0,0 @@
/**
* components util
*/
/**
* 清理空值对象
* @param children
* @returns {*[]}
*/
export function filterEmpty (children = []) {
return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
}

View File

@ -1,156 +1,155 @@
<template> <template>
<div v-if="!reloading" class="j-area-linkage"> <div v-if="!reloading" class="j-area-linkage">
<area-cascader <area-cascader
v-if="_type === enums.type[0]" v-if="_type === enums.type[0]"
:value="innerValue" :value="innerValue"
:data="pcaa" :data="pcaa"
:level="1" :level="1"
:style="{width}" :style="{width}"
v-bind="$attrs" v-bind="$attrs"
v-on="_listeners" v-on="_listeners"
@change="handleChange" @change="handleChange"
/> />
<area-select <area-select
v-else-if="_type === enums.type[1]" v-else-if="_type === enums.type[1]"
:value="innerValue" :value="innerValue"
:data="pcaa" :data="pcaa"
:level="2" :level="2"
v-bind="$attrs" v-bind="$attrs"
v-on="_listeners" v-on="_listeners"
@change="handleChange" @change="handleChange"
/> />
<div v-else> <div v-else>
<span style="color:red;"> Bad type value: {{_type}}</span> <span style="color:red;"> Bad type value: {{_type}}</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { pcaa } from 'area-data' import { pcaa } from 'area-data'
import Area from '@/components/_util/Area'
export default {
export default { name: 'JAreaLinkage',
name: 'JAreaLinkage', props: {
props: { value: {
value: { type: String,
type: String, required:false
required:false },
}, // 组件的类型可选值
// 组件的类型可选值 // select 下拉样式
// select 下拉样式 // cascader 级联样式默认
// cascader 级联样式默认 type: {
type: { type: String,
type: String, default: 'cascader'
default: 'cascader' },
}, width: {
width: { type: String,
type: String, default: '100%'
default: '100%' }
} },
}, data() {
data() { return {
return { pcaa,
pcaa, innerValue: [],
innerValue: [], usedListeners: ['change'],
usedListeners: ['change'], enums: {
enums: { type: ['cascader', 'select']
type: ['cascader', 'select'] },
}, reloading: false,
reloading: false, areaData:''
areaData:'' }
} },
}, computed: {
computed: { _listeners() {
_listeners() { let listeners = { ...this.$listeners }
let listeners = { ...this.$listeners } // 去掉已使用的事件防止冲突
// 去掉已使用的事件防止冲突 this.usedListeners.forEach(key => {
this.usedListeners.forEach(key => { delete listeners[key]
delete listeners[key] })
}) return listeners
return listeners },
}, _type() {
_type() { if (this.enums.type.includes(this.type)) {
if (this.enums.type.includes(this.type)) { return this.type
return this.type } else {
} else { console.error(`JAreaLinkage的type属性只能接收指定的值${this.enums.type.join('|')}`)
console.error(`JAreaLinkage的type属性只能接收指定的值${this.enums.type.join('|')}`) return this.enums.type[0]
return this.enums.type[0] }
} },
}, },
}, watch: {
watch: { value: {
value: { immediate: true,
immediate: true, handler() {
handler() { this.loadDataByValue(this.value)
this.loadDataByValue(this.value) }
} },
}, },
}, created() {
created() { this.initAreaData();
this.initAreaData(); },
}, methods: {
methods: { /** 通过 value 反推 options */
/** 通过 value 反推 options */ loadDataByValue(value) {
loadDataByValue(value) { if(!value || value.length==0){
if(!value || value.length==0){ this.innerValue = []
this.innerValue = [] this.reloading = true;
this.reloading = true; setTimeout(()=>{
setTimeout(()=>{ this.reloading = false
this.reloading = false },100)
},100) }else{
}else{ this.initAreaData();
this.initAreaData(); let arr = this.areaData.getRealCode(value);
let arr = this.areaData.getRealCode(value); this.innerValue = arr
this.innerValue = arr }
} },
}, /** 通过地区code获取子级 */
/** 通过地区code获取子级 */ loadDataByCode(value) {
loadDataByCode(value) { let options = []
let options = [] let data = pcaa[value]
let data = pcaa[value] if (data) {
if (data) { for (let key in data) {
for (let key in data) { if (data.hasOwnProperty(key)) {
if (data.hasOwnProperty(key)) { options.push({ value: key, label: data[key], })
options.push({ value: key, label: data[key], }) }
} }
} return options
return options } else {
} else { return []
return [] }
} },
}, /** 判断是否有子节点 */
/** 判断是否有子节点 */ hasChildren(options) {
hasChildren(options) { options.forEach(option => {
options.forEach(option => { let data = this.loadDataByCode(option.value)
let data = this.loadDataByCode(option.value) option.isLeaf = data.length === 0
option.isLeaf = data.length === 0 })
}) },
}, handleChange(values) {
handleChange(values) { let value = values[values.length - 1]
let value = values[values.length - 1] this.$emit('change', value)
this.$emit('change', value) },
}, initAreaData(){
initAreaData(){ if(!this.areaData){
if(!this.areaData){ this.areaData = new Area();
this.areaData = new Area(); }
} },
},
},
}, model: { prop: 'value', event: 'change' },
model: { prop: 'value', event: 'change' }, }
} </script>
</script>
<style lang="less" scoped>
<style lang="less" scoped> .j-area-linkage {
.j-area-linkage { height:40px;
height:40px; /deep/ .area-cascader-wrap .area-select {
/deep/ .area-cascader-wrap .area-select { width: 100%;
width: 100%; }
}
/deep/ .area-select .area-selected-trigger {
/deep/ .area-select .area-selected-trigger { line-height: 1.15;
line-height: 1.15; }
} }
}
</style> </style>

View File

@ -70,13 +70,6 @@ module.exports = {
deleteOriginalAssets: false // 删除源文件 deleteOriginalAssets: false // 删除源文件
})) }))
} }
// 配置 webpack 识别 markdown 为普通的文件
// config.module
// .rule('markdown')
// .test(/\.md$/)
// .use()
// .loader('file-loader')
// .end()
}, },
css: { css: {
loaderOptions: { loaderOptions: {