vue 实现自己的input

淡淡的烟草味﹌ 2022-10-10 09:53 132阅读 0赞

<template>
      <div class="form">
        <span class="label">{
       { label }}</span>
        <input
          contenteditable="true"
          class="input"
          :value="value"
          @input="handleInput"
        />
      </div>
    </template>
    <script>
    export default {
      props: {
        value: {
          type: String,
          default: "",
        },
        label: {
          type: String,
          default: "",
        },
      },
      methods: {
        handleInput(e) {
          this.$emit("input", e.target.value);
        },
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .form {
      display: inline-block;
      line-height: 40px;
      vertical-align: middle;
      margin-right: 10px;
      margin-bottom: 5px;
    
      .label {
        display: inline-block;
        background-color: #009933;
        height: 40px;
        padding: 0 10px;
        color: #fff;
        border: 0px solid #a7a7a7;
        vertical-align: middle;
        border-radius: 5px 0 0 5px;
      }
      .input {
        display: inline-block;
        height: 40px;
        padding: 0 10px;
        vertical-align: middle;
        border: 0px solid #a7a7a7;
        border-left: 0px;
        outline: 0px solid #afecab;
        border-radius: 0 5px 5px 0;
        &:focus {
          outline: 2px solid #009933;
        }
      }
    }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue输出input的内容

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

桃扇骨/ 2023年10月18日 08:47/ 0 赞/ 53 阅读

相关 vue中input输入框的模糊查询实现

　　本套餐将包括两个重磅性的课程与一个赠送学习的课程，分别为SpringBoot实战视频教程与RabbitMQ实战教程跟SSM整合开发之poi导入导出Excel。目的是为了让各

短命女/ 2023年09月25日 12:11/ 0 赞/ 21 阅读

相关 Vue中实现input输入框字数限制

先放效果图: ![在这里插入图片描述][20210130100910946.png] vue代码如下: <el-form-item label="活动标题"

分手后的思念是犯贱/ 2022年10月24日 15:27/ 0 赞/ 479 阅读

相关 vue 自己实现select

vue 自己实现select <template> <div class="form"> <span class="label">{

小鱼儿/ 2022年10月12日 04:27/ 0 赞/ 111 阅读

相关 vue 实现自己的input

<template> <div class="form"> <span class="label">{ { label }}<

淡淡的烟草味﹌/ 2022年10月10日 09:53/ 0 赞/ 133 阅读

相关 vue中获得input的值

原生 js 使用 getElementById 比较麻烦的地方需要为元素设置 id 设置 id 之后，无法复用，因为一个页面中不能存在两个相同的 id

悠悠/ 2022年05月24日 03:25/ 0 赞/ 209 阅读

相关 vue监听input输入

想用vue监听input的输入，但是又懒得引入jquery，去网上查了资料，才找到方法。实现方法如下。 ![70][]用v-on来绑定，然后就可以动态获取input的值了

以你之姓@/ 2022年05月19日 03:39/ 0 赞/ 308 阅读

相关 vue 实现input表单元素的disabled

场景分析解决场景 > 今天产品经理提了一个需求: > > > 一个API的账号体系增加一个chec

女爷i/ 2022年05月17日 00:26/ 0 赞/ 365 阅读

相关 Vue input的一些方法

多选框获取value 值，已经动态改变样式 ![70][] <div class="doctor"> <div class="doctor-li">

迷南。/ 2022年05月13日 04:44/ 0 赞/ 233 阅读

相关 vue + iview 中 Input 与 input 的 change 事件区别

转自： https://blog.csdn.net/yiifaa/article/details/52452153 1、vue + input <label>i

清疚/ 2022年03月06日 19:30/ 0 赞/ 878 阅读