mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
Added defineModel support for PreviewText and added missing Customize component in GlitchTextDemo.
This commit is contained in:
@@ -3,24 +3,18 @@
|
||||
<span class="text-label">{{ title }}</span>
|
||||
|
||||
<input
|
||||
:value="modelValue"
|
||||
@input="handleChange"
|
||||
v-model="model"
|
||||
class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
defineProps<{
|
||||
title: string;
|
||||
modelValue: string;
|
||||
}>();
|
||||
|
||||
const handleChange = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
emit('update:modelValue', target.value);
|
||||
};
|
||||
const model = defineModel<string>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -14,31 +14,13 @@
|
||||
</div>
|
||||
|
||||
<Customize>
|
||||
<PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
|
||||
<PreviewText title="Text" v-model="text" />
|
||||
|
||||
<PreviewSlider
|
||||
title="ASCII Font Size"
|
||||
v-model="asciiFontSize"
|
||||
:min="2"
|
||||
:max="20"
|
||||
:step="1"
|
||||
/>
|
||||
<PreviewSlider title="ASCII Font Size" v-model="asciiFontSize" :min="2" :max="20" :step="1" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Text Font Size"
|
||||
v-model="textFontSize"
|
||||
:min="100"
|
||||
:max="400"
|
||||
:step="25"
|
||||
/>
|
||||
<PreviewSlider title="Text Font Size" v-model="textFontSize" :min="100" :max="400" :step="25" />
|
||||
|
||||
<PreviewSlider
|
||||
title="Base Height"
|
||||
v-model="planeBaseHeight"
|
||||
:min="4"
|
||||
:max="16"
|
||||
:step="1"
|
||||
/>
|
||||
<PreviewSlider title="Base Height" v-model="planeBaseHeight" :min="4" :max="16" :step="1" />
|
||||
|
||||
<PreviewSwitch title="Enable Waves" v-model="enableWaves" />
|
||||
|
||||
|
||||
@@ -46,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
|
||||
import PreviewText from '../../components/common/PreviewText.vue';
|
||||
import PreviewSlider from '../../components/common/PreviewSlider.vue';
|
||||
import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
|
||||
import Customize from '@/components/common/Customize.vue';
|
||||
import { glitchText } from '@/constants/code/TextAnimations/glitchTextCode';
|
||||
|
||||
const text = ref('Vue Bits');
|
||||
|
||||
Reference in New Issue
Block a user