08 - Vue3 UI Framework - Input 组件
接下来再做一个常用的组件 -
input
组件返回阅读列表点击 这里
需求分析
开始之前我们先做一个简单的需求分析
input
组件有两种类型,即input
和textarea
类型- 当类型为
textarea
时,可以自定义行高,但是当类型为input
时,行高恒为1
- 可以自定义外边框的颜色
- 可以设置为禁用
那么可以得到如下参数表格
参数 | 含义 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 组件的更多相关文章
- 05 - Vue3 UI Framework - Button 组件
官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...
- 09 - Vue3 UI Framework - Table 组件
接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...
- 06 - Vue3 UI Framework - Dialog 组件
做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...
- 10 - Vue3 UI Framework - Tabs 组件
标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时 ...
- 11 - Vue3 UI Framework - Card 组件
卡片是非常常用也是非常重要的组件,特别是在移动端的众多应用场景中,随便打开一个手机 App ,您会发现充斥着各种各样的卡片. 所以,我们也来制作一个简易的 Card 组件 返回阅读列表点击 这里 需求 ...
- 00 - Vue3 UI Framework - 阅读辅助列表
阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...
- 01 - Vue3 UI Framework - 开始
写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...
- 12 - Vue3 UI Framework - 打包发布
基础组件库先做到这个阶段,后面我会继续新增.完善 接下来,我们对之前做的组件进行打包发布到 npm 返回阅读列表点击 这里 组件库优化 通用层叠样式表 我想大家都注意到了,前面我们在写组件的时候,sc ...
- 13 - Vue3 UI Framework - 完善官网
为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown ...
随机推荐
- [bzoj3329]Xorque
首先将问题转化为2x^x=3x,那么相当于让x右移一位和原数的1不相交,即不含有相邻的1,第一个问题可以直接数位dp,第二个问题可以类似dp+矩乘优化即可 1 #include<bits/std ...
- Python学习手册(第四版)——使用入门(自学用)
Python的优点 -可读性 -可移植性 -不是一个独立的工具,可以调用各种库,同时也可以被调用等等 -使编程变得很有趣 -面向对象 -可混合 Python的理念 随便找的一张图 脚本语言? Pyth ...
- QQ 表情大全
rt,以下是比较常用的 QQ 表情简写: /kk:快哭了 /cy:呲牙 /ll:流泪 /dk:大哭 /yiw:疑问 /jk:惊恐 /se:色 /kel:可怜 /xyx:斜眼笑 /wx:微笑 /xk:笑 ...
- Codeforces 585E - Present for Vitalik the Philatelist(简单莫反+狄利克雷前缀和)
Codeforces 题目传送门 & 洛谷题目传送门 一道不算太难的 D1E 罢--虽然我不会做/kk u1s1 似乎这场 Div1 挺水的?F 就是个 AC 自动机板子还被评到了 3k2-- ...
- SNPEFF snp注释 (添加自己基因组)
之间介绍过annovar进行对snp注释,今天介绍snpEFF SnpEff is a variant annotation and effect prediction tool. It annota ...
- nginx二级域名指向不同文件项目配置
需要使用泛域名解析, 并且加上空的判断,以保证没有二级域名的也可以访问 核心配置 server_name ~^(?<subdomain>.+)\.caipudq\.cn$;if ( $su ...
- SpringBoot整合Shiro 二:Shiro配置类
环境搭建见上篇:SpringBoot整合Shiro 一:搭建环境 Shiro配置类配置 shiro的配置主要集中在 ShiroFilterFactoryBean 中 关于权限: anon:无需认证就可 ...
- C/C++ Qt StandardItemModel 数据模型应用
QStandardItemModel 是标准的以项数据为单位的基于M/V模型的一种标准数据管理方式,Model/View 是Qt中的一种数据编排结构,其中Model代表模型,View代表视图,视图是显 ...
- C/C++ Qt 数据库与TreeView组件绑定
在上一篇博文<C/C++ Qt 数据库QSql增删改查组件应用>介绍了Qt中如何使用SQL操作函数,并实现了对数据库的增删改查等基本功能,从本篇开始将实现数据库与View组件的绑定,通过数 ...
- abort, about
abort 变变变: abortion:堕胎 abortionist:(非法)做堕胎手术的,不是所有的ist都是scientist, "All that glitters is not go ...