首页 > 其他分享 >elementplus vue 范围输入框

elementplus vue 范围输入框

时间:2023-06-25 16:57:30浏览次数:53  
标签:el elementplus right 输入框 vue radius null border important

 <div class="fv-row mb-7">
        <label class="fs-6 fw-semobold mb-2">{{ t("Numberofgroups") }}</label>

        <el-form-item prop="formInline.group">
          <el-input
            class="line"
            style="width: 50%"
            v-model="store.formInline.group[0]"
            type="text"
            :placeholder="t('Numberofgroups')"
          >
            <template #prepend>{{ t("Numberofgroups") }}</template>
          </el-input>

          <el-input
            class="line"
            style="width: 50%"
            v-model="store.formInline.group[1]"
            type="text"
            :placeholder="t('Numberofgroups')"
          >
            <template #prepend>To</template>
          </el-input>
        </el-form-item>
      </div>

:deep .line .el-input-group__prepend {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

:deep .el-input-group--prepend > .el-input__wrapper {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

  const formInline = reactive({
    state: "进行中",
    label: "",
    workbench: "",
    beworkbench: "",
    BM: "",
    constrained: "",
    number: [null, null],
    bmnumber: [null, null],
    homenumber: [null, null],
    group: [null, null],
    import: "",
  });

标签:el,elementplus,right,输入框,vue,radius,null,border,important
From: https://www.cnblogs.com/xxdmua/p/17503308.html

相关文章

  • Vue中的Ajax请求和Slot插槽的技术探究
    Ajax请求Ajax是一种异步的Web开发技术,用于在不刷新整个页面的情况下向服务器发送请求和接收响应。Vue提供了一种简单而强大的方法来处理Ajax请求。以下是在Vue中进行Ajax请求的基本步骤:安装Axios:Axios是一个流行的JavaScript库,用于进行Ajax请求。你可以使用npm或yarn等包管理......
  • vue-step2
    目录结构目录解析build:项目构建(webpack)相关代码config:配置目录,包括端口号等node_modules:npm加载的项目依赖模块src:assets:放置一些图片,如logocomponents:目录里面放一些组件文件,可以不用App.vue项目入口文件main.js项目的核心文件sta......
  • VUE防止多次点击,重复请求
    1.添加自定义文件preventReClick.jsimportVuefrom'vue'constpreventReClick=Vue.directive('preventReClick',{  inserted:function(el,binding){    el.addEventListener('click',()=>{      if(!el.disabled)......
  • Vue.js 混入
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......
  • vue学习记录 7
    vue打地鼠的简单实现,效果差不多就这个样子:目录:|mouse|--|components//放分页的|--|--|GamePage.vue|--|image//装图片的|--|index.vue//入口index.vue:<template><divv-if="isplay"><ul><liclass="mytitle">打个地鼠选择难度</......
  • vue学习记录 6
    遇到的问题 1、将自己的代码插入项目后,图片资源无法加载。<imgsrc='../image/mine.png'/>此句图片可以显示<img:src="`../image/cell${cell.value}.png`"/>此句图片会裂开正确的字符串拼接指定图片路径:<img:src="require(`../image/cell${cell.value}.png`)"> ......
  • vuex里面的this.$store.dispatch 和 this.$store.commit用法以及区别
     两个方法都是传值给vuex的mutation改变statedispatch:异步操作,数据提交至actions,可用于向后台提交数据this.$store.dispatch('isLogin',true);commit:  同步操作,数据提交至mutations,可用于登录成功后读取用户信息写到缓存里this.$store.commit('loginStatus',1);......
  • vue-step1
    安装nodejs以及设置国内镜像国内安装nodejs地址:https://mirrors.aliyun.com/nodejs-release/v12.22.12/设置淘宝镜像npmconfigsetregistryregistry.npm.taobao.org,验证​npmconfiggetregistryvue脚手架安装npminstall-g@vue/cli#ORyarnglobaladd......
  • vue项目本地启动history路由模式刷新页面404
    背景:之前一直用hash模式,改成history模式后刷新页面404解决:vue.config.js中publicPath:"/"如果是线上服务则还需要后端修改一些配置,见链接点击查看......
  • vue中微信身份识别(openid)
    最近做一个投票功能,为了防止用户恶意刷票,必须鉴别用户身份,对每个人投票次数限制。但投票是开放的,任何人都可以投,并非仅平台注册用户,因此只能使用用户最广泛的微信来识别用户,通过获取微信openid来判定用户是否已经投过票。在vue中,需要添加一个静态html(weixinOAuth.html)来进行跳转......