接下来再做一个常用的组件 - input 组件

返回阅读列表点击 这里

需求分析

开始之前我们先做一个简单的需求分析

  1. input 组件有两种类型,即 inputtextarea 类型
  2. 当类型为 textarea 时,可以自定义行高,但是当类型为 input 时,行高恒为 1
  3. 可以自定义外边框的颜色
  4. 可以设置为禁用

那么可以得到如下参数表格

参数 含义 类型 可选值 默认值
value 绑定值 string 字符串 必填
theme 类型 string input / textarea input
rows 行高,当 theme 为 input 时值恒为 1 number 正整数 5
color 外边框颜色 string 任意合法颜色值 #8c6fef
disabled 是否禁用 boolean false / true false

骨架

实际上我们这里是根据 theme 值判断,然后去渲染原生的 input 或者 textarea 组件,所以可以很容易得到骨架,代码如下:

<template>
<input
v-if="theme === 'input'"
class="jeremy-input-input"
:style="{ '--color': color }"
v-model="text"
@input="change"
/>
<textarea
v-else
class="jeremy-input-textarea"
:rows="rows"
:style="{ '--color': color }"
v-model="text"
@input="change"
/>
</template>

功能

首先,我们再 Typescript 中声明一些需求分析中的属性:

declare const props: {
value: string;
theme?: "input" | "textarea";
rows?: number;
color?: string;
};
declare const context: SetupContext;

然后,再在 export default 中写入声明的参数:

export default {
install: function (Vue) {
Vue.component(this.name, this);
},
name: "JeremyInput",
props: {
value: {
type: String,
required: true,
},
theme: {
type: String,
default: "input",
},
rows: {
type: Number,
default: 5,
},
color: {
type: String,
default: "#8c6fef",
},
},
};

最后再补全 setup :

  setup(props, context) {
const text = ref(props.value);
const change = () => {
context.emit("update:value", text.value);
};
return { text, change };
},

样式表

补全层叠样式表

<style lang="scss">
$theme-color: var(--color);
[class^="jeremy-input"] {
resize: none;
padding: 8px;
border-radius: 4px;
border: none;
box-shadow: 0px 0px 3px 0px $theme-color;
outline: none;
width: 100%;
&[disabled] {
box-shadow: 0px 0px 3px 0px gray;
}
}
</style>

测试

创建一个测试页,导入 JeremyInput 组件,看一下效果:

项目地址

GitHub: https://github.com/JeremyWu917/jeremy-ui

官网地址

JeremyUI: https://ui.jeremywu.top

感谢阅读

08 - Vue3 UI Framework - Input 组件的更多相关文章

  1. 05 - Vue3 UI Framework - Button 组件

    官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...

  2. 09 - Vue3 UI Framework - Table 组件

    接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...

  3. 06 - Vue3 UI Framework - Dialog 组件

    做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...

  4. 10 - Vue3 UI Framework - Tabs 组件

    标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时 ...

  5. 11 - Vue3 UI Framework - Card 组件

    卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片. 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求 ...

  6. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  7. 01 - Vue3 UI Framework - 开始

    写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...

  8. 12 - Vue3 UI Framework - 打包发布

    基础组件库先做到这个阶段,后面我会继续新增.完善 接下来,我们对之前做的组件进行打包发布到 npm 返回阅读列表点击 这里 组件库优化 通用层叠样式表 我想大家都注意到了,前面我们在写组件的时候,sc ...

  9. 13 - Vue3 UI Framework - 完善官网

    为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown ...

随机推荐

  1. [bzoj3329]Xorque

    首先将问题转化为2x^x=3x,那么相当于让x右移一位和原数的1不相交,即不含有相邻的1,第一个问题可以直接数位dp,第二个问题可以类似dp+矩乘优化即可 1 #include<bits/std ...

  2. Python学习手册(第四版)——使用入门(自学用)

    Python的优点 -可读性 -可移植性 -不是一个独立的工具,可以调用各种库,同时也可以被调用等等 -使编程变得很有趣 -面向对象 -可混合 Python的理念 随便找的一张图 脚本语言? Pyth ...

  3. QQ 表情大全

    rt,以下是比较常用的 QQ 表情简写: /kk:快哭了 /cy:呲牙 /ll:流泪 /dk:大哭 /yiw:疑问 /jk:惊恐 /se:色 /kel:可怜 /xyx:斜眼笑 /wx:微笑 /xk:笑 ...

  4. Codeforces 585E - Present for Vitalik the Philatelist(简单莫反+狄利克雷前缀和)

    Codeforces 题目传送门 & 洛谷题目传送门 一道不算太难的 D1E 罢--虽然我不会做/kk u1s1 似乎这场 Div1 挺水的?F 就是个 AC 自动机板子还被评到了 3k2-- ...

  5. SNPEFF snp注释 (添加自己基因组)

    之间介绍过annovar进行对snp注释,今天介绍snpEFF SnpEff is a variant annotation and effect prediction tool. It annota ...

  6. nginx二级域名指向不同文件项目配置

    需要使用泛域名解析, 并且加上空的判断,以保证没有二级域名的也可以访问 核心配置 server_name ~^(?<subdomain>.+)\.caipudq\.cn$;if ( $su ...

  7. SpringBoot整合Shiro 二:Shiro配置类

    环境搭建见上篇:SpringBoot整合Shiro 一:搭建环境 Shiro配置类配置 shiro的配置主要集中在 ShiroFilterFactoryBean 中 关于权限: anon:无需认证就可 ...

  8. C/C++ Qt StandardItemModel 数据模型应用

    QStandardItemModel 是标准的以项数据为单位的基于M/V模型的一种标准数据管理方式,Model/View 是Qt中的一种数据编排结构,其中Model代表模型,View代表视图,视图是显 ...

  9. C/C++ Qt 数据库与TreeView组件绑定

    在上一篇博文<C/C++ Qt 数据库QSql增删改查组件应用>介绍了Qt中如何使用SQL操作函数,并实现了对数据库的增删改查等基本功能,从本篇开始将实现数据库与View组件的绑定,通过数 ...

  10. abort, about

    abort 变变变: abortion:堕胎 abortionist:(非法)做堕胎手术的,不是所有的ist都是scientist, "All that glitters is not go ...