vue写项目备注用什么框好

1分析需求

当用户输入为空提交时，出现底部提示，输入框变为醒目的红色
2具体 *** 作

首先在hellovue文件下,绑定具体的字段让父组件监听，动态调节，具体字段仅添加一下几个，还可自行根据需求拓展
1如图所示 在文件下我新建了el-input 输入框，通过show判断是否为空，为空时改变其border-color，不为空则正常边框颜色，type为其类型可选number，text   ，max，min为用户可输入最大最小字段,size 可控制输入框的高度大小，errmessage为提示的字段，@blur为失去焦点触发的事件

如图二所示

在这里我通过props接收父组件传过来的参数，通过this$emit将事件发布到父组件，把表单的绑定值作为实参传入

2父组件通过import将组件引用，通过components将其引入如上几个字段就是传递给子组件的参数，这里就不细讲，当然这值可以通过v-bind动态绑定，在这里我绑定了show (通过输入框失去焦点，如果值为空将其设为true)以及err(提示的字段)，图三为具体的方法，父组件通过on订阅，通过子组件传进来的参数判断

分析该过程，可拆分成两个步骤：

该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative; 子 mask 容器设置 position: absolute;并且其宽、高、偏移值根据鼠标当前位置动态计算

该部分逻辑实际上可拆分为 4 个步骤：

1 给 box 绑定 mousedown 事件

2 mousemove 事件，比较简单，只是更新 end_x，end_y 坐标

3 mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法

4 处理框选逻辑

难点是如何判断元素是否被框选住

问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系

假定矩形 A1 左上角坐标为 (x1,y1);矩形宽度为 width1,高度为 height1;

假定矩形 A2 左上角坐标为 (x2,y2);矩形宽度为 width2,高度为 height2;

画图分析，只看水平方向：

由图可以得出，x 方向上：
令 maxX = Mathmax(x1 + width1, x2 + width2)
令 minX = Mathmax(x1, x2)

若相交或包含则必满足： maxX - minX <= width1 + width2;

同理可以容易得到 y 轴相交的判断

使用 ElementgetBoundingClientRect()获取 dom 元素位置信息

该部分逻辑如下，比较简单

难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述

源码

END

可以使用vue的回调函数来实现模态框的d出。具体步骤如下：
1、在Vue组件中声明一个布尔值，用于标识是否d出模态框。
2、在Vue组件中创建一个回调函数，当执行特定功能时会将这个布尔值设置成true。
3、通过v-if条件渲染语法将上面声明的布尔值作为判断条件，当其变成true时渲染对应的modal内容即可。

1、首先打开vue，创建logo和搜索框部分的组件。
2、其次新建一个空的Vue对象，使用“bus”触发事件并传递参数。
3、最后使用vue控制input输入长度和获取输入内容的长度，就可以点击搜索改变搜索框长度了。

1通过拖拽实现：可以使用vue-draggable组件实现，可以实现拖拽排序；
2通过点击按钮实现：可以在每个输入框后面添加上移和下移的按钮，点击按钮实现调整顺序；
3通过键盘快捷键实现：可以在输入框获取焦点的时候，添加上键盘快捷键，比如Ctrl+上下箭头，实现调整顺序。

---