首页 > 其他分享 >uniapp自定义input清除按钮

uniapp自定义input清除按钮

时间:2024-05-13 15:30:10浏览次数:24  
标签:uniapp 自定义 清除 text 按钮 input

uniapp小程序,引入uni-ui库后,观察到其他组件,有的默认有清除按钮,比如:

 在写内置组件 input框,查看文档没有此属性,官方示例在这里:https://github.com/dcloudio/hello-uniapp/blob/master/pages/component/input/input.nvue

 还需自行复制对应的css,试了下效果不太好。

我需要和级联选择器风格一致的清除按钮,f12查看其有对应类名:

 修改下原本的input框,成功了。

代码如下:

 <view class="wc">
            <text class="text-title">标题/内容:</text>
            <input
              class="info-input"
              v-model="title"
              clear
              placeholder="请输入"
              clearable
              placeholder-style="color:#969899"
            />
            <text
              class="uni-icons uniui-clear"
              v-if="title"
              @click="
                () => {
                  title = ''
                }
              "
            ></text>
</view>

对应的css要复制过来:

.uni-icons {
  font-family: uniicons;
  text-decoration: none;
  text-align: center;
  color: #c0c4cc;
  font-size: 24px;
}
.uniui-clear:before {
  content: '\e66d';
}

 成功。

 

标签:uniapp,自定义,清除,text,按钮,input
From: https://www.cnblogs.com/shyhuahua/p/18189340

相关文章

  • JVM自定义加类加载器
    在JVM类加载器分类中提及JVM自带的加载器无法满足实际业务需求时,可以自定义加载器。那一般什么情况下需要自定义加载器呢?隔离加载类:模块隔离——把类加载到不同的应用选项中,比如Tomcat类加载器。修改类加载方式:平台提供了三类加载器除必须加载的类加载器,可以根据实际情况......
  • JAVA Comparator 自定义排序 源码分析
    对于一个数组来说如果我们想要从大到小排序一般会这么写Integer[]nums={1,2,3};Arrays.sort(nums,newComparator<Integer>(){@Overridepublicintcompare(Integera,Integerb){returnb-a;}});......
  • Go语言异常处理:自定义错误【errors.New+panic】
    程序本身抛出的异常信息不是太友好,我们可以自定义错误或者异常的信息,需要使用errors包中的New函数来包装一下异常或错误信息;在使用内置函数panic(err),把异常信息后面的程序执行终止掉,因为再执行后面的程序也没有意义了。 packagemainimport"fmt"import"errors"funcma......
  • uniapp循环请求接口之后跳转
    if(this.model.caseWorkPartyModelList.length>0){letpromises=[];//用于存储所有异步操作的Promiseletthat=thisthis.model.caseWorkPartyModelList.forEach(async(item,index)=>{......
  • Tomcat中为什么要使用自定义类加载器
    Tomcat使用自定义类加载器主要是基于以下几个关键原因:1.应用隔离:Tomcat作为一个Web容器,能够同时部署和运行多个Web应用程序。每个应用可能依赖不同的库版本或者包含同名类,为了确保每个应用的类库相互独立,避免类冲突,Tomcat为每个Web应用提供了一个独立的类加载器实例,即`WebAppC......
  • Tomcat中为什么要使用自定义类加载器
    Tomcat使用自定义类加载器主要是基于以下几个关键原因:1.应用隔离:Tomcat作为一个Web容器,能够同时部署和运行多个Web应用程序。每个应用可能依赖不同的库版本或者包含同名类,为了确保每个应用的类库相互独立,避免类冲突,Tomcat为每个Web应用提供了一个独立的类加载器实例,即`WebAppC......
  • SQL Server实战七:自定义数据类型、标量值、内嵌表值、多语句表值函数的操作
      本文介绍基于MicrosoftSQLServer软件,实现数据库用户自定义数据类型的创建、使用与删除,以及标量值、内嵌表值、多语句表值函数等用户定义函数的创建、使用、删除方法。目录1用SQL语句创建一个用户定义的数据类型Idnum2使用Idnum创建学生表STUDENT与教师表TEACHER3交互式......
  • 自定义函数在LCD上显示一张不超过LCD像素大小的色深为 24bit的bmp图片
    设计程序实现在LCD上任意位置显示一张任意大小的色深为24bit的bmp图片,要求图像不失真可以在开发板的LCD上显示。头文件包含#include<stdio.h>#include<sys/types.h>#include<sys/stat.h>#include<fcntl.h>#include<unistd.h>#include<sys/mman.h>#include<linux/......
  • 自定义各类基础排序算法
    接口函数基础信息/********************************************************************* 文件名称: 数据结构中对于无序数列的排序算法* 文件作者:[email protected]* 创建日期:2024/05/11* 文件功能:对无序数列进行排序* 注意事项:None** C......
  • Blazor WebAssembly使用 AuthenticationStateProvider 自定义身份认证
    本文章以客户端基础,实现类似后台系统,进入后台控制台页面需要经过登录身份验证才可访问情况简单来时就是实现前后端分离,前端通过token和用户信息进行身份认证,或者在 AuthenticationStateProvider 实现方法 GetAuthenticationStateAsync 中调用后台接口进行身份验证安装依......