mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
93 lines
1.9 KiB
Vue
93 lines
1.9 KiB
Vue
<template>
|
|
<div class="be-textbox" role="textbox" :class="{ linear }">
|
|
<input
|
|
ref="input"
|
|
type="text"
|
|
v-bind="restAttrs"
|
|
:value="text"
|
|
@change.stop="change"
|
|
@input.stop="input"
|
|
@compositionstart="compositionStart"
|
|
@compositionend="compositionEnd"
|
|
/>
|
|
<div v-if="linear" class="linear-bar"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import { textControlMixin } from './text-control'
|
|
|
|
export default defineComponent({
|
|
name: 'TextBox',
|
|
mixins: [textControlMixin],
|
|
props: {
|
|
linear: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.be-textbox {
|
|
position: relative;
|
|
flex: 1 1 32px;
|
|
min-width: 32px;
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
border-radius: 4px;
|
|
transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
box-shadow: 0 0 0 1px #8884, 0 0 0 0px var(--theme-color-20);
|
|
&:focus-within {
|
|
box-shadow: 0 0 0 1px var(--theme-color), 0 0 0 3px var(--theme-color-20);
|
|
}
|
|
input[type='text'] {
|
|
line-height: normal;
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
flex: 1 0 0;
|
|
background-color: transparent;
|
|
border: none;
|
|
outline: none !important;
|
|
color: black;
|
|
width: 0;
|
|
font-size: inherit;
|
|
body.dark & {
|
|
color: #eee;
|
|
}
|
|
&:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
&::-webkit-input-placeholder {
|
|
color: #888;
|
|
}
|
|
}
|
|
&.linear {
|
|
box-shadow: none;
|
|
input[type='text'] {
|
|
padding: 4px;
|
|
}
|
|
.linear-bar {
|
|
position: absolute;
|
|
top: calc(100% - 1px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 1px;
|
|
height: 1px;
|
|
width: 100%;
|
|
background-color: #8884;
|
|
}
|
|
&:focus-within {
|
|
box-shadow: none;
|
|
.linear-bar {
|
|
background-color: var(--theme-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|