vue3新拟态组件库开发流程——input组件源码

已于 2022-08-24 16:32:29 修改
阅读量384 收藏 1
点赞数
分类专栏： vue3 组件库 文章标签： css 前端 html
于 2022-08-23 15:16:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SanOrintea/article/details/126478101
版权

有了开发button的经验，copy过来删删改改获得最基础的框架：

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useProp, useNeumorphism } from '../mixin/neumorphism'
const props = defineProps({
    ...useProp,
    ...{
      disabled: {
        type: Boolean,
        default: false
      }
    }
})
const { baseStyleObject } = useNeumorphism(props)
let styleObject =  computed(() => ({ 

}))
</script>

<template>
  <input 
    class="san-input"
    :style="{...baseStyleObject,...styleObject}"
    v-bind="$attrs"
    @input="$emit('input', $event.target.value)"
    @focus="$emit('focus', $event.target.value)"
    @blur="$emit('blur', $event.target.value)"
    @change="$emit('change', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'sanorin-input',
}
</script>

<style scoped>
@import "../../style/index.css";

.san-input{
  width: 180px;
}
.san-input {
  outline: none;
  color: var(--text-color);
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(var(--linear-angle), var(--linear-left-color), var(--linear-right-color));
  box-shadow: inset var(--shadow-ah) var(--shadow-av) var(--shadow-blur) var(--left-color), inset var(--shadow-bh) var(--shadow-bv) var(--shadow-blur) var(--right-color);
}
</style>

往下写，先支持disabled，支持disable的时候出现一个问题，我先在测试页面写下测试示例<sanorin-input v-model="input" :disabled="true"></sanorin-input>这里已经成功禁用了输入，我想禁用输入的时候改变鼠标样式，就需要prop接收下来disabled然后绑定到样式上:class="[{'is-disabled': disabled}]" ，于是，attrsv-bind="$attrs"就接收不到diasable了，因此这里需要手动绑定下:disabled="disabled"

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useProp, useNeumorphism } from '../mixin/neumorphism'
const props = defineProps({
    ...useProp,
    ...{
      disabled: {
        type: Boolean,
        default: false
      }
    }
})
const { baseStyleObject } = useNeumorphism(props)
let styleObject =  computed(() => ({ 

}))
</script>

<template>
  <input 
    class="san-input"
    :class="[{'is-disabled': disabled}]" 
    :style="{...baseStyleObject,...styleObject}"
    v-bind="$attrs"
    @input="$emit('input', $event.target.value)"
    @focus="$emit('focus', $event.target.value)"
    @blur="$emit('blur', $event.target.value)"
    @change="$emit('change', $event.target.value)"
    :disabled="disabled"
  />
</template>

<script>
export default {
  name: 'sanorin-input',
}
</script>

<style scoped>
@import "../../style/index.css";

.san-input{
  width: 180px;
}
.san-input {
  outline: none;
  color: var(--text-color);
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: linear-gradient(var(--linear-angle), var(--linear-left-color), var(--linear-right-color));
  box-shadow: inset var(--shadow-ah) var(--shadow-av) var(--shadow-blur) var(--left-color), inset var(--shadow-bh) var(--shadow-bv) var(--shadow-blur) var(--right-color);
}
</style>

接下来加入is-clearable的代码

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useProp, useNeumorphism } from '../mixin/neumorphism'
const emit = defineEmits(['focus','blur','clear','input','change','update:modelValue'])
const handleFocus = (evt) => { focused.value = true; emit('focus', evt) }
const handleBlur = (evt) => { focused.value = false; emit('blur', evt) }
const handleClear = () => { emit('input', ''); emit('change', ''); emit('clear') }
const props = defineProps({
    ...useProp,
    ...{
      modelValue: {
        type: [String, Number],
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      }
    }
})
let hovering = ref(false)
let focused = ref(false)
let nativeInputValue = computed(() => props.value === null || props.value === undefined ? '' : String(props.value))
let showClear = computed(() => props.clearable && !props.disabled && (focused.value || hovering.value) && !!nativeInputValue)

const { baseStyleObject } = useNeumorphism(props)
let styleObject =  computed(() => ({ 

}))
</script>

<template>
  <div
    class="san-input neumorphism flex"
    :class="[{
        'is-disabled': disabled,
    }]"
    :style="{...baseStyleObject,...styleObject}"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false">
    <input 
      :value="modelValue"
      v-bind="$attrs"
      :disabled="disabled"
      @input="emit('update:modelValue', $event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="emit('change', $event.target.value)"
    />
    <!-- 后置内容 -->
    <span
      v-if="showClear">
      <span>
        <i v-if="showClear"
          class="iconfont san-qingchu"
          @mousedown.prevent
          @click="handleClear"
        ></i>
      </span>
    </span>
  </div>
  
</template>

<script>
export default {
  name: 'sanorin-input',
}
</script>

<style scoped>
@import "../../style/index.css";
@import "../../style/neumorphism.css";

.san-input{
  height: 22px;
  width: 250px;
  padding: 10px;
  border-radius: 5px;
}
.san-input > input{
  flex: 1;
  width: 220px;
  background: transparent;
  border: none;
  outline: none;
}

</style>

接下来加入密码框，要有查看密码的功能，认情况input的type是passport，点击查看按钮，type就变成text。

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useProp, useNeumorphism } from '../mixin/neumorphism'
const emit = defineEmits(['focus','blur','clear','change','update:modelValue'])
const handleFocus = (evt) => { focused.value = true; emit('focus', evt) }
const handleBlur = (evt) => { focused.value = false; emit('blur', evt) }
const props = defineProps({
    ...useProp,
    ...{
      modelValue: {
        type: [String, Number],
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      showPassword: {
        type: Boolean,
        default: false
      },
    }
})
let hovering = ref(false)
let focused = ref(false)
let nativeInputValue = computed(() => props.value === null || props.value === undefined ? '' : String(props.value))
// clearable
let showClear = computed(() => props.clearable && !props.disabled && (focused.value || hovering.value) && !!nativeInputValue)
const handleClear = () => { emit('update:modelValue', ''); emit('change', ''); emit('clear') }
// password
let passwordVisible = ref(false)
const handlePassword = () => { passwordVisible.value = !passwordVisible.value }

const { baseStyleObject } = useNeumorphism(props)
let styleObject =  computed(() => ({ 

}))
</script>

<template>
  <div
    class="san-input neumorphism flex"
    :class="[{
        'is-disabled': disabled,
    }]"
    :style="{...baseStyleObject,...styleObject}"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false">
    <input 
      :value="modelValue"
      v-bind="$attrs"
      :disabled="disabled"
      :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
      @input="emit('update:modelValue', $event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="emit('change', $event.target.value)"
    />
    <!-- 后置内容 -->
    <span v-if="showClear">
      <i v-if="showClear"
        class="iconfont san-qingchu"
        @mousedown.prevent
        @click="handleClear"
      ></i>
    </span>
    <span v-if="showPassword">
      <i v-if="!passwordVisible"
        class="iconfont san-bukejian"
        @mousedown.prevent
        @click="handlePassword"
      ></i>
      <i v-if="passwordVisible"
        class="iconfont san-kejian"
        @mousedown.prevent
        @click="handlePassword"
      ></i>
    </span>
  </div>
  
</template>

<script>
export default {
  name: 'sanorin-input',
}
</script>

<style scoped>
@import "../../style/index.css";
@import "../../style/neumorphism.css";

.san-input{
  height: 22px;
  width: 250px;
  padding: 10px;
  border-radius: 5px;
}
.san-input > input{
  flex: 1;
  width: 220px;
  background: transparent;
  border: none;
  outline: none;
}

</style>

接下来加入三点
icon
尺寸
textarea（初步）

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useProp, useNeumorphism } from '../mixin/neumorphism'
const input = ref() // 与html中ref=""对应，定位dom元素
const emit = defineEmits(['focus','blur','clear','change','update:modelValue'])
const handleFocus = (evt) => { focused.value = true; emit('focus', evt) }
const handleBlur = (evt) => { focused.value = false; emit('blur', evt) }
const props = defineProps({
    ...useProp,
    ...{
      modelValue: {
        type: [String, Number],
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      showPassword: {
        type: Boolean,
        default: false
      },
      preIcon: {
          type: String,
          default: null,
      },
      postIcon: {
          type: String,
          default: null,
      },
      type: {
        type: String,
        default: 'text'
      },
      size: {
          type: Number,
          default: 40
      },
    }
})
let hovering = ref(false)
let focused = ref(false)
let nativeInputValue = computed(() => props.value === null || props.value === undefined ? '' : String(props.value))
// clearable
let showClear = computed(() => props.clearable && !props.disabled && (focused.value || hovering.value) && !!nativeInputValue)
const handleClear = () => { emit('update:modelValue', ''); emit('change', ''); emit('clear') }
// password
let passwordVisible = ref(false)
const handlePassword = () => { passwordVisible.value = !passwordVisible.value; focus() }
const focus = () => { input.value.focus(); setTimeout(() => { input.value.setSelectionRange(-1,-1) }) } // 点击密码后自动对焦并焦点至为最后一位

const { baseStyleObject } = useNeumorphism(props)
let styleObject =  computed(() => ({ 
  '--font-size': `${props.size-26}px`, '--line-height': `${props.size-20}px`,
}))
</script>

<template>
  <div
    class="san-input neumorphism flex"
    :class="[{
        'is-disabled': disabled,
    }]"
    :style="{...baseStyleObject,...styleObject}"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false">
    <!-- 前置内容 -->
    <i v-if="preIcon" :class="[preIcon, 'iconfont']"></i>
    <!-- 主体内容 -->
    <input 
      v-if="type !== 'textarea'"
      ref="input"
      :value="modelValue"
      v-bind="$attrs"
      :disabled="disabled"
      :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
      @input="emit('update:modelValue', $event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="emit('change', $event.target.value)"
    />
    <textarea 
      v-else
      ref="textarea"
      :value="modelValue"
      v-bind="$attrs"
      :disabled="disabled"
      @input="emit('update:modelValue', $event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="emit('change', $event.target.value)"
    />
    <!-- 后置内容 -->
    <i v-if="showClear" class="iconfont san-qingchu" @click="handleClear"></i>
    <template v-if="showPassword">
      <i v-if="!passwordVisible" class="iconfont san-bukejian" @click="handlePassword"></i>
      <i v-if="passwordVisible" class="iconfont san-kejian" @click="handlePassword"></i>
    </template>
    <i v-if="postIcon" :class="[postIcon, 'iconfont']"></i>
  </div>
  
</template>

<script>
export default {
  name: 'sanorin-input',
}
</script>

<style scoped>
@import "../../style/index.css";
@import "../../style/neumorphism.css";

.san-input{
  width: 250px;
  padding: 10px;
  border-radius: 5px;
}
.san-input > input{
  flex: 1;
  width: 220px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0px;
  font-size: var(--font-size);
  line-height: var(--line-height);
}
.san-input > textarea{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
}
</style>

接下里增加输入长度限制

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useProp, useNeumorphism } from '../mixin/neumorphism'
const input = ref() // 与html中ref=""对应，定位dom元素
const emit = defineEmits(['focus','blur','clear','change','update:modelValue'])
const handleFocus = (evt) => { focused.value = true; emit('focus', evt) }
const handleBlur = (evt) => { focused.value = false; emit('blur', evt) }
const props = defineProps({
    ...useProp,
    ...{
      modelValue: {
        type: [String, Number],
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: false
      },
      showPassword: {
        type: Boolean,
        default: false
      },
      preIcon: {
          type: String,
          default: null,
      },
      postIcon: {
          type: String,
          default: null,
      },
      type: {
        type: String,
        default: 'text'
      },
      size: {
          type: Number,
          default: 40
      }
    }
})
let hovering = ref(false)
let focused = ref(false)
let nativeInputValue = computed(() => props.value === null || props.value === undefined ? '' : String(props.value))
// clearable
let showClear = computed(() => props.clearable && !props.disabled && (focused.value || hovering.value) && !!nativeInputValue)
const handleClear = () => { emit('update:modelValue', ''); emit('change', ''); emit('clear') }
// password
let passwordVisible = ref(false)
const handlePassword = () => { passwordVisible.value = !passwordVisible.value; focus() }
const focus = () => { input.value.focus(); setTimeout(() => { input.value.setSelectionRange(-1,-1) }) } // 点击密码后自动对焦并焦点至为最后一位
// limit
const textLength = computed(() => String(props.modelValue).length)

const { baseStyleObject } = useNeumorphism(props)
let styleObject =  computed(() => ({ 
  '--font-size': `${props.size-26}px`, '--line-height': `${props.size-20}px`, '--limit-size': `${props.size-28}px`
}))
</script>

<template>
  <div
    class="san-input neumorphism flex"
    :class="[{
        'is-disabled': disabled,
    }]"
    :style="{...baseStyleObject,...styleObject}"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false">
    <!-- 前置内容 -->
    <i v-if="preIcon" :class="[preIcon, 'iconfont']"></i>
    <!-- 主体内容 -->
    <input 
      v-if="type !== 'textarea'"
      ref="input"
      :value="modelValue"
      v-bind="$attrs"
      :disabled="disabled"
      :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
      @input="emit('update:modelValue', $event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="emit('change', $event.target.value)"
    />
    <textarea 
      v-else
      ref="textarea"
      :value="modelValue"
      v-bind="$attrs"
      :disabled="disabled"
      @input="emit('update:modelValue', $event.target.value)"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="emit('change', $event.target.value)"
    />
    <!-- 后置内容 -->
    <span class="limit" v-if="$attrs.maxlength">{{textLength}}/{{$attrs.maxlength}}</span>
    <i v-if="showClear" class="iconfont san-qingchu" @click="handleClear"></i>
    <template v-if="showPassword">
      <i v-if="!passwordVisible" class="iconfont san-bukejian" @click="handlePassword"></i>
      <i v-if="passwordVisible" class="iconfont san-kejian" @click="handlePassword"></i>
    </template>
    <i v-if="postIcon" :class="[postIcon, 'iconfont']"></i>
  </div>
  
</template>

<script>
export default {
  name: 'sanorin-input',
}
</script>

<style scoped>
@import "../../style/index.css";
@import "../../style/neumorphism.css";

.san-input{
  width: 250px;
  padding: 10px;
  border-radius: 5px;
}
.san-input > input{
  flex: 1;
  width: 220px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0px;
  font-size: var(--font-size);
  line-height: var(--line-height);
}
.limit{
  /* color: ; */
  font-size: var(--limit-size);
}
.san-input > textarea{
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
}
</style>
SanOrintea
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
新拟态风格UI组件库
11-02
新拟物风格的数据呈现UI组件 Sketch源文件 人员信息/音视频/开关/卡片/进度条/数据表/多选框等等
vuejs 贴合官方文档 源码分析
愿你走过半生，归来任是少年。
05-30 2398
谈谈Vue中的MVVM模式 MVVM全称是Model-View-ViewModel Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步。 ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的这个HTML元素可以是body，也可以是某个id所指代的元素。 DOMListeners和Data...
Vue3 script-setup 使用指南
油墨香^-^的博客
02-14 4937
本文主要是讲解与TypeScript的基本使用。是什么？是在单文件组件 (SFC) 中使用的编译时语法糖。本文写作时，vue使用的 3.2.26 版本。
vue3新拟态组件库开发流程——message组件源码
SanOrintea的博客
09-14 436
vue3新拟态组件库开发流程——message组件源码
vue中setSelectionRange方法不生效的解决方案
qq_41952476的博客
03-02 2861
这样就好了，应该是focus方法是个异步的 target.focus(); //target：dom节点 this.$nextTick(() => { target.setSelectionRange(2, 5); });
vue3 实现一个简单的输入框
不想起床
02-29 1775
需要一个输入框，可以输入文字，添加表情，一开始用了**富文本编辑器**，有点大材小用，所以自己封装一个输入框组件。支持输入文字，选择表情/插入表情，支持组合键换行，使用enter
基于UNIAPP的VUE3 TypeScript跨端组件库tmui.design设计源码
04-16
本源码项目是基于UNIAPP的VUE3 TypeScript跨端组件库tmui.design设计，包含1096个文件，主要使用JavaScript、TypeScript、Vue、CSS和HTML编程语言。该项目是一个跨端组件库，旨在帮助开发者更高效地构建多平台应用。...
基于Vue的图鸟UI组件库设计源码
04-06
本项目是一个基于Vue语言开发的图鸟UI组件库，包含296个文件，主要文件类型包括Vue组件、JavaScript脚本、SCSS样式表、图片、微信小程序的wxs脚本、JSON配置文件、Markdown文档、HTML页面和PNG图片。系统设计旨在为...
基于Vue3和TypeScript的日历日程组件设计源码
最新发布
05-31
日历日程组件项目源码，共30个文件，采用Vue3、TypeScript和HTML等语言开发，涉及多种文件类型如Vue组件、TypeScript源代码、JSON配置文件、Git忽略文件、NPM忽略文件、LICENSE文件、Markdown文档、HTML文档和SCSS...
基于Javascript的mint-ui Vue组件库设计源码
05-26
本项目是基于Javascript的mint-ui Vue组件库设计源码，包含234个文件，其中包括80个JavaScript文件、69个Vue文件、38个Markdown文档、31个JSON文件、4个CSS文件、1个eslintignore文件、1个eslintrc文件、1个...
vue拟态化微立体计算器源码.html
08-03
vue拟态化微立体计算器源码，对应我的那篇文章的源码。
vue3新拟态组件库开发流程——table组件源码
SanOrintea的博客
04-28 1505
vue3新拟态组件库开发流程——table组件源码
avue源码修改过程(持续更新)
weixin_40466351的博客
05-28 6940
一、crud 组件，想搜索显示顺序、表单显示顺序、和表格列表显示顺序互不影响 源码分析: form/index.vue 文件 修改代码：
vue3组件更新流程
twinkle的博客
06-01 921
先写一个组件，, 然后咋们来执行更新的流程 mount update 还记得组件挂载阶段中的 么？ 在这里的时候会进行依赖收集，会在实例instance上挂载一个方法 当数据发送变化的时候，就会触发 函数， 不清楚响应式系统的可以查看这里整体的流程图如下：咋们来分析下 vue3 中属性变化的情况 对于这种情况，咋们怎么才能找出属性的变化，是不是就是应该遍历 如果里面的 在 中不存在，则标记为新增的属性 代码应该这么写： 第二种情况 属性减少 对于这种情况，咋们要找出属性的变化，直接遍历 oldPro
Vue3 源码流程图
小菜的博客
02-01 1365
随缘不定期更新 processon
vue3弹框使用【bpmn.js 使用总结】预览流程图
qq_42103673的博客
09-15 2521
【代码】vue3弹框使用【bpmn.js 使用总结】预览流程图。
vue3的设计思路（3）组件的本质
陈开心的博客
10-25 581
组件的本质：组件其实就是一组虚拟 DOM 元素的封装，它可以是一个返回虚拟 DOM 的函数，也可以是一个对象，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟 DOM。 渲染器在渲染组件时，会先获取组件要渲染的内容，即执行组件的渲染函数并得到其返回值，我们称之为 subtree，最后再递归地调用渲染器将 subtree 渲染出来即可。
Vue3 第十六篇：常用组件：无限级菜单组件
Good Luck
06-21 1963
1.新建LeftMenu.jsx文件，内容如下： 2.使用： 3.效果：
Vue.js组件化开发实战与ES6特性探讨
"VUE.JS组件化开发实践" 在前端开发中，Vue.js是一个流行的JavaScript框架，尤其适合进行组件化的应用开发。组件化开发允许开发者将复杂的用户界面拆分成可重用、独立的模块，提高了代码的复用性和可维护性。在本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值