vue动画如何实现只经历运动而不隐藏

Posted 2023-04-06

如何让目标元素不经历v-if或 v-show的消失隐藏，而只是单纯的变换位置

参考技术A 定义一个 transition 过渡，做 class 切换就行了，或者js修改 css属性就行了

如何在 vue 中隐藏日期选择器的默认日历图标

【中文标题】如何在 vue 中隐藏日期选择器的默认日历图标

【英文标题】：How to hide default calendar icon from datepicker in vue

【发布时间】：2022-01-14 08:11:05

【问题描述】：

我在 vue 中有一个输入组件，我将类型作为日期给出。

如您所见，黑色图标是 html 的默认设置。而我想要实现的，首先我想点击整个输入字段来选择日期，而不是只点击黑色图标。另外，我想删除黑色图标。

这是我在 vue 中的输入组件：

<template>
  <div>
    <div v-bind:class="row: rowStyle, 'form-group': !smallSize">
      <label v-if="label" for=inputName v-bind:class="labelClass" :style="labelStyle"> label </label>
      <div class="input-group" v-bind:class="inputColumnAmount">
        <div v-if="inputPrefix" class="input-group-prepend">
          <span v-html="inputPrefix"/>
        </div>
        <input
            v-if="inputType == 'text' || inputType == 'email' || inputType == 'password' || inputType == 'date'"
            :type="inputType"
            class="form-control"
            v-bind:class="inputClasses"
            v-on:focusout="$emit('value', $event.target.value)"
            :id="inputName"
            :placeholder="placeholder"
            :value="value"
            :pattern="pattern"
            :maxlength="maxlength"
            :disabled="disabled">
        <div v-if="inputSuffix" class="input-group-append">
          <span v-html="inputSuffix"/>
        </div>
          <div v-if="icon" class="input-group-append">
              <div class="input-group-text"><i :class="icon"></i></div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import v4 as uuidv4 from 'uuid';
  import GENERAL_COMPONENT_CONSTANTS from "../constants/GeneralComponentConstants";

  export default 
    props: 
      label:  type: String, default: '' ,
      error:  type: String, default: '' ,
      inputType:  type: String, default: 'text' ,
      componentStyle:  type: String, default: GENERAL_COMPONENT_CONSTANTS.componentStyle.Row ,
      inputPrefix:  type: String, default: '' ,
      inputSuffix:  type: String, default: '' ,
        icon:  type: String, default: '' ,
      labelColumns:  type: Number | String, default: 3 ,
      placeholder:  type: String, default: "" ,
      value:  type: String | Number, default: "" ,
      pattern:  type: String, default: "" ,
      maxlength:  type: String, default: "150" ,
      disabled:  type: Boolean, default: false ,
      smallSize:  type: Boolean, default: false ,
    ,
    data() 
      return 
        inputName: "input-" + uuidv4(),
      
    ,
    computed: 
      rowStyle: function() 
        return this.componentStyle == GENERAL_COMPONENT_CONSTANTS.componentStyle.Row;
      ,
      labelClass: function() 
        let labelClass = "";
        if (this.rowStyle) 
          labelClass += 'col-form-label ';
          labelClass += this.labelColumnAmount;
        
        return labelClass;
      ,
      labelColumnAmount: function () 
        return "col-sm-" + this.labelColumns;
      ,
      inputColumnAmount: function () 
        if (!this.rowStyle) 
          return '';
         else if (this.label) 
          return "col-sm-" + (12 - this.labelColumns);
         else 
          return "col-sm-12";
        
      ,
      labelStyle() 
        if (this.disabled) 
          return "color: #6c757d;";
         else 
          return "";
        
      ,
      inputClasses() 
        return 
          'is-invalid': this.error,
          'form-control-sm': this.smallSize,
        ;
      
    ,
  
</script>

在这里，我是如何使用它的：

<cc-input-component
            label="Create from"
            labelColumns=4
            inputType="date"
            :value="newAvailabilitySetting.from_date"
            v-on:value="newAvailabilitySetting.from_date = $event"
            icon="fa fa-calendar"/>

任何建议将不胜感激。谢谢。

【参考方案1】：

首先你应该设置一个类输入组件，然后你可以隐藏默认图标

 input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator 
    display: none;
    -webkit-appearance: none;

【讨论】：

是的，我试过了，但是当我隐藏图标时，我无法打开日期选择器，因为它只有在点击图标时才会打开

你能举个例子让我更好地帮助你吗？ codepen.io 或 jsfiddle.net