文章目录
vue如何引用自定义封装的
.js
文件?
比如一个时间插件,地址联动插件,等等;
因为这些常用插件 在任意页面都有可能会用到,这时候需要把它封装成函数,供其他任意页面随意调用。
如何操作,详细如下。
(注意代码注释部分:注意1/2/3/4/5)
一、效果图预览:
二、以自定义area.min.js
文件为例:
/*省市区三级联动*/
var areajson = [ // 注意1:
// json代码大部分省略 · 仅留一小部分参考如下
{
children: [
{
children: [
{
value: "110101",
label: "东城区"
},
{
value: "110108",
label: "海淀区"
},
{
value: "110115",
label: "大兴区"
},
{
value: "110116",
label: "怀柔区"
}
],
value: "110100",
label: "市辖区"
},
{
children: [
{
value: "110228",
label: "密云县"
},
{
value: "110229",
label: "延庆县"
}
],
value: "110200",
label: "县"
}
],
value: "110000",
label: "北京市"
},
// 等等······
];
export default areajson; // 注意2:一定要以export这种方式抛出
三、如何 在其他页面引入 ?
引入代码如下:
<templete>
<!-- 大部分代码省略 -->
<el-form-item label="求职地址" :label-width="labelWidth">
<el-cascader
:options="addressOptions"
change-on-select
></el-cascader>
</el-form-item>
<el-form-item label="" :label-width="labelWidth">
<el-input v-model="form.detailaddress" placeholder="请输入求职者求职地域,例如:经开区明珠广场附近" autocomplete="off"></el-input>
</el-form-item>
<!-- 省略 -->
</templete>
<script>
import axios from 'axios'
import cityOptions from '../../../static/js/area.min.js' // 注意3:
export default {
name: 'shareResume',
cityOptions, // 注意4:
data() {
return {
// 工作地址
addressOptions: cityOptions.areajson, // 注意5:
}
}
}
这时候,也
没有必要在main.js中全局引入;
只要你想引用,在任意页面这种方式引入调用都可以。
当然,你也可以在main.js中全局引入【我的一个时间戳格式转化器就是这么定义的。(详情参考相关项目main.js代码)】;
四、针对时间戳格式转化器说几点:
-
一般封装起来之后,可以把封装之后的
.js
文件,引入到main.js
文件中, -
这样其余页面调用的时候,只需要添加
this.
指针作为前缀,就可以使用封装的.js
文件内自定义函数。 -
具体参考:
项目main.js
中的时间戳格式化代码和相关调用页面。
五、参考文章
以上就是关于“ vue引用自定义.js文件 (常量抛出 + 地址三级联动为例)- 语法篇 ” 的全部内容。