[修复] timeline 组件样式

This commit is contained in:
就眠儀式 2021-11-18 13:13:04 +08:00
parent b0a3bd0ac9
commit 05f379c680
11 changed files with 65 additions and 89 deletions

View File

@ -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

View File

@ -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>

View File

@ -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;
} }

View File

@ -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<{

View File

View 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>

View File

@ -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 {

View File

@ -38,8 +38,6 @@ import {
VNode, VNode,
Ref, Ref,
ref, ref,
onUpdated,
onMounted,
watch, watch,
} from 'vue' } from 'vue'

View File

@ -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>