|
|
@@ -0,0 +1,104 @@
|
|
|
+import { defineComponent, ref, watch } from "vue";
|
|
|
+
|
|
|
+const animateList = [
|
|
|
+ { label: "无", value: "" },
|
|
|
+ { label: "fadeIn", value: "fadeIn" },
|
|
|
+ { label: "fadeInDown", value: "fadeInDown" },
|
|
|
+ { label: "fadeInLeft", value: "fadeInLeft" },
|
|
|
+ { label: "fadeInRight", value: "fadeInRight" },
|
|
|
+ { label: "fadeInUp", value: "fadeInUp" },
|
|
|
+ { label: "fadeOut", value: "fadeOut" },
|
|
|
+ { label: "fadeOutDown", value: "fadeOutDown" },
|
|
|
+ { label: "fadeOutLeft", value: "fadeOutLeft" },
|
|
|
+ { label: "fadeOutRight", value: "fadeOutRight" },
|
|
|
+ { label: "fadeOutUp", value: "fadeOutUp" },
|
|
|
+ { label: "slideInDown", value: "slideInDown" },
|
|
|
+ { label: "slideInLeft", value: "slideInLeft" },
|
|
|
+ { label: "slideInRight", value: "slideInRight" },
|
|
|
+ { label: "slideInUp", value: "slideInUp" },
|
|
|
+ { label: "slideOutDown", value: "slideOutDown" },
|
|
|
+ { label: "slideOutLeft", value: "slideOutLeft" },
|
|
|
+ { label: "slideOutRight", value: "slideOutRight" },
|
|
|
+ { label: "slideOutUp", value: "slideOutUp" },
|
|
|
+ { label: "zoomIn", value: "zoomIn" },
|
|
|
+ { label: "zoomInDown", value: "zoomInDown" },
|
|
|
+ { label: "zoomInLeft", value: "zoomInLeft" },
|
|
|
+ { label: "zoomInRight", value: "zoomInRight" },
|
|
|
+ { label: "zoomInUp", value: "zoomInUp" },
|
|
|
+ { label: "zoomOut", value: "zoomOut" },
|
|
|
+ { label: "zoomOutDown", value: "zoomOutDown" },
|
|
|
+ { label: "zoomOutLeft", value: "zoomOutLeft" },
|
|
|
+ { label: "zoomOutRight", value: "zoomOutRight" },
|
|
|
+ { label: "zoomOutUp", value: "zoomOutUp" },
|
|
|
+ { label: "bounceIn", value: "bounceIn" },
|
|
|
+ { label: "bounceInDown", value: "bounceInDown" },
|
|
|
+ { label: "bounceInLeft", value: "bounceInLeft" },
|
|
|
+ { label: "bounceInRight", value: "bounceInRight" },
|
|
|
+ { label: "bounceInUp", value: "bounceInUp" },
|
|
|
+ { label: "bounceOut", value: "bounceOut" },
|
|
|
+ { label: "bounceOutDown", value: "bounceOutDown" },
|
|
|
+ { label: "bounceOutLeft", value: "bounceOutLeft" },
|
|
|
+ { label: "bounceOutRight", value: "bounceOutRight" },
|
|
|
+ { label: "bounceOutUp", value: "bounceOutUp" },
|
|
|
+ { label: "flipInX", value: "flipInX" },
|
|
|
+ { label: "flipInY", value: "flipInY" },
|
|
|
+ { label: "flipOutX", value: "flipOutX" },
|
|
|
+ { label: "flipOutY", value: "flipOutY" },
|
|
|
+ { label: "lightSpeedIn", value: "lightSpeedIn" },
|
|
|
+ { label: "lightSpeedOut", value: "lightSpeedOut" },
|
|
|
+ { label: "rotateIn", value: "rotateIn" },
|
|
|
+ { label: "rotateInDownLeft", value: "rotateInDownLeft" },
|
|
|
+ { label: "rotateInDownRight", value: "rotateInDownRight" },
|
|
|
+ { label: "rotateInUpLeft", value: "rotateInUpLeft" },
|
|
|
+ { label: "rotateInUpRight", value: "rotateInUpRight" },
|
|
|
+ { label: "rotateOut", value: "rotateOut" },
|
|
|
+ { label: "rotateOutDownLeft", value: "rotateOutDownLeft" },
|
|
|
+ { label: "rotateOutDownRight", value: "rotateOutDownRight" },
|
|
|
+ { label: "rotateOutUpLeft", value: "rotateOutUpLeft" },
|
|
|
+ { label: "rotateOutUpRight", value: "rotateOutUpRight" },
|
|
|
+ { label: "rollIn", value: "rollIn" },
|
|
|
+ { label: "rollOut", value: "rollOut" }
|
|
|
+];
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: "ReAnimateSelector",
|
|
|
+ props: {
|
|
|
+ modelValue: {
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ placeholder: {
|
|
|
+ type: String,
|
|
|
+ default: "请选择动画"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emits: ["update:modelValue"],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const currentValue = ref(props.modelValue);
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ val => {
|
|
|
+ currentValue.value = val;
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ watch(currentValue, val => {
|
|
|
+ emit("update:modelValue", val);
|
|
|
+ });
|
|
|
+
|
|
|
+ return () => (
|
|
|
+ <el-select
|
|
|
+ v-model={currentValue.value}
|
|
|
+ placeholder={props.placeholder}
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ class="w-full"
|
|
|
+ >
|
|
|
+ {animateList.map(item => (
|
|
|
+ <el-option key={item.value} label={item.label} value={item.value} />
|
|
|
+ ))}
|
|
|
+ </el-select>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|