1. 最近、el-date-picker の先頭に追加する必要がある問題に遭遇しました: 開始時刻、終了時刻。el-input は、前と後ろなどにすることができます。問題は、element-ui が el-date-picker にそのような機能を提供しないことです。
| 名前 | 例証する |
|---|---|
| プレフィックス | 入力ボックスのヘッダー コンテンツは、type="textarea"非 |
| サフィックス | 入力ボックスの最後の内容は、type="textarea"非 |
| 先頭に追加 | 入力ボックスの前面の内容は、type="textarea"非 |
| 追加 | 入力ボックスの後の内容は、type="textarea"非 |
検索した結果、ようやく他の方の解決策を見つけたので、参考までにお送りします。
コード：
<div class="timepick-width-prepend">
<el-button type="default" class="prepend-text">预估量产时间</el-button>
<el-date-picker v-model="formData.planProductTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
</div>
最初に、外側の DIV のflexレイアウトをそれらを水平方向に整列し、垂直方向に中央揃えにします。後で背景色buttonを追加し。buttonのホバー効果を削除します。
buttonこれまでのところ、私たちが望む効果に非常に近いです. 最後に、詳細を最適化し、それらが重なる部分の丸みを帯びた角を処理します.コンポーネントの右側の上部と下部の丸みを帯びた角は 0 にリセットされ、上部と下部datepickerはコンポーネントの左側の丸みを帯びた角は 0 にリセットされます。0 にリセットします。
.timepick-width-prepend {
display: flex;
align-items: center;
.prepend-text {
background: #F5F7FA;
color: #909399;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
cursor: default;
:focus, :hover {
border-color: #DCDFE6!important;
}
}
.prepend-text:focus, .prepend-text:hover {
border-color: #DCDFE6!important;
}
.el-input__inner {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
}
复制代码最後に、el-date-picker の角の丸みの除去を実装していないことを付け加えたいと思います. もう 1 つの問題は、これは通常のフロントのように見えますが、元のフロントとはまだ異なります. 例えば、4文字の場合はフロント部分の大きさが異なります。Element-ui は以前にスタイルを提供していた可能性があり、スタイルを見つけた後でこの問題を解決します。