vue note

Posted 2022-05-12 Roam-G

目录

下拉框

[e-mail]跟@keyup.enter区别

9-空格

8-

---

7- size="mini"

6.this.$refs['logisticsChannel']

5.this.$emit()

4. v-model.trim="conditionForm.platformOrderIds"

5. v-on:blur="sendInfo">

1-安装

2- 安装之后 需要配置使用

表单校验

v-loading="loading"

3. <>

---

下拉框

<el-form-item :label="$t('StockList.包材')">

<el-select v-model="Search.packageId" style="width: 100px;" size="mini" clearable :placeholder="$t('StockList.请选择')">

<el-option key="0" label="无包材" value="0"></el-option>

<el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id"></el-option>

</el-select>

</el-form-item>

<el-col :span="24" class="ptb5">

</el-form>中可以放<el-col >

<el-row> 中可以放<el-col >

11-Property or method "lsh" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

属性或方法“lsh”未在实例上定义，但在渲染期间被引用。 通过初始化属性，确保此属性在数据选项或基于类的组件中是反应性的

[e-mail]跟@keyup.enter区别

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符，只有Button 组件可以监听 click 事件。

补：

style="padding-right:17px;"

https://wenku.baidu.com/view/75aada401dd9ad51f01dc281e53a580216fc5093.html

9-空格

&#32; == 普通的英文半角空格

&#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行）

&#12288; == 中文全角空格 （一个中文宽度）

&#8194; == &ensp; == en空格 （半个中文宽度）

&#8195; == &emsp; == em空格 （一个中文宽度）

&#8197; == 四分之一em空格 （四分之一中文宽度）

&nbsp;&nbsp;&nbsp;&nbsp;这种空格无论多少个 都是只显示一个空格。

8- <hr class="line-style-solid" />

<label class="">$t('AccountApply.充值申请时间')：</label>

<el-date-picker class="ml10" @change="timeChange"

value-format="yyyy-MM-dd HH:mm:ss" size="mini"

v-model="orderTime"

type="datetimerange" :start-placeholder="$t('开始日期')"

:end-placeholder="$t('结束日期')"

:default-time="['00:00:00','23:59:59']">

</el-date-picker>

7- size="mini"

size

尺寸

string

medium / small / mini

6.this.$refs['logisticsChannel']

页面一进来初始化之后，需要通过获取this.$refs 调用子组件中的某个方法

https://blog.csdn.net/poppymilan/article/details/108448352

5.this.$emit()

this.$emit()主要用于子组件像父组件传值，

Vue中解读关于this.$emit()的用法_互联网界的朗朗的博客-CSDN博客_this.$emit

@input="inputChange(1,skuType)"

<el-form-item :label="$t('orderList.订单编号')">

<el-input :placeholder="$t('orderList.请输入条件')" clearable v-model.trim="conditionForm.platformOrderIds" v-on:blur="sendInfo"></el-input>

</el-form-item>

<el-form-item :label="$t('orderList.批次')">

<el-input :placeholder="$t('orderList.请输入条件')" clearable v-model.trim="conditionForm.groupIds" v-on:blur="sendInfo"></el-input>

</el-form-item>

<el-form-item class="input-with-select" v-show="func('sku')">

<el-input :placeholder="$t('orderList.请输入条件')" clearable v-model.trim="sku" @input="inputChange(1,skuType)" style="width: 260px;">

<el-select slot="prepend" v-model="skuType" :style="'width:100px;font-size:12px'" @change="inputChange(1,skuType)">

<el-option v-for="item in sku_selectItems.items" :key="item.value" :label="item.label" :value="item.value"></el-option>

</el-select>

</el-input>

</el-form-item>

4. v-model.trim="conditionForm.platformOrderIds"

<el-input :placeholder="$t('orderList.请输入条件')" clearable

v-model.trim="conditionForm.platformOrderIds"

v-on:blur="sendInfo"></el-input>

v-model.trim用于去掉输入框内首尾空格

如下绑定的时候加上 .trim 那么如果直接在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的，

<el-input type="textarea" v-model.trim="deleNsbp" ></el-input>

之前看到有人问他赋值的时候，为什么不能去除前后的空格，当输入内容之后，前后空格就被解析了

原因：是因为这个解析的在输入事件发生之后才会执行的，赋值并没有触发他的输入事件，所以不会解析

5. v-on:blur="sendInfo">

onblur

元素失去焦点

https://blog.csdn.net/weixin_44220680/article/details/102937998

1-安装

npm i element-ui -S

-s 表示 会在正式 环境下 也有依赖

显示 安装成功了

 

2- 安装之后 需要配置使用

vue v-model.number 到底有没有用？

官方说的是自动转为 number 类型。 但是没发现有转换啊？到底有没有用？

trigger: 'blur' 当输入域失去焦点 (blur) 时 触发 ：

通过 label-position 属性来改变表单域或标签的位置，

可选的值有 top/left/right ，默认的是 right ，

lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值） 共同使用，才会生效。

表单校验

容易出错的地方：

1. ：rules 少了 ：
2. 少了prop="username" 或者位置不对。

1--- @keyup.enter.native="loadTable" 作用：监听回车事件。

<el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"

@keyup.enter.native="loadTable"></el-input>

vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native_Kuroko's Development Notes-CSDN博客

v-loading="loading"

v-loading使用(来自官网介绍)_sherpan的博客-CSDN博客_v-loading

Loading 加载用于加载数据时显示动效

3. <InputGroup

<InputGroup @conditionForm="getConditionForm" :showFlagObj="showFlagObj" :employees="employees" ref="childGroup"></InputGroup>