[修复] timeline 组件样式
This commit is contained in:
parent
b0a3bd0ac9
commit
05f379c680
@ -3,29 +3,6 @@
|
|||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
|
||||||
<lay-switch></lay-switch>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: title 基础使用
|
|
||||||
:::
|
|
||||||
|
|
||||||
::: demo
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-switch v-model="active1"></lay-switch>
|
<lay-switch v-model="active1"></lay-switch>
|
||||||
</template>
|
</template>
|
||||||
@ -36,7 +13,7 @@ import { ref } from 'vue'
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
const active1 = ref(true);
|
const active1 = ref(false);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
active1
|
active1
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
<lay-timeline style="padding-left:30px;padding-top:30px;">
|
<lay-timeline style="padding-left:30px;padding-top:30px;">
|
||||||
<lay-timeline-item title="修订版本号:日常 bugfix 更新" simple></lay-timeline-item>
|
<lay-timeline-item title="尾版本号:日常 bugfix 更新" simple></lay-timeline-item>
|
||||||
<lay-timeline-item title="次版本号:带有新特性的向下兼容的版本。" simple></lay-timeline-item>
|
<lay-timeline-item title="次版本号:带有新特性的向下兼容的版本。" simple></lay-timeline-item>
|
||||||
<lay-timeline-item title="主版本号:含有破坏性更新和新特性,不在发布周期内。" simple></lay-timeline-item>
|
<lay-timeline-item title="主版本号:含有破坏性更新和新特性,不在发布周期内。" simple></lay-timeline-item>
|
||||||
</lay-timeline>
|
</lay-timeline>
|
||||||
|
@ -52,15 +52,6 @@ h1 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-top: 2rem;
|
|
||||||
font-size: 1.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
}
|
}
|
||||||
|
@ -82,8 +82,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayIconPicker" lang="ts">
|
<script setup name="LayIconPicker" lang="ts">
|
||||||
import { defineProps, Ref, ref, watch } from 'vue'
|
import { defineProps, Ref, ref } from 'vue'
|
||||||
import icons from '../resource/icons'
|
import icons from "../../font/iconfont"
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
0
src/module/input/index.less
Normal file
0
src/module/input/index.less
Normal file
@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<input
|
<input
|
||||||
:type="type"
|
:type="type"
|
||||||
:value="modelValue"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:name="name"
|
:name="name"
|
||||||
|
:value="modelValue"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
class="layui-input"
|
:placeholder="placeholder"
|
||||||
:class="{ 'layui-disabled': disabled }"
|
:class="{ 'layui-disabled': disabled }"
|
||||||
|
class="layui-input"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@focus="onFocus"
|
@focus="onFocus"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@ -14,29 +14,31 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayInput" lang="ts">
|
<script setup name="LayInput" lang="ts">
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, defineEmits } from "vue";
|
||||||
|
|
||||||
const props = defineProps<{
|
export interface LayInputProps {
|
||||||
name?: string
|
name?: string;
|
||||||
type?: string
|
type?: string;
|
||||||
modelValue?: string
|
disabled?: boolean;
|
||||||
placeholder?: string
|
modelValue?: string;
|
||||||
disabled?: boolean
|
placeholder?: string;
|
||||||
}>()
|
}
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur'])
|
const props = defineProps<LayInputProps>();
|
||||||
|
|
||||||
|
const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
|
||||||
|
|
||||||
const onInput = function (event: InputEvent) {
|
const onInput = function (event: InputEvent) {
|
||||||
const inputElement = event.target as HTMLInputElement
|
const inputElement = event.target as HTMLInputElement;
|
||||||
emit('update:modelValue', inputElement.value)
|
emit("update:modelValue", inputElement.value);
|
||||||
emit('input', event)
|
emit("input", event);
|
||||||
}
|
};
|
||||||
|
|
||||||
const onFocus = function (event: FocusEvent) {
|
const onFocus = function (event: FocusEvent) {
|
||||||
emit('focus', event)
|
emit("focus", event);
|
||||||
}
|
};
|
||||||
|
|
||||||
const onBlur = function () {
|
const onBlur = function () {
|
||||||
emit('blur')
|
emit("blur");
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
@ -5,7 +5,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineProps, defineEmits, computed, ref } from "vue";
|
import { defineProps, defineEmits, computed } from "vue";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
export interface LaySwitchProps {
|
export interface LaySwitchProps {
|
||||||
|
@ -38,8 +38,6 @@ import {
|
|||||||
VNode,
|
VNode,
|
||||||
Ref,
|
Ref,
|
||||||
ref,
|
ref,
|
||||||
onUpdated,
|
|
||||||
onMounted,
|
|
||||||
watch,
|
watch,
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
|
||||||
|
@ -1,3 +1,38 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "LayTextarea",
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps, defineEmits } from "vue";
|
||||||
|
|
||||||
|
export interface LayTextareaProps {
|
||||||
|
name?: string;
|
||||||
|
modelValue?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<LayTextareaProps>();
|
||||||
|
|
||||||
|
const emit = defineEmits(["update:modelValue", "input", "focus", "blur"]);
|
||||||
|
|
||||||
|
const onInput = function (event: InputEvent) {
|
||||||
|
const inputElement = event.target as HTMLInputElement;
|
||||||
|
emit("update:modelValue", inputElement.value);
|
||||||
|
emit("input", inputElement.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onFocus = function (event: FocusEvent) {
|
||||||
|
emit("focus", event);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onBlur = function () {
|
||||||
|
emit("blur");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<textarea
|
<textarea
|
||||||
:value="modelValue"
|
:value="modelValue"
|
||||||
@ -11,30 +46,3 @@
|
|||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayTextarea" lang="ts">
|
|
||||||
import { defineProps, defineEmits } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
name?: string
|
|
||||||
modelValue?: string
|
|
||||||
placeholder?: string
|
|
||||||
disabled?: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur'])
|
|
||||||
|
|
||||||
const onInput = function (event: InputEvent) {
|
|
||||||
const inputElement = event.target as HTMLInputElement
|
|
||||||
emit('update:modelValue', inputElement.value)
|
|
||||||
emit('input', inputElement.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onFocus = function (event: FocusEvent) {
|
|
||||||
emit('focus', event)
|
|
||||||
}
|
|
||||||
|
|
||||||
const onBlur = function () {
|
|
||||||
emit('blur')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user