支付网站设计,vi系统设计,群晖NAS建WordPress,网页设计100种方法先看效果#xff1a; element-ui中的switch开关无loading属性#xff08;在element-plus时加入了#xff09;#xff0c;而且点击时开关状态就会切换#xff0c;这使得在需要调用接口后再改变开关状态变得比较麻烦。
思路#xff1a;switch开关外包一层div#xff0c;给…先看效果 element-ui中的switch开关无loading属性在element-plus时加入了而且点击时开关状态就会切换这使得在需要调用接口后再改变开关状态变得比较麻烦。
思路switch开关外包一层div给div添加click事件emit给父组件在父组件里进行开关状态的切换。 开关组件源码
templatediv classcustom-switch clickswitchClickdiv stylewidth: fit-content;height: fit-content; v-loadingloadingel-switch styleposition: relative; v-bind$attrs/el-switch/div/div
/templatescript
/*** el-switch开关组件二次封装* * description:* 移除了el-switch的change事件* 添加了loading效果* 开关的value值交给父组件处理*/
export default {name: CustomSwitch,props: {loading: {default: false,type: Boolean}},data() {return {}},created() {},mounted() {},methods: {switchClick() {// 如果禁用和loading状态不emit给父组件if (this.$attrs.disabled || this.loading) {return}this.$emit(switch-click, this.$attrs.value)}}
}
/script
style langscss scoped
.custom-switch {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;::v-deep .el-loading-mask {width: 100%;height: 100%;border-radius: 10px;top: 2px;.el-loading-spinner {position: relative;width: 100%;height: 100%;top: unset;margin-top: unset;display: flex;align-items: center;justify-content: center;svg {width: 20px;height: 20px;}}}
}
/style父组件
templatecustom-switchv-modelswitchValue:loadingswitchLoading:active-value1:inactive-value0:disabledswitchDisabledswitch-clickswitchClick/
/template
script
import CustomSwitch from ./custom-switch.vueexport default {components: { CustomSwitch },data() {return {switchValue: 1,switchLoading: false,switchDisabled: false}},methods: {switchClick() {this.switchLoading true// 这里就可以调用接口接口成功后修改值和loading状态setTimeout(() {this.switchValue !this.switchValue ? 1 : 0this.switchLoading false}, 2000)}}
}
/script
