@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
120 lines (119 loc) • 3.71 kB
JavaScript
import { computed, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, createVNode, createCommentVNode, Fragment, withDirectives, toDisplayString, vShow } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { Loading1 } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("switch");
const _sfc_main = create({
components: { Loading1 },
props: {
modelValue: {
type: [String, Number, Boolean],
default: false
},
disable: {
type: Boolean,
default: false
},
activeColor: {
type: String,
default: ""
},
inactiveColor: {
type: String,
default: ""
},
activeText: {
type: String,
default: ""
},
inactiveText: {
type: String,
default: ""
},
activeValue: {
type: [String, Number, Boolean],
default: true
},
inactiveValue: {
type: [String, Number, Boolean],
default: false
},
loading: {
type: Boolean,
default: false
}
},
emits: ["change", "update:modelValue", "update:loading"],
setup(props, { emit }) {
const isActive = computed(() => props.modelValue === props.activeValue);
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true,
[isActive.value ? "cqmc-switch-open" : "cqmc-switch-close"]: true,
[`${prefixCls}-disable`]: props.disable,
[`${prefixCls}-base`]: true
};
});
const style = computed(() => {
return {
backgroundColor: isActive.value ? props.activeColor : props.inactiveColor
};
});
let updateType = "";
const onClick = (event) => {
if (props.disable || props.loading)
return;
const value = isActive.value ? props.inactiveValue : props.activeValue;
updateType = "click";
emit("update:modelValue", value);
emit("change", value, event);
};
watch(
() => props.modelValue,
(v) => {
if (updateType == "click") {
updateType = "";
} else {
emit("change", v);
}
}
);
return {
classes,
style,
onClick
};
}
});
const _hoisted_1 = { class: "cqmc-switch-button" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Loading1 = resolveComponent("Loading1");
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
style: normalizeStyle(_ctx.style)
}, [
createElementVNode("view", _hoisted_1, [
_ctx.loading ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
createVNode(_component_Loading1, {
name: "loading",
color: _ctx.activeColor
}, null, 8, ["color"])
]) : createCommentVNode("", true),
_ctx.activeText ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
withDirectives(createElementVNode("view", { class: "cqmc-switch-label open" }, toDisplayString(_ctx.activeText), 513), [
[vShow, _ctx.modelValue]
]),
withDirectives(createElementVNode("view", { class: "cqmc-switch-label close" }, toDisplayString(_ctx.inactiveText), 513), [
[vShow, !_ctx.modelValue]
])
], 64)) : createCommentVNode("", true)
])
], 6);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};