zq
1 week ago
23 changed files with 23803 additions and 7720 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,7 @@ |
|||
import CustomDropdown from './src/index.vue' |
|||
|
|||
CustomDropdown.install = function(Vue) { |
|||
Vue.component(CustomDropdown.name || 'CustomDropdown', CustomDropdown) |
|||
} |
|||
|
|||
export default CustomDropdown |
|||
@ -0,0 +1,271 @@ |
|||
<template> |
|||
<div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" |
|||
:style="{ width }"> |
|||
<!-- 触发按钮 --> |
|||
<div class="select-trigger" @click="toggleDropdown"> |
|||
<slot name="trigger"> |
|||
{{ localSelected ? localSelected[displayKey] : placeholder }} |
|||
</slot> |
|||
<img class="arrow-icon" |
|||
:src="isOpen ? require('../../assets/dropDown_open.png') : require('../../assets/dropDown_expand.png')" |
|||
alt=""> |
|||
</div> |
|||
|
|||
<!-- 下拉内容 --> |
|||
<transition name="slide-fade"> |
|||
<div v-if="isOpen" class="select-dropdown"> |
|||
<slot v-if="isOpen" name="normal"></slot> |
|||
<div v-if="options"> |
|||
<div v-for="(item, index) in options" :key="index" class="dropdown-item " |
|||
:class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)"> |
|||
<slot name="item" :item="item"> |
|||
<div class="flex-between"> |
|||
<div class="left"> |
|||
<p class="one">{{ item[displayKey] }}</p> |
|||
</div> |
|||
<div class="right"> |
|||
<img v-if="localSelected[displayKey] == item[displayKey]" |
|||
src="../../assets/drop-selected.svg" alt=""> |
|||
</div> |
|||
</div> |
|||
</slot> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="flex-between dropdown-item" v-if="options_null" @click="selectNullItem"> |
|||
<div class="left"> |
|||
<p class="one">暂无收款账号</p> |
|||
<p>暂时没有收款账号，我想稍后配置</p> |
|||
</div> |
|||
<div class="right"> |
|||
<img src="../../assets/drop-selected.svg" alt=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { $emit, $on, $off } from '../../utils/eventBus' |
|||
export default { |
|||
name: 'CustomDropdown', |
|||
props: { |
|||
width: { |
|||
type: String, |
|||
default: "200px", |
|||
}, |
|||
options: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
options_null: { |
|||
type: Object, |
|||
default: () => { }, |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: "请选择", |
|||
}, |
|||
value: { |
|||
type: [String, Number, Object], |
|||
default: null, |
|||
}, |
|||
valueKey: { |
|||
type: String, |
|||
default: "value", |
|||
}, |
|||
displayKey: { |
|||
type: String, |
|||
default: "label", |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
isOpen: false, |
|||
localSelected: null, // 完全独立的内部状态 |
|||
isUpdating: false // 循环终止标志 |
|||
// selectedItem: null, |
|||
}; |
|||
}, |
|||
watch: { |
|||
value: { |
|||
immediate: true, |
|||
handler(val) { |
|||
// 仅当外部值确实变化时更新内部状态 |
|||
if (!this.localSelected || this.localSelected[this.valueKey] !== val) { |
|||
this.localSelected = this.options.find(item => item[this.valueKey] === val); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// selectedItem: { |
|||
// get() { |
|||
// // 仅从props获取值，不做任何修改 |
|||
// return this.options.find(item => item[this.valueKey] === this.value) || null; |
|||
// }, |
|||
// set(newVal) { |
|||
// // 仅触发事件，不修改内部状态 |
|||
// this.$emit('input', newVal ? newVal[this.valueKey] : null); |
|||
// this.$emit('change', newVal); |
|||
// } |
|||
// } |
|||
// selectedItem: { |
|||
// get() { |
|||
// if (this.isUpdating) return this._selectedItem; |
|||
// return this.options.find(item => item[this.valueKey] === this.value) || null; |
|||
// }, |
|||
// set(newVal) { |
|||
// this.isUpdating = true; |
|||
// this._selectedItem = newVal; |
|||
// this.$nextTick(() => { |
|||
// this.$emit('input', newVal ? newVal[this.valueKey] : null); |
|||
// this.isUpdating = false; |
|||
// }); |
|||
// } |
|||
// } |
|||
}, |
|||
// 移除 data 中的 selectedItem 和 watch |
|||
created() { |
|||
// 监听关闭所有下拉框的事件 |
|||
$on('close-all-dropdowns', this.closeDropdown) |
|||
}, |
|||
beforeDestroy() { |
|||
// 组件销毁移除监听 |
|||
$off('close-all-dropdowns', this.closeDropdown) |
|||
}, |
|||
methods: { |
|||
closeDropdown() { |
|||
this.isOpen = false; |
|||
}, |
|||
toggleDropdown(e) { |
|||
if (e) { |
|||
e.stopPropagation(); |
|||
} |
|||
// 先通知所有下拉框关闭 |
|||
$emit('close-all-dropdowns') |
|||
this.isOpen = !this.isOpen; |
|||
}, |
|||
// selectItem(item) { |
|||
// this.selectedItem = item; |
|||
// this.$emit("input", item[this.valueKey]); // Use the specified valueKey |
|||
// this.$emit("change", item); |
|||
// this.isOpen = false; |
|||
// }, |
|||
// selectItem(item) { |
|||
// // 先触发外部事件 |
|||
// this.$emit("input", item[this.valueKey]); |
|||
// this.$emit("change", item); |
|||
|
|||
// // 延迟内部状态更新，让父组件先处理 |
|||
// this.$nextTick(() => { |
|||
// this.selectedItem = item; |
|||
// this.isOpen = false; |
|||
// }); |
|||
// }, |
|||
selectItem(item) { |
|||
this.localSelected = item; |
|||
this.$emit('input', item[this.valueKey]); |
|||
this.$emit('change', item); |
|||
this.isOpen = false; |
|||
}, |
|||
// selectItem(item) { |
|||
// this.selectedItem = item; // 这会自动触发 computed setter |
|||
// // this.$emit("change", item); |
|||
// this.isOpen = false; |
|||
// }, |
|||
isSelected(item) { |
|||
return this.localSelected && this.localSelected[this.valueKey] === item[this.valueKey]; |
|||
}, |
|||
selectNullItem() { |
|||
this.$emit("changeNormal", ''); |
|||
this.isOpen = false; |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* Your existing styles remain the same */ |
|||
.custom-select { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
height: 38px; |
|||
position: relative; |
|||
font-family: Arial, sans-serif; |
|||
} |
|||
|
|||
.select-trigger { |
|||
border-radius: 2px; |
|||
opacity: 1; |
|||
background: #FFFFFF; |
|||
border: 1px solid #DFE2E6; |
|||
width: 100%; |
|||
height: 40px; |
|||
box-sizing: border-box; |
|||
padding: 10px 12px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.is-open .select-trigger { |
|||
border: 1px solid #006AFF; |
|||
transition: all .5s; |
|||
outline: 3px solid #D8E9FA; |
|||
} |
|||
|
|||
.select-trigger:hover { |
|||
border-color: #006AFF; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.arrow-icon { |
|||
width: 12px; |
|||
} |
|||
|
|||
.select-dropdown { |
|||
position: absolute; |
|||
top: 100%; |
|||
right: 0; |
|||
width: 100%; |
|||
border: 1px solid #ccc; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|||
z-index: 1000; |
|||
margin-top: 4px; |
|||
max-height: 384px; |
|||
overflow-y: auto; |
|||
padding: 0 12px 12px 12px; |
|||
} |
|||
|
|||
.dropdown-item { |
|||
padding: 12px 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.dropdown-item:hover { |
|||
background: #F6F7FA; |
|||
} |
|||
|
|||
.dropdown-item.is-selected { |
|||
background-color: #F6F7FA; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
/* 展开收起动画 */ |
|||
.slide-fade-enter-active, |
|||
.slide-fade-leave-active { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.slide-fade-enter-from, |
|||
.slide-fade-leave-to { |
|||
opacity: 0; |
|||
transform: translateY(-10px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,328 @@ |
|||
<template> |
|||
<div class="custom-select" |
|||
v-clickaway="handleClickAway" |
|||
ref="dropdown" |
|||
:class="{ 'is-open': state.isOpen }" |
|||
:style="{ width: computedWidth }"> |
|||
<!-- 触发按钮 --> |
|||
<div class="select-trigger" @click.stop="toggleDropdown"> |
|||
<slot name="trigger"> |
|||
{{ displayText }} |
|||
</slot> |
|||
<img class="arrow-icon" |
|||
:src="state.isOpen ? openIcon : expandIcon" |
|||
alt="dropdown indicator"> |
|||
</div> |
|||
|
|||
<!-- 下拉内容 --> |
|||
<transition name="slide-fade"> |
|||
<div v-show="state.isOpen" class="select-dropdown"> |
|||
<slot v-if="state.isOpen" name="normal"></slot> |
|||
|
|||
<template v-if="filteredOptions.length"> |
|||
<div v-for="(item, index) in filteredOptions" |
|||
:key="`option-${index}`" |
|||
class="dropdown-item" |
|||
:class="{ 'is-selected': isSelected(item) }" |
|||
@click.stop="selectItem(item)"> |
|||
<slot name="item" :item="item"> |
|||
<div class="flex-between"> |
|||
<div class="left"> |
|||
<p class="one">{{ item[displayKey] }}</p> |
|||
</div> |
|||
<div class="right"> |
|||
<img v-if="isSelected(item)" |
|||
:src="selectedIcon" |
|||
alt="selected"> |
|||
</div> |
|||
</div> |
|||
</slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<div v-if="showNullOption" |
|||
class="flex-between dropdown-item" |
|||
@click.stop="selectNullItem"> |
|||
<div class="left"> |
|||
<p class="one">暂无收款账号</p> |
|||
<p>暂时没有收款账号，我想稍后配置</p> |
|||
</div> |
|||
<div class="right"> |
|||
<img :src="selectedIcon" alt="selected"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 静态资源引入（Webpack编译时处理） |
|||
const STATIC_ICONS = Object.freeze({ |
|||
expand: require('../../assets/dropDown_expand.png'), |
|||
open: require('../../assets/dropDown_open.png'), |
|||
selected: require('../../assets/drop-selected.svg') |
|||
}) |
|||
|
|||
export default { |
|||
name: 'CustomDropdown', |
|||
props: { |
|||
width: { |
|||
type: String, |
|||
default: "200px", |
|||
validator: (val) => /^\d+(px|%|rem|em|vw)$/.test(val) |
|||
}, |
|||
options: { |
|||
type: Array, |
|||
default: () => [], |
|||
validator: (arr) => !arr.some(item => item === null || typeof item !== 'object') |
|||
}, |
|||
nullOption: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: "请选择" |
|||
}, |
|||
value: { |
|||
type: [String, Number, Object], |
|||
default: null |
|||
}, |
|||
valueKey: { |
|||
type: String, |
|||
default: "value", |
|||
validator: (key) => typeof key === 'string' && key.trim().length > 0 |
|||
}, |
|||
displayKey: { |
|||
type: String, |
|||
default: "label", |
|||
validator: (key) => typeof key === 'string' && key.trim().length > 0 |
|||
} |
|||
}, |
|||
|
|||
// 使用非响应式数据存储关键状态 |
|||
data: () => ({ |
|||
state: Object.seal({ |
|||
isOpen: false, |
|||
lastEmittedValue: null, |
|||
updateDepth: 0, |
|||
eventLock: false |
|||
}), |
|||
icons: STATIC_ICONS |
|||
}), |
|||
|
|||
computed: { |
|||
computedWidth() { |
|||
return this.width.endsWith('px') ? this.width : `${parseInt(this.width)}px` |
|||
}, |
|||
filteredOptions() { |
|||
return Array.isArray(this.options) ? [...this.options] : [] |
|||
}, |
|||
showNullOption() { |
|||
return this.nullOption && !this.filteredOptions.length |
|||
}, |
|||
displayText() { |
|||
const current = this.findOptionByValue(this.value) |
|||
return current ? current[this.displayKey] : this.placeholder |
|||
}, |
|||
openIcon() { |
|||
return this.icons.open |
|||
}, |
|||
expandIcon() { |
|||
return this.icons.expand |
|||
}, |
|||
selectedIcon() { |
|||
return this.icons.selected |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
value: { |
|||
immediate: true, |
|||
handler(newVal) { |
|||
if (this.state.eventLock) return |
|||
this.state.lastEmittedValue = JSON.stringify(newVal) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 安全查找方法 |
|||
findOptionByValue(value) { |
|||
if (value === null || value === undefined) return null |
|||
return this.filteredOptions.find(item => { |
|||
return JSON.stringify(item[this.valueKey]) === JSON.stringify(value) |
|||
}) |
|||
}, |
|||
|
|||
isSelected(item) { |
|||
if (!this.value) return false |
|||
return JSON.stringify(item[this.valueKey]) === JSON.stringify(this.value) |
|||
}, |
|||
|
|||
// 防抖关闭方法 |
|||
handleClickAway() { |
|||
if (!this.state.isOpen) return |
|||
|
|||
this.state.isOpen = false |
|||
this.$nextTick(() => { |
|||
this.$emit('closed') |
|||
}) |
|||
}, |
|||
|
|||
// 安全切换方法 |
|||
toggleDropdown() { |
|||
if (this.state.eventLock) return |
|||
|
|||
if (this.state.isOpen) { |
|||
this.handleClickAway() |
|||
} else { |
|||
this.$emit('opened') |
|||
this.state.isOpen = true |
|||
} |
|||
}, |
|||
|
|||
// 核心安全选择方法 |
|||
selectItem(item) { |
|||
if (this.state.updateDepth > 1) { |
|||
console.error('Recursion detected in dropdown selection') |
|||
this.state.isOpen = false |
|||
this.state.updateDepth = 0 |
|||
return |
|||
} |
|||
|
|||
const newValue = item[this.valueKey] |
|||
|
|||
// 值无变化时直接返回 |
|||
if (this.state.lastEmittedValue === JSON.stringify(newValue)) { |
|||
this.state.isOpen = false |
|||
return |
|||
} |
|||
|
|||
this.state.updateDepth++ |
|||
this.state.eventLock = true |
|||
this.state.lastEmittedValue = JSON.stringify(newValue) |
|||
|
|||
// 使用setTimeout确保调用栈清空 |
|||
setTimeout(() => { |
|||
try { |
|||
this.$emit('input', newValue) |
|||
this.$emit('change', Object.freeze({ ...item })) |
|||
} catch (e) { |
|||
console.error('Dropdown emit error:', e) |
|||
} finally { |
|||
this.state.isOpen = false |
|||
this.state.updateDepth = 0 |
|||
this.state.eventLock = false |
|||
} |
|||
}, 0) |
|||
}, |
|||
|
|||
selectNullItem() { |
|||
this.state.eventLock = true |
|||
this.state.lastEmittedValue = null |
|||
|
|||
setTimeout(() => { |
|||
this.$emit('input', null) |
|||
this.$emit('change', null) |
|||
this.state.isOpen = false |
|||
this.state.eventLock = false |
|||
}, 0) |
|||
} |
|||
}, |
|||
|
|||
// 添加性能标记 |
|||
created() { |
|||
this.$_performanceMark = `dropdown-${Date.now()}` |
|||
performance.mark(this.$_performanceMark) |
|||
}, |
|||
beforeDestroy() { |
|||
performance.measure('dropdown-lifetime', this.$_performanceMark) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
/* Your existing styles remain the same */ |
|||
.custom-select { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
height: 38px; |
|||
position: relative; |
|||
font-family: Arial, sans-serif; |
|||
} |
|||
|
|||
.select-trigger { |
|||
border-radius: 2px; |
|||
opacity: 1; |
|||
background: #FFFFFF; |
|||
border: 1px solid #DFE2E6; |
|||
width: 100%; |
|||
height: 40px; |
|||
box-sizing: border-box; |
|||
padding: 10px 12px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.is-open .select-trigger { |
|||
border: 1px solid #006AFF; |
|||
transition: all .5s; |
|||
outline: 3px solid #D8E9FA; |
|||
} |
|||
|
|||
.select-trigger:hover { |
|||
border-color: #006AFF; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.arrow-icon { |
|||
width: 12px; |
|||
} |
|||
|
|||
.select-dropdown { |
|||
position: absolute; |
|||
top: 100%; |
|||
right: 0; |
|||
width: 100%; |
|||
border: 1px solid #ccc; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|||
z-index: 1000; |
|||
margin-top: 4px; |
|||
max-height: 384px; |
|||
overflow-y: auto; |
|||
padding: 0 12px 12px 12px; |
|||
} |
|||
|
|||
.dropdown-item { |
|||
padding: 12px 10px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.dropdown-item:hover { |
|||
background: #F6F7FA; |
|||
} |
|||
|
|||
.dropdown-item.is-selected { |
|||
background-color: #F6F7FA; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
/* 展开收起动画 */ |
|||
.slide-fade-enter-active, |
|||
.slide-fade-leave-active { |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.slide-fade-enter-from, |
|||
.slide-fade-leave-to { |
|||
opacity: 0; |
|||
transform: translateY(-10px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,7 @@ |
|||
import GuipFormItem from './src/index.vue' |
|||
|
|||
GuipFormItem.install = function(Vue) { |
|||
Vue.component(GuipFormItem.name || 'GuipFormItem', GuipFormItem) |
|||
} |
|||
|
|||
export default GuipFormItem |
|||
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<div |
|||
:class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item1']"> |
|||
<div class="form-item-top"> |
|||
<label v-if="label" for="">{{ label }} |
|||
<img src="../../assets/require.svg" v-if="required" alt=""> |
|||
</label> |
|||
<template > |
|||
<slot name="formLeft"></slot> |
|||
</template> |
|||
<template > |
|||
<slot name="formRight"></slot> |
|||
</template> |
|||
</div> |
|||
<div class="form-item-bottom"> |
|||
<template > |
|||
<slot name="formDom"></slot> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'GuipFormItem', |
|||
props:['label','required','addClass','column'], |
|||
data() { |
|||
return { |
|||
hasError: false, |
|||
// 目前这两个宽度用的最多，其余宽度自定义类名修改吧 |
|||
classList:{ |
|||
'w510':'w510', |
|||
'w388':'w388' |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
// dynamicClasses() { |
|||
// return { |
|||
// active: this.isActive, // 如果isActive为true，则添加'active'类 |
|||
// error: this.hasError, // 如果hasError为true，则添加'error'类 |
|||
// highlighted: this.isHighlighted, // 如果isHighlighted为true，则添加'highlighted'类 |
|||
// }; |
|||
// } |
|||
}, |
|||
mounted(){ |
|||
// console.log(this.required,'required----'); |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,7 @@ |
|||
import GuipSelect from './src/index.vue' |
|||
|
|||
GuipSelect.install = function(Vue) { |
|||
Vue.component(GuipSelect.name || 'GuipSelect', GuipSelect) |
|||
} |
|||
|
|||
export default GuipSelect |
|||
@ -0,0 +1,111 @@ |
|||
<template> |
|||
<el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required" |
|||
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" |
|||
:label="label" :prop="prop" :rules="rules"> |
|||
<p v-if="desc" class="desc_right">{{ desc }}</p> |
|||
<el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue" |
|||
v-bind="$attrs"> |
|||
<el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)" |
|||
:disabled="item.disabled" :value="getItemValue(item)"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'GuipSelect', |
|||
props: { |
|||
value: [String, Number, Array], |
|||
options: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
// 新增配置字段 |
|||
valueKey: { |
|||
type: String, |
|||
default: 'value' |
|||
}, |
|||
labelKey: { |
|||
type: String, |
|||
default: 'label' |
|||
}, |
|||
styleObject: Object, |
|||
disabled: Boolean, |
|||
required: Boolean, |
|||
defaultValue: [String, Number, Array], |
|||
placeholder: String, |
|||
width: String, |
|||
height: String, |
|||
label: String, |
|||
type: String, |
|||
prop: String, |
|||
rules: [Object, Array], |
|||
column: Boolean, |
|||
addClass: String, |
|||
desc: String |
|||
}, |
|||
data() { |
|||
return { |
|||
selectedValue: '', |
|||
style: {}, |
|||
placeholder1: '请选择', |
|||
} |
|||
}, |
|||
computed: { |
|||
// 处理options为空的情况 |
|||
processedOptions() { |
|||
return this.options || [] |
|||
} |
|||
}, |
|||
watch: { |
|||
value(newVal) { |
|||
this.selectedValue = newVal |
|||
}, |
|||
defaultValue(newVal) { |
|||
if (newVal !== undefined && newVal !== null) { |
|||
this.selectedValue = newVal |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 默认值赋值 |
|||
if (this.defaultValue !== undefined && this.defaultValue !== null) { |
|||
this.selectedValue = this.defaultValue |
|||
} |
|||
if (this.value !== undefined && this.value !== null) { |
|||
this.selectedValue = this.value |
|||
} |
|||
// 默认提示语 |
|||
if (this.placeholder) { |
|||
this.placeholder1 = this.placeholder |
|||
} |
|||
this.$nextTick(() => { |
|||
let els = document.querySelectorAll('.el-input'); |
|||
els.forEach(item => { |
|||
item.onmouseover = function () { |
|||
item.classList.add("hoverclass") |
|||
} |
|||
item.onmouseout = function () { |
|||
item.classList.remove("hoverclass") |
|||
} |
|||
|
|||
}) |
|||
}) |
|||
}, |
|||
methods: { |
|||
// 获取value值 |
|||
getItemValue(item) { |
|||
return item[this.valueKey] |
|||
}, |
|||
// 获取label值 |
|||
getItemLabel(item) { |
|||
return item[this.labelKey] |
|||
}, |
|||
handleChange(value) { |
|||
this.$emit('input', value) |
|||
this.$emit('change', value) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 782 B |
@ -0,0 +1,75 @@ |
|||
/** |
|||
* 复制文本到剪贴板 |
|||
* @param {string} text 要复制的文本 |
|||
* @param {Object} options 配置选项 |
|||
* @param {string} options.successMsg 成功提示信息 |
|||
* @param {string} options.errorMsg 失败提示信息 |
|||
* @param {Vue} options.vm Vue实例(用于调用$message) |
|||
* @returns {Promise<boolean>} 是否复制成功 |
|||
*/ |
|||
export function copyToClipboard(text, options = {}) { |
|||
const { |
|||
successMsg = '复制成功', |
|||
errorMsg = '复制失败，请手动复制', |
|||
vm = null |
|||
} = options; |
|||
|
|||
return new Promise((resolve) => { |
|||
// 创建textarea元素
|
|||
const textarea = document.createElement('textarea'); |
|||
textarea.value = text; |
|||
textarea.style.position = 'fixed'; // 防止页面滚动
|
|||
document.body.appendChild(textarea); |
|||
textarea.select(); |
|||
|
|||
try { |
|||
// 执行复制命令
|
|||
const successful = document.execCommand('copy'); |
|||
if (successful) { |
|||
if (vm && vm.$Message) { |
|||
vm.$Message.success(successMsg); |
|||
} else { |
|||
console.log(successMsg); |
|||
} |
|||
resolve(true); |
|||
} else { |
|||
throw new Error('Copy command was unsuccessful'); |
|||
} |
|||
} catch (err) { |
|||
console.error('复制失败:', err); |
|||
if (vm && vm.$Message) { |
|||
vm.$Message.error(errorMsg); |
|||
} else { |
|||
console.error(errorMsg); |
|||
} |
|||
resolve(false); |
|||
} finally { |
|||
document.body.removeChild(textarea); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* @param {string} text 要复制的文本 |
|||
* @param {Object} options 配置选项 |
|||
* @returns {Promise<boolean>} 是否复制成功 |
|||
*/ |
|||
export async function modernCopyToClipboard(text, options = {}) { |
|||
const { |
|||
successMsg = '复制成功', |
|||
errorMsg = '复制失败，请手动复制', |
|||
vm = null |
|||
} = options; |
|||
if (navigator.clipboard && window.isSecureContext) { |
|||
await navigator?.clipboard?.writeText(text); |
|||
if (vm && vm.$Message) { |
|||
vm.$Message.success(successMsg); |
|||
} else { |
|||
console.log(errorMsg); |
|||
} |
|||
} else { |
|||
return copyToClipboard(text, options); |
|||
} |
|||
} |
|||
|
|||
export default modernCopyToClipboard; |
|||
@ -0,0 +1,32 @@ |
|||
// 设置页面元素对应高亮
|
|||
export function setHighActive(dom) { |
|||
const ele = document.getElementById(dom) |
|||
ele.classList.add('ceshi') |
|||
ele.scrollIntoView({behavior:'smooth',block:'start'}) |
|||
setTimeout(()=>{ |
|||
ele.classList.remove('ceshi') |
|||
},1000) |
|||
} |
|||
|
|||
export function getServicePriceDesc(price, price_unit, unit_num) { |
|||
let unit = 0; |
|||
let unit_str = ""; |
|||
|
|||
if (unit_num == 1) return price + price_unit +'/篇'; |
|||
|
|||
if (unit_num/10000 < 10) { |
|||
unit = Math.ceil(unit_num/10000); |
|||
unit_str = unit == 1 ? '万' : unit+'万'; |
|||
} |
|||
if (unit_num/1000 < 10) { |
|||
unit = Math.ceil(unit_num/1000); |
|||
unit_str = unit == 1 ? '千' : unit+'千'; |
|||
} |
|||
if (unit_num/100 < 10) { |
|||
unit = Math.ceil(unit_num/100); |
|||
unit_str = unit == 1 ? '百' : unit+'百'; |
|||
} |
|||
|
|||
return price + price_unit + "/" +unit_str + "字符"; |
|||
} |
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import modernCopyToClipboard from '@/utils/clipboard'; |
|||
|
|||
export default { |
|||
install(Vue) { |
|||
Vue.directive('clipboard', { |
|||
bind(el, binding) { |
|||
el.style.cursor = 'pointer'; |
|||
el.addEventListener('click', async () => { |
|||
const text = binding.value || el.innerText; |
|||
const options = { |
|||
vm: binding.instance, |
|||
...(binding.arg || {}) |
|||
}; |
|||
await modernCopyToClipboard(text, options); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
@ -0,0 +1,11 @@ |
|||
import Vue from 'vue' |
|||
// 创建全局事件总线
|
|||
const EventBus = new Vue() |
|||
|
|||
// 封装常用方法
|
|||
export const $on = EventBus.$on.bind(EventBus) |
|||
export const $once = EventBus.$once.bind(EventBus) |
|||
export const $off = EventBus.$off.bind(EventBus) |
|||
export const $emit = EventBus.$emit.bind(EventBus) |
|||
|
|||
export default EventBus |
|||
@ -0,0 +1,17 @@ |
|||
export default { |
|||
methods: { |
|||
renderHeaderWithIcon(h, { column }, iconPath) { |
|||
return h('div', [ |
|||
column.label, |
|||
h('img', { |
|||
attrs: { src: iconPath }, |
|||
style: { |
|||
width: '10px', |
|||
height: '10px', |
|||
marginLeft: '3px', |
|||
} |
|||
}) |
|||
]) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
// src/utils/request.js
|
|||
import axios from "axios"; |
|||
|
|||
// 创建 axios 实例
|
|||
const service = axios.create({ |
|||
baseURL: process.env.VUE_APP_BASE_API, // 从环境变量中读取 API 基础地址
|
|||
timeout: 60000, // 请求超时时间
|
|||
headers: { |
|||
'Content-Type': 'application/x-www-form-urlencoded' |
|||
}, |
|||
}); |
|||
|
|||
// 请求拦截器
|
|||
service.interceptors.request.use( |
|||
(config) => { |
|||
// 在发送请求之前做一些处理，例如添加 token
|
|||
const token = localStorage.getItem("token"); |
|||
if (token) { |
|||
config.headers["Auth"] = `${token}`; |
|||
} |
|||
return config; |
|||
}, |
|||
(error) => { |
|||
// 对请求错误做些什么
|
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
|||
// 响应拦截器
|
|||
service.interceptors.response.use( |
|||
(response) => { |
|||
// 对响应数据做一些处理
|
|||
const res = response.data; |
|||
if (!res.status) { |
|||
// 如果返回的 status 不是 true，则视为错误
|
|||
// return Promise.reject(new Error(res.info || "请求失败"));
|
|||
} |
|||
return res; |
|||
}, |
|||
(error) => { |
|||
// 对响应错误做些什么
|
|||
if (error.response) { |
|||
switch (error.response.status) { |
|||
case 401: |
|||
// 未授权，跳转到登录页
|
|||
window.location.href = "/login"; |
|||
break; |
|||
case 404: |
|||
// 资源未找到
|
|||
console.error("资源未找到"); |
|||
break; |
|||
case 500: |
|||
// 服务器错误
|
|||
console.error("服务器错误"); |
|||
break; |
|||
default: |
|||
console.error("请求失败", error.message); |
|||
} |
|||
} |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
|
|||
/** |
|||
* 封装请求方法 |
|||
* @param {string} method 请求方法 (GET, POST, PUT, DELETE 等) |
|||
* @param {string} url 请求地址 |
|||
* @param {object} data 请求参数 |
|||
* @param {object} config 其他 axios 配置 |
|||
* @returns {Promise} 返回请求结果 |
|||
*/ |
|||
const request = (method, url, data = {}, config = {}) => { |
|||
const lowerCaseMethod = method.toLowerCase(); |
|||
if (lowerCaseMethod === "get") { |
|||
// GET 请求将参数拼接到 URL 上
|
|||
return service({ |
|||
method: "get", |
|||
url, |
|||
params: data, |
|||
...config, |
|||
}); |
|||
} else { |
|||
// 其他请求（POST, PUT, DELETE 等）将参数放在请求体中
|
|||
return service({ |
|||
method: lowerCaseMethod, |
|||
url, |
|||
data, |
|||
...config, |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
export default request; |
|||
Loading…
Reference in new issue