Browse Source

radio、select组件增加必输标识;loading组件修改

pull/49/head
zq 2 weeks ago
parent
commit
8c33b2b2f3
  1. 38
      src/components/GlobalLoading1.vue
  2. 34
      src/components/GuipRadio.vue
  3. 3
      src/components/GuipSelect.vue

38
src/components/GlobalLoading1.vue

@ -1,18 +1,19 @@
<template>
<div class="content-loading-overlay" v-if="isLoading">
<div>
<div class="content-loading-overlay" v-show="isLoading">
<div class="loading-content">
<div ref="animationContainer" class="animation-container"></div>
</div>
</div>
<div v-else style="height: 100%;">
<div v-show="!isLoading">
<slot></slot>
</div>
</div>
</template>
<script>
import lottie from 'lottie-web'
import { mapState } from 'vuex'
import defaultAnimation from '@/assets/loadingAni.json' // JSON
import defaultAnimation from '@/assets/loadingAni.json'
export default {
name: 'Loading',
@ -26,41 +27,42 @@ export default {
},
watch: {
isLoading(newVal) {
this.$nextTick(() => {
if (newVal) {
this.$nextTick(()=>{
this.playAnimation()
})
} else {
this.stopAnimation()
}
})
}
},
mounted() {
if (this.isLoading) {
this.playAnimation()
}
},
beforeDestroy() {
this.stopAnimation()
},
methods: {
playAnimation() {
//
if (this.anim) {
this.anim.destroy()
this.anim = null
}
console.log('执行动画')
this.anim = lottie.loadAnimation({
container: this.$refs.animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: defaultAnimation // JSON
animationData: defaultAnimation
})
if (this.anim) {
this.anim.play()
}
},
stopAnimation() {
if (this.anim) {
this.anim.stop()
}
}
},
beforeDestroy() {
if (this.anim) {
this.anim.destroy() //
}
}
}
</script>

34
src/components/GuipRadio.vue

@ -1,7 +1,7 @@
<template>
<template>
<el-form-item
:class="[{'column':column},'form-item']"
:label="label" :prop="prop" :rules="rules">
:label="label" :prop="prop" :rules="rules" :required="required">
<el-radio-group
v-model="selectedValue"
v-bind="$attrs"
@ -14,22 +14,22 @@
:disabled="option.disabled"
>
<!-- 默认展示和选中显示 不同文案 -->
{{ selectedValue === option.value ? option.selectedLabel : option.label }}
<!-- 自定义 选中图标 -->
<!-- <template #label>
<span><img src="../assets/radio_checked.svg" alt="custom icon" style="width: 16px; height: 16px;"> {{ text }}</span>
</template> -->
{{( selectedValue === option.value ) ? (option.selectedLabel ? option.selectedLabel : option.label) :option.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</template>
</template>
<script>
export default {
<script>
export default {
name: 'MyRadioGroup',
props: {
//
column:{
type:String,
default:''
},
required:{
type:Boolean,
default:false
},
@ -77,12 +77,12 @@
this.$emit('change', value); // change
},
},
};
</script>
};
</script>
<style scoped>
/* 自定义样式 */
.el-radio-group {
<style scoped>
/* 自定义样式 */
.el-radio-group {
margin: 10px 0;
}
</style>
}
</style>

3
src/components/GuipSelect.vue

@ -1,5 +1,5 @@
<template>
<el-form-item :style="{ ...style, height: height, ...styleObject }"
<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>
@ -32,6 +32,7 @@ export default {
},
styleObject: Object,
disabled: Boolean,
required: Boolean,
defaultValue: [String, Number, Array],
placeholder: String,
width: String,

Loading…
Cancel
Save