如何自己创网站,武进网站建设服务,作业部落 WordPress,名匠装饰前言 近期产品需求#xff1a;Vue2移动端项目需要在switch开关内显示文字#xff0c;看Vantui没有对应功能#xff0c;因此自己手撸写了这个组件。 一、最终效果 二、参数配置
1、代码示例#xff1a; t-switch v-modelcheck/2、配置参数#xff08;…前言 近期产品需求Vue2移动端项目需要在switch开关内显示文字看Vantui没有对应功能因此自己手撸写了这个组件。 一、最终效果 二、参数配置
1、代码示例 t-switch v-modelcheck/2、配置参数t-switch Attributes
参数说明类型默认值v-model绑定值boolean / string / number—disabled是否禁用booleanfalsewidthswitch 的宽度像素number55active-icon-classswitch 打开时所显示图标的类名设置此项会忽略 active-textstring—inactive-icon-classswitch 关闭时所显示图标的类名设置此项会忽略 inactive-textstring—active-textswitch 打开时的文字描述string—inactive-textswitch 关闭时的文字描述string—active-valueswitch 打开时的值boolean / string / numbertrueinactive-valueswitch 关闭时的值boolean / string / numberfalseactive-colorswitch 打开时的背景色string#2b73bbinactive-colorswitch 关闭时的背景色string#cccnameswitch 对应的 name 属性string—
3、events 事件
事件名称说明回调参数changeswitch 状态发生变化时的回调函数新状态的值
三、源码
templatedivclasst-switch:class{ is-disabled: switchDisabled, is-checked: checked }roleswitch:aria-checkedchecked:aria-disabledswitchDisabledclick.preventswitchValueinputclasst-switch__inputtypecheckboxchangehandleChangerefinput:idid:namename:true-valueactiveValue:false-valueinactiveValue:disabledswitchDisabledkeydown.enterswitchValue/span:class[t-switch__label, t-switch__label--left, !checked ? is-active : ]v-ifinactiveIconClass || inactiveTexti :class[inactiveIconClass] v-ifinactiveIconClass/ispan v-if!inactiveIconClass inactiveText :aria-hiddenchecked{{ inactiveText }}/span/spanspan classt-switch__core refcore :style{ width: coreWidth px }/spanspan:class[t-switch__label, t-switch__label--right, checked ? is-active : ]v-ifactiveIconClass || activeTexti :class[activeIconClass] v-ifactiveIconClass/ispan v-if!activeIconClass activeText :aria-hidden!checked{{ activeText }}/span/span/div
/template
scriptexport default {name: TSwitch,props: {value: {type: [Boolean, String, Number],default: false},disabled: {type: Boolean,default: false},width: {type: Number,default: 55},activeIconClass: {type: String,default: },inactiveIconClass: {type: String,default: },activeText: String,inactiveText: String,activeColor: {type: String,default: #2b73bb},inactiveColor: {type: String,default: #ccc},activeValue: {type: [Boolean, String, Number],default: true},inactiveValue: {type: [Boolean, String, Number],default: false},name: {type: String,default: },id: String},data() {return {coreWidth: this.width};},created() {if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {this.$emit(input, this.inactiveValue);}},computed: {checked() {return this.value this.activeValue;},switchDisabled() {return this.disabled}},watch: {checked() {this.$refs.input.checked this.checked;if (this.activeColor || this.inactiveColor) {this.setBackgroundColor();}}},methods: {handleChange(event) {const val this.checked ? this.inactiveValue : this.activeValue;this.$emit(input, val);this.$emit(change, val);this.$nextTick(() {if (this.$refs.input) {this.$refs.input.checked this.checked;}});},setBackgroundColor() {let newColor this.checked ? this.activeColor : this.inactiveColor;this.$refs.core.style.borderColor newColor;this.$refs.core.style.backgroundColor newColor;},switchValue() {!this.switchDisabled this.handleChange();}},mounted() {/* istanbul ignore if */this.coreWidth this.width || 40;if (this.activeColor || this.inactiveColor) {this.setBackgroundColor();}this.$refs.input.checked this.checked;this.$refs[input].focus()}
};
/script
style langscss scoped
.t-switch {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;font-size: 14px;height: 22px;vertical-align: middle;.is-disabled {opacity: 0.6;.t-switch__core,.t-switch__label {cursor: not-allowed;}}.is-checked {.t-switch__core {::after {left: 100%;margin-left: -19px;}}}.label-fade-enter,.label-fade-leave-active {opacity: 0;}.t-switch__label {margin: 0;position: absolute;display: none;color: #fff;.is-active {display: inline-block;color: #fff;}* {line-height: 1;font-size: 14px;display: inline-block;}}.t-switch__label--left {right: 5px;z-index: 9;}.t-switch__label--right {left: 5px;z-index: 9;}.t-switch__input {position: absolute;width: 0;height: 0;opacity: 0;margin: 0;}.t-switch__core {margin: 0;position: relative;width: 40px;height: 22px;border: 1px solid #dcdfe6;outline: 0;border-radius: 10px;-webkit-box-sizing: border-box;box-sizing: border-box;background: #dcdfe6;-webkit-transition: border-color 0.3s, background-color 0.3s;transition: border-color 0.3s, background-color 0.3s;:after {content: ;position: absolute;top: 1px;left: 1px;border-radius: 100%;-webkit-transition: all 0.3s;transition: all 0.3s;width: 18px;height: 18px;background-color: #fff;}}
}
/style
相关文章
基于ElementUi再次封装基础组件文档 基于ant-design-vue再次封装基础组件文档 vue3ts基于Element-plus再次封装基础组件文档
